使用mockjs来模拟数据( Use mockjs to mock data. )

[ZeronoFreya]

在编写界面时会遇到界面元素会根据数据变化的情况，比如listview，模拟数据是个很好的方案，你可以直接写在html里，但很难维护。

使用模拟数据之前我一般这么获取数据:

window.go?.main.App.GetXxx( args ).then(data=>{ ... })

很明显用浏览器开发无法得到数据。

---

使用mockjs前的准备

基于vue3 + vite2 开发，使用其他框架可以自行修改

在 main.js 里:

// 挂window上最省事，有强迫症或别的原因的自己解决
window.wailsProxy = (name, ...args) => {
    if (window.go) {
        return window.go.main.App[name](...args);
    }
    if (args.length == 0) {
        return window
            .fetch(`http://127.0.0.1:9999/${name}`)
            .then(function (response) {
                return response.json();
            });
    }
    let d = {};
    for (let i = 0; i < args.length; i++) {
        d["p" + i] = args[i];
    }
    // api接口后面再说
    return window
        .fetch(`http://127.0.0.1:9999/${name}`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json;charset=utf-8",
            },
            body: JSON.stringify(d),
        })
        .then(function (response) {
            return response.json();
        });
};

调取数据:

window.wailsProxy("GetXxx", args).then(rs=>{
    if(rs.status == 200){
        
    }
})

我这里统一了返回值结构:

{
  status: 200,
  data: 任意类型数据,
}

golang里也一样:

type ReturnFormat struct {
	Status int         `json:"status"`
	Data   interface{} `json:"data"`
}
func (a *App) GetXxx(path string) (rs ReturnFormat) {
    rs.Status = 200
    rs.Data = 任意类型数据
    return rs
}

---

关于mockjs

如果你有相关经验，就不用继续看了，以下是我自己的github项目

克隆 https://github.com/ZeronoFreya/vite_mock_server
安装运行就可以了，一个简单的mock服务

使用方法参考 vite_mock_server/mock/demo

mockJs简单语法:

'name': '@string'         // 随机字符串
'number':'@integer'
'date':'@date'            // 2010-11-11
'pic':'@image'            // https://dummyimage.com/120x240
'title':'@title'          // Dcekx Xvv Thfqwgldgk
'content':'@cword(9)'     // 深市受何规生石确表
'url':'@url'              // rlogin://ciounm.th/prctkbd
'ip':'@ip'                // 209.124.122.1
'email':'@email'          // [email protected]
'area':'@region'          // 华北
'address':'@county(true)' // 安徽省 淮南市 田家庵区