Vue项目 成员管理系统 系统登录模块（4）

一、登录页面

1.1 在view文件夹下创建login文件夹，并创建index.vue

界面部分：

<template>
    <div class="login-container">
        <el-form
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            label-width="100px"
            class="login-form"
        >
            <h2 class="login-title">登录</h2>
            <el-form-item
                label="账号"
                prop="username"
            >
                <el-input v-model="form.username">
                </el-input>
            </el-form-item>
            <el-form-item
                label="密码"
                prop="password"
            >
                <el-input
                    type="password"
                    v-model="form.password"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="submitForm('form')"
                >登录</el-button>
                <el-button @click="goRegister">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

样式部分：

<style  scoped>
.login-cintainer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden; /*溢出隐藏*/
    background: url(../../assets/login.jpg);
    background-size: cover;
}
.login-form {
    width: 350px;
    height: 300px;
    margin: 150px auto;
    background-color: rgb(227, 233, 238, 0.5);
    padding: 70px;
    border-radius: 20px; /* 设置圆角 */
}
.login-title {
    text-align: center;
}
</style>

1.2 配置路由，初步显示页面

import Login from '../views/login';

const routes = [//在路由里进行注册
  {
    path: '/register',
    name: 'Register',
    component: Register,//引入的组件
  }, {
    path: '/login',
    name: 'Login',
    component: Login,
  }
];

登录界面显示：

 1.3 在api文件下创建login.js

import request from '@/utils/request'

//登录
export function login(username, password) {//导出非默认成员方法 将这两个参数传给服务端
    return request({
        method: 'post',
        url: '/user/login',
        data: {
            username,
            password
        }
    })
}

二、服务器端配置

2.1 index.vue中对规则和方法：

<script>
import { login } from '@/api/login.js';//读数据库，引入login.js
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
            },
            rules: {//判断规则
                username: [{ required: 'true', message: '账号不能为空',
                          trigger: 'blur' }],//required:这一项是必需的
                password: [{ required: 'true', message: '密码不能为空', 
                          trigger: 'blur' }],
            }
        }
    },

    components: {},

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (vaild) {
                    login(this.form.username, this.form.password).then(response => {
                        const resp = response.date;
                        if (resp.flag) {
                            
                        } else {
                            this.$message({
                                message: resp.message,
                                type: error,
                            })
                        }
                    })
                } else {
                    console.log('error submit');
                    return false;
                }
            })
        },
        goRegister() {
            this.$router.push('/register');
        }
    },

}
</script>

2.2在router.js中添加对login部分的配置

router.post('/user/login', function (req, res) {
    var body = req.body;
    User.findOne({//访问数据库
        username: body.username,
        password: body.password
    }, function (err, data) {
        if (err) {
            return res.status(500).json({
                code: 3000,
                flag: false,
                message: 'server error',
            })
        }
        if (!data) {
            return res.status(200).json({
                code: 4000,
                flag: false,
                message: '账号不存在或密码错误',
            })
        }
        return res.status(200).json({
            code: 2000,
            flag: true,
            message: '登陆成功',
            data: {//同时将标志token传回去
                token: data.token//使用token来判断当前是否有登录，登录的是谁.
            }
        })
    })
})

登录成功：

 登录失败：

 2.3 在login.js中增加对获取用户信息的配置

//*获取用户信息
export function getUserInfo(token) {
    return request({
        method: 'get',
        url: `/user/info?token=${token}`
    })
}

同时在index.vue中按需导入getUserInfo

import { login, getUserInfo } from '@/api/login.js';
/*  读数据库，引入login
    读用户数据， 引入getUserInfo*/

2.4 进行获取用户信息的路由配置

增加router.js的内容如下:

//?获取用户信息
router.get('/user/info', function (req, res) {
    var body = req.query;//get方法，所以不用body
    User.findOne({
        token: body.token,
    }, function (err, data) {
        if (err) {
            return res.status(500).json({
                code: 4000,
                flag: false,
                message: 'server error',
            })
        }
        if (!data) {
            return res.status(500).json({
                code: 3000,
                flag: false,
                message: '账号信息不存在或已过期'
            })
        }
        return res.status(200).json({
            code: 2000,
            flag: true,
            message: '获取用户信息成功',
            data: {
                nickname: data.nickname,
                username: data.username,
                id: data._id,//mongodb添加数据默认添加一项_id
            }
        })
    })
})

 在index.vue中对登录成功后获取用户信息部分进行改写

                        const resp = response.data;
                        if (resp.flag) {
                            // console.log(resp);
                            getUserInfo(resp.data.token).then(response => {
                                const respUser = response.data;
                                console.log(respUser);
                            })

成功获取用户信息:

将数据存到localStorage中，在其他页面想要使用的时候，就可以从localStorage中拿到想要的数据

    localStorage.setItem('stu-token', resp.data.token);
    localStorage.setItem('stu-user', JSON.stringify(respUser.data))//转换对象为字符串

点击登录后，返回首页

    this.$router.push('/');//用编程式的方式将路由的地址修改

 优化登录和注册界面，完善逻辑

注册成功，自动跳转登录界面

                            if (resp.flag) {
                            // console.log('注册成功');
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })
                            this.$router.push('/login')

登录成功，自动跳转首页

                            if (resp.flag) {
                            // console.log(resp);
                            getUserInfo(resp.data.token).then(response => {
                                const respUser = response.data;
                                // console.log(respUser);
                                localStorage.setItem('stu-token', resp.data.token);
                                localStorage.setItem('stu-user',                     
                            JSON.stringify(respUser.data))//转换对象为字符串
                                this.$router.push('/');//用编程式的方式将路由的地址修改
                            })
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })