实习日志一

调用后台的接口，前端利用js获取项目的内容。

前后端的分离就是这样操作的。

直接上例子：

首先，后台给的api如下：

获取广告位置列表

接口说明

查看广告平台所有的广告位

请求方法

请求方法 ：post

请求地址 ： /media/listAllPostion

输入参数说明

参数名称    类型    不为空    说明    备注
page    int    不为空    当前的页数当前的页数    当前页数
pagesize    int    不为空    每一页显示个数    pageSize
返回接口说明
{
   "code": 0,
   "count":12,
   "data": [
       {
           "id": 10,
           "platform": "pc",
           "buss": "exp",
           "desc": "体验首页上墙",
           "size": "1024|420",
           "key": "exp_index_mid2"
       },
       {
           "id": 7,
           "platform": "pc",
           "buss": "exp",
           "desc": "体验首页上墙广告",
           "size": "1440|320",
           "key": "exp_index_top"
       },
       {
           "id": 4,
           "platform": "pc",
           "buss": "shixi",
           "desc": "实习首页交互链接",
           "size": "120|120",
           "key": "pc_index_down_li"
       },
       {
           "id": 2,
           "platform": "pc",
           "buss": "shixi",
           "desc": "实习首页企业列表",
           "size": "120|120",
           "key": "pc_index_entlist"
       },
       {
           "id": 1,
           "platform": "pc",
           "buss": "shxi",
           "desc": "首页banner广告",
           "size": "360|180",
           "key": "pc_index_topbann"
       }
   ],
   "msg": "ok"
}
data.code 返回值状态码
data.count 总记录条数
data.msg 返回描述
data.data.platform  平台
data.data.buss  业务
data.data.desc  描述
data.data.size  图片尺寸 
data.data.buss  key   广告位置唯一描述符建议英文
返回错误说明
返回码    说明    备注
0    成功    成功
-1    失败    msg 说明原因

前端的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>广告管理-实习吧广告管理系统</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/public/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet" />
    <link href="/public/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet" />
    <link href="/public/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/public/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="/public/static/css/animate.min.css" rel="stylesheet" />
    <link href="/public/static/css/style.min862f.css?v=4.1.0" rel="stylesheet" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5><a href="position-list-ceshi.html">广告管理</a> >> 刺猬实习 <span id="platform"></span></h5>
                    </div>
                    <div class="ibox-content">
                        <div class="form-inline">
                            <table class="table table-striped table-bordered table-hover" id="TableList">
                                <thead>
                                    <tr>
                                        <th class="center">ID</th>
                                        <th>描述</th>
                                        <th class="center">尺寸</th>
                                        <th class="center">业务</th>
                                        <th class="center">平台</th>
                                        <th class="center">操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div class="table-load" id="TableLoad">
                                <div class="table-nodata" id="TableLoadNo">
                                    <a href="javascript:;" class="btn btn-w-m btn-primary">马上添加分类</a>
                                </div>
                                <div class="spiner-example" id="TableLoading">
                                    <div class="sk-spinner sk-spinner-cube-grid">
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                        <div class="sk-cube"></div>
                                    </div>
                                </div>
                            </div>
                            <script type="text/template" id="TableTmpl">
                            {{ for (var i = 0, l = it.length; i < l; i++) { }}
                                <tr>
                                    <td class="center">{{=it[i].id}}</td>
                                    <td>{{=it[i].desc}}</td>
                                    <td class="center">{{=it[i].size}}</td>
                                    <td class="center">{{=it[i].buss}}</td>
                                    <td class="center">{{=it[i].platform}}</td>
                                    <td class="center">
                                        <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="position-detail.html?id={{=it[i].id}}&name={{=it[i].desc}}">管理</a></li>
                                                <li><a href="media-add.html?id={{=it[i].id}}&name={{=it[i].desc}}">添加</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            {{ } }}
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/public/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/public/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/public/static/js/doT.min.js?v=1.0.3"></script>
    <script src="/public/static/js/content.min.js?v=1.0.0"></script>
    <script src="/public/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/public/static/js/admin.js"></script>
    <script>
        $(document).on('ready', function() {
            // 跳转到新建分类
            $('#TableLoadNo').find('a').attr('href', 'position-add.html');
            $platform = $.getUrlParam('platform');//获取URL的指定参数
            console.log($platform);

            $.zajax({
                url: 'http://scrapy.ciweishixi.com/media/listAllPostion',
                data: {
                    page: 1,
                    pagesize: 100
                },
                success: function(data) {
                    setTimeout(function() {
                        if (data.code === 0 && data.data) {
                            var $obj = data.data;
                            //console.log(typeof $obj); //js获取的为对象
                            var arrayObj = new Array();　//创建一个数组，用来保存符合要求的字段

                            if ($platform) {
                                //输出一个平台进行提醒
                                $('#platform').text(" >> "+$platform+"平台");
                                for (var i = $obj.length - 1; i >= 0; i--) {
                                    console.log($obj[i]['buss']);
                                    if ($obj[i]['buss'] == 'job' && $obj[i]['platform'] == $platform) {
                                        arrayObj.push($obj[i]);
                                    }
                                }                                
                            } else {
                                for (var i = $obj.length - 1; i >= 0; i--) {
                                    console.log($obj[i]['buss']);
                                    if ($obj[i]['buss'] == 'job') {
                                        arrayObj.push($obj[i]);
                                    }
                                }
                            }
                            console.log($obj);
                            console.log(arrayObj);
                            
                            var tmpl = $('#TableTmpl').html();
                            var doTtmpl = doT.template(tmpl);
                            var doThtml = doTtmpl(arrayObj);
                            // 关闭加载状态
                            $('#TableLoading').remove();
                            // 插入数据
                            $('#TableList tbody').prepend(doThtml);
                        
                        } else {
                            $('#TableLoading').remove();
                            $('#TableLoadNo').show();
                        }
                    }, 500);
                },
                error:function(err){
                    console.log(err);
                }
            });
        });
    </script>
