技术标签: vue.js javascript
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
}
})
注意:这里也一样,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;
}
});
},
},
文章浏览阅读3.8k次。1、将下载好的萤石js插件,添加到SoringBoot项目中。位置可参考下图所示。(容易出错的地方,在将js插件在html页面引入时,发生路径错误的问题)所以如果对页面中引入js的路径不清楚,可参考下图所示存放路径。2、将ezuikit.js引入到demo-live.html中。(可直接将如下代码复制到你创建的html页面中)<!DOCTYPE html><html lan..._ezuikit 测试的url
文章浏览阅读322次。第二步,在弹出的对话框选择,设备驱动—>PLC—>莫迪康—>ModbusRTU—>COM,根据配置软件选择的协议选期期,这里以此为例,然后点击“下一步”。第四步,把使用虚拟串口打勾(GPRS设备),根据需要选择要生成虚拟口,这里以选择KVCOM1为例,然后点击“下一步”设备ID即Modbus地址(1-255) 使用DTU时,为下485接口上的设备地址。第六步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“第五步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“_组态王ua
文章浏览阅读9.4k次,点赞22次,收藏19次。安装npm相当于安装node.js,Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西_npm安装配置
文章浏览阅读748次,点赞21次,收藏26次。大家好,小编来为大家解答以下问题,python基础训练100题,python入门100例题,现在让我们一起来看看吧!宝子们还在新手村练级的时候,不单要吸入基础知识,夯实自己的理论基础,还要去实际操作练练手啊!由于文章篇幅限制,不可能将100道题全部呈现在此除了这些,下面还有我整理好的基础入门学习资料,视频和讲解文案都很齐全,用来入门绝对靠谱,需要的自提。保证100%免费这不,贴心的我爆肝给大家整理了这份今天给大家分享100道Python练习题。大家一定要给我三连啊~
文章浏览阅读1k次。 为了在 Linux ( Ubuntu) 上安装sublime,一般大家都会选择常见的教程或是 sublime 官网教程,然而在国内这种方法可能失效。为此,需要用安装包安装。以下就是使用官网安装包安装的教程。打开 sublime 官网后,点击右上角 download, 或是直接访问点击打开链接,即可看到各个平台上的安装包。选择 Linux 64 位版并下载。下载后,打开终端,进入安装..._ubuntu 安装sumlime text打不开
文章浏览阅读563次,点赞13次,收藏6次。CrossOver24是一款类虚拟机软件,专为macOS和Linux用户设计。它的核心技术是Wine,这是一种在Linux和macOS等非Windows操作系统上运行Windows应用程序的开源软件。通过CrossOver24,用户可以在不购买Windows授权或使用传统虚拟机的情况下,直接在Mac或Linux系统上运行Windows软件和游戏。该软件还提供了丰富的功能,如自动配置、无缝集成和实时传输等,以实现高效的跨平台操作体验。
文章浏览阅读1.7k次。一个用聊天的方式让ChatGPT帮我写的线程安全的环形List_为什么gpt一写list就卡
文章浏览阅读336次。我们在前面的文章里曾写过Web应用中乱码产生的原因和处理方式,旧文回顾:深度揭秘乱码问题背后的原因及解决方式其中我们提到可以通过Filter的方式来设置请求和响应的encoding,来解..._filterconfig selectencoding
文章浏览阅读651次。转自:http://www.jb51.net/article/36480.htmencodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误,所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字符还原回来_js encodeur decodeurl
文章浏览阅读1.9w次,点赞6次,收藏3次。前言在日常的Android开发当中,我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable,大意是目标文件夹不存在或不可写。出现问题的原因以及解决办法上面有说报错的中文大意是:目标文件夹不存在或不可写。其实问题就在我们的打包界面当中图中标红的Desti..._the destination folder does not exist or is not writeable
文章浏览阅读94次。一、配置代码编辑区的样式 <1>打开Eclipse,Help —> Install NewSoftware,界面如下: <2>点击add...,按下图所示操作: name:随意填写,Location:http://eclipse-color-th..._ecplise高大上设置
文章浏览阅读2.8k次。一,下载mysql:http://dev.mysql.com/downloads/mysql/; 打开页面之后,在Select Platform:下选择linux Generic,如果没有出现Linux的选项,请换一个浏览器试试。我用的谷歌版本不可以,换一个别的浏览器就行了,如果还是不行,需要换一个翻墙的浏览器。 二,下载完后解压缩并放到安装文件夹下: 1、MySQL-client-5.6.2_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle