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

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

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

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

1. 模板引擎handlerbars

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

2. 效果展示

3. 最简单的使用demo

  1. 准备个测试页面，页面引入handlebars.js

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

4. 附上完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"">
  6.     <title>m-web</title>
  7. </head>
  8. <body>
  10.     <!-- <h3>学生信息表</h3> -->
  11.     <table border="1" width="700" align="center" cellspacing="0" cellpadding="6">
  12.         <caption>学生信息表</caption>
  13.         <thead>
  14.             <tr align="left">
  15.                 <td>姓名</td>
  16.                 <td>性别</td>
  17.                 <td>芳龄</td>
  18.                 <td>班级</td>
  19.                 <td>备注</td>
  20.             </tr>
  21.         </thead>
  22.         <tbody id="container">
  23.             <!--//todo 表格内容使用模板渲染 -->
  24.             <script type="text/x-handlebars-template" id="template">
  25.                 {{#each this}}
  27.                 <tr align="left">
  28.                     <td>{{name}}</td>
  29.                     <td>{{gender}}</td>
  30.                     <td>{{age}}</td>
  31.                     <td>{{classes}}</td>
  32.                     <td>{{note}}</td>
  33.                 </tr>
  35.                 {{/each}}
  36.             </script>
  37.         </tbody>
  38.     </table>
  40.     <script src="./js/handlebars.js"></script>
  41.     <script>
  42.         var student = [
  43.             {name: '鲁班七号', gender: '未知', age: '20', classes: '一年级射手班', note: '智商二百五的电玩小子，biubiubiu，就是腿短！'},
  44.             {name: '安琪拉', gender: '女', age: '18', classes: '一年级法师班', note: '什么什么魔法书！'},
  45.             {name: '程咬金', gender: '男', age: '30', classes: '一年级二班', note: '爱与正义之斧，偷偷推到'},
  46.             {name: '阿珂', gender: '女', age: '19', classes: '三年级刺客班', note: '哪里亮了点哪里，都是我的人头！'},
  47.             {name: '李白', gender: '男', age: '20', classes: '一年级酒酒仙班', note: '但愿长醉不愿醒，我是来无影去无踪，帅!'},
  48.             {name: '森瑶', gender: '女', age: '20', classes: '皮肤班级', note: '不然梦会碎还是破！'}
  49.         ]
  51.         //获取需要放数据的容器
  52.         var container = document.querySelector('#container');
  53.         //也就是获取我们定义的模板的dom对象。主要是想获取里面的内容（innerHTML）
  54.         var templateDom = document.querySelector('#template');
  55.         //编译模板的里的内容
  56.         var template = Handlebars.compile(templateDom.innerHTML);
  57.         //把后台获取到的数据student渲染到页面
  58.         container.innerHTML = template(student);
  59.     </script>
  60. </body>
  61. </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. python三目运算和递归的小练习

    应用前: ''' 递归的简单实现,输出i = 5的时候的结果 ''' def diGui(i = 0): i = i +1 if i >=5: return ("{0}大于等于5&qu ...

  2. matplotlib.pyplot.contour 简单等高线绘制

    contour(X, Y, Z) X,Y是与Z形状相同的二维数组,可以通过 numpy.meshgrid()创建. numpy.meshgrid()----从坐标向量返回坐标矩阵 生成的x,y坐标矩阵 ...

  3. python数据类型：元组

    python数据类型:元组 python的元组与列表类似,但是元组的元素不能修改 元组使用小括号,列表使用大括号 元组创建简单,只需要在括号中添加元素,使用逗号隔开 创建元组: tup1 = (50, ...

  4. 规范化开发和time相关模块

    1. 规范化开发 如果在开发的过程中将所有的程序放在一个py文件中,加载时会很慢,同时降低了代码的可读性,查询起来也麻烦 所以要将一个oy文件合理的分成多个py文件,在blog大目录下分为以下几个部分 ...

  5. fscanf使用心得

    好久没碰C语言了.从现在开始,要开始刷题了. (1)int fscanf( FILE* stream, const char* format, ... ); https://www.programiz ...

  6. django框架进阶-admin-长期维护

    ###############    django--admin的使用    ################ # django后台管理: # 第一步: # 在settings文件中修改语言和时区 L ...

  7. JDBC介绍和Mybatis运行原理及事务处理

    本博客内容非自创,转载自以下三位,侵删: https://juejin.im/post/5ab7bd11f265da23906bfbc5 https://my.oschina.net/fifadxj/ ...

  8. try中定义的变量在finally中找不到

    凡是代码块中的变量,作用域都只在代码块中 https://blog.csdn.net/qq_20936333/article/details/81062966 问题: 解决:

  9. .net批量插入数据库,SqlBulkCopy方法

    /// <summary> /// 把数据插入LessonQuestion表 /// </summary> /// <param name="lessontit ...

  10. leetcode 1.回文数-（easy）

    2019.7.11leetcode刷题 难度 easy 题目名称 回文数 题目摘要 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 思路 一些一定不为回文数的 ...