Vue项目之登录注册

1. 注册
- 1.1 注册页面的布局
- 1.2 注册业务逻辑的实现
2. 登录
3.导航守卫
- 3.1全局导航守卫，全部路由都会经过这里。一定要调用next方法向下执行
- 3.2 路由独享的导航守卫
- 3.3 组件内的导航守卫
- 补充：个人中心的校验
4.列表进入详情返回还在原位置
5. 路由相关问题

1. 注册

1.1 注册页面的布局

需要用到Vant的Field组件
1.views下新建一个注册页面，完成基本布局。引入Vue和Field并使用。
2.在官方文档中搜索，查看自己需要的内容，将其直接粘贴到页面中。
3.给注册页面添加一个单独的路由，注册页面不需要底部。（注意，相关样式需要引入不同的组件，请细心查看官方文档，按需拿取内容）
4. 利用计算属性给输入框做条件判断。本案例以手机号为例。

<template><div class="container"><header class="header">注册</header><div class="content"><van-fieldv-model="username"placeholder="请输入手机号"clearable:error-message="usernamemsg"/><van-fieldv-model="password"type="password"clearableplaceholder="请输入密码"error-message="密码格式错误"/><van-fieldv-model="code"centerclearableplaceholder="请输入短信验证码"error-message="验证码格式错误"><van-button slot="button" size="small" type="primary">发送验证码</van-button></van-field></div></div>
</template><script>
import Vue from 'vue'
import { Field, Button } from 'vant'Vue.use(Field)
Vue.use(Button)
export default {data () {return {username: '18813007814',password: '123456',code: ''}},computed: {usernamemsg () {if (this.username === '') {return ''} else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {return '手机号码格式错误'} else {return ''}}}
}
</script>

1.2 注册业务逻辑的实现

注：在此之前，记住要先去路由页面添加一个注册页面的路由。
1.补充了密码以及验证码的计算属性判断
密码：如果为空返回空，如果不符合正则，返回格式错误，否则表示可以直接返回空
验证码：如果为空返回空，否则不为五位，返回验证码格式错误，否则成功返回空

2.验证码

绑定点击事件senCode
将提示信息{{buttonmsg}}放在按钮内容中。
定义函数：（定时器注意用箭头函数）每一秒钟定义一次，先提前声明时间，在计时器内让时间减减，当时间为零时，清除定时器，同时btn的内容改为发送验证码，最后return。未return时，让按钮内的内容为时间减减+后重新发送（注意：在开启定时器时，要让按钮禁止点击，在清除定时器后再让按钮可点。）

3.验证码跟接口做交互
在setCode最后定义一个getCode函数，在下方定义该函数（类似面向对象写法）。
定义getCode：

需要引入Toast并使用，请提示
在该函数中也可以去验证手机号是否正确，不正确显示相关提示信息
否则正确，就去axios去post请求数据，然后打印数据，去判断返回信息，跟接口文档相对应，如果为1则是用户名已经注册，0为获取验证码失败，成功在data里再定义adminCode用来存放验证码，通过res.data.code可以获取，加入该值中。

4.引入一个按钮，作为注册按钮
定义register函数
1.判断：

将手机号的验证再写一遍，如果不符合，则toast提示，直接return
验证密码，不符合同样提示并return
验证码验证，不符合toast提示，并return

2.当上面的判断都通过，再定义真正的注册函数

调接口，修改注册按钮为不可点，并修改值为注册中，在注册按钮写上:loading=“loading” loading-text=“注册中” disabled=“flag”
this.flag=true,this.loading=true
axios的post请求数据，第二个参数为用户手机号和密码。请求成功后先去更改按钮的状态，this.flag,this.loading都改为false。再去判断返回值（根据接口文档定义） 2->用户名已经注册，0->注册失败，否则注册成功
5.在注册页面增加登录按钮，用来做跳转。
记住不能用声明式跳转，用编程式跳转，用replace跳转到另一个页面（返回直接回到个人中心）

