处理静态资源
无非花开花落,静静。
指定静态资源目录
这里我们使用第三方中间件: 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(h