摘要:基于實現的數據接口,需要以上版本,低于此版本請先升級目錄結構獲取列表數據頁數每頁數據條數返回狀態碼返回成功有錯誤是否有更多數據構造返回對象如果超過最大頁面數獲取詳情數據商品提交評論用戶商品評論內容缺少參數評論成功實際項目中,調用接口會遇到
基于node+koa實現的mock數據接口,Koa需要v7.6.0以上node版本,低于此版本請先升級node目錄結構
// server.js const Koa = require("koa"); const Router = require("koa-router"); const qs = require("qs"); const assert = require("assert"); const app = new Koa(); const router = new Router(); /** * 獲取列表數據 * @param {request} page 頁數 * @param {request} limit 每頁數據條數 * @param {response} errno 返回狀態碼 0 ==> 返回成功 1 ==> 有錯誤 * @param {response} hasMore 是否有更多數據 */ let listData = require("./mock/list/list.js"); router.get("/api/getlist/:page/:limit", function (ctx, next) { const page = ctx.params.page; const limit = ctx.params.limit; const maxPage = listData.length / limit; // 構造返回對象 let res = { errno: 0, data: { hasMore: true, data: [] } }; // 如果超過最大頁面數 if ((page*1 + 1) >= maxPage) { res.data.hasMore = false; } res.data.data = listData.slice(page*limit, page*limit + limit); ctx.body = res; }); /** * 獲取詳情數據 * @param {request} id 商品id */ const detailData = require("./mock/detail/detail.js"); router.get("/api/getdetail/:id", function (ctx, next) { const id = ctx.params.id let res = { errno: 0, data: { data: [] } } res.data.data = detailData; // todo... ctx.body = res; }); /** * 提交評論 * @param {request} id 用戶id * @param {request} uid 商品id * @param {request} msg 評論內容 */ router.post("/api/comment", function (ctx, next) { const params = qs.parse(ctx.req._parsedUrl.query); const id = params.id; const uid = params.uid; const msg = params.msg; if (id === undefined || uid === undefined || msg === undefined) { ctx.body = { errno: 1, msg: "缺少參數" } } else { // todo... ctx.body = { errno: 0, msg: "評論成功" } } }); app .use(router.routes()) .use(router.allowedMethods()); app.listen(3000); console.log("server is running at http://localhost:3000/");實際項目中,調用接口會遇到跨域的問題,解決的方式有多種,這里介紹如何在webpack中配置
module.exports = { ... devServer: { proxy: { // 將 `/api` 開頭的 http 請求,都代理到 `localhost:3000` 上,由 koa 提供 mock 數據 "/api": { target: "http://localhost:3000", secure: false } } ... } }項目地址:
https://github.com/daijingfeng/mock-server
喜歡的朋友就賞個star吧
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91984.html
摘要:前言上一篇我們遇到少年,是不是忘了的警告,這一篇我們就來解決這個問題。總結通過實現前后端分離,并且使用來更方便的模擬數據。下一篇,我們創建發布環境下的配置文件,并且看看怎么優化產出的代碼的從零開始做前端架構項目完整代碼前端架構子咻 前言 上一篇我們遇到少年,是不是忘了npm run mock?的警告,這一篇我們就來解決這個問題。 開發 一、安裝包 安裝koa和一系列的包(我們用的是ko...
摘要:使用寫一個服務實現思路讀取文件夾遍歷文件嘗試導入文件內容將文件內容拼接成一個對象將請求類型空格請求地址作為當收到的請求能在對象中找到就返回結果找不到結果返回獲取文件內容同步讀取文件夾對象匯總遍歷文件只讀取文件容錯,可能文件內容有問題只合并對 使用Node寫一個Mock服務 實現思路: 讀取mock文件夾 遍歷.js文件 嘗試導入文件內容 將文件內容拼接成一個對象 將請求類型 + 空格...
摘要:前端開發如何做好本地接口模擬之前有寫過一篇本地化接口模擬前后端并行開發,講到過本地接口模擬,但不太細致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因為本地接口模擬功能主要是針對的返回值為格式的異步請求,所以這種方式主要用文件。 前端開發如何做好本地接口模擬 之前有寫過一篇 本地化接口模擬、前后端并行開發,講到過本地接口模擬,但不太細致。這次細細的說說本地接口模擬。 1. 有什么...
摘要:簡介搭建多頁面服務端渲染技術點搭建服務創建頁面路由模板引擎組合打包多頁面端異步請求服務端日志打印項目源碼運行一現代服務端渲染的由來服務端渲染概念是指,瀏覽器向服務器發出請求頁面,服務端將準備好的模板和數據組裝成完整的返回給瀏覽器展示前端后 簡介 nodejs搭建多頁面服務端渲染 技術點 koa 搭建服務 koa-router 創建頁面路由 nunjucks 模板引擎組合html ...
摘要:前言筆者的前端開發已經有些時日了,對于一直保留著最初的恐懼,倘若一座不可跨越的高山,思前想后終于邁出最后一步,踏入了開拓自己視野的新視界,希望在看這篇文章的你可以一起跟我動手嘗試。面向的下一代框架。由團隊打造,特點優雅簡潔靈活體積小。 showImg(https://segmentfault.com/img/bVbuorM?w=1514&h=568); 前言 ?????筆者的前端開發已...
閱讀 1309·2021-11-15 11:37
閱讀 2564·2021-09-22 10:56
閱讀 3391·2021-09-06 15:11
閱讀 801·2021-08-31 09:45
閱讀 2897·2021-07-28 11:16
閱讀 1806·2019-08-30 15:44
閱讀 477·2019-08-30 13:22
閱讀 3344·2019-08-30 13:18