資訊專欄INFORMATION COLUMN
摘要：前言上一篇我們遇到少年，是不是忘了的警告，這一篇我們就來(lái)解決這個(gè)問(wèn)題?？偨Y(jié)通過(guò)實(shí)現(xiàn)前后端分離，并且使用來(lái)更方便的模擬數(shù)據(jù)。下一篇，我們創(chuàng)建發(fā)布環(huán)境下的配置文件，并且看看怎么優(yōu)化產(chǎn)出的代碼的從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻
前言
上一篇我們遇到"少年，是不是忘了npm run mock?"的警告，這一篇我們就來(lái)解決這個(gè)問(wèn)題。
開(kāi)發(fā) 一、安裝包安裝koa和一系列的包（我們用的是koa v2）：
koa koa-bodyparser koa-router boom nodemon mockjs
解釋說(shuō)明一下（知道的同學(xué)可以忽略）:
| 名稱 | 作用 |
|---|---|
| koa | 我們都知道Node.js有HTTP模塊，來(lái)處理HTTP請(qǐng)求，koa基于Node做了很多方便的接口讓我們更順暢地處理HTTP，比如，接收、解析、響應(yīng)。 |
| koa-router | 方便的路由方式獲取get/post、以及參數(shù) |
| koa-bodyparser | koa插件之一，方便解析get/post的參數(shù) |
| boom | 友好的HTTP錯(cuò)誤對(duì)象 |
| nodemon | 為了在啟動(dòng)koa服務(wù)以后，修改了koa相關(guān)的node代碼會(huì)自動(dòng)重載更新，無(wú)需手動(dòng)關(guān)閉再重啟 |
| mockjs | 模擬數(shù)據(jù)用 |
結(jié)構(gòu)：
mock ├── home // 和views文件夾對(duì)應(yīng) │?? └── hello.js // home頁(yè)面需要的hello模擬數(shù)據(jù) ├── public // 公共的接口模擬數(shù)據(jù) └── server.js // node代碼
先上一盤(pán)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的參數(shù)
app.use(bodyParser())
// 模擬數(shù)據(jù)返回
/* 首頁(yè) */
// 獲取hello數(shù)據(jù)
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的端口對(duì)應(yīng)
app.listen(7777)
再來(lái)一盤(pán)hello.js代碼：
// 引入mockjs來(lái)模擬數(shù)據(jù)
// 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就啟動(dòng)了本地的模擬數(shù)據(jù)接口功能了。
回到之前我們下的完整項(xiàng)目，先啟動(dòng)mock，然后npm run dev，我們就可以發(fā)現(xiàn)報(bào)錯(cuò)不見(jiàn)啦。
總結(jié)通過(guò)koa v2實(shí)現(xiàn)前后端分離，并且使用mockjs來(lái)更方便的模擬數(shù)據(jù)。
下一篇，我們創(chuàng)建發(fā)布環(huán)境下的webpack配置文件，并且看看怎么優(yōu)化產(chǎn)出的代碼的 - 從零開(kāi)始做Vue前端架構(gòu)（5）
項(xiàng)目完整代碼Vue前端架構(gòu)-by 子咻
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/11837.html
摘要：前言這一篇，我們將接著上篇來(lái)完成創(chuàng)建項(xiàng)目文件目錄架構(gòu)。總結(jié)這篇主要是文件和目錄架構(gòu)的東西，讀者務(wù)必運(yùn)行一下完整的項(xiàng)目。因此，下一篇，我們將通過(guò)實(shí)現(xiàn)本地?cái)?shù)據(jù)接口模擬從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來(lái)完成創(chuàng)建項(xiàng)目文件、目錄架構(gòu)。 回顧 先回顧一下現(xiàn)在項(xiàng)目有哪些東西了： . ├── app │?? ├── app.vue │?? ├── common ...
摘要：前言想想也已經(jīng)做過(guò)不少架構(gòu)的項(xiàng)目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來(lái)，我就從零開(kāi)始，一步一步建起前后端完全分離的前端架構(gòu)了。 前言 想想也已經(jīng)做過(guò)不少架構(gòu)的項(xiàng)目了，有基于vue，基于react，基于thinkPHP，基于laravel的。 做多了，也就對(duì)現(xiàn)有的架構(gòu)有各種想法，有好的，有壞的，總之，用起來(lái)還是不爽。vue-cli雖然可以很快地構(gòu)建并使用，尤其是vue-c...
摘要：前言這一篇，我們將接著上篇來(lái)完成配置。開(kāi)發(fā)一配置我們采用的方式來(lái)創(chuàng)建。對(duì)了，前提我們需要全局安裝。三配置創(chuàng)建文件，上配置配置總結(jié)這篇不多，就做了三件事，。下一篇我們將創(chuàng)建項(xiàng)目文件目錄架構(gòu)從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來(lái)完成配置eslint、babel、postcss。 開(kāi)發(fā) 一、配置eslint 我們采用eslint --init的方式來(lái)創(chuàng)建e...
摘要：前言這一篇，我們將接著上篇來(lái)完成配置。開(kāi)發(fā)一配置我們采用的方式來(lái)創(chuàng)建。對(duì)了，前提我們需要全局安裝。三配置創(chuàng)建文件，上配置配置總結(jié)這篇不多，就做了三件事，。下一篇我們將創(chuàng)建項(xiàng)目文件目錄架構(gòu)從零開(kāi)始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來(lái)完成配置eslint、babel、postcss。 開(kāi)發(fā) 一、配置eslint 我們采用eslint --init的方式來(lái)創(chuàng)建e...
摘要：那該怎么管理這兩個(gè)不同的項(xiàng)目呢解決子模塊用的的同學(xué)肯定一下子就想到子模塊的知識(shí)了。最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議原文地址從零開(kāi)始做前端架構(gòu)腳手架參考資料官方文檔使用定制前端腳手架別人寫(xiě)的腳手架文件操作相關(guān)文檔子模塊 前言 相信很多人都用過(guò)vue-cli或create-react-app或者類(lèi)似的腳手架。腳手架方便我們復(fù)制，粘貼，或者clone代碼庫(kù)，而且還可以更具用...
閱讀 837·2019-08-30 15:54
閱讀 450·2019-08-30 12:51
閱讀 2029·2019-08-29 16:28
閱讀 2853·2019-08-29 16:10
閱讀 2338·2019-08-29 14:21
閱讀 417·2019-08-29 14:09
閱讀 2139·2019-08-23 16:13
閱讀 1243·2019-08-23 13:59
