1、app.js

var Koa = require('koa')
    router = require('koa-router')()
    views = require('koa-views')
    bodyParser = require('koa-bodyparser')
    static = require('koa-static')
    
var app = new Koa()

//应用ejs模板引擎
app.use(views('07_koa_koa_static/views', {
    extension: 'ejs'     //文件路径为07_koa_koa_static/views,文件名为index.ejs
}))

//配置静态web服务的中间件(可配置多个)
app.use(static(__dirname + "/static"));
app.use(static(__dirname + "/public")); //给定一个地址,首先去static目录中找,如果能找到就返回对应的文件,找不到next()

//配置post bodyparser的中间件
app.use(bodyParser())  


router.get('/', async (ctx)=>{
    await ctx.render('index')
})
router.get('/news', async (ctx)=>{
    ctx.body = '新闻页面'
})

//接收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(3000)

2、index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- /static/css/basic.css -->
    <link rel="stylesheet" href="css/basic.css"/>
</head>
<body>
    <h2 class="header">这是一个h2</h2>
    <form action="/doAdd" method="post">
        用户名:<input type="text" name="username"/>
        <br/>
        <br/>
        密  码:<input type="password" name="password">
        <br/>
        <br/>
        <button type="submit">提交</button>
    </form>
    <!-- /public/images/a.jpg -->
    <img src="images/a.jpg"/>   
</body>
</html>
posted on 2021-06-25 19:33  李起桉  阅读(236)  评论(0)    收藏  举报