mock.js 使用【简单】

Mock.js 官网

类似的：YApi Pro 官网

简单使用 mock.js

1. 在项目中安装 axios 和 mockjs

npm install axios mockjs

2. 在 main.ts 的同级目录下新建 mock.ts 文件

3. mock.ts 文件内容如下：

// mock.ts

import Mock from "mockjs"; // 引入 mock

const Random = Mock.Random; // 获取 mock.Random 对象

const produceNewsData = function () {
  const newsList = [];
  for (let i = 0; i < 20; i++) {
    const newNewsObject = {
      title: Random.ctitle(), //  Random.ctitle( min, max ) 随机产生一个中文标题，长度默认在3-7之间
      content: Random.cparagraph(), // Random.cparagraph(min, max) 随机生成一个中文段落，段落里的句子个数默认 3-7 个
      createdTime: Random.date(), // Random.date() 指示生成的日期字符串的格式,默认为 yyyy-MM-dd；
    };
    newsList.push(newNewsObject);
  }

  return newsList;
};

Mock.mock("/mock/news", produceNewsData);

4. 在 main.ts 中引入 mock

// main.ts

// ...
import "./mock";
// ...

5. 在任意的页面中使用

// user.vue

<script lang="ts" setup>

import axios from "axios";

onMounted(() => {
  axios.get("/mock/news").then((res) => {
    console.log(res.data);
  });
});

</script>

6. 页面的控制台中可以看到 mock 模拟的数据