使用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 相关文章推荐
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
如何为你的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/05 新手入门
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python简明入门教程
2015/08/04 Python
Python的pycurl包用法简介
2015/11/13 Python
Python 常用string函数详解
2016/05/30 Python
python实现爬取图书封面
2018/07/05 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
高级销售求职信
2014/02/21 职场文书
学习之星事迹材料
2014/05/17 职场文书
庆元旦活动总结
2014/07/09 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
学校隐患排查制度
2015/08/05 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
nginx 配置指令之location使用详解
2022/05/25 Servers