1.登录
1.1思路
- 点击登录按钮 进行参数的验证 验证手机号和验证码是否登录
- 使用try catch 将用户信息保存到vuex this.$store.commit('setuser',res)
- 跳转到home页面 跳转之前判断是login还是nologin
- 是login正常跳转到home 不是login就 this.$route.back()
- 再创建一个nologin的路由 页面还是登录页面
- 在untils创建一个loginplugs.js文件
- 在main.js导入 并vue.user(插件名)
- 代码index.vue
try{
1.开启loding效果
this.loading = true
2.发送网络请求 将数据保存到vuex中
let res = await userLogin(this.$http,{
url:url,
method:method,
data:data
})
// 将数据保存到vuex中
this.$store.commit('setUser',res)
// 关闭loding
this.loading = false
// 判断路由是否是login
if(this.$route.path==='login'){
// 跳转到home页面
this.$router.push('/home')
}else{
// 不是login 返回登录页面
this.$route.back()
}
}catch(err){
console.log(err)
// 开启定时器
setTimeout(() => {
// 打印登录失败消息
this.$toast.fail('手机号或验证码错误')
// 取消loading
this.loadingTag = false
}, 500)
}
- vuex
/* eslint-disable space-before-function-paren */
import Vue from 'vue'
import Vuex from 'vuex'
// 按需导入封装的local数据
import {
setUserLocal,
getUserLocal
} from '@/untils/userLocal'
Vue.use(Vuex)
export default new Vuex.Store({
// 统一管理数据state
state: {
// 取出本地数据
user: getUserLocal()
},
// 修改state的数据
mutations: {
setUser(state, obj) {
// 将state.user赋值给obj
state.user = obj
// 存回本地数据中去
setUserLocal(obj)
}
}
})
- untils文件下的loginPlugs.js
// 进行登录验证
import Vue from 'vue'
// 导入了 router
import router from '@/router'
// 导入了 vuex
import store from '@/store'
// 导入 vant
import {
Toast
} from 'vant'
Vue.use(Toast)
// 添加一个插件对象
var loginPlugs = {}
// 添加一个 install 方法
loginPlugs.install = function (Vue) {
Vue.prototype.$login = function () {
// 得到用户的信息
let user = store.state.user
// 判断用户是否登录
if (!user) {
Toast.fail('对不起,您还没有登录,请先登录')
setTimeout(() => {
router.push('/login/nologin')
}, 2000)
return false
}
return true
}
}
// 导入插件对象
export default loginPlugs
- main.js导入封装的插件
// 导入自己封装的插件
import loginplug from '@/untils/loginplugs'
Vue.use(loginplug)
2.发送验证码 倒计时
2.1思路
- 判断手机号是否输入或者是否正确 若没有输入则让用户输入手机号码
- 点击发送验证码按钮 开始倒计时(开启定时器)
- 当倒计时到0的时候 定时器设置回null 时间重置 显示会发送验证码字样 +代码
getCode(){
if(this.mobile.user.trim().length<11){
this.$toast.fail('请输入正确的手机号码')
}else{
this.timer = setInteval(()=>{
// 倒计时每秒--
this.codeTime--
// 判断倒计时是否为0
if(this.codeTime<=0){
// 重置定时器
clearUnteval(this.timer)
// 定时器置null
this.timer = null
// 时间重置
this.codeTime = 10
}
},1000)
}
}
// 页面中显示
// timer 默认是null
{{timer?codeTime+'秒后获取':'获取验证码'}}
```---
# 主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro
# 贡献主题:https://github.com/xitu/juejin-markdown-themes
theme: juejin
highlight:
---