react-數據Mock實現——json-server

什么是mock?

在前后端分離的開發模式下,前端可以在沒有實際后端接口的支持下先進行接口數據的模擬,進行正常的業務功能開發

?json-server實現數據Mock

json-server是一個node的包,可以在不到30秒內獲得零編碼的完整Mock服務

實現步驟

安裝
npm i json-server -D
項目根目錄下創建mock文件夾 創建一個json文件

json文件

{"takeaway": [{"tag": "318569657","name": "一人套餐","foods": [{"id": 2305772036,"name": "雞腿胡蘿卜燜飯","like_ratio_desc": "好評度91%","month_saled": 300,"unit": "1人份","food_tag_list": [],"price": 34.32,"picture": "https://zqran.gitee.io/images/waimai/2305772036.jpg","description": "主料:大米、雞腿、菜心、胡蘿卜","tag": "318569657"}]},{"tag": "82022594","name": "特色燒烤","foods": [{"id": 3823780596,"name": "藤椒雞肉串","like_ratio_desc": "","month_saled": 200,"unit": "10串","food_tag_list": ["點評網友推薦"],"price": 6,"picture": "https://zqran.gitee.io/images/waimai/3823780596.jpg","description": "1串。藤椒味,主料:雞肉","tag": "82022594"}]}]
}
添加啟動命令? ? ?package.json的scripts新增啟動命令
  "scripts": {"start": "craco start","build": "craco build","server": "json-server ./mock/home.json --port 3005"              },
運行啟動命令

運行成功會出現一個對應端口的地址,直接復制瀏覽器訪問看是否成功

npm run server

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

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

相關文章

使用POI導入解析excel文件

