需求

事情是这样的，易班的签到实时数据展示中，只能手动输入学生的ID号，单个进行查询，这怎么能忍！

接口信息如下图

接口地址：http://211.68.xxxx.30:8090/yqfx/search?studentid=...
参数studentid对应的是你要查询的ID情况

我要把所有人的信息一起获取出来，省的手动挨个输入查询

问题

使用vue写了个小页面，由于本地请求他的服务器数据涉及到了跨域问题，之前都是别人搭建的，自己没弄过，在此记录一下。

vue.config.js

在项目的根目录下面新建 vue.config.js，这个配置文件的说明请参考官方文档，在这个文件配置一下跨域

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      //配置跨域
      "/api": {
        target: "http://211.68.xx1.30:8090/yqfx/", //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "" //请求的时候使用这个api就可以
        }
      }
    }
  }
};

极其重要的一步

在项目的main.js中,一定要加入axios.defaults.baseURL = “/api”;

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "normalize.css";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import axios from "axios";

axios.defaults.baseURL = "/api";
Vue.config.productionTip = false;
Vue.prototype.axios = axios;

Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

使用

    getInfo(currentValue) {
      let that = this;
      this.axios
        .get("search?studentid=" + currentValue.id)
        .then(function(response) {
          let mes = response.data.split(":");
          that.$set(currentValue, "mes", mes[1]);
        })
        .catch(function() {});
    },

项目的主体HTML

<template>
  <div class="home">
    <div class="stu-contain">
      <div class="stu" v-for="(value, key) in studentId" :key="key">
        <span class="stu-id">{{ value.id }}</span>
        <span class="stu-name">{{ value.name }}</span>
        <span class="stu-mes-wrong" v-if="value.mes == '未签到'">{{
          value.mes
        }}</span>
        <span class="stu-mes" v-else>{{ value.mes }}</span>
      </div>
    </div>
    <div class="tip">
      <div class="tip-time">
        <Clock></Clock>
      </div>
      <div class="tip-num">
        <span class="tip-num-already">已签到：{{ already }}</span>
        <span class="tip-num-no">未签到：{{ no }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import studentId from "./studentId";
import Clock from "./Clock";
export default {
  name: "Home",
  components: { Clock },
  data() {
    return {
      studentId: studentId,
      already: 0,
      no: 0
    };
  },
  methods: {
    getInfo(currentValue) {
      let that = this;
      this.axios
        .get("search?studentid=" + currentValue.id)
        .then(function(response) {
          let mes = response.data.split(":");
          that.$set(currentValue, "mes", mes[1]);
        })
        .catch(function() {});
    },
    update() {
      let that = this;
      this.studentId.forEach(function(currentValue) {
        that.getInfo(currentValue);
      });
      let temp = [];
      this.studentId.forEach(function(currentValue) {
        if (currentValue.mes == "未签到") {
          temp.push(currentValue);
        }
      });
      this.already = 33 - temp.length;
      this.no = temp.length;
    }
  },
  mounted() {
    this.update();
  }
};
</script>
<style lang="less" scoped>
@import url("./home.less");
</style>

studentId.js

里面就是数组我嵌套的学生信息

结果

再次开发

后面如果还有别的学院有这个需求，可以通过sheet.js做成上传excel表格的那种形式，各学院通过上传自己的学生名单，来获取易班的签到情况…

补充

Vue之Axios跨域问题解决方案

vue3.0 vue.config.js 配置跨域

日常开发中的几个常用跨域处理方式

中文版axios

vue3.0 vue.config.js 说明