Koa中使用art-template模板引擎，以及如何接受post请求等

直接上代码，每个代码的作用都有注释：
实现了以下功能：
1.koa中如何使用路由
2.koa中如何使用art-template模板引擎
3.koa中如何使用koa-static解析静态文件
4.koa中如何接受post请求并通过koa-bodyparser拿到参数

安装依赖

npm install --save art-template
npm install --save koa-art-template

app.js

const koa = require("koa")
const router = require("koa-router")() // 路由
const render = require("koa-art-template") // 引入art-template
const bodyParser = require("koa-bodyparser") // 为了把请求的参数放在ctx.request.body
const static = require("koa-static") // 解析静态文件
const path = require('path');const app = new koa()
app.use(bodyParser())// 配置静态服务中间件 // 可配置多个
app.use(static(__dirname + "/static"))// 3. 配置 koa-art-template模板引擎
render(app, {root: path.join(__dirname, 'page'),   // 视图的位置extname: '.html',  // 后缀名 如：index.htmldebug: process.env.NODE_ENV !== 'production'  //是否开启调试模式})// koa中的路由 返回index.html页面
router.get("/", async (ctx)=>{let app = {name: '张三11',h: '<h2>这是一个h211</h2>',num: 20,data: ['11111111', '2222222222', '33333333333']};await ctx.render('index', { // 4. 传参 渲染koa-art-template模板 index.htmllist: app})
})// koa中接受post请求
router.post("/doAdd",ctx =>{console.log(ctx.request.body); // post提交的数据ctx.body = ctx.request.body
})app.use(router.routes())
app.use(router.allowedMethods());
app.listen(3080)

page文件夹中的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>Document</title><link rel="stylesheet" href="css/index.css">
</head>
<body><h1>sdsd</h1><input type="text" name="username"><input type="password" name="password"><button type="submit" onclick="requ()">提交</button><img class="img1" src="data:images/img1.png" alt=""><hr><!-- art-template 基本语法 --><h2 class="title">这是一个koa-art-template</h2><h2>绑定数据</h2>{{list.name}}<hr /><h2>绑定html数据</h2>{{@list.h}}<hr /><h2>条件</h2>{{if num>20}} <sapn>大于20</sapn> {{else}} <sapn>小于20</sapn>{{/if}}<hr /><h2>循环数据</h2><ul>{{each list.data}}<li>{{$index}}---{{$value}}</li>{{/each}}</ul><hr /><script>function requ(params) {var url = 'http://127.0.0.1:3080/doAdd';var data = {username: 'example'};fetch(url, {method: 'POST', // or 'PUT'body: JSON.stringify(data), // data can be `string` or {object}!headers: new Headers({'Content-Type': 'application/json'})}).then(res => {console.log('成功');}).catch(error => console.error('Error:', error)).then(response => console.log('Success:', response));}</script>
</body></html>

目录结构如下

Koa中使用art-template模板引擎，以及如何接受post请求等相关推荐

Spring Boot 使用 Kotlin Script Template 模板引擎kts 开发web应用
Spring Boot 使用 Kotlin Script Template 模板引擎kts 开发web应用在 Spring Framework 5.0 M4 中引入了一个专门的Kotlin支持. K ...
template模板引擎的使用例子
背景:使用模板引擎可以避免复杂的数据操作,例如数据很多时,把数据渲染到表单中是特别麻烦的事情.如果使用模板引擎可以很方便的帮助我们完成这些繁琐的操作. 模板引擎有很多种,但是每种模板引擎的使用方式都是 ...
JavaScript中template模板引擎
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
php foreach 不等于_PHP中的7个模板引擎
当我们在PHP中讨论模板引擎时,许多开发人员会告诉你,这是没有必要的,他们会说这是学习时间和资源的浪费,因为PHP本质上也是一个模板引擎.但是当你看过很多框架之后,你会发现很多框架都会有模板引擎的存在 ...
Express框架中如何引用ejs模板引擎
1.如何在项目中安装ejs模板引擎在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...
art template 模板渲染数据
客户端 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
在 Express中配置使用 art-template 模板引擎 --- express-art-template
1. 模板引擎为了使 art-template模板引擎能够更好地和Express框架配合,模板引擎在原art-template模板引擎的基础上封装了 express-art-template 安装 ...
thymeleaf文档_springboot中Thymeleaf和Freemarker模板引擎的区别
这两个都是属于模板引擎,可是各有各的好处,enn,在市面上比较多的也就是jsp.freemarker.velocity.thymeleaf等页面方案.Thymeleaf和Freemarker的区别Fr ...
thymeleaf 获取yml中的值_Thymeleaf模板引擎学习
开发传统Java WEB项目时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用JSP页面进行页面渲染了.从而Thymeleaf提供了一个用于整合Spring MVC的可选模 ...

Koa中使用art-template模板引擎，以及如何接受post请求等

Koa中使用art-template模板引擎，以及如何接受post请求等相关推荐

最新文章

热门文章