Vue项目成员管理系统系统注册模块（3）

不是独角兽

已于 2022-03-03 19:38:27 修改

阅读量962

点赞数 2

分类专栏： Vue项目文章标签： vue.js javascript 前端

于 2022-03-02 17:40:15 首次发布

本文链接：https://blog.csdn.net/qq_51187159/article/details/122699916

版权

Vue项目专栏收录该内容

10 篇文章 7 订阅

订阅专栏

一、系统注册

1.1 路由配置

1.1.1 在 src\router\index.js 中配置路由（把原有的路由配置删除），并添加对index.vue的引入,如下：

import Vue from "vue";
import VueRouter from "vue-router";
import Register from "../views/register";

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

通过 import Register from './views/register' 导入组件(引入就是引到文件夹的名)，当前只指定了组件路径，默认导入的就是指定路径下的 index.vue 组件

1.2 注册页面

1.2.1 在 src\views 目录下新建 register目录及此目录下新建文件 index.vue

在element-ui中获取需要的表单，表单部分代码：

首先在template标签里写页面的相应组件，表单使用element-ui官网里的例子。

<template>
    <div>
        <el-form
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            label-width="100px"
            class="demo-form"
        >
            <el-form-item
                label="账号"
                prop="username"
            >
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item
                label="昵称"
                prop="nickname"
            >
                <el-input v-model="form.nickname"></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
                label="确认密码"
                prop="checkPass"
            >
                <el-input
                    type="password"
                    v-model="form.checkPass"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="submitForm('form')"
                >提交</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

表单规则代码如下：

<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.form.checkPass !== '') {
                    this.$refs.form.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            form: {
                username: '',
                nickname: '',
                password: '',
                checkPass: '',
            },
            rules: {//判断规则
                username: [{ required: 'true', message: '账号不能为空', trigger: 'blur'
                 }],//required:这一项是必需的
                nickname: [{ required: 'true', message: '昵称不能为空', trigger: 'blur'
                             }],
                password: [
                    { validator: validatePass, trigger: 'blur' }//触发条件:失焦
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            }
        }
    },

    components: {},

    methods: {
        submitForm(formName) {/* 形参  */
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('注册成功!');

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {//重置功能
            this.$refs[formName].resetFields();
        }
    }
}
</script>

整个表单绑定了一个data里的form，v-model绑定的是form，里边对应的item上双向绑定，绑定的是form里边的某一个属性值

:model="form"与<el-input v-model="form.username">中的form是相对应的，还有涉及到form变量的名与ref也要相对应

添加表单样式:

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

运行界面：

1.2.2 在src文件夹下的api中创建 register.js

import request from '@/utils/request'//引入封装好的request

export function register(username, nickname, password) {//导出register方法
    return request({//返回一个request对象
        method: 'post',
        url: '/user/register',//这里拼的内容就是后端服务需要去判断的
        data:{
            username,
            nickname,
            password
        },
    })
}

将三个数据放在data里面，通过request请求发送给服务端

1.2.3 在register.vue中引入register.js 并更改返回的内容

import { register } from '@/api/register'

if (valid) {
   // alert('注册成功!');
   register(this.form.username, this.form.nickname, this.form.password)
   .then(response => {//调用数据库
   console.log(response.data);//输出从服务器上拿来的数据
   })

给后端服务器发送数据请求，请求的内容就是表单里写的 username，nickname，password，然后输出一下服务端返回的内容

二、服务端创建

2.1在项目文件下创建msm-serve文件夹

2.1.1 在终端输入指令npm init 生成package.json文件

2.1.2 在终端分别安装所需要的express，mongoose，body-parser，blueimp-md5

使用express框架涉及到拿到前面请求发送过来的信息，所以需要安装body-parser.

2.1.3 在msm-serve目录下创建app.js

//!后端服务的入口
var express = require('express');
var bodyParser = require('body-parser');
var path = require('path')//引入path模块，使用它的绝对路径去开放路径
var app = express();
var router = require('./router.js');

app.use(bodyParser.urlencoded({ extends: false }));
app.use(bodyParser.json());//引入body-parser所必要的两行代码

app.use('/node_modules', express.static(path.join(__dirname, './node_modules')))
//开放路径node_modules,静态托管路径要变为绝对路径，__dirname拿到本地真正的路径

app.use(router);

app.listen(3000, function () {
    console.log('running....');
})

2.1.4 在msm-serve目录下创建router.js

//!判断前端发送过来的请求
var express = require('express');
var router = express.Router();//使用express框架下的路由就可以

router.post('/user/register', function (req, res) {
    console.log(req.body);
    res.send('666');//获取成功返回666
})

module.exports = router;//将router作为一个对象导出

成功获取数据：

2.2 在服务端加入数据库

router 只负责判断路径，然后去调用相应的方法，把数据给到相应的方法。真正读写数据库的时候，要写单独抽取到一个文件里，去读写数据库

2.2.1 在msm-serve目录下创建user.js

//!读写数据库
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/stu');

//?定义规则对象
var Schema = mongoose.Schema;//声明mongoose下的一个规则
var userSchema = new Schema({//创建一个规则的对象，生成一个这样规则的实例
    username: {
        type: String,
        require: true
    },
    nickname: {
        type: String,
        require: true
    },
    password: {
        type: String,
        require: true
    },
    token: {
        type: String,
        require: true
    }
})
module.exports = mongoose.model('msm', userSchema);
//将整个mongoose作为对象导出,后面规则写实例的变量名来接

2.2.2 对router.js的内容进行重写

//!判断前端发送过来的请求
var express = require('express');
var router = express.Router();//使用express框架下的路由就可以
var User = require('./user.js');
var md5 = require('blueimp-md5');//加密

router.post('/user/register', function (req, res) {
    // console.log(req.body);
    // res.send('666');
    var body = req.body;
    User.find({//mongoose中提供的方法，在数据库中进行查找
        $or: [{//用 或条件 去查数据库
            username: body.username//判断传入的username是否等于原数据库中存在的username
        }, {
            nickname: body.nickname
        }]
    }, function (err, data) {
        if (err) {
            return res.status(500).json({
                code: 3000,
                flag: false,
                message: 'server error 查询失败'
            })
        }
        if (data.length !== 0) {//代表上面的username或者nickname有相同
            return res.status(200).json({
                code: 4000,
                flag: false,
                message: '账号或密码已存在'
            })
        }
        body.token = md5(md5(body.username) + 'yzl');//业务中加密两层 yzl为密钥
        new User(body).save(function (err, data) {//将body写到数据库中
            if (err) {
                return res.status(500).json({
                    code: 3000,
                    flag: false,
                    message: 'server error 存储失败'
                })
            }
            return res.json({
                code: 2000,
                flag: true,
                message: '注册成功'
            })
        })
    })
})

module.exports = router;//将router作为一个对象导出

2.2.3 对前端index.vue中的成功提交后判断部分进行重写

if (valid) {
                    // alert('注册成功!');
                    register(this.form.username, this.form.nickname,
                    this.form.password).then(response => {//调用数据库
                        // console.log(response.data);//输出从服务器上拿来的数据
                        const resp = response.data;//将后端服务器返回的内容接收一下
                        if (resp.flag) {
                            console.log('注册成功');
                        } else {
                            this.$message({//类似于windows中的alert方法
                                message: resp.message,
                                type: 'warning'//以警告的方式
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

直接提交：