快捷導(dǎo)航

Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能

更新時(shí)間：2018年04月17日 08:34:39 作者：歸去來(lái)兮-不如去兮

這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

正開發(fā)過(guò)程中前后端分離或者不分離 ,接口多半是之后與頁(yè)面的開發(fā) ,所以建立rest的APL的接口給前端提供虛擬的數(shù)據(jù)是非常必要的所以這里我使用了json-server作為工具,支持CORS和JSONP跨域請(qǐng)求，支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查詢方法，如limit，order等,接下來(lái)我把我自己的上使用心寫成文檔

安裝

首先必須有node環(huán)境(都用到j(luò)son-server一定會(huì)有node環(huán)境吧)然后全局安裝json-server

npm install json-server -g

安裝完成后檢查是否全局安裝成功

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
Options:
 --config, -c        Path to config file  [default: "json-server.json"]
 --port, -p         Set port              [default: 3000]
 --host, -H         Set host            [default: "0.0.0.0"]
 --watch, -w        Watch file(s)               [boolean]
 --routes, -r        Path to routes file
 --middlewares, -m     Paths to middleware files          [array]
 --static, -s        Set static files directory
 --read-only, --ro     Allow only GET requests          [boolean]
 --no-cors, --nc      Disable Cross-Origin Resource Sharing   [boolean]
 --no-gzip, --ng      Disable GZIP Content-Encoding       [boolean]
 --snapshots, -S      Set snapshots directory       [default: "."]
 --delay, -d        Add delay to responses (ms)
 --id, -i          Set database id property (e.g. _id) [default: "id"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server

在項(xiàng)目根目錄創(chuàng)建一個(gè)db.json的目錄,然后寫入信息

{
 "api": [
  {
   "text": "數(shù)據(jù)統(tǒng)計(jì)",
   "link": "#",
   "hot": true
  },
  {
   "text": "數(shù)據(jù)檢測(cè)",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "廣告發(fā)布",
   "link": "#",
   "hot": false
  }
 ]
}

在package.json里面的scripts里面加一行命令

  "json": "json-server db.json --port 3003"

在項(xiàng)目目錄執(zhí)行命令

npm run json

在bash里面會(huì)看到這樣的界面

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

恭喜啟動(dòng)成功!

這時(shí)候進(jìn)入網(wǎng)頁(yè)進(jìn)行訪問(wèn)

這時(shí)候就可以進(jìn)行訪問(wèn)了

http://localhost:3003/api

可以看到之前寫的json串

到此json-server啟動(dòng)完畢

調(diào)用的代碼是這樣的

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('這里是用了vue-source,后端沒有接口')
   })

頁(yè)面初始化就可以看到數(shù)據(jù) 完成

總結(jié)

以上所述是小編給大家介紹的Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: