1.在创建登录界面前,我们用helloword.vue来充当登录页面,现在我们真正的把登录界面创建出来,在前台views文件夹下创建一个login文件夹,然后在此文件夹下创建一个index.vue文件作为登录界面,那么router里的index.js里引入的helloword就要变成login文件下的index.vue文件,由于注册界面和登录界面区别不大,所以可以借用并修改注册界面的样式,代码如下:
(1)router里的index.js里
import login from "../views/login/index.vue"
(2)login文件下的index.vue文件
<template> <div class="login-container"> <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="login-form" > <h1 class="title-zc">登录页</h1> <el-form-item label="账号" prop="username"> <el-input v-model.number="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">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: "", password: "", }, rules: { username: [{ required: true, message: "请输入账号", trigger: "blur" }], password: [{ required: true, message: "请输入昵称", trigger: "blur" }], }, }; }, methods: { submitForm() { login(this.form.username, this.form.password) .then((res) => { // console.log(res); console.log("成功访问"); }) .catch((err) => { console.log("err", err); }); }, }, }; </script> <style scoped> .login-container { position: absolute; width: 100%; height: 100%; overflow: hidden; background-image: url("../../assets/bgg.jpg"); background-size: 100% 100%; background-repeat: no-repeat; } .login-form { width: 350px; margin: 150px auto; background-color: rgba(90, 187, 211, 0.7); padding: 30px; border-radius: 20px; } .title-zc { text-align: center; } </style>
1.在node文件夹中,创建登录界面的node接口,在router.js中,代码如下:
router.post("/user/login", (req, res) => { let body = req.body console.log(body); })
2.在api文件的login.js中,创建登录界面的路由地址,代码如下:
export function login(username, password) { return request({ url: "/user/login", method: "post", data: { username, password } }) }
3.然后把它导入到login的index.vue中
import { login } from "@/api/login.js";
4.然后重启node服务,看在node终端中能不能拿到登录输入的数据
三、把注册页的重置改为已有账号,直接登录,想让它去往登录页面,在前台的register文件的index.vue中删掉下面两段代码:
<el-button @click="resetForm('form')">重置</el-button> resetForm(formName) { this.$refs[formName].resetFields(); },
在前台的register文件的index.vue中增加下面的代码,点击它的时候让它去往登录页面:
| <a href="#/login">已有账号,点击登录</a>
在前台的login文件的index.vue中增加下面的代码,点击它的时候让它去往注册页面:
| <a href="#/register">没有账号,点击注册</a>
1.在node文件夹下的router.js中,登录路由里对数据库进行查找,代码如下:
router.post("/user/login", (req, res) => { //去数据库中查找有没有登录的数据 let body = req.body User.findOne({ username: body.username, password: body.password }, (err, data) => { if (err) { return res.status(500).json({ //如果err,就是错误就是数据库中没有 code: 3000, flag: false, message: "登录失败,请联系后台" }) } if (!data) { //如果信息没查到 return res.status(200).json({ //数据库中没有,就是用户或昵称不存在 code: 2000, flag: false, message: "用户或昵称不存在" }) } }) })
2.在这之后,就能真正拿到数据了,我们把它返回出去,上面代码的if下,书写代码如下:
return res.json({ "code": 2000, "flag": true, "message": "登录成功!", "data": { "token": data.token } })
3.再回到前台login文件夹下的index.vue修改如下代码,设置一下它登录成功时,弹出的消息样式:
methods: { submitForm() { login(this.form.username, this.form.password) .then((res) => { if (res.data.flag) { this.$message({ showClose: true, message: res.data.message, type: "success", }); } }) .catch((err) => { console.log("err", err); }); }, },
4.我们也修改一下注册页弹出的message,让它也是后台的,把前台register文件夹下的index.vue中的methods里的前两条message:" "的文字信息都替换成res.data.message,最后一条改成"验证不通过!"
5.为了能显示所有的提示信息,修改一下前台register文件夹下的index.vue文件,如下:
methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // alert("submit!"); register(this.form.username, this.form.nickname, this.form.password) .then((res) => { // console.log(res); // console.log("成功接口"); this.$message({ showClose: true, message: res.data.message, type: "success", }); if (res.data.flag) { this.$router.push("/login"); //实现跳转到登录界面 } }) .catch((err) => { // console.log("失败"); this.$message({ showClose: true, message: res.data.message, type: "error", }); }); } else { // console.log("error submit!!"); this.$message({ showClose: true, message: "验证不通过!", type: "error", }); return false; } }); }, },
6..为了能显示所有的提示信息,修改一下前台login文件夹下的index.vue文件,如下:
methods: { submitForm() { login(this.form.username, this.form.password) .then((res) => { this.$message({ showClose: true, message: res.data.message, type: "success", }); if (res.data.flag) { } }) .catch((err) => { console.log("err", err); }); }, },
7.总结:现在我们完成了增加数据功能,查询数据功能