Vue 学习记录（八）--- 智慧商城项目

---

theme: channing-cyan

Vue 核心技术与实战

智慧商城项目

项目收获

• 完整电商购物的业务流程
• 组件库 vant（按需导入）
• 移动端 vw 适配
• request 请求方法封装
• storage 存储模块封装
• api 请求模块封装
• 请求响应拦截器
• 嵌套路由配置
• 路由导航守卫
• 路由跳转传参
• vuex 分模块管理数据
• 项目打包 & 优化

创建项目

• 安装脚手架
• 创建项目
• 选择自定义
• 

调整初始化项目目录

• 将目录调整为符合企业规范的项目目录
• 
• 步骤
  1. 删除多余的文件
  2. 修改路由配置和 App.vue
  3. 新增两个目录 api / utils
     1. api 接口模块：发送 ajax 请求的接口模块
     2. utils 工具模块：自己封装的一些工具方法模块

vant 组件库

• 第三方组件库 vant-ui
• 组件库：第三方封装好了很多的组件，整合到一起就是一个组件库
• 官网：vant-ui.github.io/vant-weapp/…
• vant2 版本支持 vue2、vant3 & vant4 版本支持 vue3
• 其它组件库
  • PC端：element-ui（饿了么）、ant-design-vue（阿里巴巴）
  • 移动端：vant-ui、Mint UI（饿了么）、Cube UI（滴滴）

vant 按需导入

• 步骤：
  1. 查阅官方文档
  2. 安装 vant-ui
     • yarn add vant@latest-v2
  3. 安装插件
     • npm i babel-plugin-import -D
  4. bable.config.js 中配置
     • 
  5. main.js 按需导入注册
     • 
  6. 测试使用
     • 
     • 

项目中的 vw 适配

• 基于 postcss 插件，实现项目 vw 适配
• postcss 会自动将 px 转换为 vw
• 步骤：
  1. 安装插件
     • yarn add postcss-px-to-viewport@1.1.1 -D
  2. 根目录新建 postcss.config.js 文件，填入配置
     • 

路由设计配置

• 分析项目页面，设计路由，设置一级路由
• 只要是单个页面并且独立展示的，都是一级路由
• 

使用 vant 组件，实现底部导航

• 
• 步骤
  1. vant-ui.js 按需引入
     • 在 vant 导航组件中找到 tabbar 复制粘贴到 vant-ui.js 中即可
     • 
  2. layout.vue 粘贴官方代码
     • 
  3. 修改文字、图标、颜色
     • 可根据自己的需求修改标签和图标
     • 在组件库中找到想要的图标样式，将名称赋值给 icon 属性即可
     • 

配置二级路由

• 基于底部导航，配置二级路由
• 步骤：
  1. 配置二级路由（children 属性配置子路由）
  • 
  2. 配置导航链接
     • vant 标签栏支持路由模式
     • 
     • 
  3. 配置路由出口
     • 
  4. 当访问 '/' 时重定向到 '/home'
     • 

登录页静态布局

1. 准备工作
   • 新建 styles/common.less 重置默认样式
   • main.js 中导入 common.less
   • 图片素材拷贝到 assets 目录
2. 登录页静态布局编写
   • 头部组件（vant）（NavBar）
   • 通用样式覆盖
   • 其他静态结构编写

• 效果：
• 

request 模块 - axios 封装

• 将 axios 请求方法封装到 request 模块
• 一般会对 axios 进行一些配置(配置基础地址，请求响应拦截器等)
• 所以项目开发中，都会对 axios 进行基本的二次封装，单独封装到一个 request 模块中，便于使用维护
• 步骤：

1. 安装 axios
2. 新建 request 模块 utils/request.js
3. 创建实例和配置 并 导出
4. 测试使用

图形验证码功能

• 基于请求回来的 base64 图片，实现图形验证码功能
• 说明：
  1. 图形验证码，本质就是一个请求回来的图片
  2. 用户输入图形验证码，用于强制人机交互，可以抵御机器自动化攻击
