th:290px; height:200px" src=' + item.front_cover_img + ' alt="..." class="thumbnail"></div><div class="text-c" style="padding-top:5px;"><strong>' + item.name + '</strong></div></a></div>'
$("#productsDiv").append(html);
}
}
}
});
由于前后台合用一个接口，前台接口调用的产口列表是启用状态的，不显示禁用状态的，而后台需要获取所有产品，所以我们要对接口数据处理一下才行，在接口添加一个参数进行判断处理，是否是后台获取数据，前台默认返回启用状态数据
在product.py中找到接口@get('/api/product/')，添加下面处理
# 判断是否是前台提交获取数据
if type != 'backstage':
# 判断是否已经存在查询条件了，是的话在原查询条件后面拼接
if wheres:
wheres = wheres + ' and is_enable=1'
else:
wheres = 'where is_enable=1'
在后台产品中心页面的html中，访问/api/product/接口时，也添加上这个参数，大家在products_list.html页面中查找/api/product/，将它改为：/api/product/?type=backstage 或 /api/product/?type=backstage&product_class_id=
这样再刷新首页，就会出现下面效果了：
关于我们页面和联系我们页面比较简单，只需要将页面中间显示的内容删除，替换成<span id="content"></span>
在页面底部的java script中添加下面代码，效果就可以直接看到了。注：联系我们页面只需要将/api/about/替换成/api/contact_us/就可以了
$.ajax({
url: "/api/about/",
type: "GET",
dataType: 'json',
success: function (data) {
$("#content").html(data.data.content);
}
});
效果图：
打开产品中心products.html页面，这个页面有两个位置需要从服务器端读取数据的，一是分类列表，一是产品列表，需要写两个ajax。另外，用户从菜单栏或首页进来时，有可能没有带分类id，所以在写js时，需要进行专门的处理，没有id的，需要从分类列表的ajax中获取一个id，用作产品列表查询，具体大家直接看java script代码就知道了
首先将分类列表项删除，替换成<ol class="linenums" id="product_class"></ol>，将产品列表全部html代码删除，替换成<div class="panel-body" id="products"></div>
在页面底部的java script中添加下面代码，效果就可以直接看到了。
由于前后台合用一个接口，需要和产品列表接口做样的处理，区分前后台获取数据
var id = getQueryString('id');
if (id != ''){
get_product_list(id);
}
$.ajax({
url: "/api/product_class/",
type: "GET",
dataType: 'json',
success: function (data) {
if (data.rows != null && data.rows.length > 0) {
for (var i in data.rows) {
var item = data.rows[i];
if (id == '') {
id = item.id;
get_product_list(id);
}
var html = ' <li><a href="/products.html?id=' + item.id + '">' + item.name + '</a></li>';
$("#product_class").append(html);
}
}
}
});
function get_product_list(id) {
$.ajax({
url: "/api/product/?product_class_id=" + id,
type: "GET",
dataType: 'json',
success: function (data) {
if (data.rows != null && data.rows.length > 0) {
for (var i in data.rows) {
var item = data.rows[i];
var html = '<div style="float:left; padding-right:20px; padding-bottom:20px"><a href="/product_details.html?id=' + item.id + '"><div><img style="width:290px; height:200px" src="' + item.front_cover_img + '" alt="' + item.name + '" class="thumbnail"></div><div class="text-c" style="padding-top:5px;"><strong>' + item.name + '</strong></div></a></div>'
$("#products").append(html);
}
}
}
});
}
/*获取url中的参数*/
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + &qu