使用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 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
vue文件树组件使用详解
Mar 29 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
vue路由传参三种基本方式详解
Dec 09 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
如何利用php+mysql保存和输出文件
2006/10/09 PHP
PHP 时间日期操作实战
2011/08/26 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
python中字符串前面加r的作用
2015/06/04 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python 读取DICOM头文件的实例
2018/05/07 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
linux下进程间通信的方式
2014/12/23 面试题
司机辞职报告范文
2014/01/20 职场文书
学生喝酒检讨书
2014/02/06 职场文书
毕业生就业意向书
2014/04/01 职场文书
市场营销调查计划书
2014/05/02 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS