【前后端】node mock.js+json-server

JSON-Server

一個在前端本地運行，可以存儲json數據的server。前端開發可以模擬服務端接口數據，在本地搭建一個JSON服務，自己產生測試數據。

  1. 使用npm全局安裝json-server ：npm install -g json-server
  2. 可以通過查看版本號，來測試是否安裝成功：json-server -v
  3. 創建json數據——db.json
    在任意一個文件夾下（此處假設創建一個server文件夾），進入到該文件夾里面，執行代碼 json-server --watch db.json
  4. 此時文件夾下多出一個db.json文件
  5. 啟動json-server --watch db.json，訪問 http://localhost:3000/
  6. 分別點擊/posts /comments /profile /db鏈接，我們可以看到訪問不同URL返回不同的json數據。其中 /db返回的是整個json文件的數據。
  • 修改端口號
    默認3000 --port 3004或者在db.json同級文件夾新建一個package.json，在script配置添加運行命令：
{"scripts": {"mock": "json-server db.json --port 3004"}
}
//運行時, 直接在當前文件夾下執行 npm run mock
  • 操作數據 | 增刪改查
    json-server 支持 restful 風格的api，可以通過不同的請求方式，對數據進行增刪改查等不同的操作。
    先修改db.json文件：
{"users": [{"id": 1,"name": "liaoyi","phone": "13246566776","age": 22,"classId": "1002"},{"name": "林更新","age": "44","id": 4,"classId": "1003"},{"name": "李響","phone": "18779756778","age": "26","id": 5,"classId": "1003"},{"name": "陳溫柔","phone": "18779756000","age": "22","id": 6,"sex": "0","classId": "1004"},{"name": "夏琪","phone": "13246579999","age": "22","id": 7,"classId": "1004"}],"class": [{"id": "1","title": "前端","staff": ["1002","1004"]},{"id": "2","title": "后端","staff": ["1003"]}],"fruits": [{"id": 1,"name": "蘋果","price": 1.28},{"id": 2,"name": "橘子","price": 3.88},{"id": 3,"name": "寧夏西瓜","price": 1.98},{"id": 4,"name": "麒麟西瓜","price": 3.98},{"id": 5,"name": "紅蛇果","price": 2.5},{"id": 6,"name": "黑皮西瓜","price": 0.98},{"id": 7,"name": "紅心火龍果","price": 2.69},{"id": 8,"name": "國產火龍果","price": 1.69},{"id": 9,"name": "海南荔枝","price": 9.9},{"id": 10,"name": "陜西冬棗","price": 5.39},{"id": 11,"name": "軟籽石榴","price": 2.39},{"id": 12,"name": "蜜橘","price": 1.99},{"id": 13,"name": "海南香蕉","price": 1.45}],"person": [{"name": {"firstname": "liao","lastname": "yi"},"pwd": "qwerst54"},{"name": {"firstname": "wang","lastname": "wu"},"pwd": "adasff11"}]
}
  • get 獲取數據
    瀏覽器可以直接訪問GET請求，可以直接在瀏覽器訪問就能看到返回的json數據。
    獲取所有用戶數據（對象數組）： http://localhost:3004/users
    獲取所有水果數據：http://localhost:3004/fruits
    獲取數據
    根據 id 獲取 users 數據：http://localhost:3004/users/1
//get請求的query參數
http://localhost:3004/users?id=1//傳入不同的條件
// 查找名字為 'liaoyi' 的用戶
http://localhost:3004/users?name=liaoyi//多個條件 用&符號連接：
http://localhost:3004/fruits?name=橘子&price=3.88
//甚至還可以使用對象取屬性值 obj.key 的方式http://localhost:3004/person?name.firstname=liao//分頁采用 _page 來設置頁碼，
// _limit 來控制每頁顯示條數。
//如果沒有指定 _limit ，默認每頁顯示10條。
http://localhost:3004/fruits?_page=1&_limit=5
http://localhost:3004/fruits?_page=1&_limit=10
http://localhost:3004/fruits?_page=2&_limit=5//排序采用 _sort 來指定要排序的字段，
// _order 來指定排序是正排序還是逆排序（asc | desc ，默認是asc）。
http://localhost:3004/fruits?_sort=price
http://localhost:3004/fruits?_sort=price&_order=desc//獲取局部數據
//_start 來指定開始位置， _end 來指定結束位置、
//或者_limit指定從開始位置起往后取幾個數據。類似Array.slice() 方法
# 使用 _end
http://localhost:3004/fruits?_start=2&_end=4# 使用 _limit
http://localhost:3004/fruits?_start=2&_limit=4//獲取符合某個范圍的數據
1. 使用 _gte 和 _lte 來設置一個取值范圍 :
2. 使用 _ne 來獲取不包含某個值的數據
3. 采用 _like 來設置匹配某個字符串（或正則表達式）
http://localhost:3004/fruits?id_gte=4&id_lte=6
http://localhost:3004/fruits?id_ne=1&id_ne=10
http://localhost:3004/fruits?name_like=果//搜索功能 采用 q 來設置搜索內容：
http://localhost:3004/fruits?q=瓜
  • 除get請求外，其他請求方式需要我們通過 api 調試工具或者代碼的方式來使用。如apifox