</body>
</html>

1.首先，要实现这样的效果，需要从后台的接口文档中进行数据的获取

下面用的 dot.js是一个模板框架，在web前端使用。

简介一下dot.js:

dot.js作为模板引擎，

主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。

这是很简单的web前端模板框架，简单说几个东西，你就会用了！

1、在模板中，it这个变量，就是传递进去的数据对象，应该就是英语的items；

2、doT.template( template )( obj ) 代码解释：把模板template，作为参数传入doT.template() 方法，dot就把模板处理一下，然后你再把数据对象传入，返回值，就是html与数据一起生成的html代码了，再拼接到页面即可；

3、在模板中，{{}} 包裹的内容，就是javascript代码，dot会负责处理，因为这写法怪异，新手一般出现模板写错的情况，仔细排查即可。

接下来就是前端js代码的逐行分析了。

$(document).on('ready', function() {
            // 跳转到新建分类
            $('#TableLoadNo').find('a').attr('href', 'position-add.html');

            $platform = $.getUrlParam('platform');//获取URL的指定参数
            console.log($platform);

            $.zajax({
                url: 'http://scrapy.ciweishixi.com/media/listAllPostion',
                data: {
                    page: 1,
                    pagesize: 100
                },
                success: function(data) {
                    setTimeout(function() {
                        if (data.code === 0 && data.data) {
                            var $obj = data.data;
                            //console.log(typeof $obj); //js获取的为对象
                            var arrayObj = new Array();　//创建一个数组，用来保存符合要求的字段

                            if ($platform) {
                                //输出一个平台进行提醒
                                $('#platform').text(" >> "+$platform+"平台");
                                for (var i = $obj.length - 1; i >= 0; i--) {
                                    console.log($obj[i]['buss']);
                                    if ($obj[i]['buss'] == 'job' && $obj[i]['platform'] == $platform) {
                                        arrayObj.push($obj[i]);
                                    }
                                }                                
                            } else {
                                for (var i = $obj.length - 1; i >= 0; i--) {
                                    console.log($obj[i]['buss']);
                                    if ($obj[i]['buss'] == 'job') {
                                        arrayObj.push($obj[i]);
                                    }
                                }
                            }

                            console.log($obj);
                            console.log(arrayObj);
                            
                            var tmpl = $('#TableTmpl').html();
                            var doTtmpl = doT.template(tmpl);
                            var doThtml = doTtmpl(arrayObj);
                            // 关闭加载状态
                            $('#TableLoading').remove();
                            // 插入数据
                            $('#TableList tbody').prepend(doThtml);
                        
                        } else {
                            $('#TableLoading').remove();
                            $('#TableLoadNo').show();
                        }
                    }, 500);
                },
                error:function(err){
                    console.log(err);
                }
            });
        });

