vue基础前端3

框架路由都写完了下一步就是业务的是实现例如下面这个代码：

<template>
  <div class="container">
    <h2>存量房登记文件</h2>
    <el-upload
      ref="uploadRef"
      action="http://47.120.15.238:10086/common/upload"
      :headers="getHeader"
      :auto-upload="false"
      :on-success="successd"
    >
      <template #trigger>
        <el-button type="primary">上传存量房登记文件</el-button> </template
      ><br /><br /><br />
      <el-button type="success" @click="submitUpload"> 提交文件 </el-button>

      <template #tip>
        <div class="el-upload__tip">
          存量房登记所需文件：<br />
          房地产转让及权属登记申请表、土地房屋权属证书、申请人身份证明复印件、转让人为境内自然人的，<br />
          提交婚姻状况证明、配偶同意交易声明、存量房买卖合同(一份)、拍卖成交的，提交拍卖成交确认书、<br />
          划拨用地、限制性出让用地，提交补签的土地出让合同和出让金缴清证明及完税凭证、符合减免税条件的，提交减免税申请表及证明
        </div>
      </template>
    </el-upload>
    <img />
  </div>
</template>
<script>
import { DistrictName_cn2en } from "@/utils/NameFunction.js";
import { ElMessage } from "element-plus";
export default {
  computed: {
    getHeader() {
      let myHeaders = new Headers();
      // myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
      let token = this.$store.getters["user/getUserToken"];
      myHeaders.append("X-Token", token);
      return myHeaders;
    },
  },
  methods: {
    submitUpload() {
      this.$refs.uploadRef.submit();
    },
    successd(response) {
      let url = "http://47.120.15.238:10086/businessInfo";
      let fileJSON = {
        dataUrl: response.data,
        area: DistrictName_cn2en(this.$store.getters["user/getUserDistrict"]),
        userId: this.$store.getters["user/getUserDetail"].id,
      };
      fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Token": this.$store.getters["user/getUserToken"],
        },
        body: JSON.stringify(fileJSON),
      })
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          console.log(data);
        });
        ElMessage({
        type: "success",
        duration: 2000,
        message: "文件上传成功",
      });
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
  align-items: center;
}
</style>

这样子一份简单的上传业务文件就做好了，功能点比较简答，需要的话也可以自己添加input输入属性等

前端页面开发完成，需要后端调试接口，但是后端接口(还在优化中)还没有发布到测试环境，怎么连后端同事的电脑在他本地环境中调用接口呢？

解决：

打开前端代理配置文件：config/index.js

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
          // 目标接口域名 (一般是swagger中beseUrl地址即：用api代替http://172.16.0.121:8090/ 这一长串)
        target: 'http://172.16.0.121:8090/', 
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '/' // 重写接口
        }
      }
    },
    // Various Dev Server settings
    host: 'localhost', // 127.0.0.1 // can be overwritten by process.env.HOST
    // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    port: 8083, 
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,
    /**
     * Source Maps
     */
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',
    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    cssSourceMap: true
  },

  说明：只需要在此文件中，配置后端的接口路径即可，其他的不用管，
  然后npm run dev 重启本地服务，
  在浏览器地址栏打开即可，
  这里的host和port是你本地前端服务启动的主机和端口号
  Your application is running here: http://localhost:8083
   调用接口发现接口路径的ip是对方本机的ip, 这样就可以连接对方电脑调试接口了