02-数据Mock实现

在前后端分类的开发模式下，前端可以在没有实际后端接口的支持下先进行接口数据的模拟，进行正常的业务功能开发

参考博客：https://blog.csdn.net/liyou123456789/article/details/132012512

json-server实现Mock

TIP

1. Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。
2. github地址：https://github.com/typicode/json-server
3. npm地址：https://www.npmjs.com/package/json-server

实现步骤：

1. 项目中安装json-server npm i -D json-server
2. 准备一个json文件 比如根目录下 ./server/data.json
3. package.json 文件 添加启动命令

"server": "json-server -w ./server/data.json --port 8888"

-w 是监听

./server/data.json

意思是 有三个接口。

在浏览器中输入地址：http://localhost:+端口号/接口名称，即可查看数据。

例如：输入http://localhost:8888/comments

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

mockjs实现

官网：http://mockjs.com/

mockjs还是挺强大的，可以提供http接口，还可以直接造数据。很简单强大

yarn add mockjs
yarn add canvas

新建 src/api/mock.js ，并在main.js入口文件中引入

import Mock from 'mockjs';

// 使用Mock.js进行数据模拟
Mock.mock('/api/user', 'get', {
  name: '@name',
  age: '@integer(18, 60)',
  'gender|1': ['男', '女'],
});

测试

<script setup>
import Mock from 'mockjs'
import axios  from "axios";

let data = Mock.mock({
   // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
   'list|1-10': [{
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1
   }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

axios.get('/api/user').then(response => {
   const data1 = response.data;
   console.log('模拟数据:', data1);
})
</script>