前端vue 本地环境axios 测试

最新推荐文章于 2024-08-02 13:49:24 发布

起啥名呢啊

最新推荐文章于 2024-08-02 13:49:24 发布

阅读量561

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_39891473/article/details/121765569

版权

本文介绍如何在没有实时后台接口时，通过在Vue应用中模拟JSON数据，使用proxy设置实现本地测试。通过创建text.json文件并配置devServer，开发者可以便捷地进行接口模拟和前端开发调试。

摘要由CSDN通过智能技术生成

有时候在做项目的时候,会出现后台接口不能即使给到你, 这样就不能进行测试,与接口对接,现在如果有个本地环境供你测试, 就真的再好不过了! 下面是我用到的方法,仅供参考…

1 在public文件夹中新建text.json文件,文件中填写json格式数据,例如:

{
    "result":0,
    "result_msg":"ok",
    "version":{
        "softVersion":"SFV1.1",
        "hardVersion":"HDV1.2"
    },
    "status":{
        "battery":{
            "Temperature":23.38,
            "CarrierVoltage":12.26,
            "Voltage":12.26,
            "ArrayCurrent":0,
            "ArrayVoltage":0,
            "CarrierCurrent":0.11,
            "Current":0.12
        }
    }
}

2 在vue.config.js文件中的devServer中的proxy中,填入以下代码:

 "/json": {
        target: "http://localhost:8060/", // 对应服务器的接口   这里端口号写入自己的
        changeOrigin: true,
        pathRewrite: {
          "^/json": "/",
        },
      },

3 在页面需要请求的位置的url 填:url: “/text.json”

methods: {
    get() {
      this.$axios({
        method: "get",
        url: "/text.json",
      })
        .then((res) => {
       console.log(res)
        })
        .catch((error) => {
          console.log(error);
    },
  },

这样就可以请求到了
在这里插入图片描述