Skip to content

ffy1124/717

Repository files navigation

717商城项目总结

项目背景

  • 717商城别名为龙宝溯源商城,有别于淘宝、天猫、京东、1号商城等平台.它只做安全食品的线上销售平台,创建并成熟了核心的安全食品的审核标准,培养了大批专注购买安全食品的会员。它是国内第一家也是唯一一家专注安全食品的电商平台,独立于天猫、京东等这些综合性平台之外。717商城同时给商家和客户提供了一个诚信安全可靠的安全食品展示和交易平台。717商城的会员已经形成了买安全食品必上龙宝溯源商城的习惯。这是其他综合性平台不能为商家提供的新客户和新市场。

项目技术点

  1. webpack 构建工具,用于加载各种模块
  2. vue 用于项目的页面结构搭建
  3. vuex 用于多个组件间数据共享
  4. vue-router 用于页面跳转路由,将其他组件渲染到其他组件
  5. Mint UI 基于 Vue.js 的移动端组件库

实现的功能部分

  • 在这个项目中,我主要负责的是页面首页,分类页面,购物车页面以及邮寄地址页面。 首先运用了webpack+node配置了项目运行环境、一些模块加载以及项目打包,其次就是使用Mint ui来进行整个页面的排版加部署,页面的跳转使用的是vue-router,进行单页面应用,同时具有多级路由嵌套,体现出项目的层次感,将组件渲染到其他页面,此外用nodejs搭建了本地服务,通过请求线上接口获取首页数据,并且通过滚动事件触发上拉加载事件加载更多,通过接口传递参数获取不同的数据。分类页,通过模拟后台数据请求接口数据实现tab切换。主要是主页商品添加购物车,与购物车页的交互,通过vuex单页面共享数据,点击小购物车判断存在两种情况。通过判断cookie中的token值是否存在,来决定商品是否成功添加购物车,如果不存在则跳转登录页面重新登录,存在则提示购买成功,通过vuex将所选择的商品数据unshift进入vuex定义的数组,跳转购物车页,通过vuex共享数据,渲染出页面,以及一些简单的单选全选单总价计算等。登录界面判断用户名与密码是否正确以及还有cookie的获取与设置。邮寄地址页,通过接口请求数据渲染页面,以及进行添加、删除地址等功能。添加邮寄地址中有三级联动,通过判断选中的值来渲染多选菜单。

问题总结

  • 在首页下拉加载,根据接口传递的参数获取相对应的数据,但是因为组件循环的问题获取数据就要循环几次,所以通过一个变量来控制,为false让时间停止为true事件继续
  • 在做购物车的时候,因为是vuex控制数据,所以在渲染页面的时候,要封装组件,减少耦合度,避免出现选中一个其他选项都被选中或同时加减的情况。
  • 在首页中借用第三方包swiper,让它自动轮播时需要定时器解决缓存问题
  • 在首页中,选择商品添加购物车以及点击商品进入详情页,会有一个事件冒泡的问题,用vue的修饰符.stop解决

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published