<template><div class="container"><header class="header">注册头部</header><div class="content"><van-fieldv-model="tel"placeholder="请输入手机号":error-message="usertel"clearable/><van-fieldv-model="password"type="password"placeholder="请输入密码":error-message="pass"clearable/><van-fieldv-model="sms"centerclearable                placeholder="请输入短信验证码":error-message="test"><van-button :disabled="flag" slot="button" size="small" type="primary" @click="sendCode">{{ buttonmsg }}</van-button></van-field><van-button type="primary" :loading="loading" loading-text="注册..." size="large" :disabled="zhud" @click="register">注册</van-button><van-divider @click="toLogin">去登录</van-divider></div></div>
</template>
<script>
import Vue from 'vue'
import { Field,Button,Toast,Divider } from 'vant'
import axios from 'axios'
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Divider)export default {data () {return {tel:'',password:'',sms:'',buttonmsg:'点击发送验证码',flag:false,adminCode:'',zhud:false,loading:false}},computed: {usertel () {if (this.tel === ""){return ''}else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){return '手机号格式错误'}else {return ''}},pass () {if (this.password === ""){return ''}else if(this.password.length<6){return '密码不可小于6位'}else {return ''}},test () {if (this.sms === ""){return ''}else if(this.sms.length !== 5){return '验证码格式错误'}else {return ''}}},methods: {toLogin () {this.$router.replace('/login') },sendCode () {let time = 4let timertimer = setInterval(()=>{                           time --if(time === 0){clearInterval(timer)this.flag=falsethis.buttonmsg = '点击发送验证码'return}this.flag = true  this.buttonmsg = time + '秒后重新发送' },1000)this.getCode()},getCode () {if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel===""){Toast('手机号码输入有误')}else{axios.get('https://www.daxunxun.com/users/sendCode?tel='+this.tel).then(res=>{if(res.data === 1){Toast('用户名已注册，请更改')}else if(res.data === 0){Toast('获取验证码失败')}else{this.adminCode = res.data.codeconsole.log(this.adminCode)}})}},register () {if (this.tel === '' || this.usertel === '手机号码格式错误') {Toast('手机号码输入有误')return}if (this.password === '' || this.pass === '密码格式错误，最少为6位') {Toast('密码输入有误')return}if (this.sms === '' || this.sms !== this.adminCode) {Toast('验证码输入有误')return}this.reallR()},reallR () {this.zhud=truethis.loading=trueaxios.post('https://www.daxunxun.com/users/register', {username: this.tel,password: this.password}).then(res=>{this.zhud=falsethis.loading=falseif (res.data === 2) {Toast('用户名已注册，请直接登录')} else if (res.data === 0) {Toast('注册失败')} else {Toast('注册成功')}})}}
}
</script>

2. 登录

页面布局以及基本逻辑同注册基本相同，可直接复制注册，将相关注册字样更改为登录。删除相关的判断。更改相关函数。