<template><el-button @click="add"> 發送請求 </el-button>
</template><script setup>import axios from 'axios'const url = 'http://localhost:3004/users'const add = async () => {const data = {name: '林更新',phone: '18779756000',age: '22'}const { data: res } = await axios({ method: 'post', url, data })console.log('res', res)}
</script><template><el-button @click="deleteUser"> 刪除用戶 </el-button>
</template><script setup>
import axios from 'axios'const userId = 3
const url = `http://localhost:3004/users/${userId}`
const deleteUser = async () => {const res = await axios({ method: 'delete', url })console.log('res', res)
}
</script>

PUT方法會更新整個資源對象，前端沒有給出的字段，會自動清空。但是使用put修改后會有一個問題，只會保留提交的字段，沒有提交的字段在json中將會被刪除
patch 修改數據 ：只修改請求的字段，沒有請求的字段將會被保留。

<template><el-button @click="reviseUser"> put 修改用戶 </el-button>
</template><script setup>
import axios from 'axios'const userId = 4
const url = `http://localhost:3004/users/${userId}`
const reviseUser = async () => {const data = {"name": "林更新","age": "44"}const res = await axios({ method: 'put', url, data })console.log('res', res)
}
</script><template><el-button @click="reviseUser"> patch修改用戶 </el-button>
</template><script setup>
import axios from 'axios'const userId = 8
const url = `http://localhost:3004/users/${userId}`
const reviseUser = async () => {const data = {name: "陳溫柔",age: "22",sex: "0"
}const res = await axios({ method: 'patch', url, data })console.log('res', res)
}
</script>
  • 多表查詢 | 關聯檢索
  1. 向上關聯
    通過 _expand 方式檢索關聯父級數據，多對一關系，所以條件是單數。
    這里的 _expand=class 匹配即和 users 對象中的 classId做關聯，但是已經存在classId字段則寫出 class, 比如檢索的是 repaId 寫成 repa
  2. 通過 _embed 方式檢索關聯子級數據
    注意: 這里_embed 需要和子表名 (要關聯的子集屬性名) 匹配。一對多關系,所以匹配條件是負數。
//向上關聯父級數據
//class 是一個別名
http://localhost:3004/users?_expand=class
//res:
[{"id": 1,"name": "liaoyi","phone": "13246566776","age": 22,"classId": "1","class": {"id": "1","title": "前端","staff": ["7","6","1"]}},{"name": "林更新","age": "44","id": 4,"classId": "2","class": {"id": "2","title": "后端","staff": ["4","5"]}},{"name": "李響","phone": "18779756778","age": "26","id": 5,"classId": "2","class": {"id": "2","title": "后端","staff": ["4","5"]}},{"name": "陳溫柔","phone": "18779756000","age": "22","id": 6,"sex": "0","classId": "1","class": {"id": "1","title": "前端","staff": ["7","6","1"]}},{"name": "夏琪","phone": "13246579999","age": "22","id": 7,"classId": "1","class": {"id": "1","title": "前端","staff": ["7","6","1"]}}
]
//向下關聯子級數據
http://localhost:3004/classes?_embed=users
//res:
[{"id": "1","title": "前端","staffIds": ["1001","1004","1005"],"users": [{"id": "1001","name": "liaoyi","phone": "13246566776","age": 22,"classId": "1"},{"name": "陳溫柔","phone": "18779756000","age": "22","id": "1004","sex": "0","classId": "1"},{"name": "夏琪","phone": "13246579999","age": "22","id": "1005","classId": "1"}]},{"id": "2","title": "后端","staffIds": ["1002","1003"],"users": [{"name": "林更新","age": "44","id": "1002","classId": "2"},{"name": "李響","phone": "18779756778","age": "26","id": "1003","classId": "2"}]}
]
  • 靜態部署
    新增配置文件 config.json 并寫入
{"port": "3000",   // 設置端口號"watch": true,   // 是否開啟監聽"static": "./public/",  // 靜態資源目錄"read-only": false,   // 是否只讀"no-cors": true,   // 是否支持跨域"no-gzip": false  // 是否開啟壓縮
}
//啟動命令
json-server --watch data.json config.json//或者放入package.json+npm run mock
{"scripts": {"mock": "json-server --watch data.json config.json"}
}

