如何优雅的把后台数据（通常是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>

官方说明文档

如何优雅的把后台数据（通常是JSON）轻松渲染到html页面的更多相关文章

  1. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  2. 在ssm框架中前后台数据交互均使用json格式

    前后台数据交互均使用json. 框架ssm(spring+springmvc+mybatis) @RequestBody注解实现接收http请求的json数据,将json数据转换为java对象,注解加 ...

  3. --@angularJS--$http服务与后台数据交互

    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  4. Echarts 获取后台数据 使用后台数据展示 柱形图

    后台数据要以json格式返回 页面:引用echarts.js , 然后data以ajax的数据请求并返回 <%@ page language="java" import=&q ...

  5. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  6. python框架Django使用xadmin管理后台数据

    Django使用xadmin管理后台数据 关注公众号"轻松学编程"了解更多. 作用:xadmin比Django内置的admin更美观.更方便. 一.导入xadmin(第三方库) 方 ...

  7. ajax提交数据到java后台，并且返回json格式数据前台接收处理值

    1.前台html页面.有一段代码如下: 账  户:  <input type="text" name="userName" id="userN& ...

  8. AFNetworking 与 gbk 编码格式后台数据的使用

    仅针,后台数据为GBK编码时的AFNetWorking 使用情况: 1. Request failed: unacceptable content-type: text/html     soluti ...

  9. 关于用bootstrap显示查询的后台数据

    PrintWriter pw = response.getWriter(); pw.println(sb); pw.flush(); 由于用bootstrap查询数据,页面需要自身返回bootstra ...

随机推荐

  1. cnn可视化 感受野（receptive field）可视化

    网址: https://befreeroad.github.io/#/editor 参考: http://ethereon.github.io/netscope/#/editor 在此基础上添加 感受 ...

  2. WAIC | 奇点云携「酷炫AI应用」亮相2019世界人工智能大会

    你是否还在疑惑“人工智能可否改变世界?” 那么,你该有一些危机感了. 机器视觉.自然语言处理.智能语音.机器人问诊.智慧驾驶……这些AI技术及应用早已渗入了我们日常生活的点滴. 29日,以「智联世界, ...

  3. 4）在url中加上a分发参数，用来选哪一个函数

    文件关系目录展示: 然后代码改动部分展示: zixun.controller.class.php <?php //header('Content-type:text/html;charset=u ...

  4. ACG记录整理

    资料来源 日文维基百科 bangumi番组计划 中文维基百科 百度百科 豆瓣电影 资料类型 テレビアニメ‎ OVA‎ アニメ映画‎ Webアニメ‎ 内容说明 番名,带超链接介绍,尽量选用国内网站介绍, ...

  5. android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码

    Android精选源码 android模仿支付宝app"记账本"模块源码 android一个超轻量级剪贴板历史记录管理软件源码 android模仿QQ拖动红点消失动画效果源码 展示 ...

  6. OpenCV 改变图像的对比度和亮度

    #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <ios ...

  7. Qt 非阻塞延时

    void delay(int mSec)//ms { QEventLoop loop; QTimer::singleShot(mSec, &loop, SLOT(quit())); loop. ...

  8. 我是青年你是良品－魅蓝NOTE 2

    2" title="我是青年你是良品-魅蓝NOTE 2">   明天魅蓝即将迎来自己的新品发布会.选择儿童节的第二天后最喜爱的手机品牌.让其成为真正青年的良品. 在 ...

  9. 用Python搭建简单的HTTP服务 · Zhangxu's Blog

    分享一个快速用Python搭建简单的HTTP服务的方法. 平时我们可能有需要,传输某个文件到手机,或者工作中某台服务器的电脑. 假如这个手机是个测试手机/服务器,并没有微信QQ之类的软件,而且你也不想 ...

  10. 【pic+js+gh】免费高速图床方案

    本文用到的工具或网站 PicGo jsdelivr github 速度对比 Github的速度: jsdelivrCDN的速度: 下载PicGo 首先进入PicGo的下载地址 选择最新版本下载,根据自 ...