VUE（4）{网络请求、过滤器、组件、组件传参、跨域问题}

一、网络请求

不同的框架 都有自己的 网络请求模块:

• 原生html: ajax

• vue: axios

• 微信: wx.request

• react: fetch

• Angular: HttpClient

axios模块安装

默认生成的 vue 项目包, 不含 axios 模块, 需要手动安装 和 集成 npm i axios vue-axios

<template>
  <div>
    <button @click="getData">获取数据</button>
    <!-- 如果 数据data 存在, 再加载此部分DOM -->
    <template v-if="data">
      <div v-for="item in data.newArrivalItems" :key="item.pid">
        <img width="200px" :src="baseURL + item.pic" alt="" />
        <div>¥{{ item.price }}</div>
        <div>{{ item.title }}</div>
        <div>{{ item.details }}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      baseURL: "http://www.codeboy.com:9999/",
    }
  },
  methods: {
    getData() {
      let url = "http://www.codeboy.com:9999/data/product/index.php"
      this.axios.get(url).then(res => {
        console.log(res)
        // 数据存储到本地的data中, 才能使用
        this.data = res.data
      })
    },
  },
  //计算属性
  computed: {
    // 此处看实际情况, 如果比较复杂 就写个计算属性来读
    newArrivalItems() {
      return this.data.newArrivalItems
    },
  },
}
</script>

<style lang="scss" scoped></style>

二、过滤器

<template>
  <div>
    <ul>
      <li>姓名:{{ emp.name }}</li>
      <!-- 过滤器filter: 用于修改 {{}} 中的值 -->
      <!-- {{ 值 | 过滤器 }} -->
      <li>性别:{{ emp.gender | sex }}</li>
      <li>婚姻:{{ emp.married | marry }}</li>
      <li>年龄:{{ emp.age | age_group }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emp: { name: "Lucy", gender: 0, married: true, age: 27 },
    };
  },
  // vfilter: 过滤器
  filters: {
    age_group(value) {
      if (value < 18) {
        return "少年";
      } else if (value <= 26) {
        return "青年";
      } else if (value <= 38) {
        return "中年";
      } else {
        return "其他..";
      }
    },
    marry(value) {
      return value ? "已婚" : "未婚";
    },
    // {{ 性别 | sex }}
    sex(value) {
      // value 就是 | 左侧的值
      // return 的值就是 过滤后的结果
      // 此处 0代表女 1代表男
      return ["女", "男"][value];
      // arr[序号]. 数组字面量是[]
      // 就会出现 [数组..][序号] 格式
    },
  },
};
</script>

<style lang="scss" scoped></style>

三、组件

<template>
  <div>
    <!-- 组件化: 1个页面由不同的部分组合而成 -->
    <!-- 团队协作时, 会把网页拆分成不同的模块, 然后分别书写, 最终合并到一起 -->
    <!-- 文件夹: components 就是专门放 组件的 -->
    <Header />
    <!-- 可以复用 -->
    <Header />
    <Footer />
    <Footer />
    <Footer />
  </div>
</template>

<script>
// 使用时 分3步:  引入 -> 注册 -> 使用
// 名称要求大驼峰, 避免不小心 和 系统标签重名-系统标签是全小写
import Header from "./components/Header.vue"
import Footer from "./components/Footer.vue"

export default {
  // vcomponents
  components: {
    // 下方是简化写法, 完整格式: Header: Header
    // 第一个Header是在当前页面使用时的标签名
    // 第二个Header是上方引入是时的名字
    Header, //注册到当前App.vue中
    Footer: Footer, //完整格式,  都会简化为 Footer
  },
}
</script>

<style lang="scss" scoped></style>

四、组件传参

<template>
  <div>
    <!-- 组件的属性传值 -->
    <!-- phone是字符串类型, 可以不写 :phone -->
    <MyHeader phone="1889898778" :titles="[88, 33, 765, '哈哈']" />
    <!-- 两个单词组成的组件名, 可以改为如下写法: 不强制 -->
    <my-header phone="10086" :titles="[11, 22, 33, 44]"></my-header>
  </div>
</template>

<script>
// 引入 -> 注册 -> 使用
import MyHeader from "./components/MyHeader.vue"
export default {
  components: {
    MyHeader, //注册
  },
}
</script>

<style lang="scss" scoped></style>

五、跨域问题

有些接口服务器没有写 CORS, 导致前端出现跨域问题

斗鱼接口:https://m.douyu.com/api/room/list?page=2&type=LOL

Vue自带的服务器 可以轻松的配置代理, 允许跨域请求的发送

典型的跨域报错: 关键词 CORS 和 Access-Control-Allow-Origin

跨域报错: 当前项目服务器 和 请求的接口服务器 不是同一个服务器

解决方案通常3种:

1. 服务器可接触: 添加 CORS 的允许策略即可

2. 代理: 代理服务器, 我们向自己的服务器发请求, 服务器转向 目标服务器请求数据

   • vue脚手架自带的服务器, 稍作配置, 就会变为代理服务器

   • 提醒: 此方式不适合 项目上线!! 如果真的上线, 需要自己做一个 express 的代理服务器

3. jsonp: 使用太少...

<template>
  <div>
    <button @click="getData(1)">请求数据</button>
    <button @click="getData(data.nowPage + 1)">换下一批</button>
    <div>
      <template v-if="data">
        <div v-for="item in data.list" :key="item.rid">
          <img width="200" :src="item.roomSrc" alt="" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    }
  },
  methods: {
    getData(page) {
      // page: 页数, 代表请求的页数
      let url = `/douyu/api/room/list?page=${page}&type=yz`

      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data.data
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>

解决方法，

• 创建一个  vue.config.js 文件放在项目根目录下,
• 与其他配置文件在一起 此文件名是官方规定, 不可修改!

// 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: {
          "^/其他的...": "",
        },
      },
    },
  },
}