一、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: /file/2019/12/17/20191217125747_6042.jpg.0 │ │ Run npm install -g npm to update! │ │ │ ╰───────────────────────────────────────────────────────────────╯liujiangdeMacBook-Air:Mockjs liujiang$成功！
2、HelloExpressconst 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 demoliujiangdeMacBook-Air:Mockjs liujiang$ cd demoliujiangdeMacBook-Air:Mockjs liujiang$ express demoliujiangdeMacBook-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.pug7 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 supervisor3、啟動
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 = "http://mockjs.com/dist/mock.js"></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' });});// 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 });});//有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="http://code.jquery.com/jquery-latest.js"></script> <script> console.log('aaa') var urlstr = 'http://localhost:3000/mock1'; $.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 = 'http://localhost:3000/mock1'; $.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))
最新評論