【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

第十一节：注册登录及验证码功能

功能分析

在app中要实现注册及登录功能，首先思考一个问题，是在什么时候需要登录呢？使用过抖音app的都知道，在我们操作朋友、消息、我的等功能页面时，是需要登录验证的。那么我们怎么实现呢？
功能实现步骤：
1.注册、登录、验证码页面布局实现
2.绑定相关功能的登录验证

功能实现

注册页面布局及按钮动态样式

1.结构

2.页面布局及样式，代码如下：

<template><div class="sign"><div class="sign-header"><span class="iconfont icon-guanbi" style="font-size: 20px" @click="back"></span><span style="color: #686868 font-size: 15px"> 帮助</span></div><div class="sign-content"><div class="des"><h2>登录后可展示自己</h2><p> 登录后表明同意<a href="">抖音协议</a>和<a>隐私协议</a></p></div><div class="sign-box"><div class="sele"><select class="sele-controll" v-model="telErea"><option value="">+86</option></select></div><div class="inp"><input v-model="phone" @input="changeTel" type="tel" class="inp-controll"placeholder="请输入手机号码"></div></div><div class="not-sign"><p>未注册手机号通过验证后将自动登录</p></div><div class="code-btn"><button :disabled="disabled" :class="[btnBg? 'active':'']" @click="getCode">获取短信验证码</button></div><div class="other"><router-link href="" tag="a" to="/tpsign">密码登录</router-link><span @click="show">其他方式登录</span></div></div><!--    <transition name="up">--><div class="mask" v-if="showMask" @click="close"><div class="oauth"><ul><li class="oauth-item">今日头条登录</li><li class="oauth-item">QQ登录</li><li class="oauth-item">微信登录</li><li class="oauth-item">微博登录</li><li class="oauth-item" @click="close">取消</li></ul></div></div><!--    </transition>--></div>
</template>
<style lang="less" scoped>.sign {padding: 30px;background-color: #fff;.sign-header {display: flex;justify-content: space-between;}.sign-content {padding: 40px 10px;.des{display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 60px 0;}}h2 {margin: 0;font-size: 24px;font-weight: bold;}p {line-height: 20px;color: #686868;}p a {color: #628DB8;padding: 0 5px;}.sign-box {display: flex;height: 50px;margin: 20px 0 0 0;align-items: center;background-color: #F9F9F9;.sele-controll {height: 36px;font-weight: bold;margin-left: 5px;border: none;}.inp-controll {height: 36px;background-color: #F9F9F9;width: 90%;margin-left: 10px;}input {caret-color: #FE2C55;}input::-webkit-input-placeholder {color: #686868;}}.not-sign {margin-top: 10px;}.not-sign p {color: #686868;font-size: 14px;}.code-btn{margin: 60px 0;}.code-btn button {margin: 10px 0;width: 100%;padding: 15px 0;border: none;letter-spacing: 5px;font-size: 15px;}.active {color: #ffffff;background-color: #FE2C55;}.other {display: flex;justify-content: space-between;}.other a {color: #628DB8;}}.mask {width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, .4);.oauth {height: 48%;width: 100%;position: absolute;bottom: 0;border-top-left-radius: 10px;border-top-right-radius: 10px;background-color: #fff;text-align: center;.oauth-item {border-bottom: 1px solid #f5f5f5;line-height: 60px;}}}</style>

3.动态样式
vue中实现动态样式的核心是使用v-bind指令绑定目标样式，进而根据不同的条件进行渲染，代码如下：
按钮布局

 <div class="code-btn"><button :disabled="disabled" :class="[btnBg? 'active':'']" @click="getCode">获取短信验证码</button></div>

动态实现

<script>
export default {name: 'Register',data() {return {telErea: '',showMask: false,disabled: true,btnBg: false,// 按钮样式默认phone: '  ',};},methods: {getCode() {this.$router.push({ path: '/code' });},show() {this.showMask = true;},close() {this.showMask = false;},changeTel(e) {// eslint-disable-next-line no-useless-escapethis.phone = e.target.value.replace(/\ +/g, '');const regTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;if (regTel.test(this.phone)) {console.log('附和正则表达式');this.btnBg = true;this.disabled = false;} else {console.log('不附和正则表达式');this.btnBg = false;this.disabled = true;}},back() {this.$router.push({ path: '/index' });},},
};
</script>

【温馨提示】这里使用到了:class进行动态样式的邦定。

登录页面布局及按钮动态样式

1.结构

2.页面布局及样式，代码如下：

<template><div class="sign"><div class="sign-header"><span class="iconfont icon-guanbi" style="font-size: 20px" @click="$router.back()"></span><span style="color: #686868;font-size:16px; ">帮助</span></div><div class="sign-content"><div class="des"><h2>手机号密码登录</h2></div><div class="sign-box"><div class="sele"><select class="sele-controll" v-model="telErea"><option value>+86</option></select></div><div class="inp"><inputtype="tel"@keyup="loginAction"class="inp-controll"v-model="phone"@input="changePhone"placeholder="请输入手机号码"/></div></div><div class="sign-box"><div class="inp"><inputtype="tel"@keyup="loginAction"v-model="password"@input="changePass"class="inp-controll"placeholder="请输入密码"/></div></div><div class="not-sign"><p>登录后表明同意<a href>抖音协议</a>和<a>隐私协议</a></p></div><div class="code-btn"><button :disabled="disabled" :class="[btnBg? 'active':'']" @click="loginAction">登录</button></div><div class="other"><span>忘记了？<a @click="resLogin">手机验证码登录</a></span></div></div><div class="mask" v-if="showMask"><div class="oauth"><ul><li class="oauth-item">今日头条登录</li><li class="oauth-item">QQ登录</li><li class="oauth-item">微信登录</li><li class="oauth-item">微博登录</li><li class="oauth-item" @click="close">取消</li></ul></div></div></div>
</template>
<style lang="less" scoped>
.sign {padding: 30px;background-color: #fff;.sign-header {display: flex;justify-content: space-between;}.sign-content {padding: 100px 10px;.des{display: flex;justify-content: center;margin: 0 0 33px 0;}.code-btn{margin: 40px 0 75px 0;}}h2 {margin: 0;font-size: 24px;font-weight: bold;}p {line-height: 20px;color: #686868;}p a {color: #628db8;padding: 0 5px;}.sign-box {display: flex;height: 50px;margin: 20px 0 0 0;align-items: center;background-color: #f9f9f9;.sele-controll {height: 36px;font-weight: bold;margin-left: 5px;border: none;}.inp-controll {height: 36px;background-color: #f9f9f9;width: 90%;margin-left: 10px;}input {caret-color: #fe2c55;}input::-webkit-input-placeholder {color: #686868;}}.sign-box:nth-child(3) {margin-top: 0px;margin-top: 10px;}.not-sign {margin-top: 10px;}.not-sign p {color: #686868;font-size: 14px;}.code-btn button {margin: 10px 0;width: 100%;padding: 15px 0;border: none;font-size: 20px;letter-spacing: 5px;color: #ffffff;}.other {display: flex;justify-content: center;margin: 20px 0;}.other a {color: #628db8;}.active {color: #ffffff;background-color: #fe2c55;}.mask {width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.4);.oauth {height: 48%;width: 100%;position: absolute;bottom: 0;border-top-left-radius: 10px;border-top-right-radius: 10px;background-color: #fff;text-align: center;.oauth-item {border-bottom: 1px solid #f5f5f5;line-height: 63px;}}}
}
</style>

3.按钮的动态样式

<div class="code-btn"><button :disabled="disabled" :class="[btnBg? 'active':'']" @click="loginAction">登录</button>
</div>
<script>
export default {name: 'LogIn',data() {return {telErea: '',showMask: false,password: '',phone: '',disabled: true,btnBg: false,// 默认按钮样式状态};},methods: {changePhone(e) {this.phone = e.target.value;const regTel = /^[1][3456789][0-9]{9}$/;if (!regTel.test(this.phone)) {console.log('不附和正则表达式');this.btnBg = false;this.disabled = true;}},changePass() {},loginAction() {// eslint-disable-next-line no-useless-escapeconst regTel = /^[1][3456789][0-9]{9}$/;if (this.phone === '') {console.log('手机号不能为空');this.disabled = true;this.btnBg = false;} else if (!regTel.test(this.phone)) {console.log('请填写正确的手机号');this.disabled = true;this.btnBg = false;} else if (this.password === '') {console.log('密码不能为空');this.disabled = true;this.btnBg = false;} else {console.log('请求接口');this.disabled = false;this.btnBg = true;}this.$router.push({ path: '/me' });},show() {this.showMask = true;},close() {this.showMask = false;},// 手机验证码登录resLogin() {this.$router.push({ path: '/register' });},},
};
</script>

【温馨提示】动态按钮样式绑定使用:class,当手机号和密码输入完成后动态更新按钮样式。

验证码页面布局及按钮动态样式

1.结构

2.页面布局及样式，代码如下：

<template><div class="sign"><div class="sign-header"><span class="iconfont icon-back" style="font-size: 20px" @click="$router.back()"></span><span style="color: #686868">帮助</span></div><div class="sign-content"><div class="des"><h2>请输入验证码</h2><p>验证码已通过短信发送至+8615998362261</p></div><div class="sign-box"><div class="inp"><input@input="changeCode"type="tel"v-model="code "class="inp-controll"placeholder="请输入验证码 "/></div><div class="sele">{{time}}</div></div><div class="code-btn"><button :disabled="disabled" :class="[btnBg? 'active':'']" class="load-btn"><div v-if="loading" class="loads" @click="login"></div>登录</button></div></div></div>
</template><script>
export default {name: 'Code',data() {return {telErea: '',time: 60,disabled: true,btnBg: false,code: '',defaultCode: '2261',loading: false,};},created() {this.getCode();},methods: {getCode() {this.countDown();},changeCode(e) {// eslint-disable-next-line no-useless-escapethis.code = e.target.value.replace(/\ +/g, '');if (this.code === this.defaultCode) {this.disabled = false;this.btnBg = true;this.loading = true;} else {console.log('验证码输入错误');}},countDown() {if (this.time > 0) {// eslint-disable-next-line no-plusplusthis.time--;setTimeout(this.countDown, 1000);// eslint-disable-next-line no-empty} else {}},login() {this.$router.push({ path: '/me' });},},
};
</script><style lang="less" scoped>
.sign {padding: 30px;background-color: #fff;.sign-header {display: flex;justify-content: space-between;}.sign-content {padding: 40px 10px;}h2 {margin: 0;font-size: 24px;font-weight: bold;}p {line-height: 20px;color: #686868;}p a {color: #628db8;padding: 0 5px;}.sign-box {display: flex;height: 50px;margin: 20px 0 0 0;align-items: center;background-color: #f9f9f9;justify-content: space-between;.inp-controll {height: 36px;background-color: #f9f9f9;width: 90%;margin-left: 10px;}input {caret-color: #fe2c55;}input::-webkit-input-placeholder {color: #686868;}.sele {margin-right: 20px;color: #686868;}}.sign-box:nth-child(3) {margin-top: 0px;margin-top: 10px;}.code-btn button {margin: 10px 0;width: 100%;padding: 15px 0;border: none;font-size: 18px;letter-spacing: 5px;color: #686868;}.active {color: #ffffff;background-color: #fe2c55;}.load-btn {display: flex;justify-content: center;}.loads {width: 16px;height: 16px;border: 3px solid cadetblue;border-bottom: 3px #cccccc solid;border-radius: 50%;animation: load 1s infinite linear;margin-right: 5px;}@keyframes load {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
}
</style>

绑定等功能路由

首先在路由文件中配置登录路由，路径如下：

配置代码如下：

 {path: '/logIn', // 登录name: 'LogIn',component: () => import(/* webpackChunkName: "logIn" */ '../views/LogIn.vue'),},{path: '/register', // 注册name: 'Register',component: () => import(/* webpackChunkName: "register" */ '../views/Register.vue'),},{path: '/code', // 短信验证name: 'Code',component: () => import(/* webpackChunkName: "code" */ '../views/Code.vue'),},

这是在导航栏中的路由配置，那么在页面中如何通过路由跳转页面呢？在我们的登录页面有获取验证码的功能，需要跳转到验证码页面如何实现呢？
首先我们需要绑定点击事件，具体如下：

<button :disabled="disabled" :class="[btnBg? 'active':'']" @click="getCode">获取短信验证码</button>

在JavaScript中定义函数实现跳转，如下：

<script>
export default {name: 'Register',data() {return {telErea: '',showMask: false,disabled: true,btnBg: false,phone: '  ',};},methods: {back() {this.$router.push({ path: '/index' });},},
};
</script>

【温馨提示】在这里跳转页面我们使用this.$router.push实现。

完成效果

结束语

本章节主要介绍了注册、登录、验证码等相关内容，若有疑问或不足之处，欢迎留言讨论。

项目仓库

项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习讨论，共同完善本项目。
项目地址：GitHub

上一篇：评论列表功能
下一篇：用户信息页面功能

vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能相关推荐

vue.js项目实战运用篇之抖音视频APP-第十五节：朋友页面功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第二节：项目基础架构搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第八节：视频播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第一节：项目环境搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第十节：评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第六节：首页视频详情功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第九节：视频上滑下拉播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...

vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能

第十一节：注册登录及验证码功能

功能分析

功能实现

注册页面布局及按钮动态样式

登录页面布局及按钮动态样式

验证码页面布局及按钮动态样式

绑定等功能路由

完成效果

结束语

项目仓库

vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能相关推荐

最新文章

热门文章

vue.js项目实战运用篇之抖音视频APP-第十一节： 注册登录及验证码功能

第十一节： 注册登录及验证码功能

功能分析

功能实现

注册页面布局及按钮动态样式

登录页面布局及按钮动态样式

验证码页面布局及按钮动态样式

绑定等功能路由

完成效果

结束语

项目仓库

vue.js项目实战运用篇之抖音视频APP-第十一节： 注册登录及验证码功能相关推荐

最新文章

热门文章

vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能

第十一节：注册登录及验证码功能

vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能相关推荐