一、Express入门1、安装

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

liujiangdeMacBook-Air:Mockjs liujiang$ npm initThis 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 fieldsand exactly what they do.​Use `npm install <pkg>` afterwards to install a package andsave 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:    │   │               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 访问，成功！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 demoliujiangdeMacBook-Air:Mockjs liujiang$ cd demoliujiangdeMacBook-Air:Mockjs liujiang$ express demoliujiangdeMacBook-Air:demo liujiang$ npm install

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

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

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

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

.├── 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

三、supervisor1、修改内容

在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.js1、什么是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

<script src = ";></script>

五、Node中集成Mock1、安装新建项目文件夹 node_mocknpm install mockjs新建demo.jscopy上面的使用代码运行 node demo.js{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
},
{
"id": 4
},
{
"id": 5
},
{
"id": 6
},
{
"id": 7
}
2、融合Express使用之前的express项目(切换到项目目录)，将mockjs打包到expressnpm 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、数据模板的定义DTDStringNumberBooleanObjectArrayfunction

数据模板中的每个属性由 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的跨域实现

var express = require('express');var router = express.Router();​/* GET home page. */router.get('/', function (req, res, next) {  res.render('index', { title: 'Express--supervisor' });});// mockrouter.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 });});//用send方法router.get('/mock1', function (req, res, next) {  var Mock = require('mockjs');  var data = Mock.mock({    'categorys|3-5':[{      categoryName:'@cname',      'categoryID|+1':10,​      logo:'@image(64x64,#eee,Logo)',      'categoryItems|1-4':[{​        cname:'@cname',        'cid|+1':100,        'item|3-7':[{​          name:'@cname',          'id|+1':1000,          link:'@url'        }]      }],      'seller|8-15':[{        name:'@cname@cname',        url:'@url'      }]    }]  });  var result = JSON.stringify(data, null, 4);  // 以ajax跨域 jsonp请求  var callback = req.query.callback;  result = callback+"("+result+")";  res.send(result);});module.exports = router;​

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>Page Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src=";></script>    <script>        console.log('aaa')        var urlstr = ';;        $.ajax({            type:'get',            async:false,            url:urlstr,            cache:false,            dataType:'jsonp',            success : function(json){                console.log(json);            },            error:function(e){                console.log(e);            }​        })    </script></head><body>    </body></html>

九、前端数据绑定

<script>    var urlstr = ';;    $.ajax({        type:'get',        async:false,        url:urlstr,        cache:false,        dataType:'jsonp',        success : function(json){            // console.log(json);            $('.right li').html('');            $(json.categorys).each(function(i,categorys){                // console.log(i+categorys)                $(categorys.categoryItems).each(function(i,categoryItems){                    console.log(i+categoryItems.cname)                    $('.right li').html(categoryItems.cname);                })            })​        },        error:function(e){            console.log(e);        }​    })</script>

十、项目发布使用全局组件的尽量放到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))