KOA 基础框架搭建

1. assets：放置静态资源
2. component：放置组件
3. config：放置公共配置
4. controllers：放置路由
5. docs：生成接口docs文件
6. logs：日志文件
7. middleware：中间件
8. models：数据接口
9. tests：测试文件
10. utils：工具类
11. views：页面组件
12. .babelrc：bebel文件 将es6转es5
13. app.js 项目主文件
14. index.js 测试接口

• 插件文件
• mrkid koa-demo
• 初始化
• npm init
• 安装
• 安装koa
• npm install koa --save-dev
• 安装 co
• npm install co --save-dev
• 安装koa-swig koa模板引擎

npm install koa-swig --save-dev

• 安装静态资源管理koa-static
• npm install koa-static --save-dev
• 安装 日志管理包 log4js
• npm install log4js --save-dev
• 安装路由
• npm install koa-simple-router --save-dev
• 安装数据form格式化工具
• npm install form-data --save-dev
• 安装jsdoc 生成接口文档
• npm install jsdoc --save-dev
• 安装lodash
• npm install loadsh --save-dev
• 安装supervisor 启动引擎
• npm install supervisor --save-dev

const _ = require("lodash");const { join } = require('path');let config = {"viewDir": join(__dirname, "..", 'views'),"staticDir": join(__dirname, "..", 'assets')};if (process.env.NODE_ENV == "development") {const localConfig = {port: 3000,baseUrl: "http://localhost/basic/web/index.php?r="}config = _.extend(config, localConfig);}if (process.env.NODE_ENV == "production") {const prodConfig = {port: 80}config = _.extend(config, prodConfig);}module.exports = config;

{"name": "yd-books","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel ./assets/scripts/add.js --out-file ./assets/scripts/add-bundle.js","server:dev": "cross-env NODE_ENV=development supervisor ./app.js","docs": "jsdoc ./**/*.js -d ./docs/jsdocs"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/cli": "^7.4.3","@babel/core": "^7.4.3","@babel/plugin-transform-modules-systemjs": "^7.4.0","@babel/preset-env": "^7.4.3","axios": "^0.18.0","catharsis": "^0.8.9","cross-env": "^5.2.0","cross-spawn": "^6.0.5","form-data": "^2.3.3","jsdoc": "^3.5.5","koa": "^2.7.0","koa-simple-router": "^0.2.0","koa-static": "^5.0.0","koa-swig": "^2.2.1","lodash": "^4.17.11","log4js": "^4.1.0","mime-db": "^1.39.0","supervisor": "^0.12.0"},"dependencies": {"node-fetch": "^2.6.1"}}

class Create {constructor() {}fn() {console.log("🐘es6语法的初始化");$("#test").click(yd.throttle(function () {fetch()}, 10));}}export default Create;/assets/scripts/index.jsconsole.log("index init")// console.log(Vue);var app6 = new Vue({el: '#app',data: {message: 'Hello Vue!'}})// export default app6;

const router = require('koa-simple-router');const IndexController = require("./IndexController");const indexController = new IndexController();module.exports = (app) => {app.use(router(_ => {_.get('/index.html', indexController.actionIndex());_.get('/', indexController.actionIndex());_.get('/add', indexController.actionAdd());}));}

/** * @fileoverview 实现Index的数据模型 * @author yuanzhijia@yidengxuetang.com */const SafeRequest = require("../utils/SafeRequest");/** * 📚Index类 获取数据关于图书数据相关的类 * @class */class Index {    /**     * @constructor     * @param {string} app KOA2的上下文     */    constructor(app) {    }    /**     * 获取后台数据全部图书列表的方法     * @param {*} options 配置项     * @example     * return new Promise     * getData(options)     */    getData(options) {        const safeRequest = new SafeRequest("books/index");        return safeRequest.fetch({});    }    /**     * 把用户传过来的数据保存进入借口     * @param {*} options 配置项     * @example     * return new Promise     * saveData(options)     */    saveData(options) {        const safeRequest = new SafeRequest("books/create");        return safeRequest.fetch({            method: "POST",            params: options.params        });    }}module.exports = Index;

//未来将来把浏览器端的代码和后台的代码相互替换或者拷贝const fetch = require("node-fetch");const config = require("../config");class SafeRequest {    constructor(url) {        this.url = url;        this.baseUrl = config.baseUrl;    }    fetch(options) {        //产生一个完整的链接 发起一个promise的结结果        let ydfetch = fetch(this.baseUrl + this.url);        if (options) {            const body = { a: 1 };            ydfetch = fetch(this.baseUrl + this.url, {                method: options.method,                body: options.params,            });        }        return new Promise((resolve, reject) => {            let result = {                code: 0,                message: "",                data: []            };            ydfetch                .then((res) => {                    let _json = {};                    try {                        _json = res.json()                    } catch (error) {                        //发邮件📩                    }                    return _json;                })                .then((json) => {                    //你们产线跟后端定了一些api的交互形式                    result.data = json;                    resolve(result);                }).catch((error) => {                    console.log(error);                    result.code = 1;                    result.message = "node-fetch和后端通讯异常❎";                    reject(result);                })        })    }}module.exports = SafeRequest;

{% extends './layout.html' %}{% block styles %}<link rel="stylesheet" href="/styles/add.css">{% endblock %}{% block title %} 添加图书📚 {% endblock %}{% block content %}<div id="app"><h2>{{ message }}</h2><input v-model="message"></div>{% endblock %}{% block scripts %}<script type="module">console.log("我支持模块化💇");import("/scripts/add.js").then((_)=>{const create = new _.default;create.fn();});</script><script type="nomodule" src="https://cdn.staticfile.org/systemjs/3.1.2/system.js"></script><script type="nomodule">System.import("/scripts/add-bundle.js").then((_) => {const create = new _.default;create.fn();});</script>{% endblock %}

{% extends './layout.html' %}{% block styles %}<link rel="stylesheet" href="/styles/index.css">{% endblock %}{% block title %} 图书页面的首页📚 {% endblock %}{% block content %}<!-- <h1>[[ data ]]</h1> --><table class="table table-bordered">{% for item in data %}<tr><td>[[item.id]] </td><td>[[item.name]] </td><td>[[item.author]] </td></tr>{% endfor %}</table><hr /><div id="app"><h2>{{ message }}</h2><input v-model="message"></div>{% endblock %}{% block scripts %}<script src="/scripts/index.js"></script>{% endblock %}