HTTP 监听客户端的请求 (地址和端口),默认端口是80
静态HTTP 服务器
koa 框架
更小,更精简,更健壮的框架
- 热重载: supervisor 装全局也可以
- npm i -g supervisor
- npm i supervisor
- supervisor app 用这个命令启动app 服务器
- Shift + "
" 控制台.........
客户端发请求,从发到看到内容经历三个过程 - 服务器: 接收到请求(request)
- 处理请求 ,生成数据
- 发送数据 (response)
Koa : request -> middleware -> response - koa 处理了 request 和response ,我们需要做的是 编写(注册) 中间件的过程
- ctx: koa 处理过的对象 ,直接用就可以,,后期都是在中间件里写
- webpack 实现了文件的加载,读取,-> loader ,plugin ->打包并且生成文件
- ctx 全称 变量 context 是一个对象还是一个属性
可以注册多个中间件 - next : 中间件函数 : 迭代器
- next() 判断当前用户是否 有权限访问网站的内容 ,如果有,调用next函数.
提供了一些好用的API - Application -> Context -> (Request ,Response)
-Application = app
-异步函数: async await
-app.on("error,err => {}")
context 对象 : 对Request Response 进行了封装
-req : Node 中的Request 对象
-res : Node 中的Response 对象
注意: 在koa 中 尽量使用koa 提供的封装对象
-state : 用户数据的存储空间
-app : 当前应用程序实例- Application 对象
500Koa 自动给出的错误 服务器错误
-ctx.request 封装了很多的对象 : url method
-ctx.response 也封装了 很多对象 : body
-ctx.attactment('a.txt') 美[əˈtætʃmənt] 下载一个txt 文件
ctx.body === ctx.response.body
Request 别名 - vue ---> Angular koa ------> 全面大框架
中间件生态 - koa-static-cache 静态文件代理服务中间件 处理静态文件
- koa-router 路由处理 处理url映射
- koa-swig 模版引擎
- koa-bodyparser : body解析 处理用户提交的数据
- koa-multer : formDate解析 处理二进制数据的中间件
路由: 映射
app.use(
KoaStaticCache(__dirname + '/static',{
// root:__dirname + '/static' //和上面的第一个参数效果一样
prefix:'/public',//如果当前请求的的url 是以 '/public' 开始 ,则作为静态资源请求
})
)
//定义在/user 上面的多个子路由: 用户首页和用户收货地址
const userRouter = new Router();
router.use('/user', userRouter.routes());
userRouter.get('/',(ctx,next) => {
ctx.body = '用户首页'
});
userRouter.get('/address',(ctx,next) => {
ctx.body = '用户收货地址'
});
- params pe le m s
//把 路由对象挂载到app对象中 一定要写在最后面
app.use( router.routes());
//定义在/user 上面的多个子路由: 用户首页和用户收货地址
const userRouter = new Router();
userRouter.get('/',(ctx,next) => {
ctx.body = '用户首页'
});
userRouter.get('/address',(ctx,next) => {
ctx.body = '用户收货地址'
});
router.use('/user', userRouter.routes());
- swing swɪŋ 模版引擎
const Koa = require('koa');//包装过的http
const Router = require('koa-router');
const Swig = require('koa-swig');
const co = require('co');
let users = [
{username: 'mt'},
{username: 'mt2'},
{username: 'mt3'},
{username: 'mt4'},
{username: 'mt5'},
{username: 'mt6'},
{username: 'mt7'},
{username: 'mt8'},
{username: 'mt9'},
{username: 'mt10'},
{username: 'mt11'},
{username: 'mt12'},
]
const app = new Koa();//创建 一个 Http 服务器 监听请求 等同于 http.createSsuperver
const router = new Router();
app.use(router.routes());
const render = Swig({
root: __dirname + '/views',
autoescape: true,
cache: false,
ext: '.html'
});
app.context.render = co.wrap(render);
router.get('/list', async (ctx, next) => {
ctx.body = await ctx.render('list.html',{
users
});
});
app.listen(80);
<!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>Document</title>
</head>
<body>
<h1> SKT T1 K - {{Math.random()}} </h1>
<ul>
{%for user in users%}
<li>{{user.username}}</li>
{%endfor%}
</ul>
</body>
</html>
网友评论