vue学习6

1. 智慧商城

1. 路由设计配置

单个页面，独立展示的，是一级路由

2.二级路由配置

1. 规则&组件
2. 配置导航链接
3. 配置路由出口

<template><div id="app"><!--二级路由出口--><router-view></router-view><van-tabbar route active-color="#ee0a24" inactive-color="#000"><van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item><van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item><van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item><van-tabbar-item to="/myorder" icon="user-o">我的</van-tabbar-item></van-tabbar><router-view/></div>
</template>

3.登录页静态布局

<template><div id="app"><div class="login"><!--头部--><van-nav-bar title="会员登录" left-arrow></van-nav-bar><!--主体--></div>

// 重置默认样式
* {margin: 0;padding: 0;box-sizing: border-box;
}
// 文字溢出省略号
.text-ellipsis-2 {overflow: hidden;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;
}
// 添加导航的通用样式
.van-nav-bar {.van-nav-bar_arrow {color: #333;}
}

2.购物车-request模块

1.axios封装

使用axios来请求后端接口，所以会对axios进行一些配置，项目开发中，对axios进行二次封装，单独封装到一个requeat模块中，便于维护使用

import axios from 'axios'
// 创建axios实例，对将来创建出来的实例，进行自定义配置
// 不会污染原始的axios实例
const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 5000,headers: { 'X-Custom-Header': 'foobar' }
})// 自定义配置-请求/相应 拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么return config
}, function (error) {
// 对请求错误做些什么return Promise.reject(error)
})// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么(默认axios会多包装一层data)return response.data
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么return Promise.reject(error)
})
// 导出配置好的实例
export default instance

2. 图形验证码

说明：

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

import request from '@/utils/request'
export default {name: 'LoginIndex',data () {return {picCode: '', // 用户输入图形验证码picKey: '', // 将来请求传递的图形验证码唯一标识picUrl: '' // 存储请求渲染的图片地址}},async created () {this.getPicCode()},methods: {// 获取图形验证码async getPicCode () {request.get()}}
}

3. 封装图形验证码接口

将请求封装成方法，统一存放到api模块，与页面分离
新建请求模块，封装请求函数，页面导入调用

好处：

1. 请求与页面逻辑分离
2. 相同的请求可以直接复用
3. 请求进行了统一管理

3.购物车-Toast轻提示

注册安装

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

两种使用方法：

1. 导入调用（组件内或非组件中均可）

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

2. 通过this直接调用（必须组件内）
   本质：将方法，注册挂载到了Vue原型上Vue.prototype.$toast=xxx

this.$toast('提示内容')

4.购物车-验证码图形校验

5.登录功能

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

1. 阅读接口文档，封装登录口
2. 登录前的校验（手机号，图形验证码，短信验证码）
3. 调用方法，发送请求，成功添加提示并跳转
   
   

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

问题：每次请求，都可能会有错误，就需要错误提示
说明：响应拦截器是我们拿到数据的第一个数据流转站，可以在里面统一处理错误

7.登录权证信息存储

目标：vuex构建user模块存储登录权证（token&userld）
补充说明：

1. token存入vuex的好处，易获取，响应式
2. vuex需要分模块=>user模块

state()提供数据
mutations()提供修改数据的方法
actions()提供异步操作
getters()提供一些基于state所派生出的一些属性的

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

利用本地存储，进行vuex持久化处理

1. getInfo
2. setInfo
3. removeInfo
   

9.添加请求loading效果

统一在每次请求后台时，添加loading效果
好处：

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

10.页面访问拦截

对于支付页，订单页，必须用户登录才能访问，游客不能进入的空间，需要做拦截处理
路由导航守卫-全局前置守卫

1. 所有的路由一旦被匹配到，都会先经过前置守卫放行。
2. 只有前置守卫放行，才会真正解析渲染组件，看到页面内容

router.beforeEach((to, from, next) => {// to: Route: 即将要进入的目标 路由对象// from: Route: 当前导航正要离开的路由//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
})

11.首页

1. 首页-静态结构准备&动态渲染
   静态结构->封装接口-> 页面调用->动态渲染
2. 搜索-历史记录管理
   (1)搜素历史基本渲染
   (2)点击搜索添加历史
   若之前没有关键字，则追加到最前面
   若之前有关键字，则先移除，在追加
   (3)清空历史：添加清空图标，可以清空
   (4)持久化：刷新历史不丢失

12.商品详情页

获取商品评价

export const getProComments = (goodsTd, limit) = > {return request.get('/comment/listRows', {params: {goodsId,limit}})
}

加入购物车，唤起弹层

13.购物车模块

1.编辑切换状态，删除功能

删除购物车数据

async delSelect (content) {const selCartList = context.getters.selCartListconst cartTds = selCartList.map(item => item.id)await delSelect(cartIds)Toast('删除成功')
}