Vue实现登录功能

妖狐艹你老母 2024-04-23 03:34 62阅读 0赞

[原文链接][Link 1]

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

## 1 创建项目 ##

打开cmd，输入ui命令：

vue ui

若没有反应，可能是版本太低，需要卸载后重装：

npm uninstall vue-cli -g   #卸载
    npm install @vue/cli -g    #安装

执行ui命令成功后，会出现提示：

> ? Starting GUI…  
> ? Ready on http://localhost:8000

并会自动打开页面：

![032e7abfcc6c1c86ac1dbe54f4006c58.png][]

创建名为`SpringAndVue-vue`的项目，预设选择“手动”；功能开启 Babel、Router、Vuex、Linter/Formatter；配置选择“ESLint with error prevention only”；版本建议使用 “vue2.0”。创建新项目。

通过`cd`进入目录，启动项目：

npm run serve

## 2 安装插件 ##

### 2.1 element-ui ###

打开cmd，输入ui命令：

vue ui

在插件项搜索，并点击安装。

vue2.0 选择安装 “vue-cli-plugin-element”；vue3.0 选择安装 “vue-cli-plugin-element-plus”。

![00a414689cd5735cc9d73387b34c6a73.png][]

### 2.2 axios ###

Terminal安装axios，每个新项目都需要安装：

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

### 2.3 mockjs ###

Terminal安装mockjs

npm install mockjs

## 3 添加功能 ##

### 3.1 login ###

创建 login.vue页面：

<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:''
                    },
    
                    // 输入信息长度验证
                    rules:{
                        name: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            { min: 2, max: 5, message: '用户名长度在 2 到 5 个字符', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输密码', trigger: 'blur' },
                            { min: 2, max: 5, message: '密码长度在 2 到 5 个字符', 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('/home');
                                }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: 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中配置一级路由：

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

### 3.3 mockjs 模拟后台 ###

在没有后端代码的情况下，可以使用 mockjs 模拟后台数据。

我们使用 mockjs 模拟后台登录验证，并返回token。

我们设置登录的用户名和密码都是`admin`。

在 src 下新建 mock 文件夹，在 mock 文件夹中新建 mock.js ，内容如下：

//引入 npm 安装的 mockjs
    const Mock = require('mockjs')   
    // 获取 mock.Random 对象
    const Random = Mock.Random;
    // 登录，此地址与login登录地址对应
    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",//随机生成中文名字
            });
        }
        return{
        
            "state":state,
            "vData":data
        }
    });
    
    //退出
    Mock.mock('/logout','post', ()=>{
        
        return {
        state:1}
    });

### 3.4 storejs ###

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

export default new 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 功能实现 ##

在浏览器输入地址：http://localhost:8080/\#/login

可以出现登录界面：

![43df50adbadc55e8844293e148799b4b.png][]

输入用户名和密码 admin，即可进入主页：

![c6d91f38ffe18d5ee8d37cafdb8a3927.png][]

点击头像出现退出按钮，可以回到登录界面：

![c1437e9c5442e1ebf9b4d3c21e8a661b.png][]

**学习更多编程知识，请关注我的公众号：**

[代码的路][Link 2]

[Link 1]: https://mp.weixin.qq.com/s/YdV3gZqqcAzd2hjrCYub4w
[032e7abfcc6c1c86ac1dbe54f4006c58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/7442e2a2af21473fb4853a6a5f752e28.png
[00a414689cd5735cc9d73387b34c6a73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/21a2cca06b1c47028890dd29747bfba4.png
[43df50adbadc55e8844293e148799b4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f501d869e9704c79ad79853eb04cf342.png
[c6d91f38ffe18d5ee8d37cafdb8a3927.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/2b631703645e457caf9dd9f74ccf6f50.png
[c1437e9c5442e1ebf9b4d3c21e8a661b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9058ab5d660745619c668d68b241894a.png
[Link 2]: https://mp.weixin.qq.com/s/t0t89DFgJ1TEzI4uI5giHg