├── .gitignore
├── index.html
├── src
├── mork
│ ├── 2.js
│ └── 1.js
└── main.js
├── server.js
├── package.json
├── webpack.config.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist
3 | /*.svn
4 | /npm-debug.log
5 | /*.idea
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 测试mork数据
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/mork/2.js:
--------------------------------------------------------------------------------
1 | // 使用 Mock
2 | let Mock = require('mockjs');
3 | Mock.mock('http://2.json','post',{
4 | // 属性 list 的值是一个数组，其中含有 1 到 5 个元素
5 | 'list|1-5': [{
6 | // 属性 sid 是一个自增数，起始值为 1，每次增 1
7 | 'sid|+1': 1,
8 | // 属性 userId 是一个5位的随机码
9 | 'userId|5': '',
10 | }]
11 | })
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | process.env.NODE_ENV=='mork' && require('./mork/1.js');
2 | process.env.NODE_ENV=='mork' && require('./mork/2.js');
3 | var $ = require('jquery');
4 | $(function () {
5 | /**
6 | * 请求1 get 请求
7 | */
8 | $.ajax({
9 | url: 'http://1.json',
10 | type: 'get'
11 | }).done(function(data,status){
12 | console.log('我是请求1'+data)
13 | })
14 |
15 | /**
16 | * 请求2 post 请求
17 | */
18 | $.ajax({
19 | url: 'http://2.json',
20 | type: 'post'
21 | }).done(function(data,status){
22 | console.log('我是请求2'+data)
23 | })
24 | })
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | let webpack = require('webpack');
3 | let webpackDevServer = require("webpack-dev-server");
4 | let ip = require('ip');
5 | let localIp = ip.address();
6 | let config = require("./webpack.config.js");
7 | let compiler = webpack(config);
8 | let server = new webpackDevServer(compiler, {
9 | publicPath: config.output.publicPath,
10 | hot: true,
11 | // quiet: true,
12 | });
13 | server.listen(process.env.npm_package_config_port, process.env.npm_package_config_ip, function (err, result) {
14 | err && console.log(err);
15 | console.log('Listening at localhost:'+process.env.npm_package_config_port);
16 | });
17 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "config": {
7 | "ip": "127.0.0.1",
8 | "port": 8181
9 | },
10 | "scripts": {
11 | "start": "node server.js --progress"
12 | },
13 | "author": "toni",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "babel-core": "^6.24.1",
17 | "babel-loader": "^6.4.1",
18 | "babel-preset-env": "^1.4.0",
19 | "fs": "0.0.2",
20 | "ip": "^1.1.2",
21 | "jquery": "^3.2.1",
22 | "mockjs": "^1.0.1-beta3",
23 | "open-browser-webpack-plugin": "0.0.5",
24 | "webpack": "^1.12.14",
25 | "webpack-dev-server": "^1.14.1"
26 | },
27 | "dependencies": {}
28 | }
29 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | let path = require('path');
3 | let fs = require('fs');
4 | let webpack = require('webpack');
5 | let ip = require('ip');
6 | let localIp = ip.address();
7 | var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //打开浏览器
8 | module.exports = {
9 | devtool: "source-map",
10 | entry: {
11 | main: './src/main.js'
12 | },
13 | output: {
14 | path: path.join(__dirname, 'dist'),
15 | publicPath: '/dist/',
16 | filename: 'bundle.js'
17 | },
18 | module: {
19 | rules: [ {
20 | test: /\.js$/,
21 | exclude: /node_modules|vue\/dist/,
22 | use: 'babel-loader'
23 | }]
24 | },
25 | resolve: {
26 | extensions: ['', '.js'],
27 | },
28 | plugins: [
29 | new OpenBrowserPlugin({
30 | url: 'http://localhost:8181'
31 | }),
32 | new webpack.DefinePlugin({
33 | 'process.env': {
34 | NODE_ENV: '"mork"'
35 | }
36 | }),
37 | new webpack.HotModuleReplacementPlugin()
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/src/mork/1.js:
--------------------------------------------------------------------------------
1 | // 使用 Mock
2 | let Mock = require('mockjs');
3 | Mock.mock('http://1.json','get',{
4 | // 属性 list 的值是一个数组，其中含有 1 到 3 个元素
5 | 'list|1-3': [{
6 | // 属性 sid 是一个自增数，起始值为 1，每次增 1
7 | 'sid|+1': 1,
8 | // 属性 userId 是一个5位的随机码
9 | 'userId|5': '',
10 | // 属性 sex 是一个bool值
11 | "sex|1-2": true,
12 | // 属性 city对象 是对象值中2-4个的值
13 | "city|2-4": {
14 | "110000": "北京市",
15 | "120000": "天津市",
16 | "130000": "河北省",
17 | "140000": "山西省"
18 | },
19 | //属性 grade 是数组当中的一个值
20 | "grade|1": [
21 | "1年级",
22 | "2年级",
23 | "3年级"
24 | ],
25 | //属性 guid 是唯一机器码
26 | 'guid': '@guid',
27 | //属性 id 是随机id
28 | 'id': '@id',
29 | //属性 title 是一个随机长度的标题
30 | 'title': '@title()',
31 | //属性 paragraph 是一个随机长度的段落
32 | 'paragraph': '@cparagraph',
33 | //属性 image 是一个随机图片 参数分别为size, background, text
34 | 'image': "@image('200x100', '#4A7BF7', 'Hello')",
35 | //属性 address 是一个随机地址
36 | 'address': '@county(true)',
37 | //属性 date 是一个yyyy-MM-dd 的随机日期
38 | 'date': '@date("yyyy-MM-dd")',
39 | //属性 time 是一个 size, background, text 的随机时间
40 | 'time': '@time("HH:mm:ss")',
41 | //属性 url 是一个随机的url
42 | 'url': '@url',
43 | //属性 email 是一个随机email
44 | 'email': '@email',
45 | //属性 ip 是一个随机ip
46 | 'ip': '@ip',
47 | //属性 regexp 是一个正则表达式匹配到的值 如aA1
48 | 'regexp': /[a-z][A-Z][0-9]/,
49 | }]
50 | })
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **相信大家都存在这样的一个困扰,在前后端分离的大环境下,
2 | 前端需要后端的接口去完成页面的渲染,
3 | 但是大部分的情况下,前后端需要同时进行开发,
4 | 这种情况下,后端还没完成数据输出，前端只好写静态模拟数据。**
5 |
6 | ### 那么问题就来了
7 |
8 | - 数据太长了，将数据写在js文件里，完成后挨个改url。
9 |
10 | - 某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。
11 |
12 | - 想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模
13 | 拟数据。
14 |
15 | - 特殊的格式，例如IP,随机数，图片，地址，需要去收集。
16 |
17 | ****
18 |
19 | ##### 前几天看到mock.js的一些介绍,然后自己写了个案列跑起来了,发现还是比较实用的,所以这边整理出文章,推荐给大家
20 |
21 | [mock案例-github地址](https://github.com/ToNiQian/mockjs)
22 |
23 | ### 1.mock是什么？
24 |
25 | [mock官网](http://mockjs.com/)
26 |
27 | > 
28 |
29 | ****
30 |
31 | ### 2.mock可以模拟哪些数据?
32 |
33 | - string
34 | - number
35 | - bool
36 | - array
37 | - object
38 | - guid
39 | - id
40 | - title
41 | - paragraph
42 | - image
43 | - address
44 | - date
45 | - time
46 | - url
47 | - email
48 | - ip
49 | - regexp
50 |
51 | ***
52 |
53 | **[mock示例文档](http://mockjs.com/examples.html)**
54 |
55 | **直接附上代码**
56 |
57 | ```
58 | // 使用 Mock
59 | let Mock = require('mockjs');
60 | Mock.mock('http://1.json','get',{
61 | // 属性 list 的值是一个数组，其中含有 1 到 3 个元素
62 | 'list|1-3': [{
63 | // 属性 sid 是一个自增数，起始值为 1，每次增 1
64 | 'sid|+1': 1,
65 | // 属性 userId 是一个5位的随机码
66 | 'userId|5': '',
67 | // 属性 sex 是一个bool值
68 | "sex|1-2": true,
69 | // 属性 city对象 是对象值中2-4个的值
70 | "city|2-4": {
71 | "110000": "北京市",
72 | "120000": "天津市",
73 | "130000": "河北省",
74 | "140000": "山西省"
75 | },
76 | //属性 grade 是数组当中的一个值
77 | "grade|1": [
78 | "1年级",
79 | "2年级",
80 | "3年级"
81 | ],
82 | //属性 guid 是唯一机器码
83 | 'guid': '@guid',
84 | //属性 id 是随机id
85 | 'id': '@id',
86 | //属性 title 是一个随机长度的标题
87 | 'title': '@title()',
88 | //属性 paragraph 是一个随机长度的段落
89 | 'paragraph': '@cparagraph',
90 | //属性 image 是一个随机图片 参数分别为size, background, text
91 | 'image': "@image('200x100', '#4A7BF7', 'Hello')",
92 | //属性 address 是一个随机地址
93 | 'address': '@county(true)',
94 | //属性 date 是一个yyyy-MM-dd 的随机日期
95 | 'date': '@date("yyyy-MM-dd")',
96 | //属性 time 是一个 size, background, text 的随机时间
97 | 'time': '@time("HH:mm:ss")',
98 | //属性 url 是一个随机的url
99 | 'url': '@url',
100 | //属性 email 是一个随机email
101 | 'email': '@email',
102 | //属性 ip 是一个随机ip
103 | 'ip': '@ip',
104 | //属性 regexp 是一个正则表达式匹配到的值 如aA1
105 | 'regexp': /[a-z][A-Z][0-9]/,
106 | }]
107 | })
108 | ```
109 |
110 | ***
111 |
112 | ### 3.如何拦截ajax请求
113 |
114 | **[mock文档](https://github.com/nuysoft/Mock/wiki/Mock.mock)**
115 |
116 | ```
117 | Mock.mock( rurl, rtype, template )
118 |
119 | 如 Mock.mock('1.json','get',{
120 | 'sid|+1': 1,
121 | } )
122 | 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，
123 | 将根据数据模板 template 生成模拟数据，并作为响应数据返回。
124 | ```
125 |
126 | **注:从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。**
127 |
128 | ### 4.案例代码
129 |
130 | **[mock案例-github地址](https://github.com/ToNiQian/mockjs)**
131 |
132 | > 用webpack 搭建了一个环境,mock文件里面放入跟后端定义好的接口模型和配置入口文件 引入需要的mock.js 文件
133 |
134 | ```
135 | process.env.NODE_ENV=='mock' && require('./mock/1.js');
136 | process.env.NODE_ENV=='mock' && require('./mock/2.js');
137 | var $ = require('jquery');
138 | $(function () {
139 | /**
140 | * 请求1 get 请求
141 | */
142 | $.ajax({
143 | url: 'http://1.json',
144 | type: 'get'
145 | }).done(function(data,status){
146 | console.log('我是请求1'+data)
147 | })
148 |
149 | /**
150 | * 请求2 post 请求
151 | */
152 | $.ajax({
153 | url: 'http://2.json',
154 | type: 'post'
155 | }).done(function(data,status){
156 | console.log('我是请求2'+data)
157 | })
158 | })
159 | ```
160 |
161 | > 
162 |
163 | ***
164 |
165 | ### 5. 如何在后端接口完成的时候,取消mock数据
166 |
167 | ```
168 | new webpack.DefinePlugin({
169 | 'process.env': {
170 | NODE_ENV: '"mock"'
171 | }
172 | }),
173 | process.env.NODE_ENV=='mock' && require('./mock/1.js');
174 | process.env.NODE_ENV=='mock' && require('./mock/2.js');
175 | ```
176 |
177 | > **根据webpack环境,在需要mock的时候,配置环境为mock,
178 | 在不需要mock的时候,只需要修改node_env 环境就可以了
179 | 无需注释代码,就可以完美解决后端接口还没完成的情况。**
--------------------------------------------------------------------------------