node simulates interface request data

1. npm init initializes the node folder

2. Download the express plugin in the current folder npm i express

3. Create a new express.js file

---

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. Configure in vue.config.js

Vue project cross-domain request configuration method of local Node.js server

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

---

1. vue file use

<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>

---

Renderings: