专栏首页学习猿地Web前端学习 第5章 node基础教程7 模板引擎概述
原创

Web前端学习 第5章 node基础教程7 模板引擎概述

一、模板引擎概述

上一节我们通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并不友好,我们更希望直接发送html页面。

模板引擎可以解决这个问题,通过模板引擎,可以直接设置响应的html页面,并且可以把后台数据绑定到模板中,然后发送给客户端。

目前市面上有很多模板引擎,这里我们选择一个功能完善,又容易上手的模板引擎:nunjucks

二、安装nunjucks

在koa框架下安装nunjucks需要两个第三方模块

  • koa-views:负责配置koa的模板引擎
  • nunjucks:下载模板引擎

执行命令安装这两个模块

1 cnpm install --save koa-views
2 cnpm install --save nunjucks

三、配置模板引擎

 1 //server.js
 2 const Koa = require("koa");  
 3 const nunjucks = require("nunjucks");
 4 const views = require("koa-views");
 5 const app = new Koa();  
 6 app.use(views(__dirname + '/views', {
 7     //将使用nunjucks模板引擎渲染以html为后缀的文件。
 8     map: { html: 'nunjucks' } 
 9 }));
10 app.use(async ctx => {
11     //render方法渲染模板,第二个参数可以给模板传递参数
12     await ctx.render("index",{title:"我的第一个模板"}) 
13 })
14 app.listen(3000, () => {
15     console.log("server is running");
16 }) 
17 
18 <!-- views/index.html -->
19 <!DOCTYPE html>
20 <html lang="en">
21 <head>
22     <meta charset="UTF-8">
23     <meta name="viewport" content="width=device-width, initial-scale=1.0">
24     <meta http-equiv="X-UA-Compatible" content="ie=edge">
25     <title>{{title}}</title>
26 </head>
27 <body>
28     <h1>hello world</h1>
29 </body>
30 </html>

四、结合路由渲染模板

结合上一节路由的内容,制作一个有两个页面的网站,功能如下:

核心功能代码如下所示:

 1 router.get('/', async (ctx, next) => {
 2     await ctx.render('index',{
 3         title:"欢迎来到融职教育"
 4     })
 5 });
 6 
 7 router.get('/docs', async (ctx, next) => {
 8     await ctx.render('data', {
 9         title: '融职教育',
10         desc:'让学习更高效'
11     })
12 });

五、处理表单数据

表单概述

在网页重构的课程中,我们已经了解了表单的基本样式,本节我们讲解如何通过表单向后台发送数据,首先看两个form标签的属性。

  • action属性:指定表单提交数据的路径
  • method属性:指定表单提交数据的请求方法,请求方法包括get、post。

form标签设置完成之后,要对表单空间进行设置

  • input.name属性:指定数据传输的字段
  • input.type=“submit”:指定提交按钮,点击后提交表单数据

获取get请求的数据

直接通过ctx.query可以获取get请求的数据,实例代码如下所示:

1 //获取get请求的参数
2 router.get("/form", async ctx => {
3     await ctx.render("form")
4 })
5 router.get("/data", async ctx => {
6     let username = ctx.query.username;
7     await ctx.render("data",{usr:username})
8 })

若需要获取post请求的数据,需要安装第三方模块koa-parser来解析post请求,实例代码如下所示:

 1 <form action="/data">
 2     <input type="text" name="username">
 3     <input type="submit" value="提交数据">
 4 </form>
 5 
 6 const Koa = require("koa");  
 7 const parser = require('koa-parser')
 8 const app = new Koa(); 
 9 app.use(parser());
10 //获取post请求的参数
11 router.get("/form", async ctx => {
12     await ctx.render("form")
13 })
14 router.post("/data", async ctx => {
15     let username = ctx.request.body.username;
16     await ctx.render("data",{usr:username})
17 })
18 
19 <form action="/data" method="POST">
20     <input type="text" name="username">
21     <input type="submit" value="提交数据">
22 </form>

六、课后练习

制作一个登陆验证功能,具体要求如下所示

  1. 登录页填写用户名和密码(正确的用户名为:admin,密码为:123456)
  2. 输入正确的用户名和密码,跳转页面提示【登录成功】
  3. 输入错误的用户名和密码,跳转页面提示【登录失败】

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第5章 node基础教程7 模板引擎概述

    上一节我们通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并...

    学习猿地
  • Web前端学习 第5章 node基础教程6 Koa基础

    Koa是一个基于Node的web服务器开发框架,通过Koa我们可以更便捷第开发web服务器。不必像上一节那样刀耕火种地从零开始写。

    学习猿地
  • Web前端学习 第7章 Vue基础教程5 计算属性与侦听器

    计算属性中定义的值可以直接绑定在表达式中。如果某些值需要通过计算才能得到,那使用计算属性就再合适不过了。

    学习猿地
  • 【融职培训】Web前端学习 第5章 node基础教程7 模板引擎概述

    上一节我们通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并...

    学习猿地
  • 区块链市场惊天巨变:数字资产WIT出炉

    WIT以法定资产作为背书,基于银行承兑通过资产加密价值数字凭证实现。说得通俗点,就是价值锚定离岸人民币,但是是在区块链上发行的价值稳定的数字资产。从价格的对等角...

    区块链领域
  • 体验koa

    之前使用nodejs开发后台服务,使用的一直是express。 后来了解到express开发团队重新开发了一个框架koa。

    用户1394570
  • 140行代码实现一个逼真的大雪纷飞的效果

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • Nginx配置文件的理解

    小俊丶Eternally
  • Nginx配置文件的理解

    小俊丶Eternally
  • 《SpringMVC从入门到放肆》八、SpringMVC注解式开发(基本配置)

    一般情况下,我们开发时,一个Controller类就是一个模块,而里面的所有处理器方法就是该模块的不同业务功能。这个时候,我们Controller与Contro...

    I Tech You_我教你

扫码关注云+社区

领取腾讯云代金券