首先校驗 /*** 校驗導入文件* param file 上傳的文件* return 校驗結果,成功返回包含成功狀態的AjaxResult,失敗返回包含錯誤信息的AjaxResult*/private AjaxResult validateImportFile(MultipartFile file) {if (file.isEmpty()) {return AjaxResult.er…

從0開始學習計算機視覺--Day06--反向傳播算法

盡管解析梯度可以讓我們省去巨大的計算量,但如果函數比較復雜,對這個損失函數進行微分計算會變得很困難。我們通常會用反向傳播技術來遞歸地調用鏈式法則來計算向量每一個方向上的梯度。具體來說,我們將整個計算過程的輸入與輸入具體化&#…

企業流程知識:《學習觀察:通過價值流圖創造價值、消除浪費》讀書筆記

《學習觀察:通過價值流圖創造價值、消除浪費》讀書筆記 作者:邁克魯斯(Mike Rother),約翰舒克(John Shook) 出版時間:1999年 歷史地位:精益生產可視化工具的黃金標準&am…

Day02_C語言IO進程線程

01.思維導圖 02.將當前的時間寫入到time. txt的文件中,如果ctrlc退出之后,在再次執行支持斷點續寫 1.2022-04-26 19:10:20 2.2022-04-26 19:10:21 3.2022-04-26 19:10:22 //按下ctrlc停止,再次執行程序 4.2022-04-26 20:00:00 5.2022-04-26 2…

FFmpeg中TS與MP4格式的extradata差異詳解

在視頻處理中,extradata是存儲解碼器初始化參數的核心元數據,直接影響視頻能否正確解碼。本文深入解析TS和MP4格式中extradata的結構差異、存儲邏輯及FFmpeg處理方案。 📌 一、extradata的核心作用 extradata是解碼必需的參數集合&#xff0…

【CV數據集介紹-40】Cityscapes 數據集:助力自動駕駛的語義分割神器

🧑 博主簡介:曾任某智慧城市類企業算法總監,目前在美國市場的物流公司從事高級算法工程師一職,深耕人工智能領域,精通python數據挖掘、可視化、機器學習等,發表過AI相關的專利并多次在AI類比賽中獲獎。CSDN…

SAP月結問題9-FAGLL03H與損益表中研發費用金額不一致(FAGLL03H Bug)

SAP月結問題9-FAGLL03H與損益表中研發費用金額不一致(S4 1709) 財務反饋,月結后核對數據時發現FAGLL03H導出的研發費用與損益表中的研發費用不一致,如下圖所示: 對比FAGLL03H與損益表對應的明細,發現FAGLL03H與損益表數據存在倍數…

HTML inputmode 屬性詳解

inputmode 是一個 HTML 屬性&#xff0c;用于指定用戶在編輯元素或其內容時應使用的虛擬鍵盤布局類型。它主要影響移動設備和平板電腦的輸入體驗。 語法 <input inputmode"value"> <!-- 或 --> <textarea inputmode"value"></texta…

軟考中級【網絡工程師】第6版教材 第1章 計算機網絡概述

考點分析&#xff1a; 本章重要程度&#xff1a;一般&#xff0c;為后續章節做鋪墊&#xff0c;有總體認識即可&#xff0c;選擇題1-2分高頻考點&#xff1a;OSI模型、TCP/IP模型、每個層次的功能、協議層次新教材變化&#xff1a;刪除網絡結構、刪除X.25、更新互聯網發展【基本…

Mysql事務與鎖

數據庫并發事務 數據庫一般都會并發執行多個事務&#xff0c;多個事務可能會并發的對相同的一批數據進行增刪改查操作&#xff0c;可能就會導致我們說的臟寫、臟讀、不可重復讀、幻讀這些問題。為了解決這些并發事務的問題&#xff0c;數據庫設計了事務隔離機制、鎖機制、MVCC多…

Bilibili多語言字幕翻譯擴展:基于上下文的實時翻譯方案設計

Bilibili多語言字幕翻譯擴展&#xff1a;基于上下文的實時翻譯方案設計 本文介紹了一個Chrome擴展的設計與實現&#xff0c;該擴展可以為Bilibili視頻提供實時多語言字幕翻譯功能。重點討論了字幕翻譯中的上下文問題及其解決方案。 該項目已經登陸Chrome Extension Store: http…

熱血三國野地名將列表

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>野地名將信息表</title><style>tabl…

【記錄】Word|Word創建自動編號的多級列表標題樣式

文章目錄 前言創建方式第一種方法&#xff1a;從“定義多級列表”中直接綁定已有樣式第二種方法&#xff1a;通過已有段落創建樣式&#xff0c;再綁定補充說明 尾聲 前言 這世上荒唐的事情不少&#xff0c;但若說到吊詭&#xff0c;Word中的多級列表樣式設定&#xff0c;倒是能…

使用mavros啟動多機SITL仿真

使用mavros啟動多機SITL仿真 方式1&#xff1a;使用roslaunch一鍵啟動Step1&#xff1a;創建一個新的 ROS 包或放到現有包里Step2&#xff1a;編輯 multi_mavros.launchStep3&#xff1a;構建工作空間并 source 環境Step4&#xff1a;構建工作空間并 source 環境 方式2&#xf…

Flutter 網絡棧入門,Dio 與 Retrofit 全面指南

面向多年 iOS 開發者的零阻力上手 寫在前面 你在 iOS 項目中也許習慣了 URLSession、Alamofire 或 Moya。 換到 Flutter 后&#xff0c;等價的「組合拳」就是 Dio Retrofit。 本文將帶你一次吃透兩套庫的安裝、核心 API、進階技巧與最佳實踐。 1. Dio&#xff1a;Flutter 里的…

工作室考核源碼(帶后端)

題目內容可更改 下載地址:https://mcwlkj.lanzoub.com/iUF3z300tgfe 如圖所示

數字孿生技術為UI前端提供全面支持:實現產品的可視化配置與定制

hello寶子們...我們是艾斯視覺擅長ui設計、前端開發、數字孿生、大數據、三維建模、三維動畫10年經驗!希望我的分享能幫助到您!如需幫助可以評論關注私信我們一起探討!致敬感謝感恩! 一、引言&#xff1a;數字孿生驅動產品定制的技術革命 在消費升級與工業 4.0 的雙重驅動下&a…

通往物理世界自主智能的二元實在論與羅塞塔協議

序章&#xff1a;AI的“兩種文化”之爭——我們是否在構建錯誤的“神”&#xff1f; 自誕生以來&#xff0c;人工智能領域始終存在著一場隱秘的“兩種文化”之爭。一方是符號主義與邏輯的信徒&#xff0c;他們追求可解釋、嚴謹的推理&#xff0c;相信智能的核心在于對世界規則…

探索 AI 系統提示與模型資源庫:`system-prompts-and-models-of-ai-tools`

在當今的人工智能領域,系統提示和工具模型的優化與應用對于提升 AI 助手的性能和響應質量至關重要。x1xhlol 開源的 system-prompts-and-models-of-ai-tools 倉庫為開發者們提供了一個豐富的資源集合,涵蓋了多種 AI 工具的系統提示、工具和模型。 倉庫概述 這個倉庫包含了超…

城市燈光夜景人像街拍攝影后期Lr調色教程,手機濾鏡PS+Lightroom預設下載!

調色教程 “城市燈光夜景人像街拍攝影后期 Lr 調色”&#xff0c;主要是利用 Lightroom 軟件&#xff0c;對城市夜景中燈光下的人像街拍照片進行處理。通過調整色彩平衡、明暗對比和細節質感&#xff0c;強化夜景燈光的絢麗感&#xff0c;突出人像主體&#xff0c;同時協調人物…