Интерфейсная архитектура архитектуры малых узлов

Node.js Архитектура внешний интерфейс JavaScript
Интерфейсная архитектура архитектуры малых узлов

Предисловие:

На этот раз я напишу архитектуру сервера с небольшим узлом, используя koa+swig, gulp, jsdocs для создания документов, и для следующей записи не так много контента для записи.Архитектура крупного проектаприготовься.Прикрепите адрес GitHub

масштабная архитектура проектаJWT-аутентификация узла интерфейсной архитектуры! ! !

1. Каталог проекта

Тут нечего сказать, просто создать папку напрямую, dist: автоматическая генерация, docs: хранить сгенерированные документы, config: хранить конфигурационные файлы, контроллеры: управление маршрутизацией, models: отвечает за взаимодействие с данными, web: временно не используется, тесты: хранить Test файл (вы можете прочитать его, если вы не понимаете тестНачало работы: Карма для автоматизированного тестирования интерфейса, 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
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}`)
})

Напишите 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

Напишите 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: для хранения статических файлов, вьюшки: для хранения файлов шаблонов

См. файл конфигурации 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, jwt, база данных: mysql, orm: sequlize, фронтенд: webpack, vue+element UI, это еще интереснее.



Категории