使用koa2创建web项目

栏目: Node.js · 发布时间: 6年前

内容简介：Github上有一个express风格的koa脚手架，用着挺方便，一直以来使用koa开发web项目用的也都是那个脚手架，今天想自己从头搭一个web项目，就折腾了一下脚手架地址：使用

Github上有一个express风格的koa脚手架，用着挺方便，一直以来使用koa开发web项目用的也都是那个脚手架，今天想自己从头搭一个web项目，就折腾了一下

脚手架地址： https://github.com/17koa/koa-generator

初始化

使用 npm init 初始化一个nodejs项目

mkdir koa-demo
cd koa-demo
npm init

一直回车即可，创建好之后目录里会有一个 package.json 文件

安装依赖

npm install --save koa koa-body koa-logger koa-json-error koa-router koa-static koa-njk

koa
koa-body 解析http请求参数的，支持 multipart/form-data application/x-www-urlencoded application/json 三种参数类型
koa-logger 显示http请求的日志
koa-router 路由
koa-json-error 程序出异常输出json
koa-static 映射静态资源文件
koa-njk nunjucks模板解析

原链文接： https://tomoya92.github.io/2019/03/11/creat-web-with-koa2/

配置

在根目录下创建 app.js 然后贴上下面代码，代码内有注释，很简单

// 引入依赖
const koa = require('koa');
const koa_body = require('koa-body');
const koa_json_error = require('koa-json-error');
const koa_logger = require('koa-logger');
const koa_static = require('koa-static');
const koa_njk = require('koa-njk');
const path = require('path');

// 初始化koa
const app = new koa()

// 引入路由配置文件，这个在下面说明
const routers = require('./routes/routers');

// 配置程序异常输出的json格式
app.use(koa_json_error((err) => {
  return {
    code: err.status || 500,
    description: err.message
  }
}));

// 添加静态资源文件映射
app.use(koa_static(path.join(__dirname, 'static')))
// 添加nunjucks模板
app.use(koa_njk(path.join(__dirname, 'views'), '.njk', {
  autoescape: true,
}, env => {
  // 添加自己的过滤器
  env.addFilter('split', (str, comma) => {
    if (str) {
      return str.split(comma);
    } else {
      return '';
    }
  });
}));

// 解析表单提交参数
app.use(koa_body());
// 显示请求和响应日志
app.use(koa_logger());

// 路由
app.use(routers.routes())

// 程序启动监听的端口
const port = 3000;

app.listen(port);
console.log('Listening on ' + port);

路由

在根目录下创建 routes 文件夹

在 routes 文件夹内创建 index.js routers.js 文件

在 index.js 文件内添加如下代码

// 测试路由，输出请求的参数
exports.index = async ctx => {
  const body = ctx.request.body;
  const query = ctx.request.query;
  const params = ctx.params;
  ctx.body = {
    body: body,
    query: query,
    params: params,
  };
}

// 测试nunjucks模板
exports.view = async ctx => {
  await ctx.render('index', {
    title: 'Koa'
  })
}

// 测试异常
exports.test_error = async ctx => {
  throw new Error('测试异常');
}

配置路由，在 routers.js 文件内配置路由

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

// route
const index = require('./index');

router.get('/view', index.view);
router.get('/index', index.index);
router.get('/index:id', index.index);
router.post('/index', index.index);
router.get('/test_error', index.test_error);

module.exports = router

链原文接： https://tomoya92.github.io/2019/03/11/creat-web-with-koa2/

静态文件

在根目录创建文件夹 static 添加 app.css 文件，写上下面代码

body {
  background-color: #eee;
}

模板

在根目录创建文件夹 views 添加 index.njk 文件，写上下面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <link rel="stylesheet" href="/app.css">
</head>
<body>

Hello, ! <br>

<ul>
  <!-- 使用自定义的过滤器 -->
  
</ul>

</body>
</html>

启动

安装 nodemon

npm install -g nodemon

在根目录运行命令启动项目

nodemon app.js

测试

访问 http://localhost:3000/view/

使用koa2创建web项目

访问 http://localhost:3000/index/ 可以看到输出的json

{
  "body": {},
  "query": {},
  "params": {}
}

访问 http://localhost:3000/index/?id=1

{
  "body": {},
  "query": {
    "id": "1"
  },
  "params": {}
}

访问 http://localhost:3000/index/1

{
  "body": {},
  "query": {},
  "params": {
    "id": "1"
  }
}

POST 请求 curl -X POST http://localhost:3000/index/ -d '{"id": "1"}' -H 'Content-Type:application/json'

{
  "body":{
    "id":"1"
  },
  "query":{},
  "params":{}
}

访问 http://localhost:3000/test_error

{
  "code": 500,
  "description": "测试异常"
}

总结

写博客不易，转载请保留原文链接，谢谢!

原文链接:

以上所述就是小编给大家介绍的《使用koa2创建web项目》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Alone Together

Sherry Turkle / Basic Books / 2011-1-11 / USD 28.95

Consider Facebookit’s human contact, only easier to engage with and easier to avoid. Developing technology promises closeness. Sometimes it delivers, but much of our modern life leaves us less connect......一起来看看《Alone Together》这本书的介绍吧!

码农工具