这篇文章主要为大家详细介绍了某视频剪辑软件实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用某视频剪辑软件实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示：
超文本标记语言部分：
div class=loginbody
div class=登录
div class=我的登录 align= center
h4登录/h4
埃尔格式
:model=loginForm
:rules=loginRules
ref=loginForm
标签宽度=0px
埃尔-表单-项目
标签=
prop=account
style= margin-top:10px；
el-row
el-col :span=2
span class= El-icon-s-custom /span
/el-col
el-col :span=22
埃尔输入
inps
占位符=账号
v-model=loginForm.account
/el-input
/el-col
/el-row
/El-表单-项目
埃尔-表单-项目
标签=
prop=密码
el-row
el-col :span=2
span class=el-icon-lock/span
/el-col
el-col :span=22
埃尔输入
inps
type=password
占位符=密码
v-model=loginForm.passWord
/el-input
/el-col
/el-row
/El-表单-项目
El-form-item style= margin-top:55px；
埃尔按钮
type=primary
轮次
class=submitBtn
@click=submitForm
登录
/el-button
/El-表单-项目
div class=解锁
router-link:to= { path:/forget pwd }
忘记密码？
/路由器链接
|
router-link:to= { path:/register }
a href=寄存器。vue target= _ blank align= right 注册新账号/a
/路由器链接
/div
/el格式
/div
/div
/div
射流研究…部分
从" vuex "导入{地图突变}；
导出默认值{
名称：登录，
数据：函数(){
返回{
loginForm: {
帐户： ,
密码：""
},
登录规则：{
账户：[
{必需：真，消息： 请输入账号，触发器：模糊 }
],
密码：[{必填：真，消息： 请输入密码，触发器：模糊 }]
}
}
},
方法：{
.mapMutations([changeLogin])，
submitForm() {
让自我=这个；
const用户帐户=this。loginform。账户；
const用户密码=this。loginform。密码；
const userForm=new FormData()；
userForm.append(userAccount ，用户帐户)；
userForm.append(userPassword ，用户密码)；
this.axios.post(URL1 ，用户表单
).然后((res)={
if (res.data==0) {
自我消息({
类型："错误",
消息： 密码错误，登陆失败!
})
}
//令牌
自我。session token=RES . headers[ session token ]；
自我PageToken=Math.random().toString(36).substr(2)；
会话存储。setitem( page token ，self).页面令牌)；
自我。changelogin({会话令牌：self。会话令牌})；
//登录成功
if (res.data==1) {
self.axios.get(URL2
).然后((res)={
if (res.data==null) {
自我消息({
类型："错误",
消息： 查询失败!
})
}否则{
if (res.data.userType==0) {
自我. router.push({path: /supermana ，replace: true})
} else if (res.data.userType==1) {
自我router.push({path: /manauser ，replace: true})
} else if (res.data.userType==2) {
自我1000美元路由器。推送({ path:“/ordinauser”，replace: true})
}
}
}).接住(错误)={
console.log(错误)
})
}
})
},
}
}
半铸钢钢性铸铁(铸造半钢)部分。登录正文{
溢出：滚动；
溢出-y:隐藏；
溢出-x:隐藏；
}。登录{
宽度：100vw
填充：0;
边距：0;
身高：100vh
字体大小：16px
背景-位置：左上；
背景色：# 242645;
颜色：# fff
font-family: Source Sans Pro ；
位置：相对；
背景-图像：URL(/静态/图像/背景。jpg’)；
背景-重复：不重复；
背景尺寸：100% 100%;
}。mylogin {
宽度：240像素
高度：280像素
位置：绝对；
top:0；
左：0;
右：0;
底部：0;
边距：自动；
填充：50像素40像素40像素40像素40像素
盒影：-15px 15px 15px rgba(6，17，47，0.7)；
不透明度：1;
背景：线性梯度（
230度，
rgba(53，57，74，0%)0%，
rgb(0，0，0) 100%
);
}。inps输入{
边框：无；
颜色：# fff
背景色：透明；
字体大小：12px
}。submitBtn {
背景色：透明；
颜色：# 39f
宽度：200像素
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
