首先,下载并引入template.js模板引擎。
html页面
<div id='app'></div>
<script src='template.js'></script>//引入时注意你的路径
设置模板引擎,必须将type设置成"text/html",id 必须设置名字可以随意
<script type="text/html" id="tem">
<h1>{{message}}</h1>
<p>{{user.name}}</p>
<p>{{user.age}}</p>
<p>{{user.gender === 0 ? '女' :'男'}}</p>
<ul>
{{each}}
<li>
{{$value.todos}}
</li>
{{/each}}
</ul>
</script>
<script>
$.ajax({
url: '/',
type: 'get',
data: taskArr,
success: function (data) {
var html=template('tem',data)
document.getElementById('app').innerHTML=html
}
})
</script>
db.json//存放的数据
[{
message:'hello',
user:{
name:'zs',
age:18,
gender:0
},
todos:['吃饭','睡觉','打豆豆']
}
]
js页面
const express = require('express')
// 接收json数据
const db = require('./db')
const app = express()
// 启动端口
app.listen(3000, () => console.log('Serve listening http://127.0.0.1:3000/'))
// 处理静态资源
app.use('/public', express.static(__dirname + '/public/'))
// 渲染页面
app.get('/', function (req, res) {
let data = require(__dirname + '/db.json')
res.render(__dirname + '/views/index.html', {
taskArr: data[0]
})
})