摘要：现在一般需要分前后端，因为大量前端框架和工具链的涌入根源是需求复杂了，让前端可以跟后端独立开来。但是，无论是前端去写模板，亦或是完全前后端分离去写，都脱离不了与后端进行数据交互。
--> GitHub地址
旧石器时代，Web 开发并不会去刻意区分前后端，写后端的人觉得写数据库跟写模板都是应该具备的技能。现在一般需要分前后端，因为大量前端框架和工具链的涌入（根源是需求复杂了），让前端可以跟后端独立开来。但是，无论是前端去写模板，亦或是完全前后端分离去写 JSX，都脱离不了与后端进行数据交互。
以上是本工具产生的动因，我们暂且将前后端交互的数据分为模板数据（由后端直接填充）和异步数据（通过 HTTP 接口），工具的作用就是平滑地进行数据交互过渡，降低沟通成本。
名字由来在开发前期，后端可能并没有开始写或者没有写完，前端此时只能通过本地数据模拟实际数据进行布局和组件的调试，一般叫做 mock 数据。
待前端写的差不多了，后端可能也差不多了，那么此时需要联调，因为联调的过程很可能伴随着大量的修复工作，前后端杂糅在一起部署的代价太高，高效的方式就是通过代理的方式直接从模拟数据切到后端数据，这里叫 proxy。
如果把 mock 和 proxy 结合起来，那么就叫 moky !
使用说明项目的 GitHub 里面已经简单的说了下使用方法，不过我觉得还是有必要补充点额外的说明。
首先，需要强调的是，moky 侧重点只有 mock 和 proxy，因此可以做到代码也只有 200 行左右，市场上已经有很多人做这方面工作了，而基本都不能满足我的需求。
使用跟 webpack 很类似，全局安装 npm i moky -g ，只需要一个配置文件，然后直接运行在配置文件 moky.config.js 所在目录运行 moky ，或者通过参数指定配置文件路径 moky -c /path/to/xxx.js
但是，正确使用前一般需要先配置好 moky.config.js，下面针对配置文件做一个罗嗦的介绍：
// 这里之所以需要 path，是因为下面的文件路径都必须是绝对路径
var path = require("path");
module.exports = {
// 本地监听端口，运行 moky 会起一个 server
localPort: 3000,
// 异步数据的 mock 目录路径
asyncMockPath: path.join(__dirname, "mock"),
// 同步数据的 mock 目录路径
viewsMockPath: path.join(__dirname, "tplMock"),
// 模板所在目录，如果你是完全前后端分离，没有模板，那至少有个 index.html 吧
// 把这个 index.html 所在的目录当作模板目录即可
viewsPath: path.join(__dirname, "views"),
// 这个并没有卵用，如果有 favicon 还是设置下吧
faviconPath: path.join(__dirname, "public", "favicon.ico"),
// 这里不要被 js 和 css 误导了，这里是设置静态资源的路由
// 注意，其优先级比较高哦，所以不要漏了/多了/跟其它冲突了
publicPaths: {
"/css": path.join(__dirname, "public", "css"),
"/js": path.join(__dirname, "public", "js"),
},
// 模板引擎的设置，具体参考 koa-views，moky 已经内置了几个模板引擎，可以直接设置就用
// 注意两点：如果选择 freemarker 一定保证 JAVA_HOME 等设置是对的；
// 如果是纯 HTML 页面，你随便选个模板引擎即可，推荐 nunjucks
viewConfig: {
extension: "html",
map: { html: "nunjucks" },
},
// 这里为了解决很多 Web 容器采用的 Virtual Host 机制（一个 IP:PORT 通过域名对应多个服务）
// 由于我们本地启动的可能是 http://localhost:3000，如果有 Virtual Host 机制则通不过的
// 如果设置了 hostName，在发送请求前程序会自动替换 Host 头为 hostName
hostName: "hacker-news.firebaseio.com",
// 这里是proxy 映射表，在启动的时候如果是 moky -e dev，异步请求会自动走 dev 对应的 proxy
// 如果没找到对应的，那么默认用本地的 mock 数据作为异步数据
proxyMaps: {
dev: "https://hacker-news.firebaseio.com",
local: "http://localhost:8080",
},
// 这是页面路由的设置，这里的 key 是路由（URL 里见到的），value 是页面的相对路径
// 路径相对于 viewsPath , 不用加后缀，viewConfig.extension 指明了
urlMaps: {
"/": "index",
"/page": "page/index",
},
}
最简单的试用就是全局安装 moky，然后 clone 项目，进入 example 目录，直接运行 moky
先看下目录结构：
├── mock
│ ├── get
│ │ ├── test
│ │ │ └── index.json
│ │ └── v0
│ │ └── item
│ │ └── 2921983.json.json
│ └── post
│ └── index.json
├── moky.config.js
├── public
│ ├── css
│ │ └── main.css
│ ├── favicon.ico
│ └── js
│ └── main.js
├── tplMock
│ ├── index.json
│ └── page
│ └── index.json
└── views
├── index.html
└── page
└── index.html
直接运行 moky 会默认使用 mock 模式，数据流是这样的：
我们浏览器打开 http://localhost:3000/page
路由会根据我们的设置匹配一遍：静态资源 -> 页面 -> 异步接口，这里匹配到页面就停止了
程序会去 tplMock/page/index.json 下拿模板数据，然后填充渲染返回
此时页面里的静态资源的会被首先从 public 下路由
然后会有个异步接口 GET v0/item/2921983.json，会最终被异步处理模块处理
因为我们启动的时候是 mock 模式，于是会去 mock/get 文件夹找对应位置的 json 作为本地 mock 数据
如果我们是 moky -e dev 启动的，那么 GET v0/item/2921983.json 会被从 proxyMaps.dev 反代
遗留问题模板数据无法走 proxy 从远端获取
对第三方登录/认证不友好
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91120.html
摘要：前言自总结完了上篇前端工程化的思想，并在全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发项目，以及其中踩过的一个个坑。。。 前言 自总结完了上篇前端工程化的思想，并在vue全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发vue项目，以及其中踩过的一个个坑。。。 基于vue-cli的自定义模板（Custom Templates） 小伙伴们的vue项目应该都...
摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离 背景 随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...
摘要：致力于解决前后端开发协作过程中出现的各类问题，提高开发效率，对接口做统一管理，同时也能为后续的迭代维护提供更便捷的方式。丁香园也将努力持续的做技术输出产品输出，为开源社区做出自己的一份力量。 API Mocker 先贴上项目地址：DXY-F2E/api-mocker 随着web发展，前后端分离的演进，网页的交互变的越来越复杂。在项目开发过程中，前后端并行开发时，在涉及到接口的部分，总是...
阅读 2286·2021-11-23 09:51
阅读 2278·2021-11-11 17:21
阅读 2949·2021-09-04 16:45
阅读 2199·2021-08-09 13:42
阅读 2033·2019-08-29 18:39
阅读 2740·2019-08-29 14:12
阅读 1152·2019-08-29 13:49
阅读 3233·2019-08-29 11:17
