koa入门-开发环境搭建

koa2项目初始化

安装Koa2

npm init
npm install koa

在项目根目录下创建app.js

const Koa = require('koa')
const app = new Koa()

app.use( async ctx => {
    ctx.body = 'hello world！'
})

app.listen(3000, ()=>{
    console.log('server is runing at 3000 port!')
})

启动项目

node app.js

安装koa-router koa-body

npm i koa-router koa-body -s

修改app文件

const Koa = require('koa')
const koaBody = require('koa-body')
const Router = require('koa-router')
const router = new Router()
const app = new Koa()

app.use(koaBody())

router.get('/',async (ctx)=>{
    ctx.body = '我是首页'
})
router.get('/list',async (ctx)=>{
    ctx.body = '我是列表页'
})

app.use(router.routes()).use(router.allowedMethods())

app.listen(3000, () => {
    console.log('server is runing at 3000 port!')
})

koa-body配置参数详情点击
其中koa-router allowedMethods的含义请看这里

修改路由配置

当然，路由配置可能比较多，写在app.js不太优雅。下面创建routes文件夹，文件夹中创建index.js

routes index.js填充代码

const router = require('koa-router')();

router.get('/',async (ctx)=>{
    ctx.body = '你好，这里是首页！'
})
module.exports = router

修改app.js

const Koa = require('koa')
const koaBody = require('koa-body')
const Router = require('koa-router')
const router = new Router()
const app = new Koa()

const index = require('./routes/index')
const list = require('./routes/list') //复制列表页

app.use(koaBody())


app.use(index.routes()).use(index.allowedMethods())
app.use(list.routes()).use(list.allowedMethods())

app.listen(3000, () => {
    console.log('server is runing at 3000 port!')
})

现在再启动看看吧

静态资源服务

项目中少不了对静态资源的引用，所以安装koa-static中间件搭建静态资源服务器

npm i koa-static -s

app.js中添加代码

app.use(require('koa-static')(__dirname + '/public'));

使用模板引擎渲染

先安装jade koa-views

npm i  jade koa-views -s

app.js

// global middlewares
app.use(views('views', {
  root: __dirname + '/views',
  default: 'jade'
}));
修改router
```javascript
router.get('/', async (ctx) => {
    await ctx.render('index', {
        title: 'Hello World Koa!'
    });
})

html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
	  h1= title
	  p Welcome to #{title}