mock.js

  • Mock.js + json-server 模擬數據
  1. 創建一個文件夾名為 mock_json
  2. 進入文件夾后初始化package.json 文件
  3. 下載依賴
mkdir mock_json
cd mock_json
npm init 
npm install  json-server mockjs
  1. 添加啟動腳本
{"name": "mock_json","scripts": {"dev": "json-server --watch db.js --port 3000"},"dependencies": {"json-server": "^0.17.4","mockjs": "^1.1.0"}
}
  1. 新建 db.js 文件
const Mock = require('mockjs')const data = Mock.mock({'users|10-20': [{'id|+1': '1','name': '@name','sex|1': ['男', '女'],'age|18-60': 1,'address': '@county(true)','phone': /^1[34578]\d{9}$/,'email': '@email','birthday': '@date','avatar': '@image(200x200, #50B347, #FFF, #78C3FC)','desc': '@cparagraph(1, 3)'}],'products|122000': [{'id|+1': 1,'name': '@word(3,5)','price': '@integer(100,999)','quantity': '@integer(1,50)','brief': '@cparagraph(1, 3)'}],
})
// 想要用 json-server 識別mockjs的模擬數據內容，需要使用 module.exports 進行模塊的對外暴露，并且暴露的類型必須是函數
module.exports = () => data/* 上面👆 products 有十二萬數據，不能直接打開瀏覽器訪問http://localhost:3000/products，瀏覽器會奔潰的需要使用查詢參分頁查詢如: http://localhost:3000/products?_page=1&_limit=10 */
  1. 啟動項目
npm run dev

注意??：

  1. 想要用 json-server 識別mockjs的模擬數據內容，需要使用 module.exports 進行模塊的對外暴露，并且暴露的類型必須是函數。
  2. 上面 products 我們模擬了十二萬條數據，啟動時會有點慢，并且不能直接使用瀏覽器訪問http://localhost:3000/products，瀏覽器會奔潰的。需要使用查詢參分頁查詢, 如：http://localhost:3000/products?_page=1&_limit=10

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/91311.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/91311.shtml
英文地址，請注明出處：http://en.pswp.cn/web/91311.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

疏老師-python訓練營-Day30模塊和庫的導入

疏老師-python訓練營-Day30模塊和庫的導入

浙大疏錦行 知識點回顧&#xff1a; 導入官方庫的三種手段導入自定義庫/模塊的方式導入庫/模塊的核心邏輯&#xff1a;找到根目錄&#xff08;python解釋器的目錄和終端的目錄不一致&#xff09; 作業&#xff1a;自己新建幾個不同路徑文件嘗試下如何導入 一.學習知識點 DAY30 …
閱讀更多...
神經網絡知識討論

神經網絡知識討論

AI 核心任務與數據類型&#xff1a;特征提取核心&#xff1a;AI 的核心是從原始輸入數據中提取特征&#xff0c;CV 是將圖像數據轉換為計算機可識別的特征&#xff0c;NLP 是將文本數據轉換為特征&#xff0c;數據挖掘是將結構化數據轉換為特征。數據類型特點&#xff1a;圖像數…
閱讀更多...
kotlin類型可為空，進行空安全的區別

kotlin類型可為空，進行空安全的區別

定義一個可為空的變量b(String?),默認沒有&#xff1f;是不可以為空的 var b: String? "Kotlin" b null print(b) // 輸出 null默認不可為空 var a: String "Kotlin" a null // 編譯器報錯&#xff0c;null 不能被賦給不為空的變量空安全調用&#x…
閱讀更多...
Mysql事務基礎

Mysql事務基礎

