使用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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
详解javascript函数的参数
Nov 10 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
如何为你的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/03 新手入门
PHP字符串处理的10个简单方法
2010/06/30 PHP
php文档更新介绍
2011/07/22 PHP
解析PHP提交后跳转
2013/06/23 PHP
php实现的RSS生成类实例
2015/04/23 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
python中文乱码的解决方法
2013/11/04 Python
python字符串排序方法
2014/08/29 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python向图片里添加文字
2019/11/26 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
红十字会救护培训简讯
2015/07/20 职场文书
服务行业标语口号
2015/12/26 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
Java后台生成图片的完整步骤
2021/08/04 Java/Android