本篇文章為大家展示了MockJs中怎么利用json-server模擬后臺(tái)數(shù)據(jù)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、商城建設(shè)，微信小程序，軟件定制網(wǎng)站建設(shè)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，成都創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

下載

mkdir moke-test
cd moke-test
npm init
sudo npm install --save-dev json-server mockjs ip
mkdir server #創(chuàng)建本地服務(wù)文件夾

2. 配置 json-server

在 moke-test/server 下創(chuàng)建 index.js

// index.js
const path = require('path');
const jsonServer = require('json-server');
const ip = require('ip').address();
const DB = require('./db.js');
const server = jsonServer.create();
const router = jsonServer.router(DB()); // 將所創(chuàng)建的數(shù)據(jù)對(duì)象傳入，以之生成相應(yīng)的路由
const middlewares = jsonServer.defaults();

 server.use(jsonServer.bodyParser);
 server.use(middlewares);

 server.use(router);

 server.listen({
  host: ip,
  port: 3122
 }, function() {
  console.log(`JSON Server is running in http://${ip}:3122`);
 });

在相同目錄下（moke-test/server）下創(chuàng)建 db.js 文件用于通過(guò) mockjs 生成數(shù)據(jù)

 // mock.js
 const Mock = require('mockjs');
 const Random = Mock.Random;

 module.exports = function () {
  const data = Mock.mock({
   'id|+1': 0
  });

  return {data};
 }

3. 使用 mockjs 動(dòng)態(tài)生成假數(shù)據(jù)

生成假數(shù)據(jù)有兩種方式

數(shù)據(jù)模板定義
數(shù)據(jù)占位符定義

1. 數(shù)據(jù)模板定義

基本結(jié)構(gòu)如下，詳情可以查看官網(wǎng)

 Mock.mock({
  'name|rule': value
 })
 /*
  name: 屬性名
  rule: 生成規(guī)則
  value: 屬性值
 */

2. 數(shù)據(jù)占位符定義

占位符只是在屬性值字符串中占個(gè)位置，并不出現(xiàn)在最終的屬性值中

1)、用 @ 來(lái)標(biāo)識(shí)其后的字符串是占位符，占位符之間空格隔開(kāi)
2)、占位符是 Mock.Random 中的方法
3)、使用 Mock.Random.extend() 擴(kuò)展占位符
4)、占位符 也可以引用 數(shù)據(jù)模板 中的屬性，并且優(yōu)先使用。

Mock.mock({
  'list|5': [{
    first: '@FIRST', // 可以是大寫(xiě)的
  }]
 })

3. Mock.Random 工具類詳解

 // mock.js
 const Mock = require('mockjs');
 const Random = Mock.Random;

 module.exports = function () {
  // Random.extend 用于自定義擴(kuò)展 
   Random.extend({
   courses: ['音樂(lè)課', '舞蹈課', '地理課'],
   course: function(date){
    return this.pick(this.courses)
   }
  });

  const courses = Mock.mock({
   startClass: '@bool', // 布爾值，可以傳入?yún)?shù)設(shè)置頻率
   token: '@string("upper", 2, 8)', // 隨機(jī)字符串
   createData: '@datetime("yyyy-MM-dd A HH:mm:ss")', // 返回日期
   image: '@image("200x100")', // 模擬圖片 'x'鏈接 
   manager: '@cname', // 中文名
   'partners|3': [
    '@name' // 英文名
   ], 
   website: '@url',
   email: '@email',
   'password|2': '**', // 數(shù)據(jù)模板下，值為字符串表示按照規(guī)則重復(fù)字符串
   'contents|1-20': [{ // 數(shù)據(jù)模板下，值為數(shù)組或者對(duì)象 rule 部分都規(guī)定了顯示的元素?cái)?shù)量
    'id|+1': 0, // 數(shù)據(jù)模板下，值為數(shù)值表示初始值或者底數(shù)（按招規(guī)則細(xì)分）
    courseType: '@COURSE ', // 使用擴(kuò)展
    courseName() { // 值可以是一個(gè)函數(shù)，用來(lái)細(xì)致模擬數(shù)據(jù)
     return this.courseType + ' ' + Random.natural(1, 10) + '班'
    },
    name: '@courseType @natural(1, 10) 班', // 可以同時(shí)使用多個(gè)占位符，用空格隔開(kāi)
    'teacher': '@cname',
    position: '@courseType 第 @id 教室', // 引用當(dāng)前數(shù)據(jù)模板中的內(nèi)容
    students: /\d{5,10}/, // 使用正則規(guī)定數(shù)據(jù)格式
    classTime: '@datetime("M月d日起 每周三 HH:mm")'
   }]
  })

  return {courses};
 }

上述內(nèi)容就是MockJs中怎么利用json-server模擬后臺(tái)數(shù)據(jù)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。