事務是一個不可分割的數據庫操作序列&#xff0c;也是數據庫并發控制的基本單位&#xff0c;其執行的結果必須使數據庫從一種一致性狀態變到另一種一致性狀態。事務是邏輯上的一組操作&#xff0c;要么都執行&#xff0c;要么都不執行 事務的特點 A&#xff08;Atomicity&#…
閱讀更多...
FastAPI入門：安裝、Pydantic、并發和并行

FastAPI入門：安裝、Pydantic、并發和并行

本系列參考FastAPI官方文檔&#xff1a;https://fastapi.tiangolo.com/zh/python-types/安裝 使用pip安裝&#xff1a; pip install fastapi此外還需要 ASGI 服務器&#xff0c;生產環境可以使用 Uvicorn 或者 Hypercorn。 ASGI服務器&#xff1a;異步服務網關接口&#xff0c;…
閱讀更多...
歡樂的周末 - 華為OD統一考試（JavaScript 題解）

歡樂的周末 - 華為OD統一考試（JavaScript 題解）

題目描述 小華和小為是很要好的朋友，他們約定周末一起吃飯。 通過手機交流，他們在地圖上選擇了多個聚餐地點(由于自然地形等原因，部分聚餐地點不可達)。 求小華和小為都能到達的聚餐地點有多少個? 輸入描述 第一行輸入m和n，m代表地圖的長度，n代表地圖的寬度 第二行…
閱讀更多...
算法競賽階段二-數據結構（38）數據結構動態鏈表list

算法競賽階段二-數據結構（38）數據結構動態鏈表list

動態鏈表&#xff08;List&#xff09;的基本概念動態鏈表是一種線性數據結構&#xff0c;通過節點間的指針連接實現動態內存分配。與數組不同&#xff0c;鏈表的大小可隨需增減&#xff0c;插入和刪除操作的時間復雜度為 O(1)&#xff08;已知位置時&#xff09;&#xff0c;但…
閱讀更多...
Qt 移動應用推送通知實現

Qt 移動應用推送通知實現

推送通知是移動應用提升用戶粘性的核心功能——無論是即時消息提醒、活動推送還是狀態更新&#xff0c;都需要通過推送功能觸達用戶。Qt雖未直接提供跨平臺推送API&#xff0c;但可通過集成原生服務&#xff08;如Firebase Cloud Messaging、Apple Push Notification service&a…
閱讀更多...
Word和WPS文字如何制作分欄試卷？想分幾欄分幾欄

Word和WPS文字如何制作分欄試卷？想分幾欄分幾欄

使用Word和WPS文字制作試卷的時候&#xff0c;通常會使用A3大小的紙張&#xff0c;橫向布局。但是如果題目的題干、問題、選項文字太少&#xff0c;會帶來試卷上有較大的空白&#xff0c;既不美觀又浪費紙&#xff0c;解決辦法就是將試卷分欄&#xff0c;根據需要分成多欄&…
閱讀更多...
ubuntu 安裝vmware tools

ubuntu 安裝vmware tools

VMware Workstation菜單欄->虛擬機->安裝VMware Tools 打開ubuntu內加載的光盤&#xff0c;復制VMwareTools-10.3.26-22085142.tar.gz&#xff0c;解壓出來 sudo ./vmware-install.pl #執行安裝軟件 VMware Tools 安裝完成以后重啟Ubuntu&#xff0c;重啟以后就可以直…
閱讀更多...
【實時Linux實戰系列】在實時應用中進行負載均衡

【實時Linux實戰系列】在實時應用中進行負載均衡

在實時應用中&#xff0c;負載均衡是確保系統能夠高效處理多個任務的關鍵技術。通過合理調度任務到不同的處理單元&#xff0c;負載均衡可以提高系統的整體性能&#xff0c;減少延遲&#xff0c;并提高資源利用率。在實時 Linux 系統中&#xff0c;負載均衡尤為重要&#xff0c…
閱讀更多...
bash的特性-命令和文件自動補全

bash的特性-命令和文件自動補全

一、前言在 Linux Shell 編程和日常使用中&#xff0c;Bash 的自動補全功能 是一個非常強大且實用的特性。它不僅可以節省輸入時間&#xff0c;還能有效減少拼寫錯誤&#xff0c;提升命令執行效率。本文將帶你全面了解 Bash 的自動補全機制&#xff0c;包括&#xff1a;? 命令…
閱讀更多...
Ubuntu系統 系統盤和數據盤擴容具體操作

