閒來無事，做了個簡單的線上編輯的mock服務

lenora發表於2019-01-17
原文網址 : https://juejin.im/post/5c404a876fb9a049b780a64c
Mock

簡介

打造一個MOCK伺服器! 支援JSON資料或者Mockjs方法。

技術棧

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

前後端分離開發模式，前端專案與後端專案屬於不同的工程,使用者名稱：admin 密碼： 123456

// mock/client 前端工程
// mock/service 後端工程
複製程式碼

如果對您有幫助，您可以點右上角 "Star" 支援一下 謝謝！ ^_^

部分功能截圖

新增專案

專案目錄 指的是 介面的一級目錄（例如：http://localhost:7001/mock/getData/a 中的 /mock）

閒來無事，做了個簡單的線上編輯的mock服務

配置專案介面

介面連線 指的是一級目錄後的連線 （例如：http://localhost:7001/mock/getData/a 中的 /getData/a） 支援JSON資料型別，和mockjs資料型別，注意使用雙引號；

閒來無事，做了個簡單的線上編輯的mock服務 閒來無事，做了個簡單的線上編輯的mock服務 閒來無事，做了個簡單的線上編輯的mock服務

測試介面

因為在egg裡監聽^/api路由做mock服務，所以最終的訪問的mock請求連線要加上/api字首。（http://localhost:7001/api/mock/getData/a）;

閒來無事，做了個簡單的線上編輯的mock服務 閒來無事，做了個簡單的線上編輯的mock服務

執行專案

因前後端不同埠原因，為解決跨域。前端工程啟動了devServer，需先啟動後端工程

執行後端專案

  • 請確保本地已裝mysql，並配置全域性變數
  • mysql -u root -p 並輸入資料庫密碼
  • create database mock; 建立mock資料庫
  • use mock; 切換資料庫
  • source mock.sql的絕對路徑; 例如：source {當前目錄}/db/mock.sql;
  • 配置egg.js連線資料庫資訊
// 前往service/config/config.local.js，配置你的資料庫資訊
config.sequelize = {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    database: 'mock',
    username: '', 
    password: '', 
    operatorsAliases: false
};
複製程式碼
  • 在/service檔案下
  • npm install
  • npm run dev

執行前端專案

  • cd client
  • npm install
  • npm start

如果對您有幫助，您可以點右上角 "Star" 支援一下 謝謝！ ^_^

相關文章