• 需求：
  1. 动态将请求回来的 base64 图片，解析渲染出来
  2. 点击验证码图片盒子，要刷新验证码
• 
• 

api 接口模块 - 封装图片验证码接口

• 之前模式的弊端：
  1. 页面中充斥着请求的代码，可阅读性不高
  2. 相同的请求没有复用
  3. 请求没有统一管理
• 将请求封装为方法，统一存放到 api 模块，与页面实现分离
  • 
• 封装为 api 模块的好处
  1. 请求与页面逻辑分离
  2. 相同的请求可以直接复用
  3. 请求进行了统一管理
• 步骤
  1. 新建请求模块
     • 在 api/login.js
  2. 封装请求函数
     • 
  3. 页面中导入调用
     • 

Toast 轻提示

• 参考 vant 官方文档
• vant 组件库中的 Toast 轻提示
• 步骤
  1. 注册安装
  • 
  2. 使用方式
  3. 导入调用（任意地方）
  • 
  • 通过 this 调用 （组件内）
  • 本质：将方法注册挂载到了 Vue 原型上 Vue.prototype.$toast = xxx
  • this.$toast('提示内容')
  • 

短信验证倒计时 - 点击按钮，实现倒计时效果

• 步骤
  1. 准备 data 数据
  • 
  2. 给按钮注册点击事件、并且切换显示文字
  • 
  3. 开启倒计时
  • 
  4. 离开页面时清除倒计时
  • 

短信验证倒计时 - 倒计时之前的校验处理(手机号、验证码)

• 步骤
  1. 设置变量并使用 v-model 绑定变量
  • 
  • 
  2. methods 中封装校验方法（正则表达式）
  • 
  3. 在发送手机验证码前进行校验
  • 

短信验证倒计时 - 封装短信验证接口，发送请求添加提示

• 步骤
  1. 封装接口：
  • 
  • 
  2. 调用接口
  • 

登录功能

• 封装 api 登录接口，实现登录

1. 阅读接口文档，封装登录接口

• 

2. 登录前的校验（手机号、图形验证码、短信验证码）
3. 调用接口并发送请求

• 

响应拦截器统一处理错误提示

• 响应拦截器是我们拿到数据的第一个数据流转站，可以在里面统一处理错误
• 
• 配置拦截器
• 

登录权证信息存储

• vuex 构建 user 模块存储登录权证（token $ userId）
• 步骤
  1. 构建 user 模块
  • 
  2. 挂载到 vuex
  • 
  3. 提供 mutations
  • 
  4. 页面中 commit 调用
  • 

storage 存储模块 - vuex 持久化处理

• 封装 storage 存储模块，利用本地存储，进行 vuex 持久化处理
• 存在的问题
  1. vuex 中的数据在页面刷新后丢失
  2. 每次存取操作太长太麻烦
  • 
• 封装为 storage 模块后
  • 
  • 
• 步骤：
  1. 封装 storage 方法
  • 
  2. 在 vuex 的 user 子模块中调用方法
  • 
  3. 查看效果
  • 

添加请求 loading 效果

• 在每次请求后台时，添加 loading 效果
• 一次请求的结果可能需要一段时间后才能回来，此时给用户添加 loading 提示
• 
• 添加 loading 提示的好处
  1. 节流处理：防止用户在一次请求还没回之前，多次点击，发送无效请求
  2. 提升用户体验
• 步骤：
  1. 请求拦截器中，每次请求时打开 loading
  • 
  2. 响应拦截器中，每次响应时打开 loading
  • 

页面访问拦截

• 说明：本项目大部分页面游客都可以直接访问，如遇到需要登录才能进行的操作，提示并跳转到登录
• 对于支付页、订单页等，必须是登录的用户才能访问，游客不能进入该页面，需要拦截未登录的用户
• 路由导肮守卫 - 全局前置守卫
• 官网：v3.router.vuejs.org/zh/guide/ad…
  1. 所有的路由一旦被匹配到都会先经过全局前置守卫
  2. 只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容
  • 
  • 
