1.Nunjucks概述
在之前的例子中
直接在此处写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做对比)
使用post方法效果
可以看到浏览器搜索栏的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>
login.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");
})