717

A Vue.js project

建立

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

技术栈

• vue-simple+vue+vuex（核心框架）
  • express（用于模拟后台服务 模拟接口）
  • mint ui（用于完成一些基本的效果）
  • jsonwebtoken（用户基本信息加密）
  • axios（请求）

功能点分析

• 登陆
  • 用户默认进来会显示首页,其设计目的在于可以让用户先看到商品,是否能够吸引用户,用户看到所吸引的商品之后点击加入购物车时,提醒用户还没有登陆,跳转至登陆页面.
• 注册
  • 如果用后没有账号,注册页面进行用户的注册,随机返回一个四位数的验证码,用户在注册时必须按照要求来,不可随意填写手机号,这一点用到了正则匹配,一切就绪之后提醒用户注册成功跳转至登陆页面进行登陆.
• 主页
  • 主页作为吸引用户眼球的地方,自然要做的炫一点,商品尽可能的也是把最好的展示在最明显的地方,用户进入页面会看到 mint-ui 框架的轮播图,其次往下加载商品的时候,防止用户网慢焦急的情绪出现,初次加载之后会用keep-alive 缓存起来 ,一方面用户读取数据更快,另一方面也解决了服务器的压力,再加上采用了图片懒加载功能,告诉用户商品已经在加载了,只需等待几秒即可,用户每次滑动页面数据将会进行不同的请求,直到数据请求完毕告诉用户,已经到底部了,滑动过程中用户如果遇到喜欢的商品,在已经登录的情况下,可以加入的购物车,核心在于vuex管理数据更方便.
• 分类
  • 分类页面的技术点大致是简单得tab切换,左边的数据通过请求线上数据渲染,右边则根据左边的下标去请求本地数据,做到传0就是第一条数据,传1就是第二条数据,在生命周期里要做到先执行,不能让用户看到空白的页面,不利于页面的友好,右边数据中的图片也要采用懒加载技术.
• 购物车
  • 购物车的功能是不能不重视的,这关系到用户的利益问题,在这方面数据完全交给vuex去管理,自然实行起来很方便,功能点在于 用户全选 单选 减加数量 金钱的叠加,以及用户不想要这条商品的时候可以删除.全选的按钮样式自己写 通过控制class类名的方式判断是非选中 状态则是通过vuex中的checked控制。
• 我的
  • 我的页面中主要是地址管理,点击我的页面时,通过路由拦截判断用户是否已经存在token,如果token不存在的话则路由跳转至登陆页面 登陆之后再显示我的页面 如果已经存在token那就直接显示登陆页面 继续用户添加地址和订单的处理.