简单的vue写登录页面,vue做登录界面
最近在学习过程中经常要求用户登录注册。本文主要介绍Vue实战记录登陆页面实现的相关信息。有需要的朋友可以参考一下。
目录
1前期准备1.1安装Node.js1.2安装webpack1.3安装vue-cli2构建vue项目2.1创建项目2.2项目目录2.3导入元素UI3实现登陆页面3.1修改App.vue3.2创建Login.vue3.3配置route 4实现登陆功能4.1导入axios4.2导入qs和Mock4.3编写并提交js4.4编写模拟测试数据总结。
1 前期准备
1.1 安装Node.js
下载地址：https://nodejs.org/zh-cn/,官网
安装完成后，在终端输入node -v查询版本号。
检查npm版本，npm -v
1.2 安装webpack
终端输入
npm安装-保存-开发网络包
查看版本webpack -v
1.3 安装vue-cli
因为vue项目是使用仅在vue-cli3或更高版本中可用的可视化工具创建的，所以这里选择了3以上的版本。
npm安装-g @vue/cli
升级vue-cli
国家预防机制更新-g @vue/cli
卸载vue-cli
npm卸载vue-cli -g
2 搭建Vue项目
安装vue-cli后，使用vue提供的可视化工具创建一个vue项目。
2.1 创建项目
在终端输入vue ui进入可视化工具。
选择创建项目的路径。
创建项目文件夹
默认选择Manual，我们将手动添加项目的配置。
选择功能配置后，进入下一步，直接创建项目。
创建项目后，在WebStore中打开项目。
2.2 项目目录
2.3 导入Element UI
在ElementUI官网可以直接看到导入模式，可以选择所有模块的导入。
在控制台输入
npm安装元素-ui -保存
在main.js中引用
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
Vue.config.productionTip=false
/*导入元素UI*/
从“element-ui”导入elementUI
/*导入ElementUI的CSS样式*/
导入“element-ui/lib/theme-chalk/index . CSS”；
/*Vue使用ElementUI*/
vue . use(element ui)；
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
3 实现登陆页面
3.1 修改App.vue
这里，首先设置全局设置，并删除之前的模板。
模板
div id=应用程序
路由器-视图/
/div
/模板
风格
/风格
修改全局样式
模板
div id=应用程序
！-路由页面-
路由器-视图/
/div
/模板
风格
/*全局父类高度*/
html {
身高：100%；
}
/*重置body属性*/
正文{
填充：0；
边距：0；
/*继承html*/
身高：100%；
}
/* # app的高度也需要继承*/
#app {
身高：100%；
}
/*给全局链接标签加下划线*/
一个{
文字-装饰：无；
}
/风格
3.2 创建Login.vue
右键单击在views目录下创建一个vue文件，并将其命名为Login。
在ElementUI官网查询布局组件，选择自己的布局，复制到vue文件中。
模板
！-线的元素-
El-row type= flex class= row-BG justify= center
！-第一栏-
el-col :span=6
div class= grid-content BG-purple /div
/el-col
！-第二列-
el-col :span=6
div class= grid-content BG-紫光/div
/el-col
！-第三列-
el-col :span=6
div class= grid-content BG-purple /div
/el-col
/el-row
/模板
脚本
导出默认值{
名称：“登录”
}
/脚本
样式范围
/风格
复制表格。这里的复印件是带验证的表格。复制后，修改表单。
模板
div:XL= 6 :LG= 7 class= BG-log in
！-徽标-
El-image:src= require( @/assets/logo . png ) class= logo /
！-标题-
El-row type= flex class= row-BG row-two justify= center align= middle
el-col :span=6/el-col
el-col :span=6
！-标题-
H1管理系统/h1
/el-col
el-col :span=6/el-col
/el-row
！-表格表格-
El-row type= flex class= row-BG card justify= center align= bottom
el-col :span=7 class=登录卡
！- loginForm -
El-form:model= loginForm :rules= rules ref= loginForm label-width= 21% class= loginForm
El-表单-项目标签=账户prop=用户名style=宽度：380像素
El-input v-model= loginform。用户名/El-输入
/El-表单-项目
El-表单-项目标签=密码prop= password style= width:380 px
El-input type= password v-model= loginform。密码/El-输入
/El-表单-项目
El-表单-项目标签=验证码prop=code style=width: 380px
El-input v-model= loginform。code class= code-input style= width:70%；浮动：左/El-输入
！-验证码图片-
El-image:src= codeImg class= codeImg /El-image
/El-表单-项目
El-表单-项目标签=记住密码记住
El-switch v-model= loginform。记得/El-switch吗
/El-表单-项目
El-form-item class=" BTN-地面"
El-button type= primary @ click= submit form( loginForm )立即登陆/el-button
El-button @ click=重置表单( loginForm )重置/el-button
/El-表单-项目
/el格式
/el-col
/el-row
/div
/模板
脚本
导出默认值{
名称：登录，
data() {
返回{
//表单信息
loginForm: {
//账户数据
用户名： ,
//密码数据
密码： ,
//验证码数据
代码： ,
//记住密码
记住：假的，
//验证码的钥匙，因为前后端分离，这里验证码不能由后台存入会话，所以交给某视频剪辑软件状态管理
代码令牌：""
},
//表单验证
规则：{
//设置账户效验规则
用户名：[
{必需：真，消息： 请输入账户，触发：模糊 },
{最少：3,最多：10,消息： 长度在3到10 个字符的账户，触发器：模糊 }
],
//设置密码效验规则
密码：[
{必需：真，消息： 请输入密码，触发：模糊 },
{最短6分钟，最长15分钟，消息： 长度在6 到15 个字符的密码，触发器：模糊 }
],
//设置验证码效验规则
代码：[
{必需：真，消息： 请输入验证码，触发：模糊 },
{最少5分钟，最多5分钟，消息： 长度为5个字符，触发器：模糊 }
]
},
//绑定验证码图片
代码：空
};
},
方法：{
//提交表单
submitForm(formName) {
这个参考文献[表单名]。验证((有效)={
如果（有效){
//表单验证成功
警报("提交")
}否则{
console.log(错误提交！);
返回错误的
}
});
},
//重置表单
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
}
},
}
/脚本
样式范围。代码{
/*让验证码图片飘在右边*/
浮动：对；
/*设置一些圆角边框*/
边框半径：3px
/*设置宽度*/
宽度：26%;
}。血糖-登录{
身高：100%;
背景图像：url(./资产/背景。jpg’)；
背景尺寸：200%;
}。BTN-接地{
文本对齐：居中；
}。徽标{
边距：30px
高度：70px
宽度：70px
位置：固定；
}。标题{
文字-阴影：-3px 3px 1px # 5f 565 e；
文本对齐：居中；
保证金-最高：60%;
颜色：# 41 B9 a6
字体大小：40px
}。登录卡{
背景色：# ffffff
不透明度：0.9;
box-shadow:0 0 20px # ffffff；
边框半径：10px
填充：40px 40px 30px 15px
宽度：自动；
}
/风格
3.3 配置路由
在路由器下的索引。射流研究…中进行配置
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
从以下位置导入主页./views/Home.vue
导入登录名自./views/Login.vue
Vue.use(VueRouter)
常量路由=[
{
路径："/",
姓名：家，
组件：主页
},
//配置登陆页面的路由
{
路径："/登录"，
名称：登录，
组件：登录
}
]
const router=new VueRouter({
路线
})
导出默认路由器
效果图：
4 实现登陆功能
4.1 导入axios
在vue中，它只负责页面，也就是视图，但是我们登录的话肯定需要在后台验证。所以在vue中，通信交给axios处理。
在控制台终端输入。
npm安装axios -保存
回车，模块自动导入。
在main.js中注册
/*导入axios*/
从“axios”导入axios；
/*全局绑定axios*/
Vue.prototype. $ axios=axios
4.2 导入qs和Mock
Qs是vue中提供的一个插件，可以帮助我们解析字符串，序列化参数。
在控制台终端输入。
npm安装qs -保存
回车，模块自动导入。
在main.js中注册
/*导入qs*/
从“qs”导入QS；
/*全局绑定*/
Vue.prototype. $ qs=qs
因为现在没有后台设计，无法获取数据库的数据，所以用Mock模拟后端数据。
在控制台终端输入。
npm安装模拟js - save-dev
回车，模块自动导入。
创建一个模拟js文件，创建一个空白js文件，任意命名。
在main.js中导入模拟
/*引入模拟数据*/
要求(。/mock/LoginService.js )
4.3 编写提交js
获取验证码：
//获取验证码的方法
getVerifyCodeImg() {
/*获取验证码*/
这个。$axios.get(/getVerifyCode )。然后(res={
//获取验证码密钥
this . loginform . codetoken=RES . data . data . codetoken；
//获取验证码图片
this . code img=RES . data . data . code img；
})
}
//因为我们需要在页面渲染后获取验证码，所以绑定在created下。
已创建(){
//页面渲染完成后，执行获取验证码的方法。
this . getverifycodeimg()；
}
表单提交：
submitForm(formName) {
这个。$ refs[表单名]。验证((有效)={
如果(有效){
//表单验证成功。
这个。$axios.post(/login ，this.loginForm)。然后(res={
//获取结果
let result=JSON . parse(RES . data . data)；
let message=RES . data . msg；
//判断结果
如果(结果){
/*登录成功*/
元素。Message.success(消息)；
/*跳转到页面*/
router.push(/)
}否则{
/*打印错误消息*/
元素。Message.error(消息)；
}
})
}否则{
console.log(错误提交！);
返回false
}
});
}
完整的js
脚本
从“element-ui”导入元素；
从“@/router”导入路由器；
导出默认值{
名称：登录，
data() {
返回{
//表单信息
loginForm: {
//帐户数据
用户名： ，
//密码数据
密码： ，
//验证码数据
代码： ，
//记住密码
记住：假的，
//验证码的关键，因为前端和后端是分开的，这里验证码不能被后台保存在会话中，所以交给vue状态管理。
代码令牌：“”
},
//表单验证
规则：{
//设置账户验证规则
用户名：[
{必填：true，消息：请输入帐户，触发器：模糊 }，
{最小值：3，最大值：10，消息：“长度为3到10个字符的帐户”，触发器：“模糊”}
],
//设置密码验证规则
密码：[
{必填：真，消息：请输入您的密码，触发器：模糊 }，
{最短：6，最长：15，消息：“密码长度为6到15个字符”，触发器：“模糊”}
],
//设置验证码验证规则
代码：[
{必填：真，消息：请输入验证码，触发器：模糊 }，
{最短：5，最长：5，消息：“长度为5个字符”，触发器：“模糊”}
]
},
//绑定验证码图片
代码：空
};
},
方法：{
//提交表单
submitForm(formName) {
这个。$ refs[表单名]。验证((有效)={
如果(有效){
//表单验证成功。
这个。$axios.post(/login ，this.loginForm)。然后(res={
//获取结果
let result=JSON . parse(RES . data . data)；
let message=RES . data . msg；
//判断结果
如果(结果){
/*登录成功*/
元素消息.成功(消息);
/*跳转页面*/
router.push(/)
}否则{
/*打印错误信息*/
元素Message.error(消息);
}
})
}否则{
console.log(错误提交！);
返回错误的
}
});
},
//重置表单
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
},
//获取验证码方法
getVerifyCodeImg() {
/*获取验证码*/
这个. axios.get(/getVerifyCode ).然后(res={
//获取验证码键
这个。loginform。codetoken=RES . data。数据。codetoken
//获取验证码图片
这个。代码img=RES . data。数据。代码img
})
}
},
已创建(){
//页面渲染完成后执行获取验证码方法
这个。getverifycodeimg()；
}
}
/脚本
4.4 编写Mock测试数据
在之前新建的LoginService.js下写入模拟的数据
/*绑定模拟*/
const Mock=require( Mock js )；
常量随机=模拟。随机；
/*设置一个返回数据的通用结果*/
假设结果={
消息： ,
数据：""
}
/*模拟数据库信息*/
设用户名=小龙；
设密码= 123456 ;
设verityCode= abcde
/**
* 模拟验证码
*/
Mock.mock(/getVerifyCode ， get ，()={
result.data={
codeToken: Random.string(32)，
代码img:随机。数据图像( 75x 40 ，验证代码)
}
返回结果；
})
/**
* 拦截登陆请求
*/
Mock.mock(/login ， post ，(req)={
//获取请求数据
let from=JSON。解析(请求。体)；
//判断验证码
if (verityCode===from.code) {
//验证账户
if (username===from.username) {
//验证密码
if (password===from.password) {
result.msg=登陆成功
result.data=true
}否则{
result.msg=密码错误
result.data=false
}
}否则{
result.msg=用户不存在
result.data=false
}
}否则{
result.msg=验证码错误
result.data=false
}
返回结果；
})
总结
到此这篇关于某视频剪辑软件实战记录之登陆页面实现的文章就介绍到这了，更多相关某视频剪辑软件登陆页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。