黑马智慧商城项目学习笔记

智慧商城项目

• 业务功能流程
  

• 核心业务技术点
  

创建项目

基于VueCLi自定义创建项目架子

调整初始化目录

1. 删除多余文件
2. 修改路由配置和App.vue
3. 新增两个目录 api/utils
4. api接口模块：发送axios请求的接口模块
5. utils工具模块：自己封装的一些工具方法模块

vant组件库

Vue的组件库不是唯一的，一般会按照不同平台进行分类：

1. PC端：element-ui（element-plus）、ant-design-vue
2. 移动端：vant-ui、Mint UI（饿了么）、Cube UI（滴滴）

• 安装
  1. vue3安装：npm i vant -S
  2. vue2安装：npm i vant@latest-v2 -S或yarn add vant@latest-v2 -S

vant按需导入和全部导入

1. 全部导入：引入所有组件会增加代码包体积，性能低，不推荐
   ① 安装vant-ui: yarn add vant@latest-v2 -S
   ② main.js中注册：

   import Vue from 'vue'
   import Vant from 'vant'
   import 'vant/lib/index.css'
   
   Vue.use(Vant)
   

   ③ 使用测试：<van-button type="primary">主要按钮</van-button>
2. 按需导入：性能高，推荐自动按需导入
   1. 安装vant-ui: yarn add vant@latest-v2 -S
   2. 安装插件npm i babel-plugin-import -D，如果有依赖项冲突，则用npm i babel-plugin-import -D --legacy-peer-deps
   3. 配置babel.config.js文件：

   module.exports = {
     plugins: [
       ['import', {
         libraryName: 'vant',
         libraryDirectory: 'es',
         style: true
       }, 'vant']
     ]
   };
   

   4. main.js中按需导入eg:import '@/utils/vant-ui'
   5. 测试使用
   6. 提取按需导入部分到utils/vant-ui.js中，然后main.js导入
      eg:

   import { Toast } from 'vant'
   Vue.use(Toast)
   

项目中的vw适配

基于postcss插件实现项目vw适配

1. 安装插件yarn add postcss-px-to-viewport@1.1.1 -D
2. 根目录新建postcss.config.js文件并配置

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

路由设计配置

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

2. 使用vant组件库，实现底部导航tabbar

   1. vant-ui.js按需导入
   2. layout.vue粘贴官方代码
   3. 修改文字、图标、颜色
      

3. 二级路由设置

   1. 配置二级路由（规则&组件）
   2. 配置导航链接：给首页底部导航组件添加route属性，用to配置跳转链接
   3. 配置路由出口

登录页静态布局

1. 新建styles/common.less重置默认样式
2. main.js导入common.less
3. 拷贝图片素材
4. 使用vant头部组件nav-bar
5. 通用样式覆盖
6. 其他静态结构编写

图形验证码功能

request模块-axios封装

将axios请求方法封装到utils/request模块
使用axios来请求后端接口，一般都会对axios进行一些配置（eg：配置基础地址，请求响应拦截器），所以项目开发中，都会对axios进行基本的二次封装，单独封装到一个request模块中，便于维护和使用

• 步骤：
  1. 安装axios
  2. 新建request模块
  3. 创建实例&配置（基地址和请求响应拦截器），导出实例
  4. 测试使用
  5. 动态将请求回来的base64图片，解析渲染出来
  6. 点击验证码盒子，刷新验证码

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

将请求封装成方法，统一存放到api模块，与页面分离

• 好处： ① 请求代码复用 ② 统一管理请求 ③ 请求与页面逻辑分离
• 步骤：
  1. 新建请求模块
  2. 封装请求函数
  3. 页面中导入调用

Toast轻提示（vant组件）

Toast可以完成普通的文字提示，也可以完成加载、成功、失败提示

1. 注册安装(utils/vant-ui.js)

import { Toast } from 'vant'
Vue.use(Toast)

