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


Posted in Javascript onMarch 12, 2019

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/

使用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": "测试异常"
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 #Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 #Javascript
通过JS运行机制的角度说说作用域
Mar 12 #Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 #Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 #Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 #Javascript
You might like
西德产收音机
2021/03/01 无线电
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python中http请求方法库汇总
2016/01/06 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python 实现图片批量压缩的示例
2020/12/18 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
加强作风建设工作总结
2014/10/23 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2015年高中班级工作总结
2015/07/21 职场文书