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;
}
