一、真正的创建登录界面
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
}
})
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文件中增加更改如下代码：
// 查----用户信息
router.get("/user/info", (req, res) => {
let body = req.query // get请求拿数据，在地址栏中拿，在query里
User.findOne({
token: body.token
}, (err, data) => {
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;
}
});
},
},
|