# Mock.js
{%hackmd BJrTq20hE %}
- [mock 寫法一](https://segmentfault.com/a/1190000021925199)、[fake data (DOC)](http://mockjs.com/examples.html)
- [Picsum](https://picsum.photos/)：假圖片(寬、高)，如：https://picsum.photos/200/300
## 安裝(in vue2)：[link (寫法二)](https://blog.csdn.net/Mme061300/article/details/130343270)
1. `npm install mockjs`
2. 在src目录下创建mock目录，定义mock主文件index.js
3. 在main.js引入mock文件

    import "@/mock/index";

1. 設定假資料：

    import Mock from "mockjs"

    Mock.mock("/data/list", "get", {
      // 属性 list 的值是一个数组，随机生成 1 到 10 个元素
      "list|1-10": [
        {
          // 随机生成1-10个★
          "string|1-10": "★",
            ...
        }
      ]
    }

1. 使用：

    import axios from 'axios';

    function getData() {
        axios
            .get("/data/list")
            .then((res) => {
                console.log(res);
            })
            .catch((error) => {
                console.log(error);
            });
    }

    getData();

## 安裝(in Vite)：
- [vite配置mockjs](https://juejin.cn/post/6955351376146726949)：`npm install mockjs`，`vite-plugin-mock --save-dev`
- [viteMockServe 配置](https://github.com/anncwb/vite-plugin-mock/blob/main/README.zh_CN.md)

    //vite.config.ts
    import type { ConfigEnv } from 'vite'
    import { viteMockServe } from 'vite-plugin-mock'

    export default defineConfig((configEnv: ConfigEnv) => {
      const isBuild = configEnv.command === 'build'

      return {
        base: VITE_PUBLIC_PATH,
        resolve: {
          alias: {
            '~': rootPath,
            '@': srcPath,
          },
        },
        plugins: [
          vue(),
          viteMockServe({
            mockPath: "mock/api", //mock文件地址
            localEnabled: !isBuild, // 开发打包开关
            prodEnabled: isBuild, // 生产打包开关
            // 这样可以控制关闭mock的时候不让mock打包到最终代码内
            injectCode: `
              import { setupProdMockServer } from './mockProdServer';
              setupProdMockServer();
            `,
            logger: false, //是否在控制台显示请求日志
            supportTs: false //打开后，可以读取 ts 文件模块。 请注意，打开后  将无法监视.js 文件
          })
        ]
      }
    });

- src目录下建立mock文件夾>user.ts(產生假資料)：

    //user.ts
    import { MockMethod } from 'vite-plugin-mock'
    import Mock from 'mockjs'

    const projectList = Mock.mock({
        "list|20": [{
        'name': '@cname', // 中文名
        'account': `@word`, // 英文单词
        'phone': /09[0-9]{8}/, // 正则模式
        'deptName': Mock.mock('@cword(2,4)'), // 随机2-4字中文单词
        'id': '@guid', // guid
        }]
    })

    export default [
        {
            //模拟get请求
            url: '/api/getUser',
            method: 'get',
            response: () => {
                console.log('body>>>>>>>>')
                return {
                    code: 0,
                    message: 'ok',
                    data: ['aa', projectList]
                }
            }
        },
        {
            //模拟post请求(回傳參數)
            url: "/api/user/signUp",
            method: "post",
            response: (data) => {
              console.log("body>>>>>>>>");
              return {
                code: 200,
                message: "user created",
                data: data.body,
              };
            }
        },
        {
        …更多api
        }
    ] as MockMethod[]

開始使用：

    <template>
    <div>请求数据：{{ projectList }}</div>
    <button @click="getProjectList">获取mock数据</button>
    </template>

    <script>
    // import axios from 'axios'; //如果用composition需要import進來
    export default {
        data() {
            return {
                projectList: [],
            };
        },
        created() {
            this.getProjectList();
        },
        methods: {
            getProjectList() {
                this.$http.get("/api/getUser").then((res) => {
                console.log(res);
                });
            },
        },
    };
    </script>

## 安裝(in Nuxt)：
  `npm i mockjs -D`

### 設定：
- 在plugins目录创建mock.js文件，然後在config引入

    // plugins/mock.js
    import Mock from "mockjs"

    Mock.mock('user.json', {
        "list|1-10": [
            {
                "id|+1": 1,
                email: "@EMAIL",
            },
        ],
    })

    // 傳送資料
    Mock.mock('/api/user/signUp', 'post', (options) => {
        console.log('body>>>>>>');
        return {
            status: 200,
            message: '请求列表成功！',
            total: 20,
            data: options
        };
    })

    //nuxt.config.js
    plugins: [
        { src: '~plugins/mock.js', ssr: true }
    ],

### 發送需求：(PS: 網址需與mock設定的一模一樣)
- ```javascript=
//取值
axios.get('user.json').then((res) => {
console.log('mockData', res)
})

//傳值
axios.post('/api/user/signUp', data.value).then((res) => {
const data = res.data.data.body
console.log(JSON.parse(data))
})

### mockjs的正則調表達式：
/要定義的內容/：用兩個/包起來
\d：一個數字

## 自定義random函數：

Random.extend({
weekday: function(date) {
var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return this.pick(weekdays);
},
sex: function(date) {
var sexes = ['男', '女', '中性', '未知'];
return this.pick(sexes);
}
});

console.log(Random.weekday()); // 结果: Saturday
console.log(Mock.mock('@weekday')); // 结果: 112Tuesday
console.log(Random.sex()); // 结果: 男
console.log(Mock.mock('@sex')); // 结果: 未知

# Mockoon：mock工具
[教學](https://israynotarray.com/other/20230307/1852899605/?fbclid=IwAR1tuRH2ntkVZsBL2IzJTod78z0rRk_ho1PJtO02Ab37p3L_ZRgj4-uAsVE#Mockoon-%E6%98%AF%E4%BB%80%E9%BA%BC)，[假資料文件-helpers](https://mockoon.com/docs/latest/templating/mockoon-helpers/)
# Mock Service Work (mswjs)
**Service Worker 特點**
- https://mswjs.io/docs/getting-started ，支援 `REST` 跟 `GraphQL` 的無實體 mock server
-   因為安全考量，只能在 https 和 localhost (本機測試環境)使用 service worker
-   會在瀏覽器背景執行，不影響瀏覽器的主執行緒
-   Service Worker不能操作DOM

## [使用教學](https://medium.com/coding-hot-pot/%E5%88%A5%E7%AD%89%E4%BA%86-%E7%94%A8mock-service-worker%E4%BE%86%E7%94%A2%E7%94%9Fmock-api%E5%90%A7-f921ab30d5c7)
1. 安裝：`npm install msw --save-dev`