Ubuntu系統 系統盤和數據盤擴容具體操作

Linux磁盤配置和需求&#xff0c;以下是完整的操作方案&#xff1a; 可以看到系統盤vda3 還有48GB 數據盤則是還有512GB沒有掛載使用&#xff0c;下面是完成數據擴容的具體操作 一、完成系統盤擴容&#xff08;使用98GB空間&#xff09; # 1. 擴展邏輯卷&#xff08;LVM架構&am…
閱讀更多...
從0到1學Pandas（七）：Pandas 在機器學習中的應用

從0到1學Pandas（七）：Pandas 在機器學習中的應用

目錄一、數據預處理1.1 特征提取1.2 數據標準化與歸一化1.3 特征編碼二、特征工程2.1 特征選擇?2.2 特征組合與衍生?2.3 缺失值處理策略?三、模型訓練與評估3.1 數據集劃分3.2 模型訓練與預測3.3 模型評估與調優四、Pipeline 構建4.1 自動化工作流4.2 模型部署與應用4.3 模型…
閱讀更多...
LangChain和LangGraph 里面的 `create_react_agent`有什么不同

LangChain和LangGraph 里面的 `create_react_agent`有什么不同

這兩個函數雖然名稱相同&#xff0c;但來自不同的庫&#xff08;LangChain 和 LangGraph&#xff09;&#xff0c;它們在實現和使用上有一些關鍵區別&#xff1a; 主要區別特性LangChain 的 create_react_agentLangGraph 的 create_react_agent所屬庫LangChainLangGraph設計目的…
閱讀更多...
PostgreSQL 與 Oracle 數據庫字段類型的詳細對比

PostgreSQL 與 Oracle 數據庫字段類型的詳細對比

一、數值類型對比數據類型OraclePostgreSQL說明整數NUMBER(p,0)SMALLINT/INT/BIGINTOracle 統一用 NUMBER&#xff0c;PG 區分精度范圍浮點數BINARY_FLOATREAL單精度浮點雙精度浮點BINARY_DOUBLEDOUBLE PRECISION雙精度浮點高精度小數NUMBER(p,s)NUMERIC(p,s)精確數值存儲自增序…
閱讀更多...
JVM 性能調優實戰：讓系統性能 “飛” 起來的核心策略

JVM 性能調優實戰：讓系統性能 “飛” 起來的核心策略

在 Java 應用的生命周期中&#xff0c;性能問題如同隱藏的 “暗礁”—— 初期可能不顯眼&#xff0c;但隨著用戶量增長和業務復雜度提升&#xff0c;微小的性能損耗會被無限放大&#xff0c;最終導致系統響應遲緩、頻繁卡頓甚至崩潰。JVM 性能調優的目標&#xff0c;就是通過優…
閱讀更多...
Android Handler 完全指南

Android Handler 完全指南

在 Android 開發中&#xff0c;Handler 是線程通信的核心工具 —— 當你在子線程下載圖片后需要更新 UI&#xff0c;當你在 TCP 連接中收到數據需要通知界面&#xff0c;當你需要延遲執行某個任務時&#xff0c;都會用到 Handler。這個看似簡單的類&#xff0c;卻蘊含著 Androi…
閱讀更多...
梳理Ego-Planner模式下5通道、6通道與無人機模式的關系

梳理Ego-Planner模式下5通道、6通道與無人機模式的關系

Copilot said: 你需要梳理Ego-Planner模式下5通道、6通道與無人機模式的關系&#xff0c;以及軌跡跟隨、緊急情況和人工接管的流程。下面結合你的描述和三張圖片&#xff0c;對核心邏輯進行總結和整理&#xff1a; --- ## 一、狀態組合與對應模式&#xff08;見圖1&#xff09;…
閱讀更多...
odbc和jdbc什么區別

odbc和jdbc什么區別

ODBC 和 JDBC 都是用于連接和操作數據庫的標準接口&#xff0c;但它們分別面向不同的編程語言和平臺。下面是它們的區別與對比&#xff0c;幫助你理解它們的用途和適用場景。&#x1f4ca; 一、基本概念對比特性ODBC&#xff08;Open Database Connectivity&#xff09;JDBC&am…
閱讀更多...
最新文章

Copyright @ 2022~2023