【vue】本地開發mock數據支持

項目離不開數據渲染的支持，為本地開發配置 數據  支持。

（一）方式一：安裝JSON Server搭建mock數據的服務器

json Server 是一個創建 偽RESTful服務器的工具。

 

配置流程：

①項目安裝json-server

   cnpm install -g json-server

②項目目錄下新增mock文件夾，並在mock文件夾下 添加 db.json 數據文件

   db.json的內容為：

{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}

 

③在項目的 package.json 的 “scripts” 配置中添加如下語句：

"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"


④完結步驟
1）運行啟動mock服務器(通過安裝json-server 搭建而成) cnpm run mock 
2）訪問mock數據的接口地址為 http://localhost:3000/
3) 以上db.json中的第一級json對象被解析為獨立的可訪問路徑，如下圖：

4）以上各獨立 json對象 的 訪問路徑/請求接口 則為 http://localhost:3000/對象名

------------------------------------------方式一 end------------------------------------------------

若命令 cnpm run mock & cnpm run dev  無法同時運行mock服務器和項目，可參照博文【vue】npm run mock & npm run dev 無法同時運行的解決 解決。