python爬取cctalk视频_iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源-CSDN博客

本文链接：https://blog.csdn.net/weixin_39589766/article/details/113984291

本文介绍了如何使用Koa2处理静态资源，包括引入`koa-static`中间件，设置静态资源目录，以及创建公共视图如header、footer和layout。同时展示了如何为首页、登录和成功页面设计布局，提供更美观的用户界面。通过这个实战教程，读者将了解Koa2应用的基础结构和静态资源管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

处理静态资源

无非花开花落，静静。

指定静态资源目录

这里我们使用第三方中间件： koa-static

安装并使用

安装 koa-static：

npm i koa-static -S

修改 app.js，增加并指定 /public 目录为静态资源目录。

const Koa = require('koa')

const path = require('path')

const bodyParser = require('koa-bodyparser')

const nunjucks = require('koa-nunjucks-2')

// 引入 koa-static

const staticFiles = require('koa-static')

const app = new Koa()

const router = require('./router')

// 指定 public目录为静态资源目录，用来存放 js css images 等

app.use(staticFiles(path.resolve(__dirname, "./public")))

app.use(nunjucks({

ext: 'html',

path: path.join(__dirname, 'views'),

nunjucksConfig: {

trimBlocks: true

}

}));

app.use(bodyParser())

router(app)

app.listen(3000, () => {

console.log('server is running at http://localhost:3000')

})

之后我们对项目的视图进行美化，使之更为赏心悦目。

增加样式文件

在 /public/home/ 目录下新增样式文件 main.css，内容如下：

padding: 0;

margin: 0;

}

body,html{

font-size: 14px;

color: #000;

background: #fff;

font-family: Helvetica Neue,Helvetica,Segoe UI,Arial,Hiragino Sans GB,Microsoft YaHei;

-webkit-font-smoothing: antialiased;

position: relative;

}

.fn-clear:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0

}

.fn-clear {

zoom:1}

a {

color: #0366d6;

text-decoration: none;

}

a:hover {

text-decoration: none;

}

.header{

width: 100%;

background-color: #474747;

}

.header-box{

height: 30px;

line-height: 30px;

font-size: 12px;

letter-spacing: 2px;

color: #d5d5d5;

transition: color .3s;

}

.header-box>.logo{

letter-spacing: 0;

font-size: 12px;

}

.wraper{

width: 1200px;

margin: 0 auto;

}

.container{

min-height: 500px;

padding: 80px 0;

}

.footer{

background: #262a30;

padding: 50px 0;

border-top: 1px solid #ddd;

color: #999;

font-size: 16px;

}

.footer-box{

width: 800px;

margin: 0 auto;

text-align: center;

}

.banner_box{

width: 100%;

min-width: 1200px;

height: 438px;

background: url(https://res.hjfile.cn/cc/cctalk.hujiang.c