vue实现登陆注册,vue用户登录注册案例
第一次用Vue MySQL实现注册登录功能，就已经踩了很多坑，下面这篇文章主要给大家介绍了关于使用Vue MySQL实现登录注册案例的相关资料，需要的朋友可以参考下
目录
1.新建某视频剪辑软件项目并连接数据库2.新建登录页面、注册页面和首页3.页面路由配置4.新建/server/API/login.js5 .在/server/router.js中配置对应路由6.在/views/login.vue 、/views/register.vue和/views/home.vue中编写相应方法总结
1.新建vue项目并连接数据库
具体步骤见某视频剪辑软件连接关系型数据库数据库
2.新建登录页面、注册页面和首页
在src/视图文件夹下，新建login.vue(登录页面)、register.vue(注册页面)和home.vue(首页)
根据自己的喜好搭建页面（本人此处使用了elementUI的组件，简历前要先安装elementUI中间件)
国家预防机制一元素-ui -S
模板
div class=bg
div id=登录
氘登录页面/h2
El-form ref= form :model= form label-width= 20%
El-表单-项目标签=用户名：
埃尔输入v-model=form.username/el输入
/El-表单-项目
El-表单-项目标签=密码：
埃尔-输入v-model=形式。“密码”type=“密码”/El-input
/El-表单-项目
/el格式
El-button type= primary round @ click= log in class= BTN 登录/el-button
a @click=register class=reg 前往注册/a
/div
/div
/模板
模板
div class=bg
div id=register
氘注册页面/h2
El-form ref= form :model= form label-width= 20%
El-表单-项目标签=用户名：
埃尔输入v-model=form.username/el输入
/El-表单-项目
El-表单-项目标签=密码：
埃尔-输入v-model=形式。“密码”type=“密码”/El-input
/El-表单-项目
/el格式
El-button type= primary round @ click= register class= BTN 注册/el-button
/div
/div
/模板
模板
div id=main
埃尔容器
埃尔-标题
div class=logo
img src=./assets/img/logo.png ！-此处请提前准备好图片-
/div
div class=用户
{ {用户名}}
/div
/el-header
埃尔梅因/埃尔梅因
电子页脚/电子页脚
/El-容器
/div
/模板
页面效果
3.页面路由配置
在src/路由器/索引. js中配置页面对应路由
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
Vue.use(VueRouter)
const home=()=import(./views/home.vue) //懒加载
const login=()=import(./查看/登录。vue’)
常量寄存器=()=导入(./查看/注册。vue’)
常量路由=[
{
路径： ,
重定向："/登录"//重定向
},
{
路径："/登录"，
名称：登录，
组件：登录
},
{
路径："/注册"，
姓名：注册，
组件：寄存器
},
{
路径："/home "，
姓名：家，
成分：家，
}
]
const router=new VueRouter({
模式："历史",
base: process.env.BASE_URL，
路线
})
//解决相同路径跳转报错问题
//使用推的方法
常量路由器推送=vue路由器。原型。推
VueRouter.prototype.push=函数推(到){
返回RouterPush.call(this，to).接住(错误=错误)
}
//使用替换的方法
const路由器replace=vue路由器。原型。替换
VueRouter.prototype.replace=函数替换(到){
返回RouterReplace.call(this，to).接住(错误=错误)
}
导出默认路由器
4.新建/server/API/login.js
接收请求查询/请求博西传递来的参数，通过查询语句查询对应数据并放回结果
让db=require(./db/index’)
exports.login=(req，res)={
var SQL= select * from user where name=？和密码=?
db.query(sql，[req.query.name，req.query.password]，(err，data)={
如果（错误){
return res.send({
现状：400,
消息： 登录失败
})
}
if(data.length 0) {
资源发送({
状态：200,
消息： 登录成功
})
}否则{
资源发送({
现状：202,
消息： 用户名或密码错误
})
}
})
}
exports.register=(req，res)={
const SQL 1= select * from user where name=？
const sql2=插入到用户（名称，密码)值(?)
db.query(sql1，[req.body.params.name]，(err，data)={
如果（错误){
return res.send({
现状：400,
消息： 操作失败
})
}
if(data.length 0) {
return res.send({
现状：202,
消息： 用户名已存在
})
}否则{
db.query(sql2，[req.body.params.name，req.body.params.password]，(err，data)={
如果（错误){
return res.send({
现状：400,
消息： 注册失败
})
}
资源发送({
状态：200,
消息： 注册成功
})
})
}
})
}
5.在/server/router.js中配置对应路由
let express=require(express )
让路由器=快递.路由器()
let login=require( ./API/登录’)
router.get(/login ，login.login)
router.post(/register ，login.register)
模块。导出=路由器
6.在/views/login.vue、/views/register.vue和/views/home.vue中编写相应方法
模板
div class=bg
div id=登录
氘登录页面/h2
El-form ref= form :model= form label-width= 20%
El-表单-项目标签=用户名：
埃尔输入v-model=form.username/el输入
/El-表单-项目
El-表单-项目标签=密码：
埃尔-输入v-model=形式。“密码”type=“密码”/El-input
/El-表单-项目
/el格式
El-button type= primary round @ click= log in class= BTN 登录/el-button
/div
/div
/模板
脚本
从" axios "导入爱可信
导出默认值{
data () {
返回{
表单：{
用户名： ,
密码：""
}
};
},
方法：{
登录(){
if(this.form.username==) {
这个message.error(用户名不能为空);
} else if(这个。形式。密码== ){
这个message.error(密码不能为空);
}否则{
axios。get( http://127。0 .0 .1/登录,{
参数：{
名称：this.form .用户名，
密码：this.form.password
}
}).然后(res={
if(res.data.status==200) {
这个. router.push({
路径："/home "，
查询：{
名称：this.form .用户名
}
})
}否则{
这个$alert(用户名或密码错误, 登录失败, {
confirmButtonText:确定，
回调：操作={
this.form.username=" "，
this.form.password=
}
});
}
}).接住(错误={
console.log(登录失败err)；
})
}
},
注册(){
这个. router.push(/register )
}
}
}
/脚本
模板
div class=bg
div id=register
氘注册页面/h2
El-form ref= form :model= form label-width= 20%
El-表单-项目标签=用户名：
埃尔输入v-model=form.username/el输入
/El-表单-项目
El-表单-项目标签=密码：
埃尔-输入v-model=形式。“密码”type=“密码”/El-input
/El-表单-项目
/el格式
El-button type= primary round @ click= register class= BTN 注册/el-button
/div
/div
/模板
脚本
从" axios "导入爱可信
导出默认值{
data () {
返回{
表单：{
用户名： ,
密码：""
},
isnull: false
};
},
方法：{
注册(){
if(this.form.username==) {
这个message.error(用户名不能为空);
} else if(这个。形式。密码== ){
这个message.error(密码不能为空);
}否则{
axios。帖子( http://127。0 .0 .1/注册，{
参数：{
名称：this.form .用户名，
密码：this.form.password
}
}).然后(res={
//console . log(RES . data . message)；
if(res.data.status==200) {
这个。$alert(返回登录页面，注册成功，{
ConfirmButtonText:确定，
回调：操作={
这个。$router.push(/login )
}
})
}else if(res.data.status==202) {
这个。$alert(用户名已经存在，注册失败，{
ConfirmButtonText:确定，
回调：操作={
this.form.username=“”，
this.form.password=
}
})
}否则{
console . log(RES . message)；
}
}).catch(错误={
Console.log(操作失败错误)；
})
}
}
}
}
/脚本
模板
div id=main
el容器
El-标题
div class=logo
img src=./assets/img/logo.png ！-这里，请提前准备好图片-
/div
div class=用户
{ {用户名}}
/div
/el-header
埃尔梅因/埃尔梅因
电子页脚/电子页脚
/El-容器
/div
/模板
脚本
导出默认值{
名称：主，
data() {
返回{
用户名：“”
}
},
Created() {//页面创建时，将路由传递的用户名赋给data中的用户名，这样用户名就可以显示在页面上了(效果见首页右上角)
this .用户名=this。$ route . query . name；
}
}
/脚本
效果显示
注册演示
Git源地址：https://gitee.com/xie-xiaochun/login-registration-demo
注意：资源不包含数据库，需要自己创建数据库，在源代码中修改数据库的相关信息。
总结
关于用Vue MySQL登录注册的这篇文章到此为止。关于注册Vue MySQL的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。