在开发前端应用的过程中，常常需要模拟后端接口进行测试或者本地开发，而 quick-local-service 就是一款能够快速搭建本地 mock 服务的 npm 包。本文将会详细介绍如何使用 quick-local-service 进行本地开发和接口模拟。
安装和基础使用
安装
npm install quick-local-service --save-dev
基础使用
在 package.json 中添加一条 scripts 用于启动服务：
{
"scripts": {
"mock-server": "quick-local-service"
}
}然后在命令行中执行 npm run mock-server 即可启动本地 mock 服务。
默认情况下，quick-local-service 将会在 3000 端口启动服务。访问 http://localhost:3000 即可查看 mock 服务。此时如果访问没有配置的路由，将会返回：
{
"errno": -1,
"errmsg": "mock not found"
}配置路由
在项目目录下创建一个 mock 目录，并创建一个 index.js 文件，用于配置 mock 路由。
例如，在 index.js 文件中添加如下代码：
-- -------------------- ---- -------
----- -------- - -
------------ -
-
----- --
------- -------
------ --
--
-
----- --
------- ------
------ --
-
--
-------------- -
----- --
------- -------
------ ---
-------- -------------
---------- ---------
-
-
-------------- - -
-- ----
------- -
---- ------------ ----------------------
---- -------------- -----------------------
-
-当启动 mock 服务后，访问 http://localhost:3000/user/list 和 http://localhost:3000/user/detail 将会返回上述定义的 mock 数据。
配置项
quick-local-service 支持的配置项非常丰富，下面分别进行介绍。
port
类型：Number
默认值：3000
用于指定服务启动的端口。
例如：
{
"services": {
"api-mock-server": {
"port": 3001
}
}
}routes
类型：Object
默认值：{}
用于配置 mock 路由和数据，支持 RESTful API，例如：
-- -------------------- ---- -------
-
----------- -
------------------ -
--------- -
---- -------- -
-
----- --
------- -------
------ --
--
-
----- --
------- ------
------ --
-
--
---- ----------- -
----- --
------- -------
------ ---
-------- -------------
---------- ---------
-
-
-
-
-支持使用 mockjs 生成随机数据，例如：
-- -------------------- ---- -------
----- ---- - -----------------
-------------- - -
------- -
---- ------------ -----------
-------- --
--------- ---
------- -
------- ---------
------------ ---
----------- ----
---------- -------------
-
--
-
-historyApiFallback
类型：Boolean | Object
默认值：false
用于指定是否启用 historyApiFallback，详细配置选项可以参考 connect-history-api-fallback。
例如：
{
"services": {
"api-mock-server": {
"historyApiFallback": true
}
}
}static
类型：String | Array | Object | false
默认值：false
用于配置静态文件服务，可以使用字符串、数组或者对象进行配置，详细配置项可以参考 serve-handler。
例如：
-- -------------------- ---- -------
-
----------- -
------------------ -
--------- -
------- ----------------------------
------- -----
-------- ------------
-
-
-
-middlewares
类型：Array
默认值：[]
用于配置中间件，每一个中间件可以是一个函数或者一个数组：
- 如果是一个函数，则表示一个 express 中间件；
- 如果是一个数组，则表示一个二元组，第一个元素表示要使用的中间件名称，第二个元素表示中间件配置项。
例如：
-- -------------------- ---- -------
-
----------- -
------------------ -
-------------- -
----- ---- ----- -- -
------------------- ------ ----------- --------
------
--
----------------
----------------- -
--------- --- ----- --------
--
-
-
-
-聚合多个服务
在一个项目中，可能需要聚合多个服务，例如需要同时启动一个 mock 服务和一个 webpack-dev-server 服务。此时可以使用 concurrently 的方式启动多个服务，例如：
npm install concurrently --save-dev
然后在 package.json 中添加一个用于启动聚合服务的 script，例如：
{
"scripts": {
"dev": "concurrently \"npm run mock-server\" \"webpack-dev-server --config webpack.config.js\""
}
}于是，在命令行中执行 npm run dev 即可同时启动 mock 服务和 webpack-dev-server 服务。
指导意义
quick-local-service 是一款非常好用的本地 mock 服务，可以为前端开发人员提供极高的效率，在本地开发和接口模拟中都有着很大的帮助。
同时，使用快速搭建本地 mock 服务还能让我们更好地遵守前后端分离的思想，在开发过程中减少前后端交互的次数，提高开发效率。
示例代码
我们在 quick-local-service-demo 中提供了一个完整的 quick-local-service demo，欢迎下载代码学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6cfd