吉安微信网站,网站302跳转,免费元素素材网站,中国建设集团门户网站vue中的ajax 配置代理常用发送Ajax请求方式跨域方式一方式二 vue-resource插槽默认插槽具名插槽作用域插槽 配置代理
常用发送Ajax请求方式
xhr new XMLHttpRequest() 在真正开发中不常用#xff0c;比较麻烦jQuery 封装了xhraxios 封装了xhr 与jQuery相比优势是#xff1a… vue中的ajax 配置代理常用发送Ajax请求方式跨域方式一方式二 vue-resource插槽默认插槽具名插槽作用域插槽 配置代理
常用发送Ajax请求方式
xhr new XMLHttpRequest() 在真正开发中不常用比较麻烦jQuery 封装了xhraxios 封装了xhr 与jQuery相比优势是是Promise风格支持请求拦截器和响应拦截器体积小大约为jQuery的1/4) 尤雨溪推荐使用fetch 原生 也是Promise风格 在IE浏览器兼容性差
下面来实践一下整个数据链路 使用axios发送请求 下载包npm i axios 引入import axios from axios 使用
sendMsg() {axios.get(http://localhost:5000/students).then((response) {console.log(请求成功了, response.data);},(error) {console.log(请求失败了, error.message);});
},使用nodejs写服务器
// serverStudents.js
const express require(express);
const app express();
app.use((request, response, next) {console.log();console.log(有人请求服务器serverStudents了);console.log(请求的资源是, request.url);console.log(请求来自于, request.get(Host));next();
});app.get(/students, (request, response) {const students [{ id: 001, name: tom, age: 18 },{ id: 001, name: lisa, age: 18 },{ id: 001, name: jerry, age: 18 },];response.send(students);
});app.listen(5000, (err) {if (!err)console.log(服务器成功启动了请求学生信息地址为http://localhost:5000/students);
});
启动服务器node serverStudents.js 点击按钮发送请求看控制台
跨域
请求数据时报错....CROS....Access-Control-Allow-Origin就是因为跨域了 跨域会导致数据返回时浏览器不会将数据进一步发送到页面上 导致跨域是因为违背了同源策略 同源策略是规定了三个东西必须一致协议名主机名端口号 当前页面地址是http://localhost:8080/ 服务器地址是http://localhost:5000/ 端口号不同 解决方法 cors 由后端进行处理 在返回数据时会携带一些特殊的响应头浏览器识别这些响应头后就会将数据直接给jsonp 借助script标签的src属性在引入外部资源时不收同源策略限制 一般不用 只能解决get请求的跨域代理服务器 中台在前端后端中间的一个服务器与前端同源而服务器间数据通信不用ajax不需要同源 所以我们就用vue-cli来创建一个代理服务器 文档 有两种方式
方式一
// 在vue.config.js中配置
// 开启代理服务器
devServer: {proxy: http://localhost:5000,
},而请求中的地址也要改为代理服务器地址但要带着请求信息axios.get(http://localhost:8080/students)
注意 proxy配置中的地址是后台服务器的 请求地址的是代理服务器地址 public目录下的内容会被代理服务器纳为己用而当我们的请求代理服务器可以自己回答时就不会再将请求转发给后端是不是挡板 这种方法有两个缺点无法配置多个代理会自动拦截请求
方式二
将没用的注释掉
// vue.config.jsdevServer: {proxy: {/api: {//请求前缀 如果请求的前缀有api则会走此代理,没有则不走此代理target: http://localhost:5000,// ws: true, //用于支持websocket 默认true// changeOrigin: true, //是否改变请求来源地址为后台同源地址 控制请求头中的Host值 默认true},// /foo: {// target: other_url,// },},},
请求地址前缀是紧跟端口号,如:http://localhost:8080/api/students 报错了 为啥呢 看服务器输出 请求是成功的 但是请求资源是/api/students前缀竟然还带着 需要加个配置将转发的请求按规则重写
pathRewrite: { ^/api: },vue-resource
也是一个发送ajax请求的库 是一个对xhr的封装 是一个插件 目前不常使用了因为不咋维护了 引入
//main.js
// 引入插件
import vueResource from vue-resource
//使用插件
Vue.use(vueResource)引入之后vm和vc都多了一个$http属性
使用
this.$http.get(...) //和axios的api相同插槽 让父组件可以向子组件指定位置插入html结构也是一种组件间通信的方式适用于父组件子组件 默认插槽
// 子组件 Category.vue
templatedivh1{{ cateName }}/h1!-- 定义一个插槽 --slot默认值当使用者没有传递具体结构时就会展示/slot/div
/template// 父组件 App.vue
Category :cateName美食
imgsrchttps://img-home.csdnimg.cn/images/20201124032511.pngreferrerpolicyno-referreralt
/
/Category
Category/Category注意 插槽内容的样式可以写在子组件里也可以写在使用者上 具名插槽
就是定义插槽时添加name属性 使用插槽时添加slot属性
slot namecenter默认值当使用者没有传递具体结构时就会展示/slotCategoryimgslotcentersrchttps://img-home.csdnimg.cn/images/20201124032511.pngreferrerpolicyno-referreralt/
/Category
//或者
// v-slot只能用于template标签上
Categorytemplate v-slot:center//..../template
/Category作用域插槽
通过插槽传递数据给插槽使用者
// 将数据传入
slot namecenter :listDatalist默认值当使用者没有传递具体结构时就会展示/slot注意 必须使用template标签
Categorytemplate scoplistData slotcenter//..../template
/Category