2. 两种使用方法
   1. 导入调用：组件内和非组件内均可

   import { Toast } from 'vant'
   Toast('提示内容')
   

   2. 通过this直接调用：只能在组件内
      本质：将方法注册挂载到了Vue原型上Vue.prototype.$toast=xxx
this.toast('提示内容')

• 加载提示

<!-- 使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击 -->
Toast.loading({
  message: '加载中...',
  forbidClick: true,
});

• 成功/失败提示

Toast.success('成功文案');
Toast.fail('失败文案');

短信验证倒计时功能

1. 点击按钮，实现倒计时效果
   1. 准备data数据
   2. 给按钮注册点击事件
   3. 开启倒计时
   4. destroyed清除定时器
2. 倒计时之前的校验处理（手机号、验证码）
   1. 准备data数据，双向绑定
   2. 封装校验方法
   3. 倒计时前校验
3. 封装短信验证请求接口，发送请求添加提示
   1. 封装接口
   2. 调用

登录功能

封装api登录接口，实现登录功能

1. 阅读接口文档，封装登录接口
2. 登录校验（手机号、图形验证码、短信验证码）
3. 调用方法，发送请求

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

问题：每次请求都可能有错误，就都需要错误提示
说明：响应拦截器是拿到数据的第一个数据流转战，可以在里面统一处理错误
只要状态码不是200，就给默认提示抛出错误

登陆权证信息存储

vuex构建user模块存储登录权证（token&userId）

• 说明：① token存入vuex的好处：易获取、响应式 ② vuex需要分模块 => user模块
• 步骤
  1. 构建user模块
  2. 挂载到vuex
  3. 提供mutations
  4. 页面中commit调用

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

封装storage存储模块，利用本地存储，进行vuex持久化处理

添加loading效果

• 好处：
  ① 节流处理：防止用户在一次请求还没回来之前，进行多次点击，发送无效请求
  ② 友好提示：告知用户，目前是在加载中，请耐心等待，用户体验会更好
• 实操步骤：
  1. 请求拦截器中，每次请求，打开loading
  2. 响应拦截器中，每次响应，关闭loading

页面访问拦截

基于全局前置守卫，进行页面访问拦截处理

• 路由导航守卫-全局前置守卫

  1. 所有的路由一旦被匹配到，都会先经过全局前置守卫
  2. 所有全局前置守卫放行，才会真正解析渲染组件，看到页面内容
     访问权限页面时，拦截或放行的关键点：用户是否有登录权证token
     

• 语法：

  <!-- 在router/index.js中 -->
  router.beforeEach((to, from, next) => {
  })
  

• 参数：

  1. to：到哪去的路由信息对象
  2. from：从哪来的路由信息对象
  3. next表示是否放行：next() 调用就是放行、next(路径) 是拦截到某个路径页面

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

1. 准备静态结构
2. 封装接口
3. 页面调用
4. 动态渲染

搜索-历史记录管理

构建搜索页的静态布局，完成历史记录的管理

• 需求
  1. 搜索历史渲染
  2. 点击搜索（添加历史）
     点击搜索按钮或底下的历史记录，都能进行搜索
     1. 若之前没有相同搜索关键字，直接追加到前面
     2. 若之前已有相同关键字，就将原有关键字移除，再追加
  3. 清空历史：添加清空图标，清空历史记录
  4. 持久化：搜索历史需要持久化，刷新历史不丢失

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

实现搜索列表页静态结构,封装接口,完成搜索列表页的渲染
静态接口=>封装接口=>查询参数获取参数query=>获取数据,渲染

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

实现商品详情页静态结构,封装接口,完成商品详情页的渲染
静态接口=>封装接口=>动态获取参数=>获取数据,渲染

加入购物车-弹层显示

加入购物车-数字框基本封装

1. 静态结构
2. 数字框的数字，从外部传递过来的（父传子）
3. 点击±号，修改数字（子传父）
4. 使用v-model实现封装（:value和@input的简写）
5. 数字不能减到1