一、脚手架配置代理
1.回顾常用的ajax发送方式：
（1）xhr
比较麻烦，不常用
（2）jQuery
核心是封装dom操作，所以也不常用
（3）axios
优势：体积小、是promise风格的、支持请求拦截器和响应拦截器
（4）fetch
2.3都是封装xhr的，fetch跟xhr平级，直接在window身上就能找到，而且也是promise风格的，但是不兼容，ie肯定不能用；它会把你返回的数据包两层，所以不如axios常用。
2.引出问题
点击按钮获取学生信息，app.vue:
import axios from 'axios'
import { response } from 'express'
export default {
name:'App',
methods:{
getStudent(){
axios.get('http://localhost:5000/students'),then(
response=>{
console.log('请求成功了',response.data)
//response是一个响应对象。data里面的东西才是response想给你的
},
error=>{
console.log('请求失败了',error.message)
//maeeage失败的原因
}
)
}
}
}
点击按钮之后页面报错，出现、、、cors、、、Access-Control-Allow-Oringin说明跨域了，协议、域名、端口号出现不一样的，我们所在的端口号是8080，向端口号5000的要数据，5000给8080了，然后8080发现跨域了就没有给你数据，解决跨域的问题：
1.cors（写服务器的人在服务器加几个响应头）
5000返回的时候还携带几个特殊的响应头，8000看见就给你了
2.jsonp（借助script 的src属性）
src属性在引入外部资源的时候不受同源限制，但是得前端后端一起配合，而且它只能解决get请求的问题，开发不常用但是面试经常问，很巧妙的用法
3.配置一个代理服务器
代理服务器是一个中间人，但是它所处的位置跟我们一样（8080），粉色那个跟我们肯定是同域的，那粉色跟蓝色呢？他俩都是服务器，服务器和服务器之间传输局不用ajax，用的就是http传就完事了。那粉色的8080服务器得怎么开啊？1.nginx，学习成本大偏后端 2.vue-cli，借助vue脚手架。
然后我们就来配置一下代理服务器
（1）方式一：
在vue.config.js:
它的8080不用你管，你只需要告诉这个代理服务器一会要把请求转发给谁就ok，后面具体路径不用写，写到端口号就行
//开启服务代理
devServer:{
proxy:'htp://localhost:5000'
}
app.vue
methods:{
getStudent(){
axios.get('http://localhost:8080/students').then(
response=>{
console.log('请求成功了',response.data)
//response是一个响应对象。data里面的东西才是response想给你的
},
error=>{
console.log('请求失败了',error.message)
//maeeage失败的原因
}
)
}
}
而且这个中间代理也不是什么时候都会转发请求的，如果粉色的自己本身就有就不会往5000找了，public里面文件都算是8080有的。
1、优点：配置简单，请求资源时直接发给前端（8080）即可。 2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 3、工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）。
（2）方式二
vue.config.js:
devServer:{
proxy:{
'/ttt':{ //请求前缀，想走代理就在请求的前面加/？？？，就把东西转发给target
target:'http://localhost:5000',
pathRewrite:{'^/ttt':''},
//不加这个配置粉色找蓝色的时候默认找的/ttt/server1
ws:true ,//用于支持websocket
changeOrigin:true//用于控制请求头的host值
//这个是告诉5000我也来自5000（是true就撒谎来自5000，false就是来自8080），防止5000用不了设置true比较好
},
'/hhh':{
target:'http://localhost:5001',
pathRewrite:{'^/hhh':''},
ws:true ,
changeOrigin:true
},
}
}
app：
getStudent(){
axios.get('http://localhost:8080/ttt/students').then(
//前缀就加在端口号后面，后面正常写
response=>{
console.log('请求成功了',response.data)
//response是一个响应对象。data里面的东西才是response想给你的
},
error=>{
console.log('请求失败了',error.message)
//maeeage失败的原因
}
)
},
getCar(){
axios.get('http://localhost:8080/hhh/cars').then(
//前缀就加在端口号后面，后面正常写
response=>{
console.log('请求成功了',response.data)
//response是一个响应对象。data里面的东西才是response想给你的
},
error=>{
console.log('请求失败了',error.message)
//maeeage失败的原因
}
)
}
如果我自己也有个students它也不会来拿我这个信息，因为加了/ttt就强制去5000那里拿数据了，所以这种就更灵活。
1、优点：可以配置多个代理，且可以灵活的控制请求是否走代理。 2、缺点：配置略微繁琐，请求资源时必须加前缀。
二、github案例
如果第三方库你写在assets里面了就得用import 引用，用import引用会很严重的检查，有某些字体你没有但是你引用了那就显示不出来，但是link方法没事，你没有但是引用了就不显示呗
所以像这种引入了外部资源的就不适合用assets/css/里面，那就放在public/css，然后在index.html中link引用一下，他里面引用了app也能用
接口https虽然案例来说跨域了，但是人家的工程师用cors已经解决了不用我们担心
list首先展示欢迎，用户搜索之后显示 正在加载中 ，加载完毕显示users，加载失败显示error
那怎么判断该显示啥呢？数据驱动页面展示
1.app.vue
2.myList.vue
发表评论