• 如果不配置 next 函数，则会拦截所有页面
• 访问权限页面时，拦截和放行的关键点是看 -> 用户是否有登录权证 token
• 
• 

首页 - 静态结构准备 & 动态渲染

• 实现首页动态结构，封装接口，完成首页动态渲染
• 步骤：
  1. 静态结构
     • vant组件
     • 
     • 
  2. 封装接口
     • 在 api/home.js 中封装请求接口
     • 
  3. 页面调用
     • 在 created 中发送请求并在控制台输出，根据输出结果解构数据
     • 
     • 
     • 在 data 中准备数据
     • 
  4. 动态渲染
     • 轮播图动态渲染
     • 
     • 导航动态渲染
     • 
     • 商品动态渲染
     • 由于商品界面使用了子组件单独封装 GoodsItem
     • 因此商品的动态渲染需要用到 父传子
     • 
     • 
     • 

搜索 - 历史记录管理

• 构建搜索页静态布局，完成历史记录的管理
• 需求
  1. 搜索历史的基本渲染
  2. 搜索历史的添加（追加）
     • 点击搜索按钮或最近搜索的条目，都能进行搜索
     • 若之前没有相同搜索关键字，则直接追加到最前面
     • 若之前已存在相同搜索关键字，将原来的关键字移除，再追加
     • 
     • 
     • 
  3. 清空历史：添加清空图标，可以清空历史记录
     • 
     • 
  4. 持久化：搜索历史需要持久化存储，刷新后确保不丢失
     • 
     • 
     • 
     • 

搜索列表 - 静态布局 & 渲染

• 实现搜索列表页静态结构，封装接口，完成搜索列表页的渲染
• 步骤
  1. 编写静态结构
     • 效果
     • 
  2. 封装接口
     • 
  3. 获取参数，调用接口
     • 
  4. 动态渲染
     • 

商品详情页 - 静态布局 && 渲染

• 实现商品详情静态结构，封装接口，完成商品详情的渲染
• 步骤
  1. 静态结构
     • 
  2. 封装接口
     • 
  3. 动态路由获取参数
     • 
  4. 获取参数动态渲染
     • 调用api接口
     • 

加入购物车 - 唤起弹层

• 目标：点击加入购物车时，唤起弹层效果
• 
• 步骤
  1. 从 vant 中找到 actionSheet 组件
     • 
  2. 完善弹层结构和样式布局
     • 
     • 
  3. 根据返回的数据，动态渲染有关的信息
     • 

加入购物车 - 数字框组件的封装

• 分析：组件名 CountBox
• 

1. 静态结构，左中右三部分
   • 
   • 
2. 数字框的数字，由外部传递进来（父传子）
   • 
3. 点击 + - 号，可以修改数字（子传父）
   • 
4. 使用 v-model 实现封装（:value 和 @input 的简写）
5. 数字不能减到小于1

加入购物车 - 判断 token 添加登录提示

• 
• 思路
  • token 存在：继续加入购物车操作
  • token 不存在：提示用户未登录，引导到登录页，登录后跳回上一页
• 步骤
  1. 在 vant 组件库中找到 Dialog 组件，并了解相应的使用规则
     • 
  2. 给按钮绑定单击事件，并完善组件的文案
     • 
  3. 登录后回到商品详情页而不是首页，要加 backUrl
     • 
  4. 完善登录逻辑代码
     • 

加入购物车 - 封装接口并发送请求

• 
• 步骤
  • 在 api/cart.js 中封装接口
    • 
  • 页面中调用接口
    • 
  • 在请求头中添加 token，利用请求拦截器，只要存在 token，就将其添加到请求头中
    • 

购物车模块

• 说明
  • 购物车数据联动关系较多，且通常封装为一些小组件
  • 为了方便维护，一般都会将购物车的数据基于 vuex 进行分模块管理
• 需求分析
  • 基本静态结构
  • 构建 vuex cart模块，获取数据存储
  • 基于数据 动态渲染购物车列表
  • 封装 getters 实现动态统计
  • 全选、反选功能
  • 数字框修改数量功能
  • 编辑切换状态，删除功能
  • 空购物车处理

