前言：
這次寫個小小的node server架構，用到koa+swig，gulp，jsdocs生成文件，也沒有多少內容權當記錄下來吧，為接下來的大型專案架構準備一下。附上GitHub地址
大型專案架構之前端架構之node jwt認證！！！
1.專案目錄
沒有什麼好說的，直接建立資料夾便行，dist：自動生成，docs：存放生成文件，config：存放配置檔案，controllers：控制路由，models：負責資料互動，web：暫時沒用到，tests：存放測試檔案（不懂測試可以看 入門：前端自動化測試karma，Backstopjs，Selenium-webdriver，Mocha）
2.編寫gulpfile.js
先建立檔案gulpfile.js，實現編譯，監聽檔案變化自動編譯
//安裝包
npm install -D gulp gulp-babel gulp-watch
//編譯es6
npm install -D babel-plugin-transform-es2015-modules-commonjs babel-core
//安裝 cross-env 能跨平臺地設定及使用環境變數
npm install -D cross-env複製程式碼const gulp = require('gulp')
const babel = require('gulp-babel')
const watch = require('gulp-watch');
// 生產環境
gulp.task('buliddev', () => {
return watch('./src/nodeuii/**/*.js',//監聽src/nodeuii所有的js
{ ignoreInitial: false },
() => {
gulp.src('./src/nodeuii/**/*.js')//編譯此檔案
.pipe(babel({
babelrc: false,
"plugins": ["transform-es2015-modules-commonjs"]
}))
.pipe(gulp.dest('dist'));//輸出到dist中
})
});
let _task = ['buliddev']
if(process.env.NODE_ENV == 'production') {
_task = [];
}
gulp.task('default', _task)複製程式碼3.編寫config>index.js
//安裝包 lodash
npm install -s lodash複製程式碼import _ from 'lodash'
import path from 'path'
//靜態路徑，待會用到
let config = {
'viewDir': path.join(__dirname, '../views'),
'staticDir': path.join(__dirname, '../assets')
}
//初始化，判斷開發環境還是生產環境
const init = () => {
if(process.env.NODE_ENV == 'development'){
const localConfig = {
port:8081
}
config = _.extend(config, localConfig)
}
if(process.env.NODE_ENV == 'production'){
const localConfig = {
port:80
}
config = _.extend(config, localConfig)
}
return config
}
const result = init()
export default result複製程式碼4.配置package.json，用supervisor啟動node
//安裝supervisor
npm install -D supervisor
複製程式碼 "scripts": {
"test": "",
"server:bulid": "gulp",
"start": "pm2 start",
"bulid": "",
"docs": "jsdoc ./src/nodeuii/**/*.js -d ./docs/jsdocs",
"start:dev": "cross-env NODE_ENV=development supervisor ./dist/app.js"
},複製程式碼5.編寫app.js
//先裝包
npm install -s koa kao-simple-router koa-swig koa-static
複製程式碼import Koa from 'koa'
import router from 'koa-simple-router'
import render from 'koa-swig'
import serve from 'koa-static'
import co from 'co'
import config from './config'
import controllerInit from './controllers'
const app = new Koa()
//配置模板路徑
app.context.render = co.wrap(render({
root:config.viewDir,
autoescape: true,
cache: 'memory',
ext: 'html',
varControls: ["[[","]]"],//更改資料模板樣式本來是{{}}
writeBody: false
}));
controllerInit(app, router)
// 配置靜態路徑
app.use(serve(config.staticDir))
console.log(config)
app.listen(config.port, () => {
console.log(`success listening on ${config.port}`)
})複製程式碼編寫controllers裡面的index.js IndexController.js
index.js
import IndexController from './IndexController'
const indexController = new IndexController()
//路由的整合中心
export default (app, router) => {
app.use(router(_ => {
_.get('/', indexController.indexHome()),
_.get('/', indexController.indexAction())
}))
}複製程式碼IndexController.js
import IndexModel from '../models/IndexModel'
class IndexController {
constructor(){}
indexHome(){
return async (ctx, next) => {
ctx.body = '第一次node server架構， 有點意思'
}
}
indexAction(){
return async (ctx, next) => {
const IndexModelIns = new IndexModel()
const result = await IndexModelIns.getData()
ctx.body = await ctx.render('index',{
data: result
});
}
}
}
export default IndexController複製程式碼編寫models裡的IndexModel.js
/**
*@fileOverview 實現Index資料模型
* @author chen
*/
/**
*IndexModle類 生成一段非同步資料
* @class
*/
export default class IndexModel {
/**
*@constructor
* @example{string} app koa2上下文
*/
constructor(app){}
/**
* 獲取具體資料api介面
* @return {Promise} 返回非同步資料
* @example
* return new Promise
* getData()
*/
getData(){
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('非同步資料')
}, 1000)
})
}
}複製程式碼寫到這裡，大家可以執行一下 npm run start:dev 訪問127.0.0.1:8081看一下效果了
如果報錯，請自行分析，或者接著往下走：
6.在dist中建立資料夾assets：存放靜態檔案， views：存放模板檔案
請看上文app.js配置的檔案
css>index.css
:root{
--mainColor:#6B4C99;
}
body{
background: var(--mainColor);
}複製程式碼js>index.js
console.log(111)複製程式碼views>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
<h1>[[data]]</h1>
有點意思！！！接下來....
<input type="text" v-model="data">
{{data}}
</div>
</body>
<script src="/js/index.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
data: '有點意思！！！！'
}
})
</script>
</html>複製程式碼不單隻可以使用swig模板，還可以使用vue。
訪問http://127.0.0.1:8081/index
7.生成文件
//下載包
npm install -D jsdoc
複製程式碼執行npm run docs
開啟index.html，文件便生成了
總結：
勉勉強強算是完成了吧，有點意思。