显示数据库数据以及模板引擎的使用

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模板引擎

基本使用步骤:

  1. 使用script标签引入arttemplate库文件

  2. 定义标签,用来显示最终解析好的模板信息

  3. 定义模板和模板中所需数据。

    ? ① 定义要显示在模板中的数据,必须是 json 对象

    ? ② 使用script标签定义模板,type="text/template" id="tpl",并且使用 <%=key%> 将所有数据位置标记出来

  4. 调用template函数,解析模板

  5. 将解析好的模板字符串填充到事先定义好的标签中(显示到网页上)

<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>

 

以上是关于显示数据库数据以及模板引擎的使用的主要内容,如果未能解决你的问题,请参考以下文章

Python中verbaim标签使用详解

使用 django-pygmentify 突出显示 Django 模板引擎中的内部代码块

百度JS模板引擎

如何使用 ViewPager 显示相同的片段,但每次加载不同的数据?

Kendo UI 模板概述

ajax配合art-template模板引擎的使用