使用koa2创建web项目的方法步骤
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/
访问 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": "测试异常"
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读.请先移步ssr.vuejs.org了解手工进行SSR配置的基本内容. 从头搭建一个服务端渲染的应用是相当复杂的.如果您有SSR需求,对Webpack及Koa不是很熟悉,请直接使用NUXT.js. 本文所述内容示例在 Vue SSR Koa2 脚手架 : https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold 我们以撰写本文时的最新版:Vue 2,Web
-
node使用Koa2搭建web项目的方法
随着Node.js的日益火热,各种框架开始层出不穷的涌现出来,Node.js也开始逐渐的被应用到处理服务端请求的场景中.搭建Web项目的框架也随之开始出现--express.koa.koa2.egg等,当然要了解其好坏还是要自己去啃源码的.本文将不会涉及到源码,只是带领初学者简单了解下Koa2的基本使用,欢迎大家在评论中互相交流学习. 注意:koa2使用了ES7的语法,所以使用时请升级Node版本到最新.了解更详细的源码信息可以到git上的koajs/koa去了解 1. 项目目录结构 2. 代码
-
详解React项目的服务端渲染改造(koa2+webpack3.11)
因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要
-
使用webpack打包koa2 框架app
以前在用koa写server的时候,发布简直是噩梦.需要将src里面的全部文件都覆盖掉,config配置文件也要覆盖,稍有不慎就会线上报各种各样的问题,然后就得回退,本地调好在发布.偶然看见一篇文章讲 如何使用webpack打包koa app ,惊为天人,原来webpack也能打包后台.这在以前想都没想过. 关键问题 一:所有node_modules里的模块都不进行打包 webpack的核心功能是将引用的各个模块打到一个文件里,并会将各种规范的模块进行统一的模块化处理(webpack规范). 然
-
使用koa2创建web项目的方法步骤
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 --
-
idea2020.1.3 手把手教你创建web项目的方法步骤
首先: IDEA中的项目(project)与eclipse中的项目(project)是不同的概念,IDEA的project 相当于之前eclipse的workspace,IDEA的Module是相当于eclipse的项目(project). 第一步:配置tomcat (1)点击run下面的edit configuration (2)点击template左边的三角 (3)找到Tomcat Server,有两个选项,第一个表示本地的,第二个表示远程的.这里我们因为在自己电脑,选择本地的 (4)点击c
-
使用maven创建web项目的方法步骤(图文)
目前做的项目使用的是MAVEN来管理jar包,这也是我第一次接触maven,感觉非常好,再也不用一个一个去添加和下载jar包了,直接在maven配置文件中配置就可以了,maven可以帮助我们自动下载.非常方便.之前比较忙没时间整理,现在整理一下,记录下来,加深印象.当然我们使用maven也只是最基本的,很多其他功能都没有使用到,本篇仅介绍如何创建一个maven项目,不做其他. 环境搭建参考之前一篇博文:http://www.jb51.net/article/131269.htm 下面推荐2个ma
-
vue-cli4.x创建企业级项目的方法步骤
安装脚手架(vue-cli) $ npm install @vue/cli -g //全局安装最新的脚手架 创建项目 $ vue create vue-demo 在创建项目的时候可以使用 $ vue ui 来进行创建,两种方式在创建的时候,直接选择上router和vuex,来进行项目创建 移动端Vant # 通过 npm 安装 $ npm i vant -S # 通过 yarn 安装 $ yarn add vant 我这里都是使用的按需引入,用了 babel-plugin-import 是一款
-
使用IDEA创建SpringBoot项目的方法步骤
1.打开IDEA,创建新项目,选择Spring Initializr 2.输入Artifact 3.勾选Web 4.点击finish完成 5.进入项目,可以将以下内容删除 pom.xml文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3
-
IntelliJ IDEA下Maven创建Scala项目的方法步骤
环境:IntelliJ IDEA 版本:Spark-2.2.1 Scala-2.11.0 利用 Maven 第一次创建 Scala 项目也遇到了许多坑 创建一个 Scala 的 WordCount 程序 第一步:IntelliJ IDEA下安装 Scala 插件 安装完 Scala 插件完成 第二步:Maven 下 Scala 下的项目创建 正常创建 Maven 项目(不会的看另一篇 Maven 配置) 第三步:Scala 版本的下载及配置 通过Spark官网下载页面http://spark.a
-
Idea2019创建Spingboot Web项目的方法步骤
1.Idea及Java版本:Idea2019.1 + jdk1.8 2.File > Peoject 3.Spring Initializr: 4.之后会自动下载需要的相关文件 5.src > main > com.xxx.xxx下创建HelloController,内容如下: package com.weihua.xxx; import org.springframework.web.bind.annotation.RequestMapping; import org.springfr
-
idea创建Spring项目的方法步骤(图文)
Spring介绍 Spring概述 Spring是一个开源框架,Spring是2003年兴起的轻量级java开发框架,由Rod Johnson 在其著作 Expert One-On-One J2EE Development and Design 中阐述的部分理念和原形衍生而来.它是为了解决企业级开发的复杂性而创建的.Spring使用基本的javaBaen来完成以前只可能由EJB完成的事情,然而Spring的用途不仅限于服务器端的开发,从简单性.可测试性.低耦合的角度而言任何java应用都可以在s
-
IDEA 创建一个Mybatis Maven项目的方法步骤(图文)
第一步:先新建一个工程 直接next就行了,不用选内容,不然他会下载骨架会卡很久 第一个箭头是项目名称,第二个箭头是项目路径,根据自己需要修改就行了.新建好的项目是这样的. 第二步:我们需要添加一个web框架支持 右键你的项目然后选择Add Framework那一项. 选中Web Application点击ok. 这样项目结构就有了,重点是啥都不用调了很方便. 第三步:去配置Tomcat 选择Tomcat Server下面的Local 这里选择你的Tomcat在哪里 按照箭头步骤来从上到下把工程