vue用户登录注册案例,vue编写登录注册页面
这篇文章主要为大家详细介绍了某视频剪辑软件项目实现登陆注册效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件项目实现登陆注册效果的具体代码，供大家参考，具体内容如下
主要内容
本章目标：vue元素-用户界面完成注册以及登陆
1.效果展示
2.视图页面：次浏览
注册页面效果实现：
模板
div class=登录部分
！- :rules=rules -
El-form label-position= top label-width= 100px class= demo-rule form :rules= rules :model= rules form status-icon ref= rule form
El-表单-项目标签=用户名prop=name
El-input type= text v-model=规则表单。名称/El-输入
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-input type= password v-model=规则表单。密码/El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )提交/el-button
埃尔按钮重置/el-button
/El-表单-项目
/el格式
/div
/模板
脚本
从"@/服务/api "导入{登录}；
导出默认值{
data() {
返回{
规则表单：{
名称：,
密码：""
},
规则：{
名称：[
{必需：真，消息：名字没写，触发：模糊 },
{最少：1,最多：5,消息：长度在3到5位}
],
密码：[
{必需：真，消息：名字没写，触发：模糊 },
{最少：3,最多：5,消息：长度在3到5位}
]
}
};
},
方法：{
submitForm(formName){
这个参考文献[表单名]。验证((有效)={
如果(有效){//如果校检通过向后端发送用户名密码
登录({
名称：this.rulesForm.name，
密码：this.rulesForm.password
}).然后((数据)={
console.log(数据)
if(data.code===0){
localStorage.setItem(token ，data.data.token)
window.location.href=/
}
if(data.code===1){
这个message.error(data.mes)
}
})
}否则{
console.log(错误提交！);
返回错误的
}
})
}
}
}
/脚本
style lang=stylus 。登录部分
填充0px 20px
/风格
login.vue
模板
div class=登录部分
El-form label-position= top label-width= 100px class= demo-rule form :rules= rules :model= rules form status-icon ref= rule form
El-表单-项目标签=用户名prop=name
El-input type= text v-model=规则表单。名称/El-输入
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-input type= password v-model=规则表单。密码/El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )提交/el-button
埃尔按钮重置/el-button
/El-表单-项目
/el格式
/div
/模板
脚本
从"@/服务/api "导入{登录}；
导出默认值{
data() {
返回{
规则表单：{
名称：,
密码：""
},
规则：{
名称：[
{必需：真，消息：名字没写，触发：模糊 },
{最少：1,最多：5,消息：长度在3到5位}
],
密码：[
{必需：真，消息：名字没写，触发：模糊 },
{最少：3,最多：5,消息：长度在3到5位}
]
}
};
},
方法：{
submitForm(formName){
这个参考文献[表单名]。验证((有效)={
如果(有效){//如果校检通过向后端发送用户名密码
登录({
名称：this.rulesForm.name，
密码：this.rulesForm.password
}).然后((数据)={
console.log(数据)
if(data.code===0){
localStorage.setItem(token ，data.data.token)
window.location.href=/
}
if(data.code===1){
这个message.error(data.mes)
}
})
}否则{
console.log(错误提交！);
返回错误的
}
})
}
}
}
/脚本
style lang=stylus 。登录部分
填充0px 20px
/风格
路由：index.js
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
Vue.use(路由器)
从" @/商店"导入商店
从" @/service/api.js "导入{userInfo}
从" @/views/home/Home.vue "导入个人主页
从" @/views/user-login/index.vue "导入登录
常量路由器=新路由器({
模式："历史",
路线：[
{
路径："/",
姓名：家，
标题：首页，
组件：主页
},
{
路径："/登录"，
名称：登录，
标题：登录页，
组件：登录，
元：{
登录：真
}
}
]
});
router.beforeEach( async (to，from，next)={
const token=本地存储。getitem( token )；
const isLogin=！代币
//进入路由的时候，需要向后端发送令牌，验证是否合法
const data=await userInfo()；
Store.commit(chageUserInfo ，data.data)
如果(到。匹配。一些(item=item。meta。登录)){//需要登录
if(isLogin){//已经登录的，直接通过
if(data.error===400){//后端告诉你，登录不成功
下一步({ name:登录 })；
本地存储。移除项目(“令牌”)；
返回；
}
if(to.name===login){
下一个({ name: home })；
}否则{
next()；
}
返回；
}
如果(!isLogin to.name===login){//未登录，但是要去登录页
next()；
}
如果(!isLogin to.name！==登录){//未登录，去的也不是登录页
下一步({ name:登录 })；
}
}否则{
next()；
}
})
导出默认路由器；
总结
今天的内容就先到这里，因为还有一些没完善所以不是很好，后面再继续改进！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。