1. 模塊安裝
koa-static 靜態資源中間件 靜態web服務
npm install koa-static --save
2. 後臺
/*
koa-static 靜態資源中間件 靜態web服務
1.cnpm install koa-static --save
2.const static = require('koa-static')
3.配置中間件
app.use(static('static'))
*/
// 引入koa框架
var Koa = require('koa'),
// 路由
router = require('koa-router')(),
// 視圖
views = require('koa-views'),
// post請求
bodyParser = require('koa-bodyparser'),
// 靜態資源
static = require('koa-static');
// 模板渲染
const render = require('koa-art-template');
// 路徑
const path = require('path')
// 實例化koa
var app = new Koa();
// 相關配置信息
render(app, {
root: path.join(__dirname, 'views'), //規定視圖的位置
extname: '.html', //後綴名
debug: process.env.NODE_ENV !== 'production' //是否開啓調試模式
});
// 調用中間件
app.use(views('views', {
extension: 'html'
}))
//2.配置靜態路徑 localhost/static/css
app.use(static(__dirname + '/static'));
app.use(static(__dirname + '/public')); //koa靜態資源中間件可以配置多個
//配置post bodyparser的中間件
app.use(bodyParser());
router.get('/', async(ctx) => {
ctx.body = '這個是首頁'
})
//接收post提交的數據
router.get('/news1', async(ctx) => {
await ctx.render('news');
})
app.use(router.routes()); /*啓動路由*/
app.use(router.allowedMethods());
app.listen(3000);
3. 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2 class='title'> 我是news1模塊 </h2>
</body>
</html>
4. css文件
.title {
color: #90f;
font-size: 40px;
}
