接上文
（五）对于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参数的不同
6.1 query、params两个属性可以传递参数
- query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: “/search”
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
- 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中 添加请求拦截器 中写入请求头中
