hm-shopping案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_73838148/article/details/134539647

思路

1. 一级路由有多个，如首页架子、登录页、搜索页、商品详情等。其中首页架子中有四个二级路由，分别是首页、分类页、购物车、我的。

制作顺序

一.初始步骤

1. 对于组件库的使用：安装组件库，安装babel-plugin-import插件，在babel.config.js的module.exports中配置，在utils/vant-ui.js中导入要使用的组件，在main.js中导入utils/vant-ui.js

二. 首页架子的制作，即views/layout/index.vue

1.底部导航栏：从vant库导入

(1)设置data中的active值，并且在各个van-tabbar-item中设置name属性。

(2)设置颜色：即在van-tabbar中添加active-color和inactive-color属性，分别表示激活和未激活时的颜色

(3)设置icon

(4)开启路由模式，用于搭配 vue-router 使用：即在van-tabbar中添加route属性，并在各个van-tabbar-item中添加to属性

2.二级路由的配置

三.登录页面——另一个一级路由

1.顶部导航栏

2.关于axios请求

(1)安装axios，对axios 进行基本的二次封装，单独封装到一个 request 模块中便于维护使用，即utils/request.js

(2)在utils/request.js中创建一个axios实例（为了不污染原始的axios实例）并导出，在login页面中导入

3.图形验证码

目的：抵御机器自动化攻击，避免批量请求获取短信

通过axios请求得到。

因此在methods中写入一个异步函数，在craeted和点击图片时调用该函数发送请求。并将请求回来的base64和key存到data中，分别表示的是图形验证码对应图片的url和图形验证码的唯一标识。并对img标签的src属性动态设置为base64

要注意的细节是：请求还没有回来时，图片会显示有问题，所以应该对img标签添加v-if，即图片回来时才展示img标签，否则不展示

4.短信验证码

(1)发送短信验证码之前的操作：

->验证手机号和图形验证码输入的合法性（用正则表达式）

在这里我发现一个注意点：当在methods中的一个函数a中调用methods中的另一个函数b，应当写成this.b而不是b

(2)关于节流和定时器的使用

注意：离开该页面时要清除掉定时器，即在destoyed钩子函数中

(3)post请求：要传的参数有：图形验证码、图形验证码key、手机号，在后台验证

5.关于封装请求方法到api中

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

顺序：新建请求模块->封装请求函数->页面中导入调用

6.toast轻提示

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

对于“抛出一个promise错误，await只会等待成功的promise，后续的程序就不会进行”这句话的理解：

如图：

代码如下图：

理解：如果在请求中未抛出错误，await以下的的代码继续执行，就像前两个红色框所示，无论status是否为200，后续程序都继续进行。如果在status不是200时抛出错误了，await以下的程序不会进行，就像第三个框所示，它没有打印出“继续执行了”的文字。

8.登录权证信息存储

(1)目标:vuex 构建 user 模块存储登录权证(token&userld)

(2)vuex的持久化

新建文件utils/storage.js

const INFO_KEY = 'hm_shopping_info'

// 获取个人信息
export const getInfo = () => {
    const initInfo = { token: '', userId: '' }
    const result = localStorage.getItem(INFO_KEY)
    return result ? JSON.parse(result) : initInfo
}
// 设置个人信息
export const setInfo = (info) => {
//将对象转为JSON形式存储到本地
    localStorage.getItem(INFO_KEY,JSON.stringify(info))
}
// 移除个人信息
export const removeInfo = () => {
    localStorage.removeItem(INFO_KEY)
}

9.添加请求loading效果

(1)在请求拦截器中添加

Toast.loading({
        message: '加载中...',
        forbidClick: true,//禁止背景点击
        loadingType: 'spinner',//自定义loading图标
        duration:0,//不会自动消失，而是在响应拦截器中关闭
    })

(2)在响应拦截器中关闭