使用koa2创建web项目的方法步骤

更新时间：2019年03月12日 10:45:55 作者：朋也

这篇文章主要介绍了使用koa2创建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模板解析

配置

在根目录下创建 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

静态文件

在根目录创建文件夹 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" rel="external nofollow" >
</head>
<body>

Hello, ! <br>

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

</body>
</html>

启动

安装 nodemon

npm install -g nodemon

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

nodemon app.js

测试

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

访问 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": "测试异常"
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

nodejs 快速入门之事件循环
这篇文章主要介绍了nodejs 快速入门之事件循环的相关资料,需要的朋友可以参考下
2023-05-05
Node.js 使用request模块下载文件的实例
今天小编就为大家分享一篇Node.js 使用request模块下载文件的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
基于Node.js模板引擎教程-jade速学与实战1
下面小编就为大家带来一篇基于Node.js模板引擎教程-jade速学与实战1。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
一步步教你使用node搭建一个小页面
最近使用NodeJs搭建的小型web应用,所以下面这篇文章主要给大家介绍了关于使用node搭建一个小页面的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-11-11
Node.js中使用Buffer编码、解码二进制数据详解
这篇文章主要介绍了Node.js中使用Buffer编码、解码二进制数据详解,Buffer支持ascii、utf8、ucs2、base64等编码格式,需要的朋友可以参考下
2014-08-08
Node.js的非阻塞I/O、异步与事件驱动介绍
这篇文章介绍了Node.js的非阻塞I/O、异步与事件驱动，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
使用nodeJs来安装less及编译less文件为css文件的方法
这篇文章主要介绍了使用nodeJs来安装less及编译less文件为css文件的方法，在文章末尾给大家补充介绍了通过nodejs将less文件转为css文件的方法，具体内容详情大家通过本文学习吧
2017-11-11
node.js实现微信JS-API封装接口的示例代码
这篇文章主要介绍了node.js实现微信JS-API封装接口的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Node.js Webpack常见的模式详解
这篇文章主要介绍了Node.js Webpack常见的模式,Webpack的另一个核心是Plugin ，Plugin是可以用于执行更加广泛的任务如打包优化资源管理环境变量注入等，需要的朋友可以参考下
2022-10-10
Node.js的cross-env工具包使用介绍
这篇文章主要为大家介绍了Node.js的cross-env工具包使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08