尚品汇项目复盘（二）

接上文

（五）对于api文件夹内容进行配置

5.1其中 index.js 主要调用接口 （包括mock数据和后端调用的数据）

// 这里是axios封装的requests请求
import requests from './request'
// 这里是mock数据
import mockrequests from './mockrequest'

其中调用mock数据的格式模版为

export const reqGetBannerList = () =>{
  return mockrequests.get('/banner')
}

其中调用后端接口含参和不含参的模板为

// get请求不含参
export const reqCategoryList = () => requests({
  url:'/product/getBaseCategoryList',
  method:'GET'
})
// get请求含params参数
export const reqUpdateCheckedById = (skuId,isChecked) => requests({
  url:`/cart/checkCart/${skuId}/${isChecked}`,
  method:"GET"
// post请求params含多个参数
export const reqGetSearchInfo = (params) => requests({
  url: '/list',
  method:"POST",
  data:params
})
// post请求params含少量参数
export const reqAddOrUpdataShopCart = (skuId,skuNum) => requests({
  url:`/cart/addToCart/${skuId}/${skuNum}`,
  method:'POST'
})

安装nprogress进度条插件

yarn add nprogress
之后在api的页面中引入

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"

默认的进度条颜色是蓝色的
也通过修改nprogress.css文件的background来修改进度条颜色

5.2 其中mockrequest.js配置mock数据的请求头以及拦截器

// 对axios二次封装
import axios from 'axios'
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"

const mockrequests = axios.create({
  // 配置对象
  // 基础路径，发送请求的时候，路径当众会出现api
  baseURL:'/mock',
  timeout:5000
})

// 添加请求拦截器
mockrequests.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  //引入进度条
  nprogress.start()
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
mockrequests.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  // 进度条结束
  nprogress.done()
  return response.data;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

//导出
export default mockrequests

5.3requests.js主要是配置后台数据的请求头以及拦截器

// 对axios二次封装
import axios from 'axios'
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"
// 引入仓库 将uuid的值带在请求头上
import store from '@/store'
const requests = axios.create({
  // 配置对象
  // 基础路径，发送请求的时候，路径当中会出现api
  baseURL:'/api',
  timeout:5000
})

// 添加请求拦截器
requests.interceptors.request.use((config)=>{
  // 在发送请求之前做些什么
  //引入进度条
  nprogress.start()
  // 将获取的uuid存储到请求头里
  if(store.state.detail.uuid_token){
    config.headers.userTempId = store.state.detail.uuid_token
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
requests.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  // 进度条结束
  nprogress.done()
  return response.data;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

//导出
export default requests

（六）有关params和query参数的不同

query、params两个属性可以传递参数

1. query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
   query参数对应的路由信息 path: “/search”
   params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2

2. params参数对应的路由信息要修改为path: “/search/:keyword” 这里的/:keyword就是一个params参数的占位符

6.2 query参数进行传参

6.2.1 声明式导航

<router-link :to="{path='/hello'query:{id:666,name:'小明'}
}">
标签体内容
</router-link>

6.2.2 编程式导航

函数(){
	this.$router.push({path:"/hello", query:{id:666,name:'小明'}})
}

在进行query传参时router.js中配置的路由信息 name属性一栏可有可没有

6.3 params参数进行传参

6.3.1 声明式导航

<!--
	name:router文件夹下，配置路由时需要多配置一个属性——name,这也是和query传参的不同之处
-->
<router-link :to="{ name='小鬼' params:{id:666,name:'小明'}}">
标签体内容
</router-link>

6.3.2 编程式导航

函数(){
	this.$router.push({name:"小鬼", params:{id:666,name:'小明'}})
}

在进行params传参时router.js中配置的路由信息 name属性一栏是必须要有的
在router.js中需要这样写

 {
    path: "/search/:keyword?",  //如果不确定参数是否传递 就在参数后面增加一个 ?
    component: Search,
    meta: { show: true },
    name: 'search'
  },

（七）有关components文件夹

这个文件夹里面的内容为 页面公共样式 当一个样式会被多个页面所使用的时候 最好将其写入在components中
在页面使用的时候只需要

   <template>
   		<TypeNav></TypeNav>
   </template>

（八）有关store文件夹中的内容

8.1 在main.js中进行全局注册

import store from '@/store

new Vue({
  render: h => h(App),
  // 注册Vuex仓库
  store
}).$mount('#app')

8.2 其中的index.js 是仓库总包 用来管理各个分仓库

import Vue from 'vue'
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)
// 引入小仓库
import home from './home'
import search from './search'
import detail from './detail'
import shopCart from './shopCart'
// 对外暴露Store类的一个实例
export default new Vuex.Store({
  modules:{
    home,
    search,
    detail,
    shopCart
  }
})

每当新建一个小仓库的时候 都需要在index.js中进行注册才能供各个组件使用
8.3 各个分包 在此进行vuex三连环

//小仓库
import { } from "@/api" // 页面中需要调用什么接口 就在Import中进行注册
// state: 仓库存储数据的地方
const state = {
  categoryList:[]
}

// mutations：修改state的唯一手段
const mutations ={
   CATEGORYLIST(state,categoryList){
    state.categoryList=categoryList
  },
}

//action 处理action可以书写自己的业务逻辑 也可以处理异步
const actions = {
 async categoryList({commit}){
    const res = await reqCategoryList()
    // console.log(res)
    // 此时获得的res
    if(res.code === 200){
      commit("CATEGORYLIST",res.data)
    }
}

//getters：可以理解为计算属性
const getters = {

}

// 对外暴露Store实例
export default({
  state,
  mutations,
  actions,
  getters
})

注意：使用action时，函数的第一个参数，必须是{commit}，即使不涉及到mutations操作，也必须加上该参数，否则会报错。

（九）有关utils的内容

暂时只用到了uuid

import { v4 as uuidv4 } from 'uuid' 
// 生成一个随机字符串并且游客身份持久存储
export const getUUID = () => {
  // 看本地存储的是否有uuid
  let uuid_token = localStorage.getItem("UUIDTOKEN")
  // 如果没有的话 随机生成一个
  if(!uuid_token){
    uuid_token = uuidv4()
    localStorage.setItem('UUIDTOKEN',uuid_token)
  }
  return uuid_token
}

当生成了uuid时 需要在api中 添加请求拦截器 中写入请求头中