购物车模块 - 构建 vuex cart模块，获取数据存储

• 步骤
  • 构建 modules/cart.js, 并在 store 中注册
    • 
  • 封装 api 接口
    • 
  • 封装 actions（异步） 和 mutations（修改state）
  • 在页面中使用 this.$store.dispatch 调用 dispatch
    • 

购物车模块 - 基于数据动态渲染购物车列表

• 使用辅助函数 mapState 将 cartList 直接映射到组件的计算属性中
• 
• 然后依据数据结构进行渲染
• 

购物车模块 - 封装 getters 模块进行动态统计

• 封装 getters
  • 
• 在 getters 中也可以获取 getters
  • 
• 使用 mapGetters 进行映射
  • 
• 在页面中进行渲染
  • 
  • 

购物车模块 - 全选与反选

• 创建全选 getters

• 

• 给单项商品绑定单击事件，并在全选 getters 中判断是否所有的单项商品都选中

• 点击全选时将所有单项商品的选择框重置

• 

购物车模块 - 数字框修改数量

• 点击数字框的加减号，对购物车中的商品数量进行加减
• 
• 封装 api 接口
• 
• 注册点击事件并向 vuex 中的 action 传参
• 
• 在 action 中调用api接口
• 
• 小妙招，如何在注册点击事件时传递多个参数
• 

购物车模块 - 编辑切换状态

• 点击右上角的编辑后，右下角的结算变成删除，并且 isAllCheck = false
• 设置 isEdit 变量，并绑定单击事件，点击编辑时将 isEdit 取反
  • 
• 
• 使用 watch 监听，当 isEdit 为 true 时，调用 store 中的 mutation，改变全选状态
  • 

购物车模块 - 删除商品

• 封装 api 接口
  • 
• 给删除按钮绑定单击事件，点击时调用 actions 中的方法
  • 
  • 
• 删除成功后切换回结算
  • 

购物车模块 - 空购物车页面

• 当购物车为空或未登录时，展示
  • 
• 使用 v-if 和 v-else 控制两个盒子
  • 

订单结算台 - 页面布局与数据渲染

• 
• 封装 api 接口（获取地址列表）
  • 
• 设置相关变量和计算属性等
  • 

订单结算台 - 购物车结算

• 
• 封装 api 接口
  • 
• 跳转传递查询参数 mode 和 cartIds
  • 
• 页面中 $route.query 接收参数
  • 
• 调用接口获取数据
  • 
• 渲染数据

订单结算台 - 立即购买结算

• 

• 点击跳转传参
  • 
• 基于 mode 等参数发送请求进行渲染
• mixins
  • 功能：需要将一个组件内的功能提取为公共部分，方便其它组件使用
  • 将登录提示弹出框提取到 mixins 的 longinConfirm 中
    • 
  • 在组件中导入 mixins
    • 

订单结算台 - 提交订单

• 封装 api 接口
• 在页面中绑定单击事件并调用接口
• (参考项目文档)

订单管理页面 + 个人中心

• 退出登录功能
• 清除 vuex 中的 cart 和 user 模块信息 -（参考项目文档）

打包优化 - 打包指令及说明

• 说明：vue 脚手架知识开发过程中，协助开发的工具 -- 脚手架不参与上线
• 打包的作用
  1. 将多个文件压缩合并成一个文件
  2. 语法降级
  3. less sass ts 语法解析
  4. ...
• 打包后可以生成浏览器能够直接运行的网页 =》 即需要上线的源码
• vue 脚手架提供了打包命令，可以直接使用
• yarn build / npm run build
• 结果：会在项目的根目录自动创建文件夹 dist，dist中的文件就是打包后的文件，只需要放到服务器中即可
• 配置：默认情况下，需要放到服务器根目录打开
• 若希望在子目录中双击打开，需要在 vue.config.js 中添加 publicPath: './'

打包优化 - 路由懒加载

• 目标：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果完美把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了
• 步骤

1. 异步组件改造