一、創(chuàng)鍵項(xiàng)目
1.創(chuàng)建目錄 koa2
2.npm init 創(chuàng)建 package.json，然后執(zhí)行 npm install
3.通過 npm install koa 安裝 koa 模塊
4.通過 npm install supervisor 安裝supervisor模塊, 用于node熱啟動(dòng)
5.在根目錄下中新建 index.js 文件，作為入口文件， 內(nèi)容如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
const Koa = require('koa'); // Koa 為一個(gè)classconst app = new Koa(); app.use(async (ctx, next) => { await next(); ctx.response.body = 'Hello, koa2!';}); app.listen(9527, () => { console.log('This server is running at http://localhost:' + 9527)}) |
6.配置package
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{ "name": "koa", "version": "1.0.0", "description": "", "main": "koa.js", "scripts": { "serve": "supervisor koa.js" }, "author": "", "license": "ISC", "dependencies": { "koa": "^2.7.0", "supervisor": "^0.12.0" }} |
7 . 啟動(dòng)
|
1
|
npm run serve |
二、路由配置
|
1
2
3
4
5
6
7
|
cnpm i koa-routerconst router = new Router(); // 實(shí)例化路由router.get('/', async (ctx, next) => { ctx.response.body = '<h5>好家伙</h5>';});app.use(router.routes()); |
路由參數(shù)
|
1
2
3
4
5
6
7
|
//請求地址 www.*****/sss?from=1router.get('/hello/:name', async (ctx, next) => { var name = ctx.params.name; // 獲取請求參數(shù) sss var from = ctx.query.from; // 1 ctx.response.body = `<h5>好家伙, ${name}!</h5>`;}); |
三、請求
post
|
1
2
3
4
5
6
7
8
9
10
|
const bodyParser = require('koa-bodyparser'); app.use(bodyParser());router.post('/login', async (ctx, next) => { let name = ctx.request.body.name; let password = ctx.request.body.password; console.log(name, password); ctx.response.body = `<h4>好家伙, ${name}!</h4>`;}); |
get
|
1
2
3
|
router.get('/', async (ctx, next) => { ctx.response.body = '<h4>好家伙</h4>'}); |
四、html模板
1、好處
使用html模板，將html從js中分離出去，有助于項(xiàng)目開發(fā)和管理。而且，html模板在koa2中，必須通過中間件來實(shí)現(xiàn)。
2、koa-views + nunjucks實(shí)現(xiàn)html模板
|
1
2
3
4
5
|
nunjucks.configure(resolve(__dirname, 'views'), { autoescape: true });app.use(views(__dirname + '/views', {map: { html: 'nunjucks' }})); |
五、操作靜態(tài)資源
1、靜態(tài)資源在開發(fā)中的地位
靜態(tài)資源環(huán)境在服務(wù)端是十分常用的一種服務(wù)，在后臺(tái)開發(fā)中不僅有需要代碼處理的業(yè)務(wù)邏輯請求，也會(huì)有很多的靜態(tài)資源請求。比如請求js，css，jpg，png這些靜態(tài)資源請求。也非常的多，有些時(shí)候還會(huì)訪問靜態(tài)資源路徑。
2、koa-static-cache實(shí)現(xiàn)靜態(tài)資源操作
|
1
2
3
4
5
|
app.use( staticCache(resolve("dist"), { maxAge: 365 * 24 * 60 * 60 })) |
六、進(jìn)階
1、結(jié)構(gòu)
入口文件（index.js）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
const Koa = require('koa')const bodyParser = require('koa-bodyparser');const staticCache = require('koa-static-cache');const views = require('koa-views')const {resolve} = require('path')const R = require('ramda')const MIDDLEWARES = ['router'] //中間件配置文件const nunjucks = require('nunjucks')const logsUtil = require('../utils/logs.js');//中間件導(dǎo)入 路由導(dǎo)入const useMiddlewares = (app) => { R.map( R.compose( R.forEachObjIndexed( initWith => initWith(app) ), require, name => resolve(__dirname, `./middlewares/${name}`) ) )(MIDDLEWARES)};(async () => { const app = new Koa(); // view engine setup nunjucks.configure(resolve(__dirname, 'views'), { autoescape: true }); //views with nunjucks app.use(views(__dirname + '/views', { map: { html: 'nunjucks' } })); app.use(bodyParser()); app.use(logsUtil.accessInfo()); //訪問日志 //靜態(tài)資源配置緩存 app.use( staticCache(resolve("dist"), { maxAge: 365 * 24 * 60 * 60 }) ) app.on('error', err => { }); app.use(async (ctx,next) => { await next() if(parseInt(ctx.status) === 404){ ctx.response.redirect("/404") } }); await useMiddlewares(app) //導(dǎo)入中間件 app.listen(9527,() => { console.log('Server running on port %d', 9527); })})() |
2、路由中間件封裝
1.新建middlewares文件夾 在下面新建router.js
2.新建lib文件夾 在下面新建decorator.js
3.新建routes下面新建views.js
router.js
|
1
2
3
4
5
6
7
8
|
const { Route } = require('../lib/decorator')const { resolve } = require('path')export const router = app => { const apiPath = resolve(__dirname, '../routes') const router = new Route(app, apiPath); router.init()} |
decorator.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
const Router = require('koa-router')const { resolve } = require('path')const _ = require('lodash')const glob = require('glob')const R = require('ramda')const symbolPrefix = Symbol('prefix')const routerMap = new Map()const isArray = c => _.isArray(c) ? c : [c]export class Route { constructor (app, apiPath) { this.app = app this.apiPath = apiPath this.router = new Router() } init () { glob.sync(resolve(this.apiPath, './**/*.js')).forEach(require) for (let [conf, controller] of routerMap) { const controllers = isArray(controller) let prefixPath = conf.target[symbolPrefix] if (prefixPath) prefixPath = normalizePath(prefixPath) const routerPath = prefixPath + conf.path this.router[conf.method](routerPath, ...controllers) } this.app.use(this.router.routes()) this.app.use(this.router.allowedMethods()) }}const normalizePath = path => path.startsWith('/') ? path : `/${path}`const router = conf => (target, key, descriptor) => { conf.path = normalizePath(conf.path) routerMap.set({ target: target, ...conf }, target[key])}export const controller = path => target => (target.prototype[symbolPrefix] = path)export const get = path => router({ method: 'get', path: path})export const post = path => router({ method: 'post', path: path})export const put = path => router({ method: 'put', path: path})export const del = path => router({ method: 'delete', path: path})export const use = path => router({ method: 'use', path: path})export const all = path => router({ method: 'all', path: path}) |
view.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const { controller, get } = require('../lib/decorator')@controller('')export class viewController { @get('/') async home(ctx, next) { await ctx.render('index', { }) } @get('/service') async enter(ctx, next) { await ctx.render('service', { title: '', }) } @get('/404') async pageNUll(ctx, next) { await ctx.render('404', { title: ' ', }) }} |
3、日志文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
cnpm i koa-log4config/logs.jsvar path = require('path');//日志根目錄var baseLogPath = path.resolve(__dirname, '../logs')/*報(bào)錯(cuò)輸出日志*///錯(cuò)誤日志目錄、文件名、輸出完整路徑var errorPath = "/error";var errorFileName = "error";var errorLogPath = baseLogPath + errorPath + "/" + errorFileName;/*請求數(shù)據(jù)得到響應(yīng)時(shí)輸出響應(yīng)日志*///響應(yīng)日志目錄、文件名、輸出完整路徑var responsePath = "/response";var responseFileName = "response";var responseLogPath = baseLogPath + responsePath + "/" + responseFileName;/*操作數(shù)據(jù)庫進(jìn)行增刪改等敏感操作記錄日志*///操作日志目錄、文件名、輸出完整路徑var handlePath = "/handle";var handleFileName = "handle";var handleLogPath = baseLogPath + handlePath + "/" + handleFileName;/*訪問級(jí)別日志*/var accessPath = "/access"var accessFileName = "access";var accessLogPath = baseLogPath + accessPath + "/" + accessFileName;/*訪問級(jí)別日志*/var reqPath = "/req"var reqFileName = "req";var reqLogPath = baseLogPath + reqPath + "/" + reqFileName;module.exports = { //日志格式等設(shè)置 appenders: { "rule-console": {"type": "console"}, "errorLogger": { "type": "dateFile", "filename": errorLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8", "path": errorPath }, "resLogger": { "type": "dateFile", "filename": responseLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8",// "maxLogSize": 204800,// "numBackups": 3, "path": responsePath }, "handleLogger": { "type": "dateFile", "filename": handleLogPath,//生成文件路徑和文件名 "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8",// "maxLogSize": 204800,// "numBackups": 3, "path": handlePath }, "accessLogger": { "type": "dateFile", "filename": accessLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8",// "maxLogSize": 204800,// "numBackups": 3, "path": accessPath }, "reqLogger": { "type": "dateFile", "filename": reqLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8",// "maxLogSize": 204800,// "numBackups": 3, "path": reqPath }, }, //供外部調(diào)用的名稱和對應(yīng)設(shè)置定義 categories: { "default": {"appenders": ["rule-console"], "level": "all"}, "resLogger": {"appenders": ["resLogger"], "level": "info"}, "errorLogger": {"appenders": ["errorLogger"], "level": "error"}, "handleLogger": {"appenders": ["handleLogger"], "level": "all"}, "accessLogger": {"appenders": ["accessLogger"], "level": "all"}, "reqLogger": {"appenders": ["reqLogger"], "level": "error"} }, "baseLogPath": baseLogPath} |
log.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var log4js = require('koa-log4');var logsConfig = require('../config/logs.js');//加載配置文件log4js.configure(logsConfig);//調(diào)用預(yù)先定義的日志名稱var resLogger = log4js.getLogger("resLogger");var errorLogger = log4js.getLogger("errorLogger");var handleLogger = log4js.getLogger("handleLogger");var reqLogger = log4js.getLogger("reqLogger");var consoleLogger = log4js.getLogger();exports.accessInfo = () => log4js.koaLogger(log4js.getLogger('accessLogger'));//訪問日志exports.logInfo = (data) => {consoleLogger.info(data)}.......................... |
關(guān)于pm2自動(dòng)部署 webpack打包 以及數(shù)據(jù)庫后續(xù)有時(shí)間更新
歡迎干飯人一起推動(dòng)優(yōu)化
最后附上工具人地址：https://gitee.com/angry2bird/node-koa
到此這篇關(guān)于node koa2 ssr項(xiàng)目搭建的方法步驟的文章就介紹到這了,更多相關(guān)node koa2 ssr項(xiàng)目搭建內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6904833281045299213
