VUE（4）{网络请求、过滤器、组件、组件传参、跨域问题}
一、网络请求
不同的框架 都有自己的 网络请求模块:
axios模块安装
默认生成的 vue 项目包, 不含 axios 模块, 需要手动安装 和 集成npm i axios vue-axios
¥{{ item.price }}{{ item.title }}{{ item.details }}
二、过滤器
- 姓名:{{ emp.name }}
{}} 中的值 -->{ 值 | 过滤器 }} -->- 性别:{{ emp.gender | sex }}
- 婚姻:{{ emp.married | marry }}
- 年龄:{{ emp.age | age_group }}
三、组件
四、组件传参
五、跨域问题
有些接口服务器没有写 CORS, 导致前端出现跨域问题
斗鱼接口:
Vue自带的服务器 可以轻松的配置代理, 允许跨域请求的发送
典型的跨域报错: 关键词 CORS 和 --Allow-
跨域报错: 当前项目服务器 和 请求的接口服务器 不是同一个服务器
解决方案通常3种:
服务器可接触: 添加 CORS 的允许策略即可
代理: 代理服务器, 我们向自己的服务器发请求, 服务器转向 目标服务器请求数据
jsonp: 使用太少...
解决方法，
// vue.config.js
// 放在项目根目录下, 与其他配置文件在一起
// 此文件名是官方规定, 不可修改!
// 以下代码为固定格式:
module.exports = {// 开发服务器的配置devServer: {// 代理配置proxy: {// 以前发请求是 http 或 https 开头// 自定义请求的开头, 使用代理方式:// /douyu 可以写 任何的 /xxxx 的内容, 此处就代表用 /douyu 开头的请求,用代理方式处理"/douyu": {// 代理到 哪个服务器, 此处为 斗鱼的服务器target: "https://m.douyu.com",// 转发的target 与当前服务器 有变更changeOrigin: true,pathRewrite: {// ^代表字符串开头// 实际发送请求时,把开头的 /douyu 删除,因为这只是个代理的标识,并不是请求的一部分"^/douyu": "",},},// 如果有其他网址也需要跨域, 则与 /douyu 并排书写即可"/其他的...": {target: "其他的网址",changeOrigin: true,pathRewrite: {"^/其他的...": "",},},},},
}
