我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

缘由

大家好，我是小雨。一直听说Typescript、Node.js等术语，如何能够初步了解它？小雨挺喜欢的就是专门有1-5天的公开课介绍它们的使用，然后最好有个项目案例。最近，小雨正好听了2天学习ts的公开课，下面是小雨学完后，自己动手做了个登录功能。

介绍

用Java做过项目的掘友可能知道如何做一个登录功能，

服务端：用Spring/SpringBoot/SpringMvc，Mybatis去弄，

客户端：用Vue、Element、Vue-Router、Vuex去弄。

今天，让我们来学习如何用JavaScript思路去做一个登录功能，

服务端：用Nest、Tpyeorm去弄，

客户端：用Vite、Vue、Vue-Router、Pinia去弄。

欢迎和小雨一起敲代码。

实战

1.客户端

准备好Node.js环境，输入以下命令检查环境，出现下图即可运行成功。

node -v

npm -v

新建项目文件夹node，进入文件夹命令行，安装vite，输入vite-project，选择vue、vue-ts

 npm init vite@latest

用vscode工具打开node文件夹，进入刚刚创建的项目vite-project

npm install

运行项目

npm run dev

引入路由

npm install vue-router@next -s

创建登录界面view/Login.vue

<template>
  <form>
    账号：<input type="text" v-model="userInfo.username" /><br />
    密码：<input type="password" v-model="userInfo.password" /><br />
    <button type="button" @click="submit">登录</button>
  </form>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useStore } from "../store/index";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
const userInfo = reactive({
  username: "",
  password: "",
});
const submit = async (): Promise<any> => {
    let res = await fetch(`/api/user/login?
      username=${userInfo.username}&password=${userInfo.password}`)
      .then((res) =>res.json())
      console.log(res)
      if(res.code == 200){
          store.setUserInfo(res.data.userInfo)
          router.push('/index')
      }
};
</script>

创建主页界面view/Index.vue

<template>
    <p>登录成功:用户信息为{{userInfo}}</p>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "../store/index";
const store = useStore();
let userInfo = computed(()=> store.userInfo)
</script>

创建router/index.ts

import {createRouter, createWebHistory, Router, RouteRecordRaw, RouterOptions} from 'vue-router'

const routes:RouteRecordRaw[] = [
    {
        path:'/',
        name:'Login',
        component:() => import('../view/Login.vue')
    },
    {
        path:'/index',
        name:'Index',
        component:() => import('../view/Index.vue')
    },

]
const options:RouterOptions = {
    history:createWebHistory(),
    routes
}

const router:Router = createRouter(options)
export default router

引入pinia

npm i pinia -s

引入持久化插件pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate -s

创建store/index.js

import {defineStore,StoreDefinition} from 'pinia'
export const useStore:StoreDefinition = defineStore('main',{
    state(){
        return{
            userInfo:{},
            token:''
        }
    },
    actions:{
        setUserInfo(userInfo){
            this.userInfo = userInfo
        },
        setToken(token){
            this.token=token
        }
    },
    persist:{
        key:'userData',
        storage:window.sessionStorage,
        paths:['userInfo','token'],
        overwrite:true
    },
})

配置main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
createApp(App).use(router).use(pinia).mount('#app')

配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    proxy:{
      '/api':{
        target:'http://localhost:8080',
        changeOrigin:true
      }
    }
  }
})