这篇文章主要为大家详细介绍了某视频剪辑软件实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用某视频剪辑软件实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示：
超文本标记语言部分：
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像素
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。