Vue电商项目-登录注册仿掘金可爱萌猫

最新推荐文章于 2023-06-11 00:35:05 发布

置顶极客James

最新推荐文章于 2023-06-11 00:35:05 发布

阅读量1.6k

点赞数 4

分类专栏： Vue入门 Vue.js 前端开发文章标签： vue.js 前端开发

本文链接：https://blog.csdn.net/zc639143029/article/details/103009511

版权

前端开发同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

Vue.js

8 篇文章 1 订阅

订阅专栏

Vue入门

1 篇文章 0 订阅

订阅专栏

🎉Vue构建大型单页面电商应用开源啦!点我看源码🚀🚀

阅读时间预计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());
    },

九、总结

注册登录仅仅是整个项目的一部分,先分享出来,后面会将整个完整的电商项目分享出来,希望大家能点赞加关注,你的点赞能让更多的人一起学习,一起进步😄

十、完整电商项目

首页模块

分类模块

吃什么模块

购物车模块

个人中心模块

往期分享链接

最后感谢您的关注!

我的GitHub,希望能得到你的小星星~

希望我的分享对你能有帮助,有不正确的地方也希望得到您的勘误!本人将不胜感激,另外如果你想获取前端整期学习视频和资料扫一扫下面的二维码,回复学习即可,也希望在前端进阶的路上,我们一起成长,一起进步!

极客James

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
2
评论
Vue电商项目-登录注册仿掘金可爱萌猫

阅读时间预计5分钟,干货满满,记得点赞加收藏哦????原文链接一、写在前面各位掘友久等了,最近在写Vue全家桶+Vant从零开发搭建电商App实战项目,项目基本完结,后面会不定期分享出来,期待各位掘友的关注。二、注册登录注册登录,几乎是所有电商App必备模块,正好今天想把这块知识拆出来,详尽的写下来了,用过掘金的小伙伴都知道,掘金PC端的登录界面非常的萌,当你输入账号的时候萌猫会很开心,输入...
复制链接

扫一扫