尚硅谷尚品项目汇笔记(二)

                        ​​​​​​​        ​​​​​​​尚硅谷尚品项目汇笔记(二)_第1张图片

(1)编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出 NavigationDuplicated 的警告错误?

---路由跳转两种方式:声明式导航,编程式导航

注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航 vue-router 底层内部已经解决这种问题。

这种异常,对于程序没有任何影响的。

为什么编程式导航会出现这种现象:

由于 vue-router 最新版本 3.5.2,引入了 promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,

第一种解决方案:是给 push 函数,传入相应的成功的回调与失败的回调 (success)=>{} {error}=>{error}

this.$router.push(

{

name: 'search',

params: { keyword: this.keyword },

query: { k: this.keyword.toUpperCase() },

},

() => {},

() => {}

)

这种写法:治标不治本,将来在别的组件当中 push|replace,编程式导航还是有类似的错误

第一种解决方案可以暂时解决当前问题,但是以后再用 push|replace 还是会出现类似现象,因此我们需要从‘根’治病;

1.4

this 当前组件实例(search)

this.$router属性:当前的这个属性,属性值VueRouter类的一个实例,当在入口文件注册路由的时候,给组件实例添加$route|$router 属性

push:Vue 类的一个实例

function VueRouter(){

}

//原型对象的方法

VueRouter.prototype.push=function(){

//函数的上下文为 VueRouter 类的一个实例

}

let $router=new VueRouter();

$router.push(xxx)

this.$router.push();

2.Home 模块组件拆分

----先把静态页面完成

----拆分出静态组件

----获取服务器的数据进行展示

----动态业务

3.三级联动组件完成

---由于三级联动,在 Home、Search、detail,把三级联动注册为全局组件

好处:只需要注册一次,就可以在项目任意地方使用

4.完成其余静态组件

HTML+CSS+图片资源----信息【结构、样式、资源】

5.postman 测试接口

---刚刚经过 postman 工具测试,接口是没问题的

---如果服务器返回的数据 code 字段 200,代表服务器返回数据成功

---整个项目,接口前缀都有/api 字样

6.axios 二次封装

安装 axios

cnpm install --save axios

前端向服务器发数据

XMLHttpRequest、fetch、JQuery、axios


 

6.1 为什么需要进行二次封装 axios

请求拦截器、响应拦截器

请求拦截器:可以在发请求之前处理一些业务

响应拦截器:当服务器数据返回以后可以处理一些事情

6.2在项目中经常API文件夹【axios】

接口当中:路径都带有/api

baseURL:"/api"

http://xxx.xxx.8080/api


 

6.3如果有的同学axios基础不好,可以参考git|NPM关于axios文档

7.接口统一管理

项目小:完成可以在组件的生命周期函数中发请求

项目大:axios.get('xxx');

7.1跨域问题

什么是跨域:协议、域名、端口号不同请求,称之为跨域

http://localhost:8080/#home    ----前端项目的本地服务器

http://39.98.123.211            ----后台服务器

跨域:如果多次请求协议、域名、端口号有不同的地方,称之为跨域

JSONP、CROS、代理


 

8.nprogress进度条的使用

start:进度条开始

done:进度条结束

cnpm install --save nprogress


 

9. vuex状态管理库

9.1 vuex是什么?

vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件公用的数据

切记,并不是全部项目都需要Vuex,如果项目很小,完全不需要Vuex,如果项目很大,组件很多,数据很多,数据维护很费劲。  Vuex

cnpm install --save vuex@3

state

mutations

actions

getters

modules

9.2vuex基本使用


 

9.3vuex实现模块式开发

如果项目过大,组件过多,接口也很多,数据也很多,可以让Vuex模块式开发

模拟state存储数据

{

  count:1,

  search:{a:1},

  detail(888),

  pay:{100}

}

你可能感兴趣的:(Vue,面试,javascript,前端,vue.js)