上一节我们通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并不友好,我们更希望直接发送html页面。
模板引擎可以解决这个问题,通过模板引擎,可以直接设置响应的html页面,并且可以把后台数据绑定到模板中,然后发送给客户端。
目前市面上有很多模板引擎,这里我们选择一个功能完善,又容易上手的模板引擎:nunjucks
在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
标签的属性。
form
标签设置完成之后,要对表单空间进行设置
获取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>
制作一个登陆验证功能,具体要求如下所示