1.由于需要判断用户点击的是哪个平台，因此我们需要获取URL的参数，jQuery中有封装好的函数直接使用。$.getUrlParam('platform');本页面的URL地址为：position-job-list.html?platform=h5

  $platform = $.getUrlParam('platform');//获取URL的指定参数
 console.log($platform);  //打印的结果为h5.

2.利用Ajax来调取后台的数据

后台的url为：

url: 'http://scrapy.ciweishixi.com/media/listAllPostion',

调用之后，后台会返回相应的数据

success: function(data) {
          setTimeout(function() {
               if (data.code === 0 && data.data) {
                     var $obj = data.data;
                     //console.log(typeof $obj); //js获取的为对象
                     var arrayObj = new Array();　//创建一个数组，用来保存符合要求的字段

                    if ($platform) {
                      //输出一个平台进行提醒
                       $('#platform').text(" >> "+$platform+"平台");
                             for (var i = $obj.length - 1; i >= 0; i--) {if ($obj[i]['buss'] == 'course' && $obj[i]['platform'] == $platform) {
                                        arrayObj.push($obj[i]);
                                }
                               }                                
                         } else {
                            for (var i = $obj.length - 1; i >= 0; i--) {
                              console.log($obj[i]['buss']);
                               if ($obj[i]['buss'] == 'course') {
                                  arrayObj.push($obj[i]);
                               }
                            }
                        }

              console.log($obj);
              console.log(arrayObj);
                            
         var tmpl = $('#TableTmpl').html();
         var doTtmpl = doT.template(tmpl);
          var doThtml = doTtmpl(arrayObj);
           // 关闭加载状态
         $('#TableLoading').remove();
           // 插入数据
             $('#TableList tbody').prepend(doThtml);
             
               } else {
                         $('#TableLoading').remove();
                          $('#TableLoadNo').show();
                        }
                  }, 500);
   },
   error:function(err){
       console.log(err);
   }

3.新建一个数组来保存符合条件要求的字段

 var arrayObj = new Array();　//创建一个数组，用来保存符合要求的字段

4.将符合要求的push到新数组中

 arrayObj.push($obj[i]);

5.将适合要求的数据append到前端

var tmpl = $('#TableTmpl').html();
var doTtmpl = doT.template(tmpl);
var doThtml = doTtmpl(arrayObj);
 // 关闭加载状态
$('#TableLoading').remove();
// 插入数据
$('#TableList tbody').prepend(doThtml);

相关阅读:
MySQL 8.0.11免安装版配置步骤
 python SQLAlchemy 中的Engine详解
 Python正则表达式指南
 Qt树形控件QTreeView使用1——节点的添加删除操作
 主流的比较流行的Python量化开源框架
 selenium的常见异常
 量化投资学习【经典指标和K线图系列】之1——指数平滑均线
 量化投资学习【经典指标和K线图系列】之4——MACD
node 连接 mysql 报错 ER_NOT_SUPPORTED_AUTH_MODE
Mac中安 python-ldap 出错error: command 'clang' failed with exit status 1的解决办法
原文地址：https://www.cnblogs.com/xs-yqz/p/5900528.html