簡(jiǎn)介

打造一個(gè)MOCK服務(wù)器! 支持JSON數(shù)據(jù)或者M(jìn)ockjs方法。

技術(shù)棧

• react
• ant design Pro
• egg.js
• mysql

前后端分離開發(fā)模式，前端項(xiàng)目與后端項(xiàng)目屬于不同的工程,用戶名：admin 密碼： 123456

// mock/client 前端工程 // mock/service 后端工程 復(fù)制代碼

如果對(duì)您有幫助，您可以點(diǎn)右上角 "Star" 支持一下 謝謝！ ^_^

部分功能截圖

添加項(xiàng)目

項(xiàng)目目錄 指的是 接口的一級(jí)目錄（例如：http://localhost:7001/mock/getData/a 中的 /mock）

配置項(xiàng)目接口

接口連接 指的是一級(jí)目錄后的連接 （例如：http://localhost:7001/mock/getData/a 中的 /getData/a） 支持JSON數(shù)據(jù)類型，和mockjs數(shù)據(jù)類型，注意使用雙引號(hào)；

測(cè)試接口

因?yàn)樵趀gg里監(jiān)聽^/api路由做mock服務(wù)，所以最終的訪問的mock請(qǐng)求連接要加上/api前綴。（http://localhost:7001/api/mock/getData/a）;

運(yùn)行項(xiàng)目

因前后端不同端口原因，為解決跨域。前端工程啟動(dòng)了devServer，需先啟動(dòng)后端工程

• git clone github.com/lenolee16/m…
• cd mock

運(yùn)行后端項(xiàng)目

• 請(qǐng)確保本地已裝mysql，并配置全局變量
• mysql -u root -p 并輸入數(shù)據(jù)庫密碼
• create database mock; 創(chuàng)建mock數(shù)據(jù)庫
• use mock; 切換數(shù)據(jù)庫
• source mock.sql的絕對(duì)路徑; 例如：source {當(dāng)前目錄}/db/mock.sql;
• 配置egg.js連接數(shù)據(jù)庫信息

// 前往service/config/config.local.js，配置你的數(shù)據(jù)庫信息 config.sequelize = {dialect: 'mysql',host: '127.0.0.1',port: 3306,database: 'mock',username: '', password: '', operatorsAliases: false }; 復(fù)制代碼

• 在/service文件下
• npm install
• npm run dev

運(yùn)行前端項(xiàng)目

• cd client
• npm install
• npm start

如果對(duì)您有幫助，您可以點(diǎn)右上角 "Star" 支持一下 謝謝！ ^_^

轉(zhuǎn)載于:https://juejin.im/post/5c404a876fb9a049b780a64c

總結(jié)

以上是生活随笔為你收集整理的闲来无事，做了个简单的在线编辑的mock服务的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。