您的位置：首页 > 其它

实习日志一

2016-09-23 16:22 417 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航