调用后台的接口，前端利用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);