前端架构之小小node架构

前言：

这次写个小小的node server架构，用到koa+swig，gulp，jsdocs生成文档，也没有多少内容权当记录下来吧，为接下来的 大型项目架构 准备一下。 附上GitHub地址

1.项目目录

没有什么好说的，直接创建文件夹便行，dist：自动生成，docs：存放生成文档，config：存放配置文件，controllers：控制路由，models：负责数据交互，web：暂时没用到，tests：存放测试文件

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，文档便生成了

总结：

勉勉强强算是完成了吧，有点意思。

下次将更新一个大型项目的架构，后台：node，express，jtw；数据库：mysql，orm：sequlize；前端：webpack，vue+element UI，这个更是有点意思。