【毕设Day13】

前言

第13天啦！！！加油加油加油！！！

---

一、引入Vant第三方库

1.通过npm安装Vant

npm i vant@latest-v2 -S

2.引入组件：自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
安装插件：npm i babel-plugin-import -D

在 babel.config.js 中进行相关配置：

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from ‘vant’;

二、疫情期间疫情出行防疫政策

1.新建CovidVant.vue文件

新建./plugins/vant.js，用于保存需要引入的组件。将文件引入到main.js

//引入Vant
import './plugins/vant'

2.使用Cascader 级联选择

import Vue from 'vue';
import {
    Cascader,
    Field,
    Popup
} from 'vant';

Vue.use(Cascader);
Vue.use(Field);
Vue.use(Popup);

3.CovidVant.vue文件使用Cascader 级联选择

  <div class="select-city">
    <h2>疫情期间的出行政策</h2>
    <!-- 出发的城市 -->
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="出发的城市"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <!-- 到达的城市 -->
    <van-field
      v-model="fieldValue2"
      is-link
      readonly
      label="抵达的城市"
      placeholder="请选择所在地区"
      @click="show2 = true"
    />
    <van-popup v-model="show2" round position="bottom">
      <van-cascader
        v-model="cascaderValue2"
        title="请选择所在地区"
        :options="options"
        @close="show2 = false"
        @finish="onFinish2"
      />
    </van-popup>
  </div>

三、使用聚合数据api（2022出行防疫政策指南）

1.支持城市清单查询

请求地址：http://apis.juhe.cn/springTravel/citys
返回格式：json
请求方式：http get
请求示例：http://apis.juhe.cn/springTravel/citys?key=
请求参数：请求Key：b25b6c2489489a836b8cddef10e54894
接口备注：支持城市清单查询，可以直接保存内置程序中

四、CovidVant组件调用城市api

1.调用城市列表api（travalCity），出现跨域问题

产生跨域原因：后台接口没有配置资源共享
配置反向代理

2.解决跨域问题

使用Vue Cli中的 devServer.proxy
Type: string | Object
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

3.vue.config.js文件进行反向代理配置

//全局信息配置
const path = require('path')
module.exports = {
  //由于【聚合数据】2022出行防疫政策指南，没有配置资源共享，故出现跨域问题，在此处使用反向代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://apis.juhe.cn', //真实请求的网址
        ws: true,
        changeOrigin: true, //是否允许跨域
        pathRewrite: { //重定向  /api代替了上面的网址http://apis.juhe.cn
          '^/api': ''
        }
      },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  }
}

注意：配置完成之后项目需要重启

4.api/base.js增加【聚合数据】2022出行防疫政策指南

    //【聚合数据】2022出行防疫政策指南
    // baseUrl3: 'http://apis.juhe.cn',     //已经在vue.config.js中进行反向代理为/api

    //支持城市清单查询
    travelCity: '/api/springTravel/citys', //在此要补上/api

5.api/index.js增加travelCity疫情城市列表方法

//【聚合数据】疫情城市列表
    travelCity() {
        return axios.get(base.travelCity + '?key=' + Secret.travelKey)
    }

6.api/Secret.js增加密钥

    //【聚合数据】2022出行防疫政策指南
    travelKey: 'b25b6c2489489a836b8cddef10e54894'

7.将密钥提出来

密钥可以使用5的方法，也可以作为参数拿出来

    //【聚合数据】疫情城市列表
    travelCity(params) {
        return axios.get(base.travelCity, { //此处将密钥作为参数传进来
            params // + '?key=' + Secret.travelKey
        })
    }

CovidVant引入Secret.js文件

import Secret from '../../api/Secret'

五、CovidVant组件请求数据

1.进行数据请求

  mounted() {
    this.$api
      .travelCity({
        key: Secret.travelKey,
      })
      .then((res) => {
        console.log(res.data);
      });
  },

使用Vant，其列表选项结构为

2.对请求的数据进行转化

mounted() {
    this.$api
      .travelCity({
        key: Secret.travelKey,
      })
      .then((res) => {
        console.log(res.data.result); //如果调用接口次数达到上线，则打印"今日次数已达上限"
        if (res.data.result) {
          //let arr =  [{text:'',value:'',children[{}]},{}]
          let arr = [];
          res.data.result.forEach((element) => {
            //province
            let temp = {};
            temp.text = element.province;
            temp.value = element.province_id;
            temp.children = [];
            element.citys.forEach((item) => {
              let obj = {};
              obj.text = item.city;
              obj.value = item.city_id;
              temp.children.push(obj);
            });
            arr.push(temp);
          });
          this.options = arr;
          console.log(arr);
        } else {
          console.log("今日次数已达上限");
        }
      });
  },

六、添加查询点击按钮

1.Vant.js引入Button

import Vue from 'vue';
import {
    Cascader,
    Field,
    Popup,
    Button,
} from 'vant';

Vue.use(Cascader);
Vue.use(Field);
Vue.use(Popup);
Vue.use(Button);

2.在CovidVant中使用

    <div class="btn">
      <van-button block type="primary">点击查看</van-button>
    </div>

七、CovidVant组件调用出行政策api

1.查询出行防疫政策

接口地址：http://apis.juhe.cn/springTravel/query
返回格式：json
请求方式：http get/post
请求示例：http://apis.juhe.cn/springTravel/query?key=&from=10191&to=10349

from： 出发地城市ID
to： 目的地城市ID

请求参数：请求Key：b25b6c2489489a836b8cddef10e54894
接口备注：根据出入城市，查询出行防疫政策；以上政策整理自当地政府等公开发布的消息，如有更新或错漏，请以最新政策为准，建议在出行前咨询当地防疫部门、机场、火车站等

2.获取出发地城市ID、目的地城市ID

查看Vant文档，可知绑定的@finish有三个参数，value代表：选项对应的值
将value值取出来赋值给this.from和this.to

// 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions}) {
      // console.log(value, selectedOptions, tabIndex);
      this.from = value;
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    onFinish2({ value, selectedOptions}) {
      this.to = value;
      this.show2 = false;
      this.fieldValue2 = selectedOptions.map((option) => option.text).join("/");
    },

3.api/base.js增加防疫政策api

    // 查询出行防疫政策
    travelQuery: '/api/springTravel/query',

4.api/index.js增加travelCity疫情城市列表方法

// get传参两种方式：1、进行拼接 axios.get('url?xx=xx&xx=xx')
// 2、传对象用params 
// axios.get('url', {
//     params: {
//     参数:xx
// } })

    travelQuery(params) {//params={from:'',to:''}
        return axios.get(base.travelQuery + '?key=' + Secret.travelKey, {
            params
        })
    },

5.点击查询获取数据

    //查询城市的疫情政策
    searth() {
      console.log(this.from, this.to);
      // 请求接口
      this.$api
        .travelQuery({
          from: this.from,
          to: this.to,
        })
        .then((res) => {
          console.log("000000", res.data);
        });
    },