Web前端必做笔记之一：Nunjucks基础使用（二）_nunjucks语法改字体颜色-CSDN博客

本文链接：https://blog.csdn.net/qq_42302014/article/details/121735676

Web前端必做笔记之一：Nunjucks基础使用（二）

怎么使用get处理表单数据？
views目录下中的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>

     <form action="/login">
             <!-- name:定义表单提交的数据字段 -->
           <input type="text" name="username">
           <input type="password" name="password">
           <input type="submit" value="登录">
     </form>

</body>
</html>

再创建一个home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
  <p>用户名：{{username}}</p>
  <p>密码：{{password}}</p>
</body>
</html>

server.js中

const Koa = require('koa'); 
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks'); 
const app = new Koa(); //创建应用

app.use(views(__dirname + "/views",{    
     map:{html:'nunjucks'}
})) 
router.get("/", async ctx =>{
    await ctx.render("index",{title:"首页"})
 })
 router.get("/video",async ctx =>{
     await ctx.render("index",{title:"视频"})
 })

 router.get("/login",async ctx =>{
     let  username = ctx.query.username;   //获取表单提交的用户名
    let  password = ctx.query.password;
     await ctx.render("home",{
        username:username,
        password:password
     })
 })
 


app.use(router.routes());
app.listen(3000, () => {
   console.log("server running")
})