從零開始做Vue前端架構（4）

xuweijian 發布于2019-06-24 17:58 / 2192人閱讀

摘要：前言上一篇我們遇到少年，是不是忘了的警告，這一篇我們就來解決這個問題。總結通過實現前后端分離，并且使用來更方便的模擬數據。下一篇，我們創建發布環境下的配置文件，并且看看怎么優化產出的代碼的從零開始做前端架構項目完整代碼前端架構子咻

前言

上一篇我們遇到"少年，是不是忘了npm run mock?"的警告，這一篇我們就來解決這個問題。

開發 一、安裝包

安裝koa和一系列的包（我們用的是koa v2）：

koa
koa-bodyparser
koa-router
boom
nodemon
mockjs

解釋說明一下（知道的同學可以忽略）:

名稱	作用
koa	我們都知道Node.js有HTTP模塊，來處理HTTP請求，koa基于Node做了很多方便的接口讓我們更順暢地處理HTTP，比如，接收、解析、響應。
koa-router	方便的路由方式獲取get/post、以及參數
koa-bodyparser	koa插件之一，方便解析get/post的參數
boom	友好的HTTP錯誤對象
nodemon	為了在啟動koa服務以后，修改了koa相關的node代碼會自動重載更新，無需手動關閉再重啟
mockjs	模擬數據用

二、創建目錄和文件

結構：

mock
├── home // 和views文件夾對應
│?? └── hello.js // home頁面需要的hello模擬數據
├── public // 公共的接口模擬數據
└── server.js // node代碼

先上一盤server.js代碼：

const Koa = require("koa")
// 使用router
const Router = require("koa-router")
const Boom = require("boom")
const bodyParser = require("koa-bodyparser")
const app = new Koa()
const router = new Router()
// https://github.com/alexmingoia/koa-router
app.use(router.routes())
app.use(router.allowedMethods({
  throw: true,
  notImplemented: () => new Boom.notImplemented(),
  methodNotAllowed: () => new Boom.methodNotAllowed()
}))
// 使用bodyparser 解析get,post的參數
app.use(bodyParser())

// 模擬數據返回

/* 首頁 */

// 獲取hello數據
const helloData = require("./home/hello.js")
router.get("/api/home/hello", async(ctx, next) => {
  ctx.body = helloData
  await next()
})

// log error
app.on("error", (err, ctx) => {
  console.log("server error", err, ctx)
})

// 注意：這里的端口要和webpack里devServer的端口對應
app.listen(7777)

再來一盤hello.js代碼：

// 引入mockjs來模擬數據
// https://github.com/nuysoft/Mock/wiki/Getting-Started
const Mock = require("mockjs")
const data = Mock.mock({
  "list|1-10": [{
    "id|+1": 1
  }]
})
const img = Mock.Random.image("200x100")

module.exports = {
  msg: "mock hello api works",
  data: data,
  imgUrl: img
}

在package.json里scripts里加上：
"mock": "nodemon ./mock/server.js"

這樣的話，我們只需要npm run mock就啟動了本地的模擬數據接口功能了。

回到之前我們下的完整項目，先啟動mock，然后npm run dev，我們就可以發現報錯不見啦。

總結

通過koa v2實現前后端分離，并且使用mockjs來更方便的模擬數據。

下一篇，我們創建發布環境下的webpack配置文件，并且看看怎么優化產出的代碼的 - 從零開始做Vue前端架構（5）

項目完整代碼

Vue前端架構-by 子咻

云服務器 GPU云服務器從零開始搭建前端數據監控系統從零開始 linux從零開始 python從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/11837.html

從零開始做Vue前端架構（3）

摘要：前言這一篇，我們將接著上篇來完成創建項目文件目錄架構。總結這篇主要是文件和目錄架構的東西，讀者務必運行一下完整的項目。因此，下一篇，我們將通過實現本地數據接口模擬從零開始做前端架構項目完整代碼前端架構子咻前言這一篇，我們將接著上篇來完成創建項目文件、目錄架構。回顧先回顧一下現在項目有哪些東西了： . ├── app │?? ├── app.vue │?? ├── common ...

dinfer 2019-06-24 17:56 評論0 收藏0
從零開始做Vue前端架構（1）

摘要：前言想想也已經做過不少架構的項目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。前言想想也已經做過不少架構的項目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 評論0 收藏0
從零開始做Vue前端架構（2）

摘要：前言這一篇，我們將接著上篇來完成配置。開發一配置我們采用的方式來創建。對了，前提我們需要全局安裝。三配置創建文件，上配置配置總結這篇不多，就做了三件事，。下一篇我們將創建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻前言這一篇，我們將接著上篇來完成配置eslint、babel、postcss。開發一、配置eslint 我們采用eslint --init的方式來創建e...

Brenner 2019-08-26 11:34 評論0 收藏0
從零開始做Vue前端架構（2）

摘要：前言這一篇，我們將接著上篇來完成配置。開發一配置我們采用的方式來創建。對了，前提我們需要全局安裝。三配置創建文件，上配置配置總結這篇不多，就做了三件事，。下一篇我們將創建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻前言這一篇，我們將接著上篇來完成配置eslint、babel、postcss。開發一、配置eslint 我們采用eslint --init的方式來創建e...

YanceyOfficial 2019-06-24 17:56 評論0 收藏0
從零開始做Vue前端架構（9）

摘要：那該怎么管理這兩個不同的項目呢解決子模塊用的的同學肯定一下子就想到子模塊的知識了。最后，也希望有想法的同學還有大佬多多留言，給點建議原文地址從零開始做前端架構腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關文檔子模塊前言相信很多人都用過vue-cli或create-react-app或者類似的腳手架。腳手架方便我們復制，粘貼，或者clone代碼庫，而且還可以更具用...

Vicky 2019-06-24 18:01 評論0 收藏0