显示数据库数据以及模板引擎的使用
Posted houfee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了显示数据库数据以及模板引擎的使用相关的知识，希望对你有一定的参考价值。
思路分析
文件地址：链接：https://pan.baidu.com/s/1QxHoYfsFXERLmqT1tMbo7Q 密码：y89a
样式效果：
分析：
①实现这个效果，我们一般需要2个页面，一个html页面，用来浏览器显示；一个php页面，用来接收数据库数据，并且把接受来的数据返回到前端。
②这时，我们一般需要三个步骤：第一，使用ajax发送请求；第二，在PHP页面获取数据库数据，将数据库的数据返回给前端；第三，前端接收后端返回
的数据，使用模板引擎，将数据按照表格的样式显示出来。
代码实现
1、先新建demo.html文件，并且创建好表头：
代码如下：
<table border="1" align="center" cellspacing="0"> <caption><h1>学生数据管理</h1></caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>邮箱</th> <th>电话</th> </tr> </thead> <tbody> </tbody> </table>
2、发送ajax请求到demo.php页面
<script type="text/javascript"> $.post(‘demo.php‘,function(msg){ console.log(msg); // 检测代码正确性 },‘json‘) </script>
此时demo.php文件返回测试代码：
<?php echo 123; ?>
3、demo.php操作数据
<?php // echo 123; // 链接mysql服务器 $conn = mysqli_connect(‘localhost‘,‘root‘,‘root‘); // 选择要操作的数据库 mysqli_select_db($conn,‘study‘); // 设置字符集 mysqli_query($conn,‘set names utf8‘); // 拼接SQL语句 $sql = "select * from hf"; // 执行SQL语句 $result_obj = mysqli_query($conn,$sql); $arr = []; while($row=mysqli_fetch_assoc($result_obj)) { array_push($arr,$row); // 将数组一条一条追加到$arr后面 } echo json_encode($arr); // 关闭MySQL链接 mysqli_close($conn); ?>
4、前端接收返回的数据，转化为json格式
<script type="text/javascript"> $.post(‘demo.php‘,function(msg){ console.log(msg); // 测试 },‘json‘) </script>
5、使用模板引擎，将数据添加到table中
// 引入jQuery和template库文件 <script src="./jquery.1.11.js"></script> <script src="./template-web.js"></script> //定义模板 <script type="text/template" id="tpl"> <% for ( i = 0; i < list.length; i++) {%> <tr> <td><%=list[i].sno%></td> <td><%=list[i].sname%></td> <td><%=list[i].sage%></td> <td><%=list[i].sgender%></td> <td><%=list[i].semail%></td> <td><%=list[i].stel%></td> </tr> <% } %> </script> <script type="text/javascript"> $.post(‘demo.php‘,function(msg){ console.log(msg); // 转化为二维数组 var list = { "list": msg}; // 调用模板 var html = template(‘tpl‘,list); // 添加到tbody中 $(‘tbody‘).html(html); },‘json‘) </script>
结果如下：
总结
artTemplate模板引擎
-
使用script标签引入arttemplate库文件
-
定义标签，用来显示最终解析好的模板信息
-
定义模板和模板中所需数据。
? ① 定义要显示在模板中的数据，必须是 json 对象
? ② 使用script标签定义模板，type="text/template" id="tpl"，并且使用 <%=key%> 将所有数据位置标记出来
-
调用template函数，解析模板
-
将解析好的模板字符串填充到事先定义好的标签中(显示到网页上)
<head>
<--1使用script标签引入arttemplate库文件-->
<script type="text/javascript" src="./template-web.js"></script>
</head>
<body>
<--2定义标签，用来显示最终解析好的模板信息-->
<div id="d"></div>
<--4/调用template函数，解析模板-->
<script type="text/template" id="tpl">
我是<%=name%>,今年<%=age%>岁
</script>
<--3定义模板和模板中所需数据-->
<script type="text/javascript">
// 定义数据
var info = {"name":"张三","age":23};
//定义模板
var str = template(‘tpl‘,info);
// 将解析好的模板字符串（str），写入到网页的div中
document.getElementById(‘d‘).innerHTML = str;
</script>
</body>
</html>
以上是关于显示数据库数据以及模板引擎的使用的主要内容，如果未能解决你的问题，请参考以下文章
使用 django-pygmentify 突出显示 Django 模板引擎中的内部代码块