阅读时间预计5分钟,干货满满,记得点赞加收藏哦😄
一、写在前面
各位掘友久等了,最近在写Vue全家桶+Vant从零开发搭建电商App实战项目,项目基本完结,后面会不定期分享出来,期待各位掘友的关注。
二、注册登录
注册登录,几乎是所有电商App必备模块,正好今天想把这块知识拆出来,详尽的写下来了,用过掘金的小伙伴都知道,掘金PC端的登录界面非常的萌,当你输入账号的时候萌猫会很开心,输入密码的时候,萌猫会捂眼睛,看到这个可爱的设计,着实让我喜欢,所以我就借鉴了掘金的萌猫图写了个登录注册模块,以下是完整UI.
三、整体UI搭建思路
UI部分非常的简单,整体就是最外层一个大盒子放一张图片,里面放一张小盒子设备边框圆角,然后把萌猫定位到小盒子的顶部中间位置,然后借助Vant来完成相关输入框,按钮的搭建.
四、Vant 使用
Vant是有赞开源的很适合做电商App的UI组件,用起来非常爽,我整个项目都采用Vant UI搭建,风格统一,使用简单方便. 首先将Vant引入到项目中,建议创建一个单独的文件来管理Vant的组件引入模块,按需加载,原则是用哪个就加载哪个.
注册登录的切换用到了Vant的标签页组件,快速的实现登录和注册页面的切换。
Vant tab按照文档来,非常的简单和好用。
输入框用到了Vant的Field组件Vant Field
按钮用到了Vant的Button组件Vant Button
五、萌猫切换
萌猫根据你所在的输入框不同切换不同的样式,其实就是三张图片的切换,要么一次把三张图片都加载到页面,然后通过v-show
的方式来控制他们的显示,这种方式感觉有点麻烦,我采用数据驱动界面的方式,点击到哪个位置,就让img
标签来加载哪张图片.
// 改变萌猫
changeImage (index) {
if (index == 0) {
this.imageURL = require('./../../images/login/greeting.png')
} else if (index == 1) {
this.imageURL = require('./../../images/login/blindfold.png')
} else {
this.imageURL = require('./../../images/login/normal.png')
}
},
六、倒计时
倒计时其实就是个定时器,先设置好总时长,然后每秒减一,直到减到0,然后恢复按钮点击的状态.
// 发送手机验证码
sendVerifyCode () {
Toast({
message: '发送验证码',
duration: 800
});
this.countDown = 60;
this.timeIntervalID = setInterval(() => {
this.countDown--;
// 如果减到0 则清除定时器
if (this.countDown == 0) {
clearInterval(this.timeIntervalID);
}
}, 1000)
}
七、手机号码正则验证
通过计算属性来验证输入的手机号码是否正确,然后在合适的位置调用这个计算属性就可以
computed: {
// 手机号码正确验证
phoneNumVerify () {
return /[1][3,4,5,6,7,8][0-9]{9}$/.test(this.tel_registered);
}
},
八、验证码模块
验证码其实就是img
标签请求接口获取图片,当点击图片的时候再次请求获取最新的图片.
// 切换验证码
getCaptcha () {
// 获取验证码的标签
let captchaEle = this.$refs.captcha;
this.$set(captchaEle, 'src', 'http://192.168.0.1/web/xlmc/api/captcha?time=' + new Date());
},
九、总结
注册登录仅仅是整个项目的一部分,先分享出来,后面会将整个完整的电商项目分享出来,希望大家能点赞加关注,你的点赞能让更多的人一起学习,一起进步😄
十、完整电商项目
首页模块
分类模块
吃什么模块
购物车模块
个人中心模块
往期分享链接
-
Vue甜小白系列专栏:
-
每周一道算法题系列
最后感谢您的关注!
我的GitHub,希望能得到你的小星星~
希望我的分享对你能有帮助,有不正确的地方也希望得到您的勘误!本人将不胜感激,另外如果你想获取前端整期学习视频和资料扫一扫下面的二维码,回复学习即可,也希望在前端进阶的路上,我们一起成长,一起进步!