83 # 静态服务中间件 koa-static 的使用以及实现

静态服务中间件：koa-static

中间件可以决定是否向下执行，如果自己可以处理，那么直接处理完毕结束，如果自己处理不了，next 方法会继续向下执行

新建 public 文件夹，里面添加 index.html、style.css 文件

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>凯小默测试静态服务中间件koa-statictitle>
        <link rel="stylesheet" href="./style.css" />
    head>

    <body>
        <h1>凯小默测试静态服务中间件koa-statich1>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

body {
    background-color: pink;
}
1
2
3

koa-static

npm i koa koa-static
1

用法：

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
 
// $ GET /package.json
app.use(serve('.'));
 
// $ GET /hello.txt
app.use(serve('test/fixtures'));
 
// or use absolute paths
app.use(serve(__dirname + '/test/fixtures'));
 
app.listen(3000);
 
console.log('listening on port 3000');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

业务代码 static.js 中使用 koa-static

const Koa = require("koa");
const path = require("path");
const bodyParser = require("koa-bodyparser");
// 使用自己实现的中间件
// const static = require("koa-static");
const static = require("./kaimo-koa-static");
const app = new Koa();
app.use(bodyParser());
app.use(static(__dirname));
app.use(static(path.resolve(__dirname, "public")));

app.use((ctx, next) => {
    console.log(ctx.path, ctx.method);
    if (ctx.path == "/login" && ctx.method === "GET") {
        ctx.body = `
            
                用户名：

                密码：

                
            
        `;
    } else {
        return next();
    }
});

app.use(async (ctx, next) => {
    console.log(ctx.path, ctx.method);
    if (ctx.path == "/login" && ctx.method === "POST") {
        ctx.body = ctx.request.body;
    } else {
        await next();
    }
});

app.on("error", function (err) {
    console.log("error----->", err);
});

app.listen(3000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

启动服务，访问 http://localhost:3000/index.html

在这里插入图片描述

nodemon static.js
1

下面实现自己的 koa-static，需要安装 mime

const path = require("path");
const fs = require("fs").promises;
const mime = require("mime");

console.log("使用的是 kaimo-koa-static 中间件");
module.exports = function static(root) {
    return async (ctx, next) => {
        let filePath = path.join(root, ctx.path);
        try {
            let statObj = await fs.stat(filePath);
            // 判断是否是文件
            if (statObj.isFile()) {
                ctx.type = mime.getType(filePath) + ";charset=utf-8";
                ctx.body = await fs.readFile(filePath);
            } else {
                await next();
            }
        } catch (e) {
            await next();
        }
    };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

相关阅读:
vue: 使用下拉树组件@riophae/vue-treeselect
通讯录管理系统
深度解析 - 行内文本溢出的省略样式如何实现？
【网络通信三要素】TCP与UDP快速入门
java毕业设计KTV点歌系统mybatis+源码+调试部署+系统+数据库+lw
P20 JPopupMenu弹出菜单
【零基础入门MyBatis系列】第十五篇——分页插件与注解式开发
《你不知道的javaScript》中卷——第一部分——第一章——类型
【洛谷】P3368 【模板】树状数组 2 (单点修改+区间查询或区间修改+单点查询的作用)
工业I/O模块的功能和应用介绍

原文地址：https://blog.csdn.net/kaimo313/article/details/132816357