使用普通方式来创建node.js应用
1创建项目目录文件夹test2
2cd 到该文件夹,执行命令npm init,按提示输入,完成package.json的创建
3为项目导入依赖包
cnpm install xx --save-dev(开发环境)
4新建启动文件index.js.....即服务器的入口,提供服务
通过koa-generator来建立项目
Koa和Express项目一样,都提供了一种脚手架的方式来创建项目,使用这么方式会极大地提高开发的效率,但不建议初学者直接使用,高度自动化的生成器,可能会让你不理解实现的原理。
接下来,我们用koa-generator来生成一个koa的项目。
安装koa-generator,这是一个命令工具,所以需要全局安装。
~ npm install -g koa-generator
然后,我们创建koa2的项目时,就可以直接使用koa2的命令了。
1.C:\Users\denghuanyin\Documents\HBuilderProjects>koa2 test3(利用生成器命令进行创建node.js应用)
create : test3
create : test3/package.json
create : test3/app.js
create : test3/routes
create : test3/routes/index.js
create : test3/routes/users.js
create : test3/public/stylesheets
create : test3/public/stylesheets/style.css
create : test3/public/images
create : test3/views
create : test3/views/index.pug
create : test3/views/layout.pug
create : test3/views/error.pug
create : test3/public
create : test3/bin
create : test3/bin/www
install dependencies:
> cd test3 && npm install
run the app:
> SET DEBUG=koa* & npm start test3
create : test3/public/javascripts
2打开package.json..........找到对应的依赖,,,,,,安装相应的依赖 npm install xx --save-dev
3执行bin/www.js,,,开启服务 node www.js
4查看url栏
---------------------------------------------------------------------------------------------------------------------------
第二种方式创建的项目详解
接下来,我们就基于koa2-demo2的项目来分析,看一下生成出来的项目目录结构。我们用一个文本编辑器来打开这个项目,这样可以看得更清楚一些。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicEUK5yZtlmJ0cDN9gmJ4UjM9cnJxMEMFBDMwAzNwQTN1UzQ1UkN3gDNFJENxQzNCJTRwUUPzZyM3ETPtZmJyQTMxkDM0QDL1YjN3EjM1YjM9U3LcRXavwVbvNmL1RWahJmLxEDdvw1LcpDc0RHaiojIsJye.jpg)
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界面渲染模板、自定义日志、自己定义路由、外部调用接口。
//依赖包加载
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const index = require('./routes/index')
const users = require('./routes/users')
// error handler错误处理
onerror(app)
// middlewares中间件加载
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
extension: 'pug'
}))
// logger自定义日志
app.use(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes自己定义路由、
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
console.error('server error', err, ctx)
});
//外部调用接口。
module.exports = app
麻雀虽小,五脏俱全!通过app.js的配置,就可以把一个web项目给组装起来了。
6. 路由管理
普通的web应用,通常都是多个页面组成,每个页面会对应一个URL的地址,用户在浏览器输入URL可以打开不同的页面。路由管理,就是把URL和页面的关系对应起来的。
在 app.js 中,路由来提取到 ./routes/index.js 和 ./routes/users.js 两个文件中进行实现了。
以 ./routes/index.js 文件来举例说明。
const router = require('koa-router')()
router.get('/', async (ctx, next) => {
await ctx.render('index', {
title: 'Hello Koa 2!'
})
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
ctx.body = {
title: 'koa2 json'
}
})
module.exports = router
从代码中分析,当路径为’/’时,网页会返回Hello Koa 2!;当路径为’/string’时,网页会返回koa2 string;哪路径是/json时,网页会返回koa2 json。
7. 页面渲染
从上面路由中,我们看到路径’/’的输出,是一个被渲染为网页输出,而’/string’和’/json’的输出是直接字符的输出。传统的web应用,大都是后台渲染的机制。新型的单面应用来说,前后端分离的设计,根本不需要后端来渲染,直接输出json就可以了。
对后台渲染的实现,我们可以参考’/’的实现。
router.get('/', async (ctx, next) => { await ctx.render('index', { title: 'Hello Koa 2!' })})
上面代码中,通过 await ctx.render(‘index’,{}) 这样的语法,就可以加载pug的模板引擎。
await是ES6的关键字,用于把异步代码同步化,就不再写回调函数了(callback)。
ctx.render()函数,用于加载渲染引擎。
然后,我们找到views中的index.pug文件。
~ notepad ./views/index.pugextends layoutblock content h1= title p Welcome to #{title}
在index.pug文件中,有一个参数是后台传过来的,就是title,同时index.pug继承了layout.pug。
再打开layout.pug文件。
doctype htmlhtml head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content
layout.pug文件,是整个html的骨架,这样就可以通过后台要渲染为一个HTML的网页了。打开chrome浏览品质开发人员工具,看到HTML的代码的结构,与layout.pug和index.pug结构是一致的。
8. 日志分析
最后要说的就是服务器日志了,每一次的浏览行为,都会产生一条服务器日志,用于记录用户的访问情况。我们后台通过命令行启动后,后台的服务器就会一直存活着,接收浏览器的请求,同时产生日志。
日志中,200表示正常访问,404是没有对应的URL错误。你会看到每次访问的路径都被记录了,包括后台的路径和css的文件路径,还包括了访问协议,响应时间,页面大小等。
我们可以自定义日志格式,记录更多的信息,也可以记录对自己有用的信息。
这样我们就构建出一个最小化的web应用了。
Nodejs的发展速度,远远超越了其他语言的发展,我看好Nodejs,希望能给入门Nodejs的朋友一些帮助。加油!!