网站建设英文参考文献,万网网站后台管理,公司网站建设公司好,在线网站制作平台# 二、用户登录## 功能介绍测试账号#xff1a;- 13911111111
- 246810也可以通过我们这个应用的移动端注册一个自己的账号#xff1a;地址#xff1a;http://vue-toutiao-m.lipengzhou.com/#/login- 手机号#xff1a;你自己的- 验证码#xff1a;- 246810- 也可以动态接…# 二、用户登录## 功能介绍测试账号- 13911111111
- 246810也可以通过我们这个应用的移动端注册一个自己的账号地址http://vue-toutiao-m.lipengzhou.com/#/login- 手机号你自己的- 验证码- 246810- 也可以动态接收真实的验证码## 创建组件并配置路由1、创建 src/views/login/index.vuehtml
templatediv classlogin-container登录页面/div
/templatescriptexport default {name: LoginIndex,components: {},props: {},data() {return {}},computed: {},watch: {},created() {},mounted() {},methods: {}}
/scriptstyle scoped langless/style自定义代码段百度一下。Sublime: Sublime 自定义代码段Visual Studio CodeVisual Studio Code 代码段2、将登陆页面组件配置到路由中js
import Vue from vue
import VueRouter from vue-routerimport Login from /views/loginVue.use(VueRouter)// 路由配置表
const routes [{path: /login,name: login,component: Login}
]const router new VueRouter({routes
})export default router3、最后手动输入 /login 访问测试。## 页面布局html
templatediv classlogin-container!--el-form 表单组件每个表单项都必须使用 el-form-item 组件包裹--div classlogin-form-wrapdiv classlogin-headdiv classlogo/div/divel-form classlogin-form refform :modeluserel-form-itemel-input v-modeluser.mobile placeholder请输入手机号/el-input/el-form-itemel-form-itemel-input v-modeluser.code placeholder请输入验证码/el-input/el-form-itemel-form-itemel-checkbox v-modelchecked我已阅读并同意用户协议和隐私条款/el-checkbox/el-form-itemel-form-itemel-button classlogin-btn typeprimary clickonSubmit登录/el-button/el-form-item/el-form/div/div
/templatescriptexport default {name: LoginIndex,components: {},props: {},data() {return {user: {mobile: , // 手机号code: // 验证码},checked: false // 是否同意协议的选中状态}},computed: {},watch: {},created() {},mounted() {},methods: {onSubmit() {console.log(submit!)}}}
/scriptstyle scoped langless.login-container {position: fixed;left: 0;top: 0;right: 0;bottom: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;background: url(./login_bg.jpg) no-repeat;background-size: cover;.login-form-wrap {min-width: 300px;padding: 30px 50px 10px;background-color: #fff;.login-head {display: flex;justify-content: center;.logo {width: 200px;height: 57px;background: url(./logo_index.png) no-repeat;background-size: contain;}}.login-form {.login-btn {width: 100%;}}}}
/style
## 实现基本登录功能思路- 给登陆按钮注册点击事件
- 获取表单数据
- 请求登录
- 处理后端响应结果- 成功处理- 失败处理js
onLogin () {// 获取表单数据根据接口要求绑定数据const user this.user// 表单验证// 验证通过提交登录request({method: POST,url: /mp/v1_0/authorizations,// data 用来设置 POST 请求体data: user}).then(res {console.log(res)// 登录成功}).catch(err {console.log(登录失败, err)// 登录失败})
}
## 登录消息提示 参考[Message 消息提示](https://element.eleme.cn/#/zh-CN/component/message)js
// 普通提示消息
this.$message(这是一条消息提示)// 成功提示消息
this.$message({message: 恭喜你这是一条成功消息,type: success
})// 警告提示消息
this.$message({message: 警告哦这是一条警告消息,type: warning
})// 错误提示消息
this.$message.error(错了哦这是一条错误消息)
下面是我们给登录功能增加的消息提示js
onLogin () {// 获取表单数据根据接口要求绑定数据const user this.user// 表单验证// 验证通过提交登录request({method: POST,url: /mp/v1_0/authorizations,// data 用来设置 POST 请求体data: user}).then(res {console.log(res)// 登录成功this.$message({message: 登录成功,type: success})}).catch(err { // 登录失败console.log(登录失败, err)this.$message.error(登录失败手机号或验证码错误)})
}
## 登录中 loading 提示两个作用- 防止网络请求慢出现用户多次点击触发登录请求- 一种方式是在请求期间把交互按钮禁用不允许被点击- 一种方式就是展示 loading 不允许被点击
- 交互反馈1、在 data 中添加数据用来控制登录按钮的 loading 状态img srcassets/image-20200420190756031.png altimage-20200420190756031 stylezoom: 50%; /2、给登录按钮绑定 loading 状态img srcassets/image-20200420190820427.png altimage-20200420190820427 stylezoom:50%; /3、在登录处理中js
onLogin () {// 获取表单数据根据接口要求绑定数据const user this.user// 表单验证// 验证通过提交登录// 开启登陆中 loading...this.loginLoading truerequest({method: POST,url: /mp/v1_0/authorizations,// data 用来设置 POST 请求体data: user}).then(res {console.log(res)// 登录成功this.$message({message: 登录成功,type: success})// 关闭 loadingthis.loginLoading false}).catch(err { // 登录失败console.log(登录失败, err)this.$message.error(登录失败手机号或验证码错误)// 关闭 loadingthis.loginLoading false})
}
## 表单验证参考文档[Element - Form 表单 - 表单验证](https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan)Form 组件提供了表单验证的功能只需要通过 rules 属性传入约定的验证规则并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)下面是内置的基本验证规则| 规则 | 说明 |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| required | 必须的例如校验内容是否非空 |
| pattern | 正则表达式例如校验手机号码格式、校验邮箱格式 |
| range | 使用 min 和 max 属性定义范围。对于字符串和数组类型将根据长度进行比较对于数字类型数字不得小于 min也不得大于 max。 |
| len | 要验证字段的确切长度请指定 len 属性。对于字符串和数组类型对 length 属性执行比较对于数字类型此属性指示数字的完全匹配即它可能仅严格等于 len。如果 len 属性与最小和最大范围属性组合则 len 优先。 |
| enum | 要从可能值列表中验证值请使用带枚举属性的枚举类型列出该字段的有效值例如br /var descriptor { role: {type: enum, enum: [admin, user, guest]} } |如果内置的校验规则不满足也可以自定义校验规则参见[Element - Form 表单 - 自定义校验规则](https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan)下面我们项目中登录表单验证的配置。1模板中的配置img srcassets/image-20200421105927545.png altimage-20200421105927545 stylezoom:50%; / 1、给 el-from 组件绑定 model 为表单数据对象2、给需要验证的表单项 el-form-item 绑定 prop 属性- 注意prop 属性需要指定表单对象中的数据名称3、通过 el-from 组件的 rules 属性配置验证规则4、ref 的作用主要用来获取表单组件手动触发验证2在 data 中定义验证规则js
formRules: { // 表单验证规则配置// 要验证的数据名称规则列表[]mobile: [{ required: true, message: 请输入手机号, trigger: change },{ pattern: /^1[3|5|7|8|9]\d{9}$/, message: 请输入正确的号码格式, trigger: change }],code: [{ required: true, message: 验证码不能为空, trigger: change },{ pattern: /^\d{6}$/, message: 请输入正确的验证码格式 }],agree: [{// 自定义校验规则https://element.eleme.cn/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze// 验证通过callback()// 验证失败callback(new Error(错误消息))validator: (rule, value, callback) {if (value) {callback()} else {callback(new Error(请同意用户协议))}},// message: 请勾选同意用户协议,trigger: change}]
}
3在登录的时候调用验证js
onLogin () {// 获取表单数据根据接口要求绑定数据// const user this.user// 表单验证// validate 方法是异步的this.$refs[login-form].validate(valid {// 如果表单验证失败停止请求提交if (!valid) {return}// 验证通过请求登录this.login()})
},login () {// 开启登陆中 loading...this.loginLoading truerequest({method: POST,url: /mp/v1_0/authorizations,// data 用来设置 POST 请求体data: this.user}).then(res {console.log(res)// 登录成功this.$message({message: 登录成功,type: success})// 关闭 loadingthis.loginLoading false}).catch(err { // 登录失败console.log(登录失败, err)this.$message.error(登录失败手机号或验证码错误)// 关闭 loadingthis.loginLoading false})
}
## 封装请求模块对于项目中的请求操作- 接口请求可能需要重用
- 实际工作中接口非常容易变动改起来麻烦我们建议的做法是把所有的请求都封装成函数然后统一的组织到模块中进行管理这样做的好处就是管理维护更方便也好重用。下面是我们优化封装请求的具体操作。1、创建 src/api/user.js封装登录请求方法js
/*** 用户相关请求模块*/
import request from /utils/request// 用户登录
export const login (data) {return request({method: POST,url: /mp/v1_0/authorizations,// data 用来设置 POST 请求体data})
}
2、在登录组件中加载使用js
import { login } from /api/user
img srcassets/image-20200421113705729.png stylezoom:50%; /3、最后测试登录功能是否正常## 总结
