node+express模拟数据(三)04.02——server配置后端接口数据-data.js格式

node+express模拟数据(三)04.02——server配置后端接口数据-data.js格式

1、data数据

在server/index.js同层级，新建data.js文件

// 范本详情

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

router.get('/detail', (req, res) => {
  res.json(
    // 示例一
    {
      "message": "成功",
      "code": 200,
      "result": {
        "id": "uOcno5Q0c2XpNN5LtgzKZ7g31EJb9ni6",
        "class_id": 41,
        "title": "定698向",
        "scope": "适用范围",
        "creator": "louqiao",
        "comment": "123备注"
      }
    }

  )
})

module.exports = router;

2、操作页面

src/views/demo/index.vue

<template>
  <div class="container">sadas</div>
</template>
<script>
// 引入axios
import axios from "axios";
export default {
  data() {
    return {};
  },
  created() {
    this.getDeta();
    this.getLinkList();
    this.getRedList();
  },
  methods: {
    getLinkList() {
      // 测试接口
      this.$http
        .get("random")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getRedList() {
      // 测试接口
      this.$http
        .get("demo")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getDeta() {
      // console.log('开始合同详情')
      let res = await this.$http.get("/detail");
    },
  },
};
</script>
<style scoped lang="less">
</style>

3、操作流程

第一步：在vscode中点击项目文件夹，同时点击"Ctrl+上引号`"，打开命令行

第二步：切换目录，继续输入：

cd server

第三步：启动node项目命令，验证跨域，接口数据是否显示

node index.js

启动node服务器

第四步：启动node项目命令后，重启项目

npm run serve

F12打开控制台，点击Network——>XHR——>点击下方的random，右侧——验证跨域，接口数据是否显示

显示结果

01

02

03