1 Vue-Router
(1)路由:决定数据包从来源到目的地的路径
(2)转送:将输入端的数据转移到合适的输出端
(3)路由表:本质上是一个映射表,决定了数据包的指向
作者:iakul
链接:https://www.zhihu.com/question/28725977/answer/42077482
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
前端渲染(SPA、单页面应用)
浏览器中的大部分内容,都是由前端写的JS代码在浏览器中执行最终渲染出的网页
SPA:整个网页只有一个html页面,在前后端分离基础上加了一层前端路由
前后端分离阶段(前端渲染)
后端提供API返回数据,前端通过Ajax获取数据,并通过JavaScript渲染到页面
前端路由:页面跳转的URL规则匹配由前端来控制
后端渲染(SSR、服务端渲染)
后端路由阶段
网页的HTML在后端通过模板引擎渲染后再交给前端
注:服务器如何处理网站的多个页面?
每个页面都有其对应的URL,URL会发送到服务器,服务器通过正则对该URL进行匹配,并最后交给一个controller处理,controller处理后将生成的HTML和数返回给前端
缺点:HTML和数据混在一起
改变URL页面不自动刷新:
(1)location.hash
(2)history.pushState(对象参数,title参数,url)
history.back()
history.go()
history.replaceState({},’’,‘url’)
路由的默认路径
path:''
redirect:'/home'
router-link补充
(1)tag属性:决定渲染成什么组件
(2)replace属性:不会留下history记录
(3)active-class:设置css样式
2 Promise
Promise是异步编程的一种解决方案
//请求成功调用resolve,请求失败调用reject
new Promise((resolve,reject)=>{
//这里只进行网络请求
}).then() //这里进行网络处理
.catch() //对reject进行处理
promise的三种状态
(1)pending:等待状态,正在进行网络请求
(2)fulfill:满足状态,即请求成功,调用resolve,并回调then()
(3)reject:拒绝状态,即请求失败,调用reject,并回调catch()
promise的all方法
Promise.all([
new Promise((resolve,reject)=>{
$ajax({
url:'url1',
success:function(data){
resolve(data)
}
})
}),
new Promise((resolve,reject)=>{
$ajax({
url:'url2',
success:function(data){
resolve(data)
}
})
}),
]).then(results=>{
console.log(results[0]);
console.log(results[1]);
})
3 Vuex
Vuex为Vue.js应用程序开发的状态管理模式
state:{
counter:1000
},
mutations:{
add(state){
state.counter++
}
},
//调用方式
$store.state.counter
this.$store.commit('add')
单一状态树:一个对象内部包含了所以需要的数据,即state定义了所有需要的状态数据
getters:当数据变化后给其他组件使用时
注:getters不能传递参数,如果要这样做则需要返回函数
mutations:里面的方法必须是同步方法
store状态更新的唯一方式:提交mutation
提交参数: this.$store.commit('addF',count)
多个参数使用一个对象接收
mutations响应式规则
一旦属性定义在store中,就会被加入到响应式系统中,该系统会监听属性的变化。当属性发生变化时,会通知所有界面中用到该属性的地方进行页面刷新
//响应式添加属性
Vue.set(state.info,'address','xinguo')
//删除属性
Vue.delete(state.info,'age')
Action
Action类似于mutation,不过是用于处理异步操作的
Modules是将store分隔成模块,每个模块拥有自己的store等属性
Axios
同时发送多个请求:
axios.all([请求1,请求2])
当**method=‘get’**时,对应
params:{}
当**method=‘post’**时,对应
data:{}
拦截器:请求/响应拦截
axios.interceptors.request/response.use(成功的函数,失败的函数)
应用场合:
1、当config中的一些信息不符合服务器要求
2、希望每次发送网络请求时,在界面显示一个请求图标
3、某些网络请求,必须携带一些特殊信息(如登录)