node模拟接口请求数据

1. npm init 初始化node文件夹

2. 在当前文件夹npm i express 下载express插件

3. 新建express.js文件

---

express.js

const express = require("express");
const app = express();
const apiRouter = require("./apiRouter");

// post参数的解析
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use("/", apiRouter);
app.listen(3000, () => {
  console.log("express server running at localhost:3000");
});

---

apiRouter.js

const express = require("express");
const router = express.Router();

// get方法
router.get("/add", (req, res) => {
  res.send({
    status: 0,
    msg: "GET调用成功",
    data: req.query,
  });
});

// post方法
router.post("/addPost", (req, res) => {
  res.send({
    status: 200,
    msg: "POST调用成功",
    list: req.body,
  });
});

module.exports = router;

---

4. 在vue.config.js中配置

Vue项目跨域请求本地Node.js服务器的配置方法

module.exports = {
  transpileDependencies: true, // // Babel 显式转译列表
  lintOnSave: false, // eslint校验
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "http://localhost:3000", //路径重写
        },
      },
    },
  },
};

---

1. vue文件使用

   扫描二维码关注公众号，回复： 15061953 查看本文章

<template>
  <el-button type="success" @click="getAdd" round>Success</el-button>
</template>

<script>
export default {
  methods: {
    getAdd() {
      this.$http
        .get("/api/add", { params: { name: "zhangsan", age: 18 } })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style scoped>
</style>

---

效果图：