如何优雅的把后台数据(通常是JSON)轻松渲染到html页面

2019/04/10 10:10
阅读数 21

如何优雅的把后台数据(通常是JSON)轻松渲染到html页面

在我们做前后端分离的时候,都有遇到过一些看起卡很简答,确无从下手的问题把。比方说后台给了前端一个list集合,集合里面有很多学生,我们现在要对这些学生在前端渲染展示。我们怎么办?

当然如果你是使用了强大的框架,完全不必要在意这些问题了。

但是当我们啥都没有的时候,我们可以考虑使用handlerbars这款强大的工具。可以非常轻松,侵入化很小,快捷的实现数据到页面的渲染。

1. 模板引擎handlerbars

- 官方网站:http://handlebarsjs.com/
- handlerbars简介:是一个纯js的库,主要功能通过对view和data的分离来快速构建Web模板,可以很方便简洁的使用
- 语法超级简单 {{key}},通过两个花括号包起来,更多语法参考官方文档[【官方文档】](http://handlebarsjs.com/guide/#what-is-handlebars)

2. 效果展示

3. 最简单的使用demo

  1. 准备个测试页面,页面引入handlebars.js
    • 引入handlerbars.js
    • 找个表格演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- //todo 2 我们找个表格演示下 -->
    <!-- <h3>学生信息表</h3> -->
    <table width="500" align="center" cellspacing="0" cellpadding="6">
        <caption>学生信息表</caption>
        <thead>
            <tr align="center">
                <td>姓名</td>
                <td>性别</td>
                <td>芳龄</td>
                <td>班级</td>
                <td>备注</td>
            </tr>
        </thead>
        <tbody>
            <!--//todo 表格内容使用模板渲染 -->
        </tbody>
    </table>
    
    <!--//todo 1 引入handlerbars工具 -->
    <script src="./js/handlebars.js"></script>
</body>
</html>
  1. 模拟后台的数据,假设后台返回了一个学生列表,如下(student)
var student = [
        {name: '鲁班七号', gender: '未知', age: '20', class: '一年级射手班', note: '智商二百五的电玩小子,biubiubiu,就是腿短!'},
        {name: '安琪拉', gender: '女', age: '18', class: '一年级法师班', note: '什么什么魔法书!'},
        {name: '程咬金', gender: '男', age: '30', class: '一年级二班', note: '爱与正义之斧,偷偷推到'},
        {name: '阿珂', gender: '女', age: '19', class: '三年级刺客班', note: '哪里亮了点哪里,都是我的人头!'},
        {name: '李白', gender: '男', age: '20', class: '一年级酒酒仙班', note: '但愿长醉不愿醒,我是来无影去无踪,帅!'},
        {name: '森瑶', gender: '女', age: '20', class: '皮肤班级', note: '不然梦会碎还是破!'}
    ]
  1. 定义模板,注意**type="text/x-handlebars-template"**必须这样写
    <!--//todo 表格内容使用模板渲染 -->
    <script type="text/x-handlebars-template" id="template">
        {{#each this}}

        <tr align="center">
            <td>{{name}}</td>
            <td>{{gender}}</td>
            <td>{{age}}</td>
            <td>{{classes}}</td>
            <td>{{note}}</td>
        </tr>

        {{/each}}
    </script>
  1. 渲染数据
        //获取需要放数据的容器
        var container = document.querySelector('#container');
        //也就是获取我们定义的模板的dom对象。主要是想获取里面的内容(innerHTML)
        var templateDom = document.querySelector('#template');
        //编译模板的里的内容
        var template = Handlebars.compile(templateDom.innerHTML);
        //把后台获取到的数据student渲染到页面
        container.innerHTML = template(student);

4. 附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"">
    <title>m-web</title>
</head>
<body>
    

    <!-- <h3>学生信息表</h3> -->
    <table border="1" width="700" align="center" cellspacing="0" cellpadding="6">
        <caption>学生信息表</caption>
        <thead>
            <tr align="left">
                <td>姓名</td>
                <td>性别</td>
                <td>芳龄</td>
                <td>班级</td>
                <td>备注</td>
            </tr>
        </thead>
        <tbody id="container">
            <!--//todo 表格内容使用模板渲染 -->
            <script type="text/x-handlebars-template" id="template">
                {{#each this}}

                <tr align="left">
                    <td>{{name}}</td>
                    <td>{{gender}}</td>
                    <td>{{age}}</td>
                    <td>{{classes}}</td>
                    <td>{{note}}</td>
                </tr>

                {{/each}}
            </script>
        </tbody>
    </table>

    <script src="./js/handlebars.js"></script>
    <script>
        var student = [
            {name: '鲁班七号', gender: '未知', age: '20', classes: '一年级射手班', note: '智商二百五的电玩小子,biubiubiu,就是腿短!'},
            {name: '安琪拉', gender: '女', age: '18', classes: '一年级法师班', note: '什么什么魔法书!'},
            {name: '程咬金', gender: '男', age: '30', classes: '一年级二班', note: '爱与正义之斧,偷偷推到'},
            {name: '阿珂', gender: '女', age: '19', classes: '三年级刺客班', note: '哪里亮了点哪里,都是我的人头!'},
            {name: '李白', gender: '男', age: '20', classes: '一年级酒酒仙班', note: '但愿长醉不愿醒,我是来无影去无踪,帅!'},
            {name: '森瑶', gender: '女', age: '20', classes: '皮肤班级', note: '不然梦会碎还是破!'}
        ]
        
        //获取需要放数据的容器
        var container = document.querySelector('#container');
        //也就是获取我们定义的模板的dom对象。主要是想获取里面的内容(innerHTML)
        var templateDom = document.querySelector('#template');
        //编译模板的里的内容
        var template = Handlebars.compile(templateDom.innerHTML);
        //把后台获取到的数据student渲染到页面
        container.innerHTML = template(student);
    </script>
</body>
</html>

官方说明文档

原文出处:https://www.cnblogs.com/baijinqiang/p/12462866.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部