尚品汇前端项目总结

1. p8 路由传递参数 分别有三种方式，普通字符串、模板字符串、对象形式。例如传递params参数、query参数

	this.$router.push('/search/'+this.params+'?q='+this.query)
	this.$router.push(`/search/${this.params}?q=${this.query}`)
    this.$router.push({name:'search';       
      				   params:{p:this.params};
                       query:{q:this.query}})

需注意的是，路由传递参数的对象形式中，path不能与params一起用，路径会出错。一般都用name来代表路由，不会出错，name不用加路径符号'/'。

2.p16 axios二次封装

const requests = axios.create({...}) //baseUrl,记得要对外暴露requests
requests.interceptors.request.use((config)=>{}) //携带请求头
requests.interceptors.request.use((res)=>{}) //返回请求信息

3.p17 API接口统一管理 与axios二次封装文件在同一路径下，创建一个专门存放api接口的文件，项目中所有用到的接口信息都写在此文件里。每一个接口都要记得对外暴露。

4.p18 nprogress进度条 在requests文件内导入nprogress的js、样式资源，同时nprogress.start()写于请求头函数内，nprogress.end()写于返回信息的函数内。

5、p19 vuex模块式开发 可以为每个组件都创立仓库来完成vuex的任务，包括state、mutations、dispatch、getters(均需要对外暴露)，在组件内发出this.$store.dispatch，即可调用dispatch内定义的函数。一般这时候就是给服务器相应的接口发请求以得到对应的数据（async/await）,commit调用mutations内定义的函数以修改state中的数据。getters用于简化变量名，在组件内调用state/getters中的数据时，利用mapState/mapGetters，再利用计算属性computed...([''])/...({state:}) 特别地，getters内的变量在没等到数据返回之前为undefined,所以最好给后面加 ||[]/||{}

6.p20/21 导航栏背景颜色的添加/二、三级导航菜单的显示与隐藏 联想到鼠标事件，这里涉及鼠标进入元素内部(mouseenter)、鼠标从元素内移开(mouseleave),可以绑定原生DOM,如<div @mouseenter="changeId（index）">,对于实现某一条件下的高亮，可以绑定动态样式，例如 <:class="{cur:a==b}">表明当a=b成立时，此类名（样式）生效。！！！！！！注意在mouseenter对应的回调函数中，可以直接获取访问了哪个元素（index值）。 二三级导航栏的显示与隐藏需加入动态样式，如<:style="{display:a==b?'block'：'none'}">.动态类名也是如此，记得一定要加 ：

7.P23 防抖与节流

原理：闭包+延迟器

防抖：一段时间频繁的操作后，在最后一次操作后规定时间后才真正被触发（快速触发只执行最后一次） lodash库中引用debounce可以实现防抖 函数名：debounce(function(index){...},1000) 节流：频繁触发变为少量触发。在规定时间内不会频繁触发回调，只有大于这个时间才会触发。 lodash库中引用throttle实现节流 函数名：throttle(function(){..},1000)

8.v-if|v-show v-if在显示与隐藏时真正操作了DOM节点的渲染与销毁，如果一开始为假，则什么也不做，直到条件第一次变为真，才开始渲染。 v-show不论是真假，一直被渲染，变化的是display的值（display:none表示不展示，隐藏）。频繁操作某个元素的显示与隐藏，用v-show节省计算开销，只有一次变化，可以用v-if.

9.过渡动画 节点/组件内必须出现v-if/v-show，transition标签设置name属性，有想加上过渡效果的块类名相同。 .(name)-enter .(name)-enter-active .(name)-enter-to

10.mock假数据 在服务器接口还没部署好时，前端人员可以自己进行mock,依赖包mockjs，mock模块有mockServe.js,api模块内在API文件夹中创建mockRequest【axios实例：baseURL:'/mock'】专门获取模拟数据用的axios实例。

11.swiper轮播图 安装swiper包，静态页面中需要有对应的类名（container,wrap,slider）,不能瞎写否则对不上。 js中导入swiper模块、swiper.css，watch检测数据变化，在数据内初始化swiper实例。

$nextTick

在 修改数据之后 立即使用这个方法，获取更新后的DOM。 项目中多次出现轮播图结构，可以封装成一个全局组件，需要用时直接写组件标签即可。传递变量：props

