express+mockjs 搭建一个mock服务，方便前端开发(有问题欢迎指正，demo已经上传到github，文章末端有传送门)
使用mockjs的有两种方式
- 在项目入口文件中直接引入配置好的mock文件
- 需要在项目内引入mock并创建相关配置文件
- 直接拦截请求，NetWork看不到请求
- 需要上线,团队合作一起开发的项目。还需要注意判断环境和不上传相关配置文件。
- 配合express启一个服务
- 这样就相当于模拟了真实的接口，netWork可以看到请求，并且可以不在该项目中做任何配置直接向服务发起请求即可。
第二种方式的效果如下（express服务启的是3000端口）
具体使用方法
第一种方法： 项目中直接引入
可以参考element-admin中的写法：先install mockjs就不说了
在src下创建mock文件夹，分模块配置，在index.js中整体配置并导出Mock然后在入口文件main.js中引入即可
├── src
│ ├── mock
│ ├── article.js // 文章相关的mock数据配置
│ ├── login.js // 登录相关的mock数据配置
│ ├── index.js // 模块整合导出Mock
...
复制代码接下来看看article.js
再看index.js
入口文件引入
import './mock'
复制代码这时 mock就会拦截对应的请求了，譬如请求接口为/artical/list，会直接返回mock造的假数据。
这种方式的特点文章开篇有提到，我个人是更希望可以利用mock启一个服务，不需要项目中配置任何有关mock的文件
2. 结合express启一个mock服务
可以自己利用vue-cli搭一个空项目
在根目录下创建一个mock文件夹
此处我就直接拿element-admin里的一些配置文件了
还是以article.js为例（还是一样，根据url返回对应的数据）
唯一的区别就是把import的导入方式换成了require
详细看看index.js
结合express利用API
- all 设置允许跨域
- get,post创建接口
- listen监听端口
//引入express
let express = require('express')
//引入mock
let Mock = require('mockjs')
//实例化express
let app = express();
// post请求体相关
let bodyParser = require('body-parser')
// mock数据API
let articleAPI = require('./article')
let loginAPI = require('././login')
app.use(bodyParser.json())
// 允许跨域
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
// 此处根据前端请求携带的请求头进行配置
res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
// 例如： 我们公司的请求头需要携带Authorization和Client-Type，此处就应该按照以下进行配置
// res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Authorization, Client-Type");
next();
})
// table列表接口
app.get('/article/list', function (req, res) {
res.json(Mock.mock(articleAPI.getList(req)))
})
// 登入
app.post('/login/login', function (req, res) {
res.json(Mock.mock(loginAPI.loginByUsername(req)))
})
// 登出
app.post('/login/logout', function (req, res) {
res.json(Mock.mock(loginAPI.logout(req)))
})
// 获取用户信息
app.get('/user/info', function (req, res) {
res.json(Mock.mock(loginAPI.getUserInfo(req)))
})
app.listen('3000', () => {
console.log('监听端口 3000')
})
复制代码此时跑一下index.js,无论什么项目请求3000端口的对应接口就会返回相关数据。
我把自己写的demo(也就是上面那个效果图展示的传到了github, 可以根据自己的需求改一改直接用)
github.com/hollyDysani…
我在package.json中写了相关的命令
如果想运行项目看效果可以 npm run mock-dev
如果只是想启服务 npm run mock
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"mock": "node mock/index.js",
"mock-dev": "node mock/index.js | webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
}
复制代码mockjs传送门
element-admin传送门