目录
5、POSTMAN测试接口
6、axios二次封装
为什么要进行二次封装呢?
请求拦截器,可以在发请求前可以处理一些业务;响应拦截器,当服务器数据返回以后可以处理一些事情。
安装axios: cnpm install --save axios
在项目中经常API文件夹就是放axios,新建文件夹api
7、接口统一管理
项目很小:完全可以在组件的生命周期函数中发请求
项目大:接口统一管理
跨域问题:如果出现协议、域名、端口号不同请求,称之为跨域,代理解决
找到vue.config.js文件添加以下代码:
//代理跨域
devServer:{
proxy:{
'api':{
target:'http://gmall-h5-api.atguigu.cn',
}
}
}
8、nprogress进度条的使用
安装:cnpm install --save nprogress
引入:import nprogress from "nprogress"
start:进度条开始,done:进度条结束
引入进度条样式:import 'nprogress/nprogress.css'
nprogress.css文件修改样式:bar:进度条颜色
9、vuex状态管理
vue是什么?
vuex是官方提供一个插件,状态管理库,集中式管理项目中组件共用的数据。
切记,并不是全部项目都需要Vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多、数据很多,数据维护很费劲。
state:仓库,存储数据的地方
mutations:修改state的唯一手段
actions:处理action,可以书写自己的业务逻辑,也可以处理异步
getters:理解为计算属性,用于简化仓库数据,让组件回去仓库数据更加方便对外暴露Store类的一个实例
基本使用
1、安装vuex:cnpm install --save vuex@3
2、新建store文件夹,在内新建index.js文件
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//使用插件一次
Vue.use(Vuex)
//state:仓库,存储数据的地方
const state = {}
const mutations = {}
const actions = {}
const getters = {}
//mutations:修改state的唯一手段
//actions:处理action,可以书写自己的业务逻辑,也可以处理异步
//getters:理解为计算属性,用于简化仓库数据,让组件回去仓库数据更加方便
//对外暴露Store类的一个实例
export default new Vuex.Store({
//注册
state,
mutations,
actions,
getters
})
3、在main.js文件内引入仓库并注册
4、使组件拿到仓库数据
import store from '@/store'
//引入映射仓库
import { mapState } from 'vuex'
······
computed:{
...mapState('count')
}
详细介绍看其他文章
Vuex模块式开发
如果项目过大,组件过多,接口也很多,数据也很多,可以让Vuex实现模块式开发模拟state存储数据。
1、新建小仓库文件夹,文件夹内新建文件index.js
//home模块的小仓库
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default({
state,
mutations,
actions,
getters
})
资源管理图:
2、在大仓库引入小仓库,并且实现Vuex模块式开发存储数据。
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//使用插件一次
Vue.use(Vuex)
//引入小仓库
import home from './home'
import search from './search'
//对外暴露Store类的一个实例
export default new Vuex.Store({
//实现Vuex仓库模块式开发存储数据
modules:{
home,
search
}
})
10、完成TypeNav三级联动展示数据业务
基本步骤
1、将TypeNav文件夹移到components,记得修改引入路径。
遇到的问题:Cannot read properties of undefined (reading ‘dispatch’)
解决:注意是否下载的vuex是3版本
2、通知Vuex发请求
mounted(){
//通知Vuex发请求,获取数据,存储于仓库中
this.$store.dispatch('categoryList')
}
3、向服务器发请求
async categoryList({commit}){
//通过api里面的接口函数调用,向服务器发请求获取服务器的数据
let result = await reqCategoryList()
if(result.code ==200){
commit('CATEGORYLIST',result.data)
}
}
CATEGORYLIST(state,categoryList){
state.categoryList = categoryList
}
4、利用仓库映射,让组件得到相应的数据
computed:{
...mapState({
//右侧需要的是一个函数,当使用这个计算属性的时候,右侧的函数会立即执行一次
//注入一个参数state,其实即为大仓库中的数据
categoryList:(state)=>state.home.categoryList
})
}
5、完成数据展示
一级分类动态添加背景颜色
方式一:采用样式完成
方式二:采用JS完成
:class="{cur:currentIndex == index}"
···
//鼠标进入修改响应式数据currentIndex属性
changeIndex(index){
this.currentIndex=index
},
leaveIndex(){
this.currentIndex = -1
}
通过JS控制二三级商品分类的显示与隐藏
<div class="item-list clearfix" :style="{display:currentIndex == index?'block':'none'}">
演示卡顿现象
正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很可能出现浏览器卡顿)
节流:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。
防抖:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发只会执行一次。
防抖与节流
lodash插件:里面封装函数的防抖和节流的业务【闭包+延迟期】,向外暴露的是一个_函数。
全部引入:import _ from 'lodash';
防抖方法:返回的是一个函数
const result = _.debounce(function(){
},1000)
节流方法:throttle回调函数不要使用箭头函数,可能出现上下文this
changeIndex:throttle(function(index){
this.currentIndex=index
},50)
按需引入,默认暴露:import throttle from 'lodash/throttle';
防抖:用户操作频繁,无关规定时间长短,期间只执行一次。
节流:用户操作很频繁,但是把频繁的操作变成少量操作【可以给浏览器充裕的时间解析代码】即规定时间执行一次。
三级联动组件路由跳转与传递参数
使用声名式导航,当点击各个标签时,会产生很多组件实例,耗用内存,导致卡顿现象。
方式:编程式导航加事件的委派
利用事件委派存在问题:
1、不确定是否点击的是a标签
2、无法获取参数
3、无法确定是一二三哪一级a标签
解决:
1、给a标签加上自定义属性data-categoryName,其余子节点没有
2、节点有一个属性dataset属性,可以获取节点的自定义属性与属性值
3、通过categoryid属性区分几级a标签
goSearch(event){
const element = event.target
let{categoryname,category1id,category2id,category3id} = element.dataset
if(categoryname){
//整理路由跳转的参数
let location = {name:'search'}
let query = {categoryName:categoryname}
//通过category1id区分几级a标签
if(category1id){
query.category1Id = category1id
}else if(category2id){
query.category2Id = category2id
}else{
query.category3Id = category3id
}
//整理完参数
location.query = query
//路由跳转
this.$router.push(location)
}