<template><div class="container"><header class="header">注册头部</header><div class="content"><van-fieldv-model="tel"placeholder="请输入手机号":error-message="usertel"clearable/><van-fieldv-model="password"type="password"placeholder="请输入密码":error-message="pass"clearable/><van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="login">登录</van-button><van-divider @click="toRegister">去注册</van-divider></div></div>
</template>
<script>
import Vue from 'vue'
import { Field,Button,Toast,Divider} from 'vant'
import axios from 'axios'
// import { setInterval, clearInterval } from 'timers';
// import func from '../../../vue-temp/vue-editor-bridge';
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Divider)export default {data () {return {tel:'',password:'',zhud:false,loading:false}},computed: {usertel () {if (this.tel === ""){return ''}else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){return '手机号格式错误'}else {return ''}},pass () {if (this.password === ""){return ''}else if(this.password.length<6){return '密码不可小于6位'}else {return ''}}},methods: {toRegister () {this.$router.replace('/register')},login () {if (this.tel === '' || this.usertel === '手机号码格式错误') {Toast('手机号码输入有误')return}if (this.password === '' || this.pass === '密码格式错误，最少为6位') {Toast('密码输入有误')return}if (this.sms === '' || this.sms !== this.adminCode) {Toast('验证码输入有误')return}this.reallR()},reallR () {this.zhud=truethis.loading=trueaxios.post('https://www.daxunxun.com/users/login', {username: this.tel,password: this.password}).then(res=>{this.zhud=falsethis.loading=falseif (res.data === 2) {Toast('用户未注册')} else if(res.data === -1){Toast('密码错误')}else if (res.data === 0) {Toast('登录失败')} else {Toast('登录成功')localStorage.setItem('isLogin','ok') //登录标识this.$router.back()  //登陆成功返回上一页}})}}
}
</script>

3.导航守卫

3.1全局导航守卫，全部路由都会经过这里。一定要调用next方法向下执行

除了登陆路由，其他页面都需要登录验证。

router.beforeEach((to,from,next)=>{// console.log(to)// console.log(from)// next()   //至此就可以显示页面了//做业务逻辑,如果是登录状态，就进行下一步（注意登录页面不可做这个判断）if(to.name = 'login'){  //如果要去的页面是登录页面，就进行下一步，不做判断next()}else{if(localStorage.getItem('isLogin')==='ok'){next()}else{next('/login')}}

3.2 路由独享的导航守卫

路由独享的导航守卫—一般不推荐直接使用
比如在购物车路由下方加入下面一段代码，可以实现购物车页面的相关判断。
没有登录状态就直接去到登录页面，有登录状态就继续下一步。

beforeEnter (to,from,next) {if(localStorage.getItem('isLogin')==="ok"){next()}else{next('/login')}}

3.3 组件内的导航守卫

先来简单看一下组件内的导航守卫相关介绍：

const Foo = {template: `...`,beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})
}

本文以购物车页面为例，在路由进入之前，做一个判断，有登录状态进行下一步，没有登录状态就直接去到登录页面。组件内的导航守卫有两张写法，请看案例，且不同写法有不同的效果，按需而定。

<template><div class="container"><header class="header">购物车头部</header><div class="content">购物车内容</div></div>
</template>
<script>
export default {beforeRouteEnter (to,from,next) {// if (localStorage.getItem('isLogin')==='ok'){//     next()// }else{//     next('/login')  //这种登陆成功返回点击购物车之前的页面// }next(vm => {if (localStorage.getItem('isLogin')==='ok'){next()}else{// next('./login')vm.$router.push('/login')  //这种登录成功直接返回到了购物车}})}
}
</script>

补充：个人中心的校验

在个人中心写业务逻辑，如果本地读取登录状态则跳到相关页面，没有登录的话就跳转到未登录页面
涉及到重定向，一开始就将路由盖过去了，因此未登录页面同样需要业务处理
注意，要在未登录页面部署同样的业务逻辑，有登陆跳转登录，没有登录next
想让业务更加严谨就去登录页面设置业务逻辑，（虽然效果已经实现了）

4.列表进入详情返回还在原位置

基本思路：在离开页面前将内容高度存储到本地，在返回页面后在去本地获取并设置内容高度。

添加meta标签，keepAlive，表示当前路由涉及到缓存
在app.vue修改路由的显示部分，将视图放进标签，并且做一个判断，注意需要缓存的才放在标签中（可以避免组件的重新渲染）
找位置：离开时记录位置，返回时回到这个位置
利用keepAlive，可以在activated中进行操作

在需要缓存的列表中定义路由时添加如下代码 router.js中针对于首页的路由

2.修改App.vue中路由的显示部分

3.在离开首页时，记录滚动条的位置，返回时滚动到该位置即可，下方案例有一句代码是为了实现其他业务需求，可以忽略不看。

4.利用keepAlive，可以在activated中进行返回后的操作，设置内容高度为本地存储的值。

5. 路由相关问题

对于导航守卫还需要补充一些相关知识，上面步骤执行完会发现个人中心存在一些问题。当在个人中心页面显示已经登录时，无法后退。
通过vue开发者工具，我们可以观察到，当我们未登录时，先去到首页，再去到个人中心，此时个人中心应该是未登录页面（/user/nologin），我们点击登录，会去到登录页面，点击登录后，在开发者工具中，我们会看到，我们先到了个人中心的未登录页面，再去到了个人中心的已登录页面，并且每次后退，都是先后退到个人中心未登录页面，又跳转到个人中心登录页面。（因为未登录页面有一个判断，所以我们每次点击后退，在视觉上感觉无法后退，实际上是退回到了未登录页面，这个页面又做了个判断，又回到已登录页面，如此循环往复。）

解决：

在个人中心的未登录页面，将之前的next、vm删去。
在个人中心的登录页面，将之前的判断删去，此页面不做判断也可以执行业务逻辑。

执行完以上解决方法，发现我们可以后退了，但是，需要后退两次才能返回主页。通过开发者工具我们可以看到页面路由跳转的流程，见下图：

相关原因以及解决方法：
1.在路由文件中将重定向删除。
2.个人中心未登录页面到登录页面的跳转是声明式挑战，需要更改为编程式跳转。在编程式跳转中，运用replace方法（）
3.在个人中心页面，我们之前用的是beforeRouteEnter，如果是该页面下的其它页面做跳转，此方法无法触发。所以我们此处应该将该方法替换成侦听属性。（侦听属性可以侦听路由的变化，打印可以获取相关的路由，因此我们可以做判断。）
4.但是我们发现侦听属性在别的页面跳转到该页面时，第一次不会触发监听。因此第一次监听还是需要用到beforeRouteEnter，再此方法中也需要用到replace，至此可以解决问题了。

步骤详情
1.在路由文件中，将个人中心页面的重定向删除

2.在nologin页面将路由守卫删去，改变登录跳转方式。在个人中心的login页面，直接将业务逻辑删去。

3.个人中心页面，将beforeRouteEnter中的next改为replace方法。（因为没有重定向，默认跳转为/user替换为/user/login或者/user/nologin）在下面利用侦听属性侦听路由的变化，并做判断。（replace和push页面显示不同）

<template><div class="container"><header class="header">个人中心头部</header><div class="content"><router-view></router-view>个人中心内容</div></div>
</template>
<script>
export default {beforeRouteEnter (to, from, next) {next(vm => {if (localStorage.getItem('isLogin') === 'ok') {// 因为没有重定向，默认跳转为 /user 替换为/user/logingvm.$router.replace('/user/loging')} else {vm.$router.push('/user/nologin')}})},watch: {$route (val) {console.log(val)if (localStorage.getItem('isLogin') === 'ok') {this.$router.replace('/user/loging')} else {this.$router.replace('/user/nologin')}}}
}
</script>

Vue项目之登录注册相关推荐

Vue项目二登录注册功能的实现
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.系统注册功能的实现 1.配置注册页面路由 2.注册页面的搭建 3.api下发送ajax请求的文件创建二.后台数据 ...
快速上手Springboot项目（登录注册保姆级教程）
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
Vue+MySQL实现登录注册案例
Vue+MySQL实现登录注册案例 1.新建vue项目并连接数据库具体步骤见vue连接mysql数据库 2.新建登录页面.注册页面和首页在src/views文件夹下,新建 login.vue(登录 ...
java优化登录注册,Java-Web(项目)优化登录注册
Java-Web(项目)优化登录注册 Java-Web(项目)优化登录注册实现代码: package com.homework.dao1; public interface Login { publ ...
vue项目实现登录(sessionStorage 存储 token)
前提参考:vue项目封装axios 思路: // 1, 前端校验,校验成功后向后台传用户名和密码(每次请求接口都要传 token) // 2, 后端收到请求,验证用户名和密码,验证成功,生成 toke ...
vue项目实现登录/退出功能（包括token机制）
源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句) 一.登录业务的相关技术点 http是无状态的,为记录登录状态可通过cookie-sessi ...
SPA项目之登录注册
文章目录创建项目需要注意的问题解析后台交互(axios/qs/vue-axios) 导入代码关于后台拦截问题创建项目 vue init webpack t224_spa cd t224_sp ...
用vue实现小米商城登录注册页面
vue课堂作业,记录下代码有些不规范,大多是html+css实现的,目前是静态页面的实现效果展示 html代码 <body><div id="app"> ...
22/10/08 vue2项目，登录注册路由守卫
写在router/index.js文件内 //导航守卫,前置处理 router.beforeEach((to, from, next) => {let isAuthenticated = !!l ...

Vue项目之登录注册

Vue项目之登录注册

1. 注册

1.1 注册页面的布局

1.2 注册业务逻辑的实现

2. 登录

3.导航守卫

3.1全局导航守卫，全部路由都会经过这里。一定要调用next方法向下执行

3.2 路由独享的导航守卫

3.3 组件内的导航守卫

补充：个人中心的校验

4.列表进入详情返回还在原位置

5. 路由相关问题

Vue项目之登录注册相关推荐

最新文章

热门文章