minimal-mock 极简 mock 服务,采用 koa 搭建,支持全局配置及多种数据格式。
什么是 Mock 数据:在前后端约定好 API 接口以后,前端可以使用 Mock 数据来在本地模拟出 API 应该要返回的数据,这样一来前后端开发就可以同时进行,不会因为后端 API 还在开发而导致前端的工作被阻塞。
minimal-mock 极简 mock 服务,采用 koa 搭建,支持全局配置及多种数据格式。
什么是 Mock 数据:在前后端约定好 API 接口以后,前端可以使用 Mock 数据来在本地模拟出 API 应该要返回的数据,这样一来前后端开发就可以同时进行,不会因为后端 API 还在开发而导致前端的工作被阻塞。
cmock 主要将接口相关配置保存在本地 js 文件中,结构如下:
module.exports = {
name: "$name", // 接口名称
url: "$url", // 接口的 url
method: "$method", // 接口方法
type: "$type", // 接口对应的 response.type
createTime: "$createTime", // mock 文件创建时间
updateTime: "$updateTime", // mock 文件最后更新时间,如果手动更新 mock 文件,改时间可能不准确
isUseMockjs: false, // 是否使用 mockjs 生成返回的数据,需要在 body 中配置 mockTemplate
timeout: 0, // 多久时间返回数据,用于模拟等待时间,方便前端加加载状态
bodyKey: {}, // 内部使用,误删
body: { // 用于存放接口数据结构
接口参数(仅包含 package.json needParams 中配置的参数): 接口数据结构
mockTemplate // 用于 mock.js 生成数据
},
}
cmock 用于根据接口自动生成 mock 文件,并根据 mock 文件起 mock 服务。本篇着重讲解 cmock 原理,如果仅关注使用,可以查看 cmock 使用指导 。
cmock 用于根据接口自动生成 mock 文件,并根据 mock 文件起 mock 服务。之前有写过一片 前端 mock 实践 ,两者侧重点不一样,cmock 兼顾生成 mock 文件和起 mock 服务两种功能,但接口灵活性欠缺,emock 虽然只支持起 mock 服务,但灵活性高。
最近在研究 node.js 代理方面的内容,希望借助代理实现 mock 文件的自动生成,这个后面会写篇文章集中介绍,本篇先汇总下在 koa2 中使用 http-proxy-middleware ,至于为什么选择 http-proxy-middleware 作代理,因为 Vue CLI 就用的 http-proxy-middleware ,这样大家理解配置就更加方便了。
在项目中一般使用 Mock 创建假数据,Mock 有提供拦截请求响应数据的功能 Mock.mock() ,但是 Mock 拦截就导致在 Network
中无法进行数据联调,只能通过 console
打印,使用起来就比较麻烦。这个时候我们可以使用 koa 起本地服务,再通过 Mock 生成数据,前端项目将请求代理到 koa 本地服务,这样就可以在 Network
中进行数据联调了。
本文转自 用npm
执行脚本
大部分npm
用户都知道可以在package.json
文件中定义npm start
或者npm test
这样的脚本任务。其实npm的脚本功能远远不止于启动服务器或者执行测试。
之前写过一篇关于代码块渲染添加自定义行号的文章:markdown-it和highlight.js的结合渲染代码,并添加自定义行号 。
不过在之后的渲染使用过程中由于效果不是很好,所以重新改版,并借此机会添加复制代码功能。
本博客采用的后端是 node.js 框架 Express,在使用 markdown-it 渲染 md 文件的时候,选择在添加文章或者更新文章的时候由 md 生成 html。
在进项项目开发中经常会遇到不同环境切换的问题,比如说开发环境和正式环境对应不同服务器的 mysql ,总不能每次切换不同环境的时候修改代码,这样既容易出错,也不利于代码维护,所以这个时候就需要用到环境变量来进行配置了。
在开发环境中,我们一般链接的是本地服务器的 mysql ,这个时候我们可以通过以下设置来进行变量控制:
package.json
:
"scripts": {
"start": "set NODE_ENV=development&& node ./bin/www",
"devstart": "set NODE_ENV=development&& nodemon ./bin/www"
}