kao2.3.0 项目框架搭建

日期: 2017-09-04         浏览量: 3300

之前,用狼叔写的 koa2-generator 模块来初始化 koa2 项目目录,但是后来发现,所用koa版本并不是最新的。单独更新某个模块,会存在版本依赖问题。

下面让我们自己搭建 mvc模式 koa2 项目环境吧。


说明:以下所有命令及操作都是指在windows系统上。


在搭建 koa2 环境之前我们要确保以安装 node.js v7.6.0 以上版本。


node -v       //查看node版本

npm -v       //查看npm版本


在此不对node安装做过多说明,请自行查阅相关文档。



// 创建项目目录


mkdir  koa2



// 进入项目目录 并初始化


cd koa2  

npm init



//安装 koa2


npm install koa



//安装所需相关模块


npm install debug

npm install ejs

npm install koa-bodyparser

npm install koa-json

npm install koa-onerror

npm install koa-router

npm install koa-static

npm install koa-views



//在项目目录下创建目录结构


mkdir  bin                    --项目启动目录

mkdir  config                --配置文件目录

mkdir  controllers           --控制器目录

mkdir  lib                      --核心库文件

mkdir  middlewares          --中间件

public                           --静态文件

routers                          --路由文件

views                            --视图文件



//在项目目录下创建 app.js 文件 并 写入如下代码:



const koa = require('koa');
const path = require('path');
const logger = require('koa-logger');
const static = require('koa-static');
const json = require('koa-json');
const views = require('koa-views');
const onerror = require('koa-onerror');
const app = new koa();

const home = require('./routes/home');

//error handler
onerror(app);

//golbal moddlewares
app.use(views('views', {
    root:__dirname + 'views',
    map:{html:'ejs'}
}));
app.use(require('koa-bodyparser')());
app.use(json());
app.use(logger());

app.use(static(path.join(__dirname, './public')));
app.use(home.routes(), home.allowedMethods());

module.exports = app;



//在 bin 目录下创建启动文件  www.js 并添加如下代码



const debug = require('debug')('www:server');
const http = require('http');
let devConfig = require('../config/dev');              //开发配置文件
let proConfig = require('../config/production');    //生产配置文件


// 全局配置变量
global.config = process.env.NODE_ENV == "development" ? devConfig : proConfig; 

const app = require('../app');

let port = normalizePort(process.env.PORT || '3000');

let server = http.createServer(app.callback());

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

function normalizePort(val) {
    let port = parseInt(val, 10);

    if (isNaN(port)) {
        // named pipe
        return val;
    }

    if (port >= 0) {
        // port number
        return port;
    }

    return false;
}

function onError(error) {
    if (error.syscall !== 'listen') {
        throw error;
    }

    let bind = typeof port === 'string'
        ? 'Pipe ' + port
        : 'Port ' + port;

    // handle specific listen errors with friendly messages
    switch (error.code) {
        case 'EACCES':
            console.error(bind + ' requires elevated privileges');
            process.exit(1);
            break;
        case 'EADDRINUSE':
            console.error(bind + ' is already in use');
            process.exit(1);
            break;
        default:
            throw error;
    }
}

function onListening() {
    let addr = server.address();
    let bind = typeof addr === 'string'
        ? 'pipe ' + addr
        : 'port ' + addr.port;
    debug('Listening on ' + bind);
}




// 在routers 目录下创建 home.js 并填写如下代码



const router = require('koa-router')();
const home = require('../controllers/home');

router.get('/',home.home.index);

module.exports = router;




//上面可以看出引入了 controllers 控制器下面的 home 目录下文件 ,创建相关目录及文件


mkdir   home      

cd home     



//在 controllers/home 下 创建 home.js 和 index.js 文件 并添加如下代码



// home 文件  代碼

'use strict';

exports.index = (ctx ,next) =>{
    return ctx.render('home/index' , {title:"首页"});
};




//index 文件代碼


'use strict';
module.exports = {
    home: require('./home'),
};



//在controllers/home/home.js 文件中,可以看出 render  到了 views/home/index.html 文件。创建 home 目录


cd views;

mkdir home;



//在 views/home 下创建index.html 文件 并填写如下代码



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/home/css/index.css">
    <title><%= title %></title>
</head>
<body>
     <h4>helloWord!</h4>
</body>
</html>



// 在项目根目录 启动项目 并 在浏览器地址栏输入 127.0.0.1:3000 查看

node bin/www



基本 mvc模式 项目环境搭建就这样了,后面会继续完善此项目环境,会引入socket.io,数据库会引入mysql, 敬请关注!