12.p31 获取TypeNav导航栏的点击对象，进行参数的传递 给原生DOM元素绑定click事件，传递参数event,通过event.target.dataset可以获取目前点击的元素内容、id。依次以对象形式把路由传递的参数定义出来，记得讲params和query参数进行合并，因为在跳转时可能都有用。

13.面包屑制作 Object.assign(target,...source)将源对象上的可枚举属性 复制 到目标对象上。 怎么展示面包屑的？本页面的数据SearchParams对象下包括了很多属性，以这些对象是否为空(v-if)来控制面包屑的生成，以点击事件传递参数控制具体某一属性的增加，涉及到数据变化，利用数组的push()压入，splice()方法。以模板字符串表示路由参数：${...}:${...}

  array.splice(index,howmany,item1,.....,itemX)
  array.push(item1, item2, ..., itemX)

14.分页器全局组件 需要的数据有： 1、总共的数据量 2、一页展示多少数据 3、连续页面数字 4、知道当前是第几页（？），貌似是点击某页自动捕捉页码 5、与父组件交互，传递页码，用到：自定义事件 子：$emit(‘函数名’，参数） 父：@函数名=“函数名” 内部包含较复杂的逻辑

15.push与replace的区别？滚动条设置？ push：记住历史记录，replace：无历史记录。一般常用 this.$router.push() 滚动条：初始化新的路由内写以下代码，y表示与浏览器上部的距离(y:0为从顶部开始）

  scrollBehavior(to,from,savePosition){
        return {y:0};
    }

16.放大镜遮罩、输入/选择购物车个数 mouse鼠标事件有：mousemove,mouseleave,mouseenter(英文意思很明了），可以借助这几个行为给原生DOM绑定事件，this.$refs可以获取到这个DOM? 用户输入的个数，不能是字符！，不能小于1！，多方面考虑。判定是否为字符可以用目标值*1，再用isNaN()判断，不改变原数据。若原数据不是数字，那么返回真。parseInt,取整。

17.GET与POST的异同？ 相同点：都是发送请求的办法，基于TCP/IP协议 区别：

18.会话存储、uuid表游客身份 导入uuid这个包以后，可以随机给访问网站的人（例如淘宝网）分配一个id,同时为了长久存储，不随会话（网页、sessionStorage）关闭结束，将其存储在localStorage（本地存储）中，代码如下：

 localStorage.setItem('uuid') //存储uuid
 userId = localStorage.getItem('uuid')   //获取uuid，存储于userId变量中

19.如何将临时的uuid带给服务器？文本框事件有哪些？ 放在请求头（request header）中,一般在请求、响应函数体中。（？）blur：失去焦点即鼠标点击空白处；change：文本框发生变化,需要点击其他地方；input:一旦发生文本变化立即执行。

20.token?失效后如何处理？ token是服务器返回的一种用户身份认证信息，常存于本地存储中（localStorage）。token过期后，要对本地存储的进行清除，同时返回登录页面，让用户重新登录。

21.路由守卫？ 路由守卫有前置守卫(全局守卫）、后置守卫、组件内守卫，单个路由独享守卫。 全局守卫：页面中任何路由变化都可以监测到，通过条件判断可不可以路由跳转 前置守卫：beforeEach(to,from,next) 每次路由切换前执行 后置守卫：afterEach(to,from,next) to:目的地 from:来源 next:是否放行 单个路由独享守卫：beforEnter(to,from,next)，针对某一个路由的守卫，书写位置在路由详情文件 组件内守卫：和data、created、mounted、methods处于平等关系，beforeRouteEnter是进入前 beforeRouteUpdate 是路由变化时。beforeRouteLeave 是离开后。

22、图片懒加载： 指在图片资源进入浏览器视窗后再加载，而不是直接进行全部加载。创建IntersectionObserver的实例observer，调用observer.observe()方法监测图片，在进入和离开图片区域触发回调。对于原本的:

  <img src=""/>        改写为       <img data-src=''/>

获取图片元素对应的Isintersection的值，若为true，调用getAttribute('data-src')获取图片资源（1.jpg）,再调用setAttribute('src',data_src)将图片资源赋予目标属性，实现懒加载。取消回调函数的触发，调用observer.unobserve()方法效果。

23、宏任务与微任务

常见微：promise.then().catch().finally(), MutationObserver, Object.observe

常见宏:新程序或子程序被直接执行， 事件回调， 定时器等

同步任务直接输出，时间循环后先从微任务队列开始执行（按照先入先出原则），指导微任务队列清空，浏览器可能先渲染再执行宏任务队列。

24、常见Http状态码