新一代Nodejs的Web开发框架Koa2.docx
《新一代Nodejs的Web开发框架Koa2.docx》由会员分享,可在线阅读,更多相关《新一代Nodejs的Web开发框架Koa2.docx(13页珍藏版)》请在冰豆网上搜索。
新一代Nodejs的Web开发框架Koa2
1、安装Node环境
2、建立工程
3、通过koa-generator来建立工程
4、目录结构
5、app.js文件分析
6、路由管理
7、页面渲染
8、日志分析
1.安装Node环境
让我们从头开始Koa2的安装和使用吧,第一步,就是安装Node和NPM环境。
在Window上面安装,就直接从官方网站下载一个可执行安装文件,执行安装即可。
在LinuxUbuntu上安装过程也是类似,本机的系统环境为:
LinuxUbuntu16.04LTS,然后下载Node工程的源文件,编译,安装。
#切换到root用户
~sudo-i
#下载nodejs最新版本,源代码
~wgets:
//nodejs.org/dist/v8.4.0/node-v8.4.0.tar.gz
~tarxvzfnode-v8.4.0.tar.gz
~cdnode-v8.4.0
#编译、安装
~./configure
~make
~makeinstall
运行node命令和npm命令
~node-v
v8.4.0
~npm-v
5.4.1
2.建立工程
下面我们就开始创立Koa2的工程,接下来的操作在window与linux通用,只是编辑器不同而已。
进入window的开发目录,新建工程koa2-demo1。
#进入开发目录
~cdd:
\workspace\js
#新建工程、并进入工程目录
~mkdirkoa2-demo1&&cdkoa2-demo1
创立一个node工程
~d:
\workspace\js\koa2-demo1>npminit
Thisutilitywillwalkyouthroughcreatingapackage.jsonfile.
Itonlycoversthemostcommonitems,andtriestoguesssensibledefaults.
See`npmhelpjson`fordefinitivedocumentationonthesefields
andexactlywhattheydo.
Use`npminstall`afterwardstoinstallapackageand
saveitasadependencyinthepackage.jsonfile.
Press^Catanytimetoquit.
packagename:
(koa2-demo1)
version:
(1.0.0)
description:
koa2demo
entrypoint:
(index.js)
testcommand:
gitrepository:
keywords:
author:
DanZhanglicense:
(ISC)MIT
Abouttowritetod:
\workspace\js\koa2-demo1\package.json:
{
"name":
"koa2-demo1",
"version":
"1.0.0",
"description":
"koa2demo",
"main":
"index.js",
"scripts":
{
"test":
"echo\"Error:
notestspecified\"&&exit1"
},
"author":
"DanZhang",
"license":
"MIT"
}
Isthisok?
(yes)yes
这样我们就完成了一个最简单的nodejs工程,在当前的目录下面生成了package.json的文件。
接下来,我们来安装koa2的库,到当前的工程中。
~npminstallkoa-s
+koa@2.3.0
added37packagesin12.462s
查看当前目录,发现生成了一个node_modules的目录,这个目录存放了koa包所有的依赖的库。
然后,我们新建一个启动文件:
index.js,用来启动Koa的工程。
~notepadindex.js
varkoa=require('koa');
varapp=newkoa();
app.use(function*(){
this.body='HelloWorld';
});
app.listen(3000);
启动工程
~nodeindex.js
翻开浏览器:
:
//localhost:
3000/
请点击此处输入图片描述
看到这界面,那么恭喜你,第一步成功了。
3.通过koa-generator来建立工程
Koa和Express工程一样,都提供了一种脚手架的方式来创立工程,使用这么方式会极大地提高开发的效率,但不建议初学者直接使用,高度自动化的生成器,可能会让你不理解实现的原理。
接下来,我们用koa-generator来生成一个koa的工程。
安装koa-generator,这是一个命令工具,所以需要全局安装。
~npminstall-gkoa-generator
然后,我们创立koa2的工程时,就可以直接使用koa2的命令了。
#进入开发目录
~cdd:
\workspace\js
#生成koa2工程
~koa2koa2-demo2
create:
koa2-demo2
create:
koa2-demo2/package.json
create:
koa2-demo2/app.js
create:
koa2-demo2/public
create:
koa2-demo2/public/stylesheets
create:
koa2-demo2/public/stylesheets/style.css
create:
koa2-demo2/public/javascripts
create:
koa2-demo2/public/images
create:
koa2-demo2/routes
create:
koa2-demo2/routes/index.js
create:
koa2-demo2/routes/users.js
create:
koa2-demo2/views
create:
koa2-demo2/views/index.pug
create:
koa2-demo2/views/layout.pug
create:
koa2-demo2/views/error.pug
create:
koa2-demo2/bin
create:
koa2-demo2/bin/www
installdependencies:
>cdkoa2-demo2&&npminstall
runtheapp:
>SETDEBUG=koa*&npmstartkoa2-demo2
进入工程,并安装依赖库
~cdkoa2-demo2&&npminstall
启动工程
~npmrunstart
>koa2-demo2@0.1.0startd:
\workspace\js\koa2-demo2
>nodebin/www
翻开浏览器
请点击此处输入图片描述
如果你看到的界面,和上面的一样,那么恭喜你,用koa-generator生成的koa2的工程,也能正常工作了。
这里你可以发现,用koa-generator时,只要一条命令就够了,程序会给你生成很多文件,直接就构建好了一个工程的根底。
4.目录结构
接下来,我们就基于koa2-demo2的工程来分析,看一下生成出来的工程目录结构。
我们用一个文本编辑器来翻开这个工程,这样可以看得更清楚一些。
请点击此处输入图片描述
∙
bin,存放启动工程的脚本文件
∙
∙
node_modules,存放所有的工程依赖库。
∙
∙
public,静态文件(css,js,img)
∙
∙
routes,路由文件(MVC中的C,controller)
∙
∙
views,页面文件(pug模板)
∙
∙
package.json,工程依赖配置及开发者信息
∙
∙
app.js,应用核心配置文件
∙
∙
package.json,node工程配置文件
∙
∙
package-lock.json,node工程锁定的配置文件
∙
5.app.js文件分析
app.js是应用核心配置文件,我们把这个文件能够看明白,整理koa就非常容易了。
app.js文件,我们可以分割为X个局部进行解读:
依赖包加载、错误处理、中间件加载、web界面渲染模板、自定义日志、自己定义路由、外部调用接口。
//依赖包加载
constKoa=require('koa')
constapp=newKoa()
constviews=require('koa-views')
constjson=require('koa-json')
constonerror=require('koa-onerror')
constbodyparser=require('koa-bodyparser')
constlogger=require('koa-logger')
constindex=require('./routes/index')
constusers=require('./routes/users')
//错误处理
onerror(app)
//中间件加载
app.use(bodyparser({
enableTypes:
['json','form','text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname+'/public'))
//web界面渲染模板
app.use(views(__dirname+'/views',{
extension:
'pug'
}))
//自定义日志
app.use(async(ctx,next)=>{
conststart=newDate()
awaitnext()
constms=newDate()-start
console.log(`${ctx.method}${ctx.url}-${ms}ms`)
})
//自己定义路由
app.use(index.routes(),index.allowedMethods())
app.use(users.routes(),users.allowedMethods())
//外部调用接口
module.exports=app
麻雀虽小,五脏俱全!
通过app.js的配置,就可以把一个web工程给组装起来了。
6.路由管理
普通的web应用,通常都是多个页面组成,每个页面会对应一个URL的地址,用户在浏览器输入URL可以翻开不同的页面。
路由管理,就是把URL和页面的关系对应起来的。
在app.js中,路由来提取到./routes/index.js和./routes/users.js两个文件中进行实现了。
以./routes/index.js文件来举例说明。
~notepad./routes/index.js
constrouter=require('koa-router')()
//解析'/'
router.get('/',async(ctx,next)=>{
awaitctx.render('index',{
title:
'HelloKoa2!
'
})
})
//解析'/string'
router.get('/string',async(ctx,next)=>{
ctx.body='koa2string'
})
//解析'/json'
router.get('/json',async(ctx,next)=>{
ctx.body={
title:
'koa2json'
}
})
module.exports=router
从代码中分析,当路径为’/’时,网页会返回HelloKoa2!
;当路径为’/string’时,网页会返回koa2string;哪路径是/json时,网页会返回koa2json。
请点击此处输入图片描述
7.页面渲染
从上面路由中,我们看到路径’/’的输出,是一个被渲染为网页输出,而’/string’和’/json’的输出是直接字符的输出。
传统的web应用,大都是后台渲染的机制。
新型的单面应用来说,前后端别离的设计,根本不需要后端来渲染,直接输出json就可以了。
对后台渲染的实现,我们可以参考’/’的实现。
router.get('/',async(ctx,next)=>{
awaitctx.render('index',{
title:
'HelloKoa2!
'
})
})
上面代码中,通过awaitctx.render(‘index’,{})这样的语法,就可以加载pug的模板引擎。
∙
await是ES6的关键字,用于把异步代码同步化,就不再写回调函数了(callback)。
∙
∙
ctx.render()函数,用于加载渲染引擎。
∙
然后,我们找到views中的index.pug文件。
~notepad./views/index.pug
extendslayout
blockcontent
h1=title
pWelcometo#{title}
在index.pug文件中,有一个参数是后台传过来的,就是title,同时index.pug继承了layout.pug。
再翻开layout.pug文件。
doctypehtml
html
head
title=title
link(rel='stylesheet',href='/stylesheets/style.css')
body
blockcontent
layout.pug文件,是整个html的骨架,这样就可以通过后台要渲染为一个HTML的网页了。
翻开chrome浏览品质开发人员工具,看到HTML的代码的结构,与layout.pug和index.pug结构是一致的。
请点击此处输入图片描述
8.日志分析
最后要说的就是效劳器日志了,每一次的浏览行为,都会产生一条效劳器日志,用于记录用户的访问情况。
我们后台通过命令行启动后,后台的效劳器就会一直存活着,接收浏览器的请求,同时产生日志。
请点击此处输入图片描述
日志中,200表示正常访问,404是没有对应的URL错误。
你会看到每次访问的路径都被记录了,包括后台的路径和css的文件路径,还包括了访问协议,响应时间,页面大小等。
我们可以自定义日志格式,记录更多的信息,也可以记录对自己有用的信息。
这样我们就构建出一个最小化的web应用了。
Nodejs的开展速度,远远超越了其他语言的开展,我看好Nodejs,希望能给入门Nodejs的朋友一些帮助。
加油!
!