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
配置
在根目录下创建 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/
访问 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": "测试异常" }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍node使用Koa2搭建web项目的方法,包括了node使用Koa2搭建web项目的方法的使用技巧和注意事项,需要的朋友参考一下 随着Node.js的日益火热,各种框架开始层出不穷的涌现出来,Node.js也开始逐渐的被应用到处理服务端请求的场景中。搭建Web项目的框架也随之开始出现——express、koa、koa2、egg等,当然要了解其好坏还是要自己去啃源码的。本文将不会涉及到
本文向大家介绍使用Vue CLI创建typescript项目的方法,包括了使用Vue CLI创建typescript项目的方法的使用技巧和注意事项,需要的朋友参考一下 使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 创建项目 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我
主要内容:创建 Web 应用,打包 Web 应用,部署 Web 应用到目前为止,我们所接触的 Maven 项目的打包类型只有 JAR 和 POM ,但在现今的互联网时代,我们创建的大部分应用程序都是 Web 应用,在 Java 中 Web 应用的打包方式是 WAR。 本节我们将介绍如何使用 Maven 创建、构建、部署和运行 Web 应用程序。 创建 Web 应用 通过使用 Maven 的 maven-archetype-webapp 模板可以创建一个简单的 We
本文向大家介绍使用IDEA创建一个vert.x项目的方法,包括了使用IDEA创建一个vert.x项目的方法的使用技巧和注意事项,需要的朋友参考一下 这里我使用的Gredle 2 选择Gredle 3 修改build文件,添加vert.x 相关的资源 4 开始写代码了 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍Maven搭建springboot项目的方法步骤,包括了Maven搭建springboot项目的方法步骤的使用技巧和注意事项,需要的朋友参考一下 Maven搭建springboot项目 本文是基于Windows 10系统环境,使用Maven搭建springboot项目 Windows 10 apache-maven-3.6.0 IntelliJ IDEA 2018.3.4 x64 一
本文向大家介绍IDEA 创建一个Mybatis Maven项目的方法步骤(图文),包括了IDEA 创建一个Mybatis Maven项目的方法步骤(图文)的使用技巧和注意事项,需要的朋友参考一下 第一步:先新建一个工程 直接next就行了,不用选内容,不然他会下载骨架会卡很久 第一个箭头是项目名称,第二个箭头是项目路径,根据自己需要修改就行了。新建好的项目是这样的。 第二步:我们需要添加一个web