Node-05Nunjucks模板引擎

最新推荐文章于 2022-04-20 22:25:59 发布

Void_CM

最新推荐文章于 2022-04-20 22:25:59 发布

阅读量228

点赞数

分类专栏：程序员的自我修养——node 文章标签： nodejs nunjucks

本文链接：https://blog.csdn.net/baidu_41656912/article/details/114196466

版权

程序员的自我修养——node 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.Nunjucks概述

在之前的例子中
badexample
直接在此处写html并不友好，这里需要使用模板引擎直接设置并响应整个html文件，并可以将后台数据绑定到模板中，在发送回客户端，本例选择Nunjucks模板引擎

2.在Koa框架下安装Nunjucks

安装koa-views(配置koa的模板引擎)

cnpm install --save koa-views

安装Nunjucks

cnpm install --save nunjucks

3.配置模板引擎

server.js

//导入koa模块
const Koa = require("koa");
//导入koa-router模块并执行
const router = require("koa-router")();
//导入koa-views 和 nunjucks
const views = require("koa-views");
const nunjucks = require("nunjucks");
//创建实例
const app = new Koa();

/*配置模板引擎
views 有两个参数
- 指定模板引擎的存放目录（在项目中新建该目录）
- 指定哪一个模板引擎

*/
app.use(views(__dirname+'/views',{map:{html:'nunjucks'}}));//将使用nunjucks模板引擎渲染以html为后缀的文件。

router.get('/',async (ctx)=>{
    //render 是异步操作，需要await 来保证预期执行顺序，同时传递变量名为greetings的数据，接受位置见index.html
    await ctx.render("index",{greetings:"hello my first model"});
})

app.use(router.routes());

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

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>My WebSite</title>
</head>
<body>
    <!-- 使用{{变量名}}，来接受服务器同变量名的数据 -->
    <h1>{{greetings}}</h1>
</body>
</html>

4.实现登录表单

目录结构：

使用get方法效果：（注意url与post做对比）

getlogin

使用post方法效果

postLogin

可以看到浏览器搜索栏的url是不一样的，get方法将数据显示，而post隐藏了数据。

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>My WebSite</title>
    <!-- 注意由于静态路由的使用，public是默认存在的
        对于koa框架下的web服务器，不要加/public
    -->
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <!-- 使用{{变量名}}，来接受服务器同变量名的数据 -->
    <h1>{{greetings}}</h1>

    <!-- 使用get方法提交表单 -->
    <form action="/login">
        <!-- name:定义表单提交的数据字段 -->
        <p><input type="text" name="username" placeholder="用户名:"></p>
        <p><input type="password" name="password" placeholder="密码:"></p>
        <p><input type="submit" value="get登录"></p>
    </form>

    <!-- 使用post方法提交表单 -->
    <form action="/login" method="POST">
        <!-- name:定义表单提交的数据字段 -->
        <p><input type="text" name="username" placeholder="用户名:"></p>
        <p><input type="password" name="password" placeholder="密码:"></p>
        <p><input type="submit" value="post登录"></p>
    </form>
    
</body>
</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>Login Page</title>
</head>
<body>
    <h1>hello this is the login page!</h1>
    <p>用户名:{{userNameInLogin}}</p>
    <p>密码:{{passWordInLogin}}</p>
</body>
</html>

server.js

//导入koa模块
const Koa = require("koa");
//导入koa-router模块并执行
const router = require("koa-router")();
//导入koa-views 和 nunjucks
const views = require("koa-views");
const nunjucks = require("nunjucks");
//导入koa-statics
const static = require("koa-static")
//导入koa-parser 解析post传递的数
const parser = require("koa-parser")

//创建实例
const app = new Koa();

//设置静态路由
app.use(static(__dirname+"/public"));

//可以解析post请求的参数
app.use(parser());

/*配置模板引擎
views 有两个参数
- 指定模板引擎的存放目录（在项目中新建该目录）
- 指定哪一个模板引擎

*/
app.use(views(__dirname+'/views',{map:{html:'nunjucks'}}));//将使用nunjucks模板引擎渲染以html为后缀的文件。

router.get('/',async (ctx)=>{
    //render 是异步操作，需要await 来保证预期执行顺序，同时传递变量名为greetings的数据，接受位置见index.html
    await ctx.render("index.html",{greetings:"hello my first model"});
});


//get方法实现表单——按下登录按钮后
router.get("/login",async (ctx,next)=>{
    // 接受数据
    let userName = ctx.query.username;
    let passWord = ctx.query.password;
    // console.log(userName,passWord);
    await ctx.render("login.html",{
        userNameInLogin:userName,
        passWordInLogin:passWord
    })
});

//post方法实现表单——按下登录按钮后
/*
由于post方法在url 中隐藏了数据
所以需要导入koa-parser 模块进行解析
*/
router.post("/login",async (ctx,next)=>{
    // 接受数据，这里由于是post方法，所以不用query使用request.body
    let userName = ctx.request.body.username;
    let passWord = ctx.request.body.password;
    await ctx.render("login.html",{
        userNameInLogin:userName,
        passWordInLogin:passWord
    })
});


app.use(router.routes());

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

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node-05Nunjucks模板引擎

1.Nunjucks概述在之前的例子中直接在此处写html并不友好，这里需要使用模板引擎直接设置并响应整个html文件，并可以将后台数据绑定到模板中，在发送回客户端，本例选择Nunjucks模板引擎2.在Koa框架下安装Nunjucks安装koa-views(配置koa的模板引擎)cnpm install --save koa-views安装Nunjuckscnpm install --save nunjucks3.配置模板引擎server.js//导入koa模块cons
复制链接

扫一扫

专栏目录