**学习目标**
* [ ] 安装Koa
* [ ] 创建一个Koa应用
* [ ] 组合多个中间件
# 安装
* [ ] 创建项目目录,
* [ ] 然后初始化Npm包管理配置文件
* [ ] 安装koa并保存到本地
```
$mkdir quickstart
$cd quickstart
$npm init
$npm install koa --save
```
安装完之后在根目录下会创建`package.json`
```
{
"name": "quickstart",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"koa": "^2.7.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
```
# 建立一个简单Web服务器
在根目录下创建app.js文件,输入以下内容
* [ ] 首先引用Koa,并创建Koa的实例app
```
const Koa = require('koa');
const app = new Koa();
```
* [ ] 定义中间件helloMiddleware
```
const helloMiddleware = async (ctx, next) => {
await next();
ctx.response.type = "text/html"
ctx.response.body = '<h1>Hello World</h1>';
};
```
* [ ] 然后加载中间件,
```
app.use(helloMiddleware);
```
* [ ] 最后启动服务器,监听3000端口,
```
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
});
```
---
完整的代码
~~~javascript
const Koa = require('koa');
const app = new Koa();
//定义中间件
const helloMiddleware = async (ctx, next) => {
await next();
ctx.response.type = "text/html"
ctx.response.body = '<h1>Hello World</h1>';
};
//加载中间件
app.use(helloMiddleware);
//监听3000端口
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
});
~~~
# 使用多个中间件
```javascript
const Koa = require('koa')
const app = new Koa();
//定义中间件
const loggerMiddleware = async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
console.log(ctx.method, ctx.host + ctx.url + ctx.querystring + `[${ms}ms]`)
};
const helloMiddleware = async (ctx, next) => {
await next();
ctx.response.type = "text/html"
ctx.response.body = '<h1>Hello Koa!</h1>';
}
app.use(loggerMiddleware);
app.use(helloMiddleware);
//监听3000端口
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
});
```
> Koa的中间件是按照出现的顺序执行的。
# 组合多个中间件
使用koa-compose件多个中间件组合成一个中间件
```javascript
const compose = require('koa-compose');
```
组合多个中间件,中间件执行区分顺序
```javascript
const all = compose([loggerMiddleware, helloMiddleware]);
```
完整的代码
```javascript
const compose = require('koa-compose');
const Koa = require('koa');
const app = new Koa();
//定义中间件
const loggerMiddleware = async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
console.log(ctx.method, ctx.host + ctx.url + ctx.querystring + `[${ms}ms]`)
};
const helloMiddleware = async (ctx, next) => {
await next();
ctx.response.type = "text/html"
ctx.response.body = '<h1>Hello World<h1>';
};
//组合多个中间件,中间件执行区分顺序
const all = compose([loggerMiddleware, helloMiddleware]);
app.use(all);
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
});
```
# 引入第三方的中间件`koa-logger`
koa-logger提供了输出请求日志的功能,包括请求的url、状态码、响应时间、响应体大小等信息,对于调试和跟踪应用程序特别有帮助。
```javascript
const Koa = require('koa')
const logger = require('koa-logger')
const compose = require('koa-compose')
const app = new Koa();
//定义中间件
const loggerMiddleware = async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
console.log(ctx.method, ctx.host + ctx.url + ctx.querystring + `[${ms}ms]`)
};
const helloMiddleware = async (ctx, next) => {
await next();
ctx.response.type = "text/html"
ctx.response.body = '<h1>Hello Koa!</h1>';
}
let allMiddleware = compose([loggerMiddleware, helloMiddleware]);
app.use(logger()).use(allMiddleware);
//监听3000端口
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
});
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范