一、真正的创建登录界面

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; } }); }, },

技术
今日推荐
PPT
阅读数 82
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信