9.koa基礎之koa-static 靜態資源中間件靜態web服務 · koa實戰

css.html ``` ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css靜態資源</title>  <link href="/css/basic.css" rel="stylesheet" /> </head> <body> <h1>wwwwwww</h1> </body> </html> ~~~ ``` basic.css ``` ~~~ body{ background-color: rebeccapurple; } ~~~ ``` app.js ``` ~~~ /** * koa-static 靜態資源中間件靜態web服務 * 1、cnpm install --save koa-static * 2、const static = require('koa-static'); * 3、配置中間件 * app.use(static('static')) */ // 引入模塊 const Koa = require('koa'); const router = require('koa-router')(); /*引入是實例化路由推薦*/ const views = require('koa-views'); const bodyParser = require('koa-bodyparser'); const static = require('koa-static'); // 實例化 let app = new Koa(); // 應用ejs模板引擎 app.use(views('views', { map: { html: 'ejs' } })); // http://localhost:8000/css/basic.css 首先去static目錄找,如果能找到返回對應的文件,找不到next() // 配置靜態web服務的中間件 // app.use(static('static')); app.use(static(__dirname + '/static')); app.use(static(__dirname + '/public')); // koa靜態資源中間件可以配置多個 // 配置post bodyparser的中間件 app.use(bodyParser()); router.get('/', async (ctx) => { await ctx.render('css'); }); // 接收post提交的數據 router.post('/doAdd', async (ctx) => { console.log(ctx.request.body); ctx.body = ctx.request.body; // 獲取表單提交的數據 }); app.use(router.routes()); app.use(router.allowedMethods()); app.listen(8000); ~~~ ```