小米商城项目(下)

上篇博客我们对小米商城的这个项目模块进行了一下简单的分析,还有对各个页面的效果图的这个基本页面有了一个大致的影响,相信大家已经开始跃跃欲试了,我先把我的项目地址奉上,感兴趣的话可以去git上面看一看结合我一会发的代码位置相对应的板块去简单分析一下,相信你会有所收获https://gitee.com/kk23851/vue_shoppe_kang

老规矩摆上逻辑图

在项目开始初期我们要先配置一下跨域,在项目根目录下创建一个vue.config.js的文件,配置代码如下:

/*
 * @Description: 配置文件
 */
module.exports = {
     
  publicPath: './',
  devServer: {
     
    open: true,
    proxy: {
     
      '/api': {
     
        target: 'http://39.100.7.70:81/', // 线上后端地址
        changeOrigin: true, //允许跨域
        pathRewrite: {
     
          '^/api': ''
        }
      }
    }
  }
} 

如图:

1.首页布局

首页布局分为三个部分,分别是头部,中间部分,脚部(首页主要是对商品的展示，有轮播图展示推荐的商品，分类别对热门商品进行展示)在这个页面中需要对图片进行一下轮播,还有对商品列表中商品实现点击进入详情页的这么一个效果,直接上代码位置:(由于是用api封装请求做的,所以看的时候记得找到api文件里面看)

2.用户登录,用户注册

技术点:Element-ui,正则表达式(页面使用了element-ui的Dialog实现弹出对话框的效果，登录按钮设置在App.vue根组件，通过vuex中的showLogin状态控制登录框是否显示。),这个地方的难点在于这个用户注册时的表单验证判断这个用户账号是否存在或者密码和再次输入密码是否一致,下面附上代码位置

3.全部商品

全部商品页面集成了全部商品展示、商品分类查询，以及根据关键字搜索商品结果展示,这个页面需要注意全部数据要和这个分类数据写成一个数据利用判断语句来判断什么时候该请求什么样的接口数据来渲染这个页面,附上代码位置:

4.商品详情

技术点:Vue-Router(商品详情页主要是对某个商品的详细信息进行展示，用户可以在这里把喜欢的商品加入购物车或收藏列表。)就是当点击加入购物车时商品添加到购物车,当购物车有这个商品时则数量加一,当商品数量答到上线时则提醒数量达到上限,点击喜欢则添加到我的收藏页面,当我的收藏页面有这个商品是则不能继续添加,在这个详情页面需要注意一点,因为很多同学写的时候都会碰到一个问题,就是你分明登录了,但是进行添加的时候还是会显示用户没有登录,这时候你就需要反思一下你的这个参数是否请求到了,要通过打印反复的找到正确的用户id才可以获取导数据,下面附上代码位置

5.我的收藏

技术点:登录鉴权,vuex(用户在商品的详情页，可以通过点击加入 喜欢 按钮，把喜欢的商品加入到收藏列表。)在这个页面需要通过接口获取到收藏页面的数据进行渲染以及滑入删除标签出现,点击进行删除等效果,附上代码位置

6.购物车

技术点:登录鉴权,vuex,(购物车采用vuex实现),这是整个项目中最需要逻辑的一个地方,通过vuex的一系列操作来对购物车中的数据实现增删改查等功能,在写的过程中我也遇到了不少问题,比如由于vuex中弄了数据持久化,我点击全选时商品选中后总价格和选中商品数量都会随着更新但是取消全选时会发现总价格和选中商品数量不变,经过好多次碰撞,我的解决思路是在router.js中通过单个路由守卫来判断他是否是刚刚进入购物车页面如果是则把选中商品的数据清空,为什么这样子做呢?因为点击刷新时就好比与重新进入了页面,我这种想法可能和牵强但是效果实现了,如果你有其他好的思路可以私信我,下来附上代码位置

7.结算页面

技术点:vuex(在购物车中点击结算把选中的商品提交到结算页面,点击购买提交到我的订单),这个没多大技术含量,就是把通过刚刚从购物车提交上来的数据对页面进行一个渲染就好了,附上代码位置

8.我的订单

这个页面就是通过在结算页面点击结算然后把那些数据给提交上来对页面进行了一个渲染,唯一注意的就是有个时间格式化,我是利用的moment然后在全局过滤器进行了一下格式化,附上代码位置:

关于我的页面就不说了,就是一些html和css的样式,没什么好说的,好了,小米商城的项目就说这么多了,转眼五一度快过去四天了,祝小伙伴玩得开心,下期再见!