代碼地址：https://github.com/Snowstorm0/vue-login-mock

創(chuàng)建項(xiàng)目

打開cmd，輸入ui命令：

复制vue ui

若沒(méi)有反應(yīng)，可能是版本太低，需要卸載后重裝：

复制npm uninstall vue-cli -g   #卸載
npm install @vue/cli -g    #安裝

執(zhí)行ui命令成功后，會(huì)出現(xiàn)提示：

Starting GUI... Ready on http://localhost:8000

并會(huì)自動(dòng)打開頁(yè)面：

創(chuàng)建名為复制SpringAndVue-vue的項(xiàng)目，預(yù)設(shè)選擇“手動(dòng)”；功能開啟 Babel、Router、Vuex、Linter/Formatter；配置選擇“ESLint with error prevention only”；版本建議使用 “vue2.0”。創(chuàng)建新項(xiàng)目。

通過(guò)复制cd進(jìn)入目錄，啟動(dòng)項(xiàng)目：

复制npm run serve

2 安裝插件

2.1 element-ui

打開cmd，輸入ui命令：

复制vue ui

在插件項(xiàng)搜索，并點(diǎn)擊安裝。

vue2.0 選擇安裝 “vue-cli-plugin-element”；vue3.0 選擇安裝 “vue-cli-plugin-element-plus”。

2.2 axios

Terminal安裝axios，每個(gè)新項(xiàng)目都需要安裝：

复制# vue-cli2.0命令
npm install axios
# vue-cli3.0命令
npm add axios

2.3 mockjs

Terminal安裝mockjs

复制npm install mockjs

3 添加功能

3.1 login

創(chuàng)建 login.vue頁(yè)面：

复制<template>
    <div class="loginbBody">
        <div class="loginDiv">
            <div class="login-content">
                <h1 class="login-title">用戶登錄h1>
                <el-form :model="loginForm" label-width="100px"
                         :rules="rules" ref="loginForm">
                    <el-form-item label="名字" prop="name">
                        <el-input style="width: 200px" type="text" v-model="loginForm.name"
                                  autocomplete="off" size="small">el-input>
                    el-form-item>
                    <el-form-item label="密碼" prop="password">
                        <el-input style="width: 200px" type="password" v-model="loginForm.password"
                                  show-password autocomplete="off" size="small">el-input>
                    el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="confirm">確 定el-button>
                    el-form-item>
                el-form>
            div>
        div>
    div>
template>

<script>
    export default {
        name: "login",
        data(){
            return{
                loginForm:{
                    name:'',
                    password:''
                },

                // 輸入信息長(zhǎng)度驗(yàn)證
                rules:{
                    name: [
                        { required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' },
                        { min: 2, max: 5, message: '用戶名長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '請(qǐng)輸密碼', trigger: 'blur' },
                        { min: 2, max: 5, message: '密碼長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }
                    ]
                }

            }
        },
        methods:{
            // 登錄后跳轉(zhuǎn)到主頁(yè)
            confirm(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) { //valid成功為true，失敗為false
                        //去后臺(tái)驗(yàn)證用戶名密碼，并返回token
                        this.$axios.post('/login',this.loginForm).then(res=>{
                            console.log(res.data)
                            if(res.data.state==1){
                                //存儲(chǔ)token到本地
                                this.$store.commit("SET_TOKEN",res.data.vData.token);
                                //跳轉(zhuǎn)到主頁(yè)
                                this.$router.replace('/home');
                            }else{
                                alert('用戶名或密碼錯(cuò)誤！');
                                return false;
                            }
                        });
                    } else {
                        console.log('校驗(yàn)失敗');
                        return false;
                    }
                });
            }
        }
    }
script>
<style scoped >
    .loginbBody {
        width: 100%;
        height: 100%;
        background-color: #B3C0D1;
    }
    .loginDiv {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 450px;
        height: 330px;
        background: #fff;
        border-radius: 5%;

    }
    .login-title {
        margin: 20px 0;
        text-align: center;
    }
    .login-content {
        width: 400px;
        height: 250px;
        position: absolute;
        top: 25px;
        left: 25px;
    }
style>

3.2 配置路由

在router.js中配置一級(jí)路由：

复制{
    path: '/login',
    name: '登錄',
    component: () =>import(/* webpackChunkName: "user" */'../views/login.vue')
   }

3.3 mockjs 模擬后臺(tái)

在沒(méi)有后端代碼的情況下，可以使用 mockjs 模擬后臺(tái)數(shù)據(jù)。

我們使用 mockjs 模擬后臺(tái)登錄驗(yàn)證，并返回token。

我們?cè)O(shè)置登錄的用戶名和密碼都是复制admin。

在 src 下新建 mock 文件夾，在 mock 文件夾中新建 mock.js ，內(nèi)容如下：

复制//引入 npm 安裝的 mockjs
const Mock = require('mockjs')   
// 獲取 mock.Random 對(duì)象
const Random = Mock.Random;
// 登錄，此地址與login登錄地址對(duì)應(yīng)
Mock.mock('/login','post', (param)=>{  
    let state=0;
    let body = JSON.parse(param.body);
    console.log(body)
    let data;
    //模擬用戶名和密碼都是 admin
    if(body.name=='admin'&&body.password=='admin'){
        state=1;
        data = Mock.mock({
            "token": "@guid()",//模擬token
            "name": "@cname",//隨機(jī)生成中文名字
        });
    }
    return{
        "state":state,
        "vData":data
    }
});

//退出
Mock.mock('/logout','post', ()=>{
    return {state:1}
});

3.4 storejs

在 src/store/index.js 中添加 Vuex.Store 的屬性：

复制exportdefaultnew Vuex.Store({
  state: {
    token: '',
    username: '代碼的路'
  },
  getters: {
  },
  mutations: {
    SET_TOKEN(state, token){
      state.token = token ;
      localStorage.setItem("token",token);
    },
    resetState(state){
      state.token = '';
      localStorage.clear();
  }
  },
  actions: {
  },
  modules: {
  }
})

4 功能實(shí)現(xiàn)

在瀏覽器輸入地址：http://localhost:8080/#/login

可以出現(xiàn)登錄界面：

輸入用戶名和密碼 admin，即可進(jìn)入主頁(yè)：

點(diǎn)擊頭像出現(xiàn)退出按鈕，可以回到登錄界面：

審核編輯：湯梓紅