使用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 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jquery滚动特效集锦
Jun 03 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 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中for循环语句的几种变型
2007/03/16 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
pandas按条件筛选数据的实现
2021/02/20 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
大门门卫岗位职责
2013/11/30 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
先进员工获奖感言
2014/08/14 职场文书
2014年租房协议书范本
2014/10/30 职场文书
骨干教师个人总结
2015/02/11 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Python 实现定积分与二重定积分的操作
2021/05/26 Python