在vue项目中，一般的请求方式有四种
1.对本地数据请求（json
2.对模拟数据的请求（mock）
3.对第三方数据的抓取（jsonp）
路由配置
：{
path:'/',
// 路由对应的地址
name:'Home"
// 路由的名称
component:Home
// 路由对应的组件
// 如果浏览器地址栏hash值（#后面的值）对应的是当前的Path
// component 对应的组件就会被填充到 router-view这个内置组件里面。
}
路由页面配置：
1. 创建组件 User.vue
2. 在src/router/index.js
import User from User.vue
(导入组件)
3. 配置路由
{
path:"/user",
name:"User",
component:User
}
4. 添加导航 App.vue
组件内路由参数的获取
获取参数不带r
组件内路由参数的获取
获取参数不带r
路由参数
$
route.params.id
查询参数
$route.query.名称 地址
axios http请求的使用方法
安装
切换到项目目录
cd /vrouter
cnpm install axios -S
挂载
main.jsimportaxiosfrom'axios';Vue.prototype.$http=axios;
get
this.$http.get(url?page=1)this.$http.get(url,params:{page:2})
post
this.$http.post(url,"k=v&k2=v2",{""Content-Type":"application/x-www-form-urlencoded""})
file
1.获取文件
let file = this.$refsfile[0]
2.formData
letdata=newFormData().data.append('file',file);
3.配置
let configs = { headers:{'Content-Type':'multipart/form-data'} }
4.请求
this.$http({ url:', data, configs })
全局配置
作用
1.方法修改请求域名，切换地址
2.省略了再每个ajax请求都需要配置的事情
在main.js配置
importaxiosfrom'axios';axios.defaults.baseURL="http://520mg.com";// 配置基础urlaxios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';// 配置post编码// axios.defaults.withCredentials = true;//跨域请求的全局凭证Vue.prototype.$http=axios;//挂载axios 到vue的原型公用方法上面//所有vue的实例都将拥有$http
使用的时候
$http.get("/mi/list.php")$http.get("http://www.520mg.com/mi/list.php")效果一样
本地json获取
1.将json文件放在assets目录下
2.修改配置
3.在component.ts中读取
getRequest(){returnthis.http.get("assets/json/report.json").subscribe((res:Response)=>{this.result=res.json()});}
JSONP
JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
引入jsonp
importjsonpfrom'../assets/js/jsonp'
JSONP优缺点:
jsonp优点:
完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，
这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化
jsonp缺点:
1.jsonp只支持get请求而不支持post请求
2.jsonp存在安全性问题
请求头跨域
要求后端返回给前端的响应，响应头有
Access-Control-Allow-Origin:*
php代码写
header("Access-Control-Allow-Origin:*")
proxy 代理
可以对目标对象的读取调用...进行拦截1
1.目标对象
let target = {name:"yaya",age:18}
2.处理
lethandler={get(target,key){},set(target,key,value,receiver){}}
3. let proxy = new Proxy(target,handler)
处理函数
setgethas()ownkeys apply...
Reflect
反射
对 对象进行一些操作，方便代理处理
常用
Reflect.ownKeys(obj)//获得对象键的列表Reflect.set(obj,key,value)//设置对象的值Reflect.get(obj,key)//获得对象的值Reflect.has(obj,key)//检测是否有某个值