Mock.js入门 - 新加坡新闻头条

一、Express入门

1、安装

新建一个目录，切换到当前目录下，npm init 初始化package.json

liujiangdeMacBook-Air:Mockjs liujiang$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (mockjs)

输入项目名：例如expressdemo（注意单词不能有大写字母）

输入版本：1.0.0

项目描述description:excpressDemo

入口（默认是index.js）：可以改成app.js

test command:跳过

git repository:跳过

keywords:excrepss

作者：

license:跳过

About to write to /Users/liujiang/Documents/HBuilderProjects/Mockjs/package.json: { "name": "express", "version": "1.0.0", "description": "excpressDemo", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "express" ], "author": "liujiang", "license": "ISC" } Is this OK? (yes) yes ╭───────────────────────────────────────────────────────────────╮ │ │ │ New minor version of npm available! 6.4.1 → 6.6.0 │ │ Changelog: https://github.com/npm/cli/releases/tag/v6.6.0 │ │ Run npm install -g npm to update! │ │ │ ╰───────────────────────────────────────────────────────────────╯ liujiangdeMacBook-Air:Mockjs liujiang$

成功！

2、HelloExpress

const express = require('express') const app = express() app.get('/', (req, res) => res.send('Hello World!')) app.listen(3000, () => console.log('Example app listening on port 3000!'))

先创建app.js
把代码粘贴过去
运行 node app.js
报错Error: Cannot find module 'express'，因为没有依赖
安装依赖，npm install express --save，—save安装到package.json{
"name": "expressdemo",
"version": "1.0.0",
"description": "excpressDemo",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"express"
],
"author": "liujiang",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"//添加了依赖
}
}
运行 node app.js 访问http://localhost:3000/，成功！control+c停止

二、使用生成器快速构建

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

express-generator 包含了 express 命令行工具。通过如下命令即可安装：

$ npm install express-generator -g

-h 参数可以列出所有可用的命令行参数：

$ express -h Usage: express [options] [dir] Options: -h, --help 输出使用方法 --version 输出版本号 -e, --ejs 添加对 ejs 模板引擎的支持 --hbs 添加对 handlebars 模板引擎的支持 --pug 添加对 pug 模板引擎的支持 -H, --hogan 添加对 hogan.js 模板引擎的支持 --no-view 创建不带视图引擎的项目 -v, --view <engine> 添加对视图引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默认是 jade 模板引擎） -c, --css <engine> 添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默认是普通的 css 文件） --git 添加 .gitignore -f, --force 强制在非空目录下创建

例如，如下命令创建了一个名称为 demo 的 Express 应用。此应用将在当前目录下的 Mockjs 目录中创建：

liujiangdeMacBook-Air:Mockjs liujiang$ mkdir demo liujiangdeMacBook-Air:Mockjs liujiang$ cd demo liujiangdeMacBook-Air:Mockjs liujiang$ express demo liujiangdeMacBook-Air:demo liujiang$ npm install

在 MacOS 或 Linux 中，通过如下命令启动此应用：

$ npm start//这里需进入第二个demo的路径，下次可以不这么创建项目，直接新建一个项目，按照官网进行

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

通过生成器创建的应用一般都有如下目录结构：

. ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── users.js └── views ├── error.pug ├── index.pug └── layout.pug 7 directories, 9 files

三、supervisor

1、修改内容

在routers下的index.js

var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express--test' });//修改 }); module.exports = router;

需要重启，npm start,很麻烦

2、安装

npm install -g supervisor

3、启动

supervisor ./bin/www

在更改内容后就不要再启动了，直接刷新就好了

四、初始Mock.js

1、什么是Mock.js

是一款模拟数据的生成器，让前端工程师独立开发，不依赖后端

2、Mock.js能做什么

根据数据模板生成模拟数据
模拟ajax请求，生成并返回数据
基于html模板生成模拟数据

3、为什么用Mockjs

开发时，后端还没完成数据输出，前端只能写好静态模拟数据,数据太长了，将数据写在js文件里，完成后挨个改url。
某些逻辑复杂的代码，加入或去除模拟数据时容易出错
想要尽可能还原真实的数据，要么编写更多的代码，要么手动修改模拟数据
特殊的格式，例如ip，随机数，图片，地址，需要去收集，分页显示

4、如何正确使用Mockjs

安装 npm install mockjs
使用

var Mock = require('mockjs'); var data = Mock.mock({ 'list|1-10':[{ 'id|+1':1 }] }); console.log(JSON.stringify(data,null,4))

加载Mock

五、Node中集成Mock

1、安装

