给已有vue项目 实现登录功能

借鉴的大佬链接：https://blog.csdn.net/dkm123456/article/details/124671221
可以先看上面链接

1.整体目录

我的主页面是Main.vue

2.login.vue

(在data里面加入规则内容)

如下规定了用户名密码长度

(el-form里面的规则配置到位)

el-form加入 :rules=“rules” ref=“loginForm”
el-form-item 加入的prop，写入对应的值

(修改confirm方法的代码，加入验证逻辑)

配合下面3后台验证使用

this.$refs.loginForm.validate 执行验证，this.$refs.loginForm 获取当前的表单对象
valid成功为true则直接跳转到Main（我的主页面是Main.vue），失败则提示校验失败

完整代码

<template>
    <div class="loginbBody">
        <div class="loginDiv">
            <div class="login-content">
                <h1 class="login-title1">表情识别可视化分析系统h1>
                <h1 class="login-title2">用户登录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:''
                },
                rules:{
                   name: [
                      { required: true, message: '请输入用户名', trigger: 'blur' },
                      { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur' }
                   ],
                   password: [
                      { required: true, message: '请输密码', trigger: 'blur' },
                      { min: 3, max: 6, message: '密码长度在 3 到 6 个字符', trigger: 'blur' }
                   ]

                }
            }
        },
        methods:{
            confirm(){
                this.$refs.loginForm.validate((valid) => {
                     if (valid) { //valid成功为true，失败为false
                          //去后台验证用户名密码，并返回token
                          this.$axios.post('/login',this.loginForm).then(res=>{
                              console.log(res.data)
                              if(res.data.state==1){
                                   //存储token到本地
                                   this.$store.commit("SET_TOKEN",res.data.vData.token);
                                   //跳转到主页
                                   this.$router.replace('/Main');
                              }else{
                                   alert('校验失败，用户名或密码错误！');
                                   return false;
                              }
                          });
                     } else {
                          console.log('校验失败');
                          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: 350px;
        background: #DDDDDD;
        border-radius: 5%;

    }
    .login-title1 {
        margin: 20px 0;
        text-align: center;
    }
    .login-title2 {
        margin: 20px 0;
        text-align: center;
    }
    .login-content {
        width: 400px;
        height: 250px;
        position: absolute;
        top: 25px;
        left: 25px;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

在router.js中配置一级路由

3.后台验证

Axios 是一个基于 promise 的 HTTP 库，类似于我们常用的 ajax。
在开发过程中，特别是前后端分离的项目，比如前端用Axios、ajax请求后端数据，后端也许当前只给了接口文档，还没有数据的返回，导致前端无法进行测试、调试，现在可以使用mock.js拦截前端ajax请求，更加方便的构造你需要的数据，大大提高前端的开发效率。

这里我们来安装axios和mockjs ，我们可以在项目的目录下打开终端输入命令


安装axios

npm install axios --save

在main.js全局引入axios

import axios from ‘axios’;
Vue.prototype.$axios =axios;

安装mockjs

npm install mockjs --save-dev

在src下创建文件夹mock，并创建mock.js文件
用mock.js模拟后台登录验证，并返回token

用户名密码固定 admin / 123

import Mock from 'mockjs'

Mock.mock('/login','post', (param)=>{
    let state=0;
    let body = JSON.parse(param.body);
    console.log(body)
    let data;
    //模拟成功数据
    if(body.name=='admin'&&body.password=='123'){
        state=1;
        data = Mock.mock({
            "token": "@guid()",//模拟token
            "name": "@cname",//随机生成中文名字随机生成中文名字
        });
    }

    return{
        "state":state,
        "vData":data
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在main.js引入此mock.js就可以进行全局拦截axios和ajax的请求了

import ‘./mock/mock.js’;

安装vuex支持

npm install vuex --save

在src下创建store文件夹，建立store.js ，在store.js中引入vue 和 vuex

1.引入vue 和 vuex，并使用Vue.use(Vuex)【很重要】
2.创建state和mutations
3.export导出Vuex.Store 实例

在store.js里面将token存储

state 添加token属性

mutations 增加 SET_TOKEN 方法，将token存储到state和localStorage 中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state ={
   token:'',
}
const mutations ={
    SET_TOKEN(state, token){
    state.token = token ;
    localStorage.setItem("token",token);
    },

}
export default new Vuex.Store({
    state,
    mutations
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在main.js配置，这样就可以全局引入了，省的每个要使用的页面单独在引入。

1.import store from ‘./store/store.js’;
2.在new Vue 引入

login.vue的确定方法confirm（上面的login.vue里面是已经修改过的）

4.测试

固定用户名：admin
固定密码：123

（1）输错密码or用户名

（2）输入正确，成功进入Main.vue主页面