©2020-2024 ioDraw All rights reserved
一、真正的创建登录界面
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>
二、创建登录界面的node接口
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 } })
注意：这里也一样，findone()也过时了，不能接收回调函数，用.then()形式更改，后面不再赘述，我直接改了哈，这个问题我提了两遍了，应该有印象了，更改如下：
// 用户登录 router.post("/user/login", (req, res) => { //去数据库中查找有没有登录的数据 let body
= req.body User.findOne({ username: body.username, password: body.password
}).then((data, err) => { console.log(data, err); 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: "用户或昵称不存在" }) } 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.总结：现在我们完成了------增：注册功能，查：验证用户是否登录
现在我们在创建一个查询功能：获取用户信息，在node文件的router.js文件中，添加如下：
// 查----用户信息 router.get("/user/info", (req, res) => { let body = req.query //
get请求拿数据，在地址栏中拿，在query里 console.log(body); })
8.在回到前台的login.js文件中，创建出路由地址，代码如下：
// 查用户信息 export function info(token) { //通过token来查询用户信息，既唯一又加密 return
request({ url: `/user/info?token=${token}`, method: "get", // data: { // token
// } }) }
9.要把info引入到登录页面中，也就是前台login文件的index.vue文件中：
import { login,info } from "@/api/login.js";
10.前台login文件的index.vue，找到if (res.data.flag) {}，把下面代码添加到它里面：
if (res.data.flag) {//这里代表真正登录进来了 info(res.data.data.token).then(res=>{
console.log("获取用户信息"); }).catch(err=>{ console.log("错误"); }) }
11
.重启下服务，看在node终端中能否拿到token数据，拿到token值，去数据库中查询有没有这个数据，在node文件的router.js文件中增加更改如下代码：
//前台访问/user/info，看是否有token，注册时后台将用户名加密作为token值
//当前台访问登录路径时，登陆成功才会返给我们token，如果有token，才允许访问后台首页 router.get("/user/info", (req,
res) => { let body = req.query // get请求拿数据，在地址栏中拿，在query里 console.log(body);
//前台传的参数 User.findOne({ token: body.token }).then((data, err) => { if (err) {
return res.status(500).json({ //如果err，就是错误就是数据库中没有 code: 3000, flag: false,
message: "token查询失败,请联系后台" }) } if (!data) { //如果信息没查到 return
res.status(200).json({ //数据库中没有，就是token不存在 code: 2000, flag: false, message:
"token不存在" }) } return res.json({ "code": 2000, "flag": true, "message":
"登录拿到所有数据", "data": { "nickname": data.nickname, "id": data._id } //把数据返回出去 })
}) })
12.回到前台login文件的index.vue文件，把上面10里的 console.log("获取用户信息");替换如下：
if (res.data.flag) { localStorage.setItem( "sms-user",
JSON.stringify(res.data.data) ); localStorage.setItem( "sms-token",
JSON.stringify(res.data.token) ); this.$router.push('/') }
13.回到前台login文件的index.vue文件，更改如下，这样就能拿到sms-token数据了：
methods: { submitForm(formName) { this.$refs[formName].validate((valid) => {
if (valid) { login(this.form.username, this.form.password) .then((res) => { let
resArr=res.data this.$message({ showClose: true, message:resArr.message, type:
"success", }); if (resArr.flag) { //这里代表真正登录进来了 info(resArr.data.token)
.then((res) => { if (res.data.flag) { localStorage.setItem( "sms-user",
JSON.stringify(res.data.data) ); localStorage.setItem( "sms-token",
JSON.stringify(resArr.data.token) ); this.$router.push('/') } }) .catch((err)
=> { console.log("错误"); }); } }) .catch((err) => { console.log("err", err); });
}else { // console.log("error submit!!"); this.$message({ showClose: true,
message: "验证不通过！", type: "error", }); return false; } }); }, },