Node.js day2:Koa路由&静态文件托管

19_Node.js/day-3/code/koa-project/index.js

@@ -1,6 +1,9 @@
 import Koa from 'koa';
 import { PORT, HOST } from './app.config.mjs';
 import router from './router/index.mjs';
+import serve from 'koa-static';
+
+// console.log(appStatic);
 
 const app = new Koa();
 
@@ -57,6 +60,8 @@ const app = new Koa();
 // });
 
 //! 总结：中间件的执行顺序 遵循 洋葱模型
+// 托管静态文件
+app.use(serve('pages'));
 
 // 注入路由功能
 app.use(router.routes());

19_Node.js/day-3/code/koa-project/package-lock.json

@@ -10,7 +10,8 @@
       "license": "ISC",
       "dependencies": {
         "@koa/router": "^12.0.0",
-        "koa": "^2.14.2"
+        "koa": "^2.14.2",
+        "koa-static": "^5.0.0"
       }
     },
     "node_modules/@koa/router": {
@@ -314,6 +315,39 @@
         "node": ">= 10"
       }
     },
+    "node_modules/koa-send": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/koa-send/-/koa-send-5.0.1.tgz",
+      "integrity": "sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "http-errors": "^1.7.3",
+        "resolve-path": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/koa-static": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/koa-static/-/koa-static-5.0.0.tgz",
+      "integrity": "sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==",
+      "dependencies": {
+        "debug": "^3.1.0",
+        "koa-send": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 7.6.0"
+      }
+    },
+    "node_modules/koa-static/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmmirror.com/media-typer/-/media-typer-0.3.0.tgz",
@@ -386,11 +420,63 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "6.2.1",
       "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
       "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
     },
+    "node_modules/resolve-path": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/resolve-path/-/resolve-path-1.4.0.tgz",
+      "integrity": "sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==",
+      "dependencies": {
+        "http-errors": "~1.6.2",
+        "path-is-absolute": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/resolve-path/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-path/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-path/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/resolve-path/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",

19_Node.js/day-3/code/koa-project/package.json

@@ -13,6 +13,7 @@
   "license": "ISC",
   "dependencies": {
     "@koa/router": "^12.0.0",
-    "koa": "^2.14.2"
+    "koa": "^2.14.2",
+    "koa-static": "^5.0.0"
   }
 }

19_Node.js/day-3/code/koa-project/pages/about.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>About</title>
   </head>
   <body>
     <h3>关于</h3>

19_Node.js/day-3/code/koa-project/pages/css/index.css

@@ -0,0 +1,10 @@
+.home {
+  border: 1px solid #ccc;
+  background-image: url('/images/4.jpeg');
+  min-height: 600px;
+}
+
+.home img {
+  width: 100px;
+  height: 100px;
+}

19_Node.js/day-3/code/koa-project/pages/index.html

@@ -4,11 +4,13 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <link rel="stylesheet" href="/css/index.css" />
+    <title>Home</title>
   </head>
   <body>
     <div class="home">
       <h3>主页</h3>
+      <img src="/images/4.jpeg" alt="" />
     </div>
   </body>
 </html>

19_Node.js/day-3/code/koa-project/router/index.mjs

@@ -1,4 +1,5 @@
 import Router from '@koa/router';
+import { readFile } from 'node:fs/promises';
 
 const router = new Router();
 
@@ -6,14 +7,15 @@ const router = new Router();
 // 第一个参数: 路由的路径
 // 第二个参数：路由处理的中间件
 router
-  .get('/', (ctx) => {
-    ctx.body = '主页';
+  .get('/', async (ctx) => {
+    // 需要告诉客户端 你响应的数据类型
+    // 即需要设置Content-Type响应头
+    ctx.type = 'text/html;charset=utf8';
+    ctx.body = await readFile('./pages/index.html');
   })
-  .get('/about', (ctx) => {
-    ctx.body = '关于-get';
-  })
-  .post('/about', (ctx) => {
-    ctx.body = '关于-post';
+  .get('/about', async (ctx) => {
+    ctx.type = 'text/html;charset=utf8';
+    ctx.body = await readFile('./pages/about.html');
   });
 
 export default router;