小米商城项目解析（完）

一、项目架构
二、项目技术栈
三、项目所有模块及技术点
- 跨域
- 登录组件
- - 1. 路由鉴权
  - 2.登录校验
- 首页
- - 1. 顶部组件
  - 2. 底部组件
  - 3. tab栏
  - 4. 轮播图
- 商品全局组件
- - 1.注册全局组件
  - 2.点击更多
- 全部商品
- - 1.tabs
  - 2.分页
- 详情
- - 1.加入购物车
  - 2. 添加收藏
- 购物车
- - 1.全选
  - 2.删除
  - 3.总价格和总数量
- 我的订单
- 我的收藏
- 确认订单

一、项目架构

封装各个模块的api

例如：

import request from '@/utils/request'
export default {//请求收藏接口getCollect(data) {return request({url: '/api/user/collect/getCollect',method: 'post',data: data})},//删除收藏deleteCollect(data) {return request({url: '/api/user/collect/deleteCollect',method: 'post',data: data})},
}

整理模块和命名规范

路由及懒加载

const routes = [{path: '/',name: 'Home',component: Home,// *重定向redirect: 'HomePage'},//* 首页{path: '/Shoppe',name: 'Shoppe',component: () => import(/* webpackChunkName: "首页" */ '../views/Shoppe.vue'),children: [{path: '/HomePage',name: 'HomePage',component: () => import(/* webpackChunkName: "首页" */ '../views/HomePage.vue'),},{path: '/goods',name: 'goods',component: () => import(/* webpackChunkName: "首页" */ '../views/Goods.vue'),meta: {break: ['全部商品', '分类'],keepAlive: true,}},{path: '/details',name: 'details',component: () => import(/* webpackChunkName: "首页" */ '../components/module/Details.vue'),},{path: '/myerror',name: 'myerror',component: () => import(/* webpackChunkName: "断网" */ '../components/module/myError.vue')},{path: '/collect',name: 'Collect',component: () => import(/* webpackChunkName: "收藏" */ '../views/Collect.vue')},{path: '/shopping',name: 'shopping',component: () => import(/* webpackChunkName: "购物车" */ '../views/Shopping.vue')},{path: '/confirmOrder',name: 'confirmOrder',component: () => import(/* webpackChunkName: "订单" */ '../views/ConfirmOrder.vue')},{path: '/Order',name: 'Order',component: () => import(/* webpackChunkName: "订单" */ '../views/Order.vue')},]}
]

二、项目技术栈

axios
element-ui
vuex
xuex-persist
node-sass
vue-cli

三、项目所有模块及技术点

跨域

通过proxy代理解决跨域

module.exports = {publicPath: './',//*再开开devServer: {open: true,proxy: {'/api':{target: 'http://39.100.7.70:81/',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

登录组件

1. 路由鉴权

路由的鉴权，在没有登录的时候跳转购物车，我的收藏时调用vuex中的方法，弹出登录框

//*路由鉴权
router.beforeEach((to, from, next) => {//*判断有没有登录if (store.state.token == "") {//*去哪些页面if (to.path == "/collect" || to.path == "/shopping") {//*没有登陆就发送vuexstore.commit("uplogin")}}next()
})

2.登录校验

 registerLogin: {userName: [{ validator: validateLogin1, required: true, trigger: "blur" },{pattern: /^[a-zA-Z]([-_a-zA-Z0-9]{5,16})$/,message: "字母开头,长度5-16之间,允许字母数字下划线",},],password: [{ validator: validateLogin2, trigger: "blur" }],},

首页

1. 顶部组件

登录后如果购物车内总条数大于1时，购物车颜色高亮，
登录弹出框需要拆成组件，当没登陆时需要弹出

2. 底部组件

布局及样式
精灵图使用

.elvesFigure {width: 40px;height: 40px;background: url("../../assets/us-icon.png") no-repeat 0px 0px; /* 第一个图标*/}

3. tab栏

点击进行相应的跳转

<el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"active-text-color="red"router><el-menu-item index="/">首页</el-menu-item><el-menu-item index="goods">全部商品</el-menu-item><el-menu-item index="3">关于我们</el-menu-item></el-menu>

搜索框，路由传参，通过监听$route获取数据

determineSearch() {this.$router.push({path: `/goods?search=${this.search}`,});},

$route(val) {if (val.query.categoryID) {this.categoryID = val.query.categoryID;this.getProductByCategory();return;}if (val.query.search) {this.search = val.query.search;this.getProductBySearch();}},

4. 轮播图

 <div class="slideshow"><el-carousel height="460px"><el-carousel-item v-for="(item, index) in carouselData" :key="index"><img class="slideshowImg" :src="'api' + item.imgPath" alt="" /></el-carousel-item></el-carousel></div>

商品全局组件

相应布局

1.注册全局组件


//注册全局组件
import mymodel from './components/module/myModel'
Vue.component(mymodel.name, mymodel)

2.点击更多

BrowseMore() {let arr = [];this.categoryName.forEach((item) => {arr.push(item.category_id);});function data(arr) {return [...new Set(arr)];}let list = data(arr);this.$router.push({path: "/goods?categoryID",query: { categoryID: list },});},

全部商品

1.tabs

<el-tabs v-model="activeName" type="card"><el-tab-panev-for="item in tabList":key="item.category_id":label="item.category_name":name="'' + item.category_id"></el-tab-pane></el-tabs>

将全局组件渲染的数组换成全部商品里的数据

<mymodelstyle="lll":sTyle="{ width: '19%' }":categoryName="AllProduct":flags="false"></mymodel>

2.分页

<el-pagination@current-change="currentChange":page-size="pageSize"backgroundlayout="prev, pager, next":total="total"></el-pagination>

切换分页

currentChange(currentPage) {this.currentPage = currentPage;},

详情

基本布局

1.加入购物车

加入购物车需要判断用户有无登录token，如果没有需要弹出登录框

//*加入购物车判断async addShopping() {if (this.$store.state.token == "") {//*发送参数,显示弹框this.$store.commit("uplogin");} else {//*请求数据let { data: item } = await ShoppingApi.addShoppingCart({user_id: this.$store.state.userId,product_id: this.DetailsData.product_id,});this.$notify({title: "成功",message: item.msg,type: "success",});}},

2. 添加收藏

思路同上，判断有无登录

//*添加收藏async fond() {if (this.$store.state.token == "") {this.$store.commit("uplogin");} else {let { data: item } = await DetailsApi.addCollect({user_id: this.$store.state.userId,product_id: this.DetailsData.product_id,});// 添加收藏成功if (item.code == "001") {this.$notify({title: "成功",message: "添加收藏成功",type: "success",});} else {this.$notify.error({title: "错误",message: item.msg,});}}},

购物车

购物车为空时
购物车总条数 > 1

1.全选

elementui 自带全选反选，只需将选中的数据发送到vuex中

//*点击单选全选，发送数据到vuex，计算handleSelectionChange(val) {this.multipleSelection = val;if (val.length > 0) {this.flag = true;} else {this.flag = false;}this.$store.commit("handleSelectionChange", val);},

2.删除

删除选中的购物车数据

// *删除async deleteShoppingCart(data) {let { data: item } = await shoppingApi.deleteShoppingCart({user_id: this.$store.state.userId,product_id: data.productID,});if (item.code == "001") {//   删除购物车成功this.$notify({title: "成功",message: item.msg,type: "success",});this.getShoppingCart();}},

3.总价格和总数量

计算属性

getters: {//*总价格totals(state) {let amounts = 0state.handleSelectionChange.forEach(item => {amounts += item.price * item.num})return amounts},//*总个数totalQuantity(state) {let amounts = 0state.handleSelectionChange.forEach(item => {amounts += item.num})return amounts},},

在页面中调用计算属性

<span>{{this.$store.getters.totalQuantity}}</span>

我的订单

渲染

我的收藏

更换全局组件数据

替换全局组件数据

<mymodelstyle="margin-top: 18px"@collectList="collectList":CloseHide="true":sTyle="{ width: '19%' }":categoryName="collectionData":flags="false"></mymodel>

确认订单

数据渲染
结算成功后跳转我的订单

async addOrder() {let { data: item } = await comfirmorderApi.addOrder({products: this.multipleSelection,user_id: this.$store.state.userId,});if (item.code == "001") {this.$notify({title: "成功",message: item.msg,type: "success",});this.$router.push({path: `/Order`,});}},

小米商城项目解析（完）相关推荐

Office文件的奥秘——.NET平台下不借助Office实现Word、Powerpoint等文件的解析(完)...
原文 http://www.cnblogs.com/mayswind/archive/2013/04/01/2991271.html [题外话] 这是这个系列的最后一篇文章了,为了不让自己觉得少点什么 ...
Github项目解析（九）--实现Activity跳转动画的五种方式
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请标明出处:一片枫叶的专栏上一篇文章中我们讲解了在Activity ...
html获取此次点击的id,github项目解析（八）--Activity启动过程中获取组件宽高的三种方式...
转载请标明出处:1片枫叶的专栏上1个github小项目中我们介绍了避免按钮重复点击的小框架,其实现的核心逻辑是重写OnClickListener的onClick方法,添加避免重复点击的逻辑,即为第2 ...
怎么部署项目解析域名_内部解析服务器部署
怎么部署项目解析域名任务概述: (Task Overview :) Here I'm trying to provide an solution for on-premise application ...
解析完CAD安装包后，如何添加语言？手把手教你~
2021年,AutoCAD新增了中文支持,这对于外语不好的小伙伴可谓是久旱逢甘霖.由于语音包需要手动安装,很多小伙伴在解析完CAD安装包后对此是束手无策.今天就教你如何下载适用自己的语言产品并管理语言 ...
视频教程-大型Java项目视频教程_王勇老师DRP项目教程完整版292集-Java
大型Java项目视频教程_王勇老师DRP项目教程完整版292集动力节点王勇老师,CCTV<影响力对话>栏目特约嘉宾,Java培训知名讲师,中国Java培训领军人物,北京动力节点创始人,董 ...
MyBatis源码：原来 resultMap 解析完是这样
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者:阿进的写字台 www.cnblogs.com/homejim ...
resultmap为list_MyBatis源码：原来 resultMap 解析完是这样
(给ImportNew加星标,提高Java技能) 作者:阿进的写字台 www.cnblogs.com/homejim/p/9853703.html 目录 1 两个基础类 1.1 列映射类ResultM ...
《R语言数据挖掘：实用项目解析》——第2章，第2.9节无参数方法
本节书摘来自华章出版社<R语言数据挖掘:实用项目解析>一书中的第2章,第2.9节无参数方法,作者［印度］普拉迪帕塔·米什拉(Pradeepta Mishra),更多章节内容可以访问云栖社区 ...

小米商城项目解析（完）

目录

一、项目架构

二、项目技术栈

三、项目所有模块及技术点

跨域

登录组件

1. 路由鉴权

2.登录校验

首页

1. 顶部组件

2. 底部组件

3. tab栏

4. 轮播图

商品全局组件

1.注册全局组件

2.点击更多

全部商品

1.tabs

2.分页

详情

1.加入购物车

2. 添加收藏

购物车

1.全选

2.删除

3.总价格和总数量

我的订单

我的收藏

确认订单

小米商城项目解析（完）相关推荐

最新文章

热门文章

小米商城项目解析（完）

目录

一、 项目架构

二、项目技术栈

三、项目所有模块及技术点

跨域

登录组件

1. 路由鉴权

2.登录校验

首页

1. 顶部组件

2. 底部组件

3. tab栏

4. 轮播图

商品全局组件

1.注册全局组件

2.点击更多

全部商品

1.tabs

2.分页

详情

1.加入购物车

2. 添加收藏

购物车

1.全选

2.删除

3.总价格和总数量

我的订单

我的收藏

确认订单

小米商城项目解析（完）相关推荐

最新文章

热门文章

一、项目架构