新建项目文件夹 node_mock
npm install mockjs
新建demo.js
copy上面的使用代码
运行 node demo.js{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
},
{
"id": 4
},
{
"id": 5
},
{
"id": 6
},
{
"id": 7
}

2、融合Express

使用之前的express项目(切换到项目目录)，将mockjs打包到express
npm install mockjs --save

{ "name": "demo", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "cookie-parser": "~1.4.3", "debug": "~2.6.9", "express": "~4.16.0", "http-errors": "~1.6.2", "jade": "~1.11.0", "mockjs": "^1.0.1-beta3", "morgan": "~1.9.0" } }

使用supervisor启动 supervisor ./bin/www
切换到路由 routes/index.js
修改var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express--supervisor' });
});
// mock
router.get('/mock', function (req, res, next) {
var Mock = require('mockjs');
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
var result = JSON.stringify(data, null, 4);
res.render('index', { title: result });
});
//有html的
//使用send方法，注意两者的区别
router.get('/mock', function (req, res, next) {
var Mock = require('mockjs');
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
var result = JSON.stringify(data, null, 4);
res.send(result);
});
module.exports = router;

六、mockjs语法规范

1、数据模板的定义DTD

String
Number
Boolean
Object
Array
function

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名 name // 生成规则 rule // 属性值 value 'name|rule': value

注意：

属性名和生成规则之间用竖线 | 分隔。
生成规则是可选的。
生成规则有 7 种格式：'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value
生成规则的含义需要依赖属性值的类型才能确定。
属性值中可以含有 @占位符。
属性值还指定了最终值的初始值和类型。

生成规则和示例：

1.1. 属性值是字符串 String

'name|min-max': string通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|count': string通过重复 string 生成一个字符串，重复次数等于 count。

1.2. 属性值是数字 Number

'name|+1': number属性值自动加 1，初始值为 number。
'name|min-max': number生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max.dmin-dmax': number生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({ 'number1|1-100.1-10': 1, 'number2|123.1-10': 1, 'number3|123.3': 1, 'number4|123.10': 1.123 }) // => { "number1": 12.92, "number2": 123.51, "number3": 123.777, "number4": 123.1231091814 }

1.3. 属性值是布尔型 Boolean

'name|1': boolean随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|min-max': value随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

1.4. 属性值是对象 Object

'name|count': object从属性值 object 中随机选取 count 个属性。
'name|min-max': object从属性值 object 中随机选取 min 到 max 个属性。

1.5. 属性值是数组 Array

'name|1': array从属性值 array 中随机选取 1 个元素，作为最终值。
'name|+1': array从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|min-max': array通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': array通过重复属性值 array 生成一个新数组，重复次数为 count。

1.6. 属性值是函数 Function

'name': function执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。{
'title':'hello mockjs',
'function':function(){
return this,title
}
}
->
{
"title":"hello mockjs",
"function":"hello mockjs"
}

1.7. 属性值是正则表达式 RegExp

'name': regexp根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}

2、数据占位符的定义DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符的格式为：

@占位符 @占位符(参数 [, 参数])

注意：

用 @ 来标识其后的字符串是占位符。
占位符引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符也可以引用数据模板中的属性。
占位符会优先引用数据模板中的属性。
占位符支持相对路径和绝对路径。

Mock.mock({ name: { first: '@FIRST', middle: '@FIRST', last: '@LAST', full: '@first @middle @last' } }) // => { "name": { "first": "Charles", "middle": "Brenda", "last": "Lopez", "full": "Charles Brenda Lopez" } }

七、访问

//用send方法 router.get('/mock1', function (req, res, next) { var Mock = require('mockjs'); var data = Mock.mock({ "array|1-10": [ { "name|+1": [ "Hello", "Mock.js", "!" ] } ] }); var result = JSON.stringify(data, null, 4); res.send(result); });

八、ajax的跨域实现

九、前端数据绑定

十、项目发布

使用全局组件的尽量放到package.json
不放入packagejson时，需要在发布的及其上安装全剧组件
不清楚使用哪些全局组件，在目标机器上部署后，根据报错信息添加npm install mockjs --save //--node modules(本地)

1、整体发布

所有都会发布
本地不会丢失
组件包发布后会非常大，打包也会变慢

2、源代码发布

体积比较小
发布本地包，全局在分别处理

3、压缩包

通过压缩包形式打包，不要node_modules文件夹，会根据package.json npm install初始化

var Mock = require('mockjs'); var data = Mock.mock({ 'news|5-10':[{ 'id|+1':1, title:'@title', text:'@cparagraph', time:'@date', number:'@integer(1, 1000)', image:'@image(42x42,#eee,Logo)' }] }); console.log(JSON.stringify(data,null,4))