整理 web 渲染思路, 与 KOA 作比较
1. 开启服务器并监听端口, 注册监听事件
- // 原生
- let http = require('http')
- const server = http.createServer((req, res) => {
- // res.setHeader('Content-Type', 'text/html')
- // res.end('ok')
- });
- server.listen(port)//port 为端口
- // Koa 将监听事件 request 移出构造, 设计到中间件内
- let Koa = require('koa')
- let App = new Koa ()
- App.listen(port)
2. 请求信息分析 url 模块
1. 路径 url.parse(req.url) 请求路径的获取以及请求类型的获取 (这里被 Koa 处理并包装成一个 request 对象)
- // 原生
- const server = http.createServer((req, res) => {
- let url = url.parse(req.url)
- let method = req.method
- });
- // Koa 将信息封装到 request 对象上, 并可以通过别名简化访问
- App.use(async ctx => {
- let url = ctx.url
- let method = ctx.method
- })
2. 参数接受 querystring, 以及 POST 方法参数获取 (监听 res 的 data 事件, 在 end 方法中获取)(这里设计成了一个 koa-bodyparse 中间件)
- //get
- // 原生
- const server = http.createServer((req, res) => {
- let url = url.parse(req.url)
- let query = querystring(url.query)
- });
- // Koa 将信息封装到 request 对象上, 并可以通过别名简化访问
- App.use(async ctx => {
- let query = ctx.query
- })
- //post
- // 原生
- const server = http.createServer((req, res) => {
- let content
- req.on('data', chunk => {
- content+=chunk
- })
- req.on('end', () => {
- let query = querystring.parse(content)
- console.log(query)
- })
- });
- // Koa 将过程封装到中间件去
- let bodyParser = require('koa-bodyparser')
- App.use(boodyParser())
- App.use(async ctx => {
- let postQuery = querystring.parse(ctx.request.body);
- })
3. 静态资源与动态资源 (返回头信息已经被 Koa 处理)
静态资源 设定静态资源路径, 对静态资源路径结合 fs 模块返回 (中间件)
- // 原生
- // 通过 fs 访问静态资源, 需要手动设置内容类型以及状态码
- function staticSend(filename, headers={'Content-Type': 'text/html;charset=utf-8'}, statusCode=200) {
- res.writeHead(statusCode, http.STATUS_CODES[statusCode], headers);
- content = fs.readFileSync(filename);
- res.end(content);
- }
- const server = http.createServer((req, res) => {
- let url = url.parse(req.url)
- staticSend(`${__dirname}/${url}`)
- });
- // Koa 通过 koa-static-cache 中间件可以设置静态资源访问规则, 只需定义访问路径即可
- const koaStaticCache = require('koa-static-cache')
- App.use( koaStaticCache( __dirname + '/static', {
- prefix: '/public',
- } ) )
动态资源 设定对应路径的请求返回 路由处理
- // 原生
- // 根据访问路径 case 然后处理对应路径返回结果
- // Koa
- const Router = require('koa-router');
- const router = new Router();
- router.get('/list', async (ctx, next) => {
- ctx.body = await ctx.render('list.html', {
- users
- });
- })
- App.use( router.routes() );
Koa 核心: 这个框架有点思想和 webpack 类似, 编写文件 ->loader/plugins-> 最终文件, 而 Koa 就是, 请求 -> 中间件 -> 返回
它把请求与返回优雅地处理好了, 我们只需要关注中间部分逻辑, 即中间件
来源: https://www.cnblogs.com/sefaultment/p/10054905.html