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

注意： 虽然可以通过axios请求http，但是并不会在network中看到真实的请求！！！

官网：http://mockjs.com/

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

yarn add mockjs

新建 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': ['男', '女'],
});

main.js 引入

import '/api/mock.js'

测试

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

vite实现Mock数据

添加mock插件依赖

{
"devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite-plugin-mock": "3.0.2", // 必备
    "vite": "^4.5.3"
  }
}

vite.config.js 添加插件

// vite.config.js
import { viteMockServe } from 'vite-plugin-mock'
import vue from "@vitejs/plugin-vue";


export default ({ command }) => {
    return {
        plugins: [
            vue(),
            viteMockServe({
                mockPath: './mock',       // 指定 mock 文件目录
                localEnabled: true,     // 开发环境启用
                enable: command === 'serve', // 是否使用mock接口；等于serve是开发阶段使用mock接口
            }),
        ],
    }
};

根目录创建 mock/user.js，和node_moudules同级；

访问：http://localhost:3002/mock/user/info 就能访问。还可以传参进行逻辑处理.

body 可以得到传参。 request可以得到所有的数据，包括headers

const users = [
  { name: 'admin', password: '123456', token: 'admin', info: {
    name: '系统管理员'
  }},
  { name: 'editor', password: '123456', token: 'editor', info: {
    name: '编辑人员'
  }},
  { name: 'test', password: '123456', token: 'test', info: {
    name: '测试人员'
  }},
]
export default [
  {
    url: `/mock/user/login`,
    method: 'post',
    response: ({ body }) => {
      const user = users.find(user => {
        return body.name === user.name && body.password === user.password
      })
      if (user) {
        return {
          code: 200,
          data: {
            token: user.token,
          },
        };
      } else {
        return {
          code: 401,
          data: {},
          msg: '用户名或密码错误'
        };
      }
      
    }
  },
  {
      url: `/mock/user/info`,
      method: 'get',
      response: (request) => {
        const token  = request.headers.token;;
        if (token){
          return {
            code: 200,
            data: users[0],
            msg: 'success'
          };
        } else{
          return "还没登录"
        }
      }
    }
]