一.对参数传递的理解
0.以项目空路径（http://dev.paas.blueking.com:8000/）进来匹配到home函数，再进入到index.html页面。在该index.html中引入了base2.html，所以base2里的css文件和js文件全部依次序引用。在index.html最后引用了dataTable2.js，该js文件中有$(document).ready(function(){});这个方法（
对比：
$(document).ready(function(){});：DOM结构绘制完毕后就执行，不必等到加载完毕；
window.onload：必须等到页面内包括图片的所有元素加载完毕后才能执行
）
1.$(document).ready(function(){});中调用getDeviceList()这个js函数，在getDeviceList中发起url为get_device_list/的异步请求进入view，查询并获得可以选择的设备类型，并返回到js函数。
//初始化设备选择列表
function getDeviceList(){
$.ajax({
url:site_url+"get_device_list/",
type:"POST",
dataType: "json",
data:'data',
success:function (data) {
var select = $("#selectdevice");
$.each(data,function (i) {
select.append("<option value='"+data[i].type+"'>"+data[i].name+"</option>")
});
$('#selectdevice').selectpicker('val','');
$('#selectdevice').selectpicker('refresh');
$('#selectdevice').next('button').addClass('form-control');
},
error:function (data) {
alert(data);
}
})
}
views.py中
def get_device_list(request):
if request.method == 'POST':
obj = DeviceType.objects.all() devicelist = []
for item in obj:
row = {'name': item.name,
'type': item.type
}
devicelist.append(row)
return HttpResponse(json.dumps(devicelist), content_type='application/json')
2.在那个ready函数中新建名为jTable的dataTable，调用initDataTable这个js函数传入（dataTable2.js第一行开始的三个变量：
urlParam：被传入sAjaxSource以ajax_datatables2发起post类型的异步请求传入view‘
lengthMenuParam：定义“每页xx页”
columnsParam：定义"选择显示列"这两个选择框及表头（待完成的修改删除功能）
）
来初始化index.html中id名为example的表格
// table初始化方法
function initDataTable(lengthMenuParam, urlParam, columnsParam) {
return {
sPaginationType: "full_numbers", //分页风格，full_number会把所有页码显示出来
searching: false,//搜索
ordering: true,//是否启用排序
bProcessing: true, //是否显示加载
sAjaxSource: urlParam, //请求资源路径
serverSide: true, //开启服务器处理模式
bAutoWidth: false,
bScrollAutoCss:true,
sScrollX:"100%",
bScrollCollapse:true,
sScrollXInner:'150%',
/*
使用ajax，在服务端处理数据
sSource:即是"sAjaxSource"
aoData:要传递到服务端的参数
fnCallback:处理返回数据的回调函数
*/
fnServerData: function (sSource, aoData, fnCallback) {
var selectedvalues = [];
$("#selectdevice option:selected").each(function () {
if($(this).val()!=""){
selectedvalues.push($(this).val());
}
});
aoData.push({"name":"queryDeviceType","value":selectedvalues});
aoData.push({"name":"queryName","value":$("#txt_ip_nam_sn").val()});
$.ajax({
'type': 'POST',
"url": sSource,
"dataType": "json",
"data": {"aodata": JSON.stringify(aoData)},
"success": function (resp) {
fnCallback(resp);
}
});
},
"oLanguage": olanguage,
"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
"bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。
// 注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。
// 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
"columns": columnsParam,
"order": [[ 0, 'asc']],
}
}
3.当serverSide设置为true时,fnServerData是结合服务器处理模式的回调函数，用来处理服务器返回过来的数据，如果id名为selectdevice（对应index.html”设备类型“）被选中且有值，则把其值push到aoData里随着上面那11个参数以json格式的post方式ajax_datatables2/的路径传输到ajax_datatables2的view中
4.在ajax_datatables2的view中将获得的aodata从json转为python数据结构对象且遍历获得其value，将它们进行复合查询。查询device这个表所有数据并获取其长度来分页，并将查询到的值dumps为json格式传回initDataTable这个js函数。
5.以上为默认加载的，其余的皆须点击了才会触发。例如点击绿色的按钮展开详细信息，选择显示列，查询等等。
二.准备
梳理好参数的传递思路后便可开始开发
1.获取代码
在gitlab上添加SSH Keys。我的在C:\Users\Administrator.ssh的id_rsa.pub下，复制里面的内容到gitlab的网页上新建添加。
Fork项目到自己的仓库，并clone到本地的空文件夹,在pycharm中打开。或直接在pycharm中导入
2.配置
导入项目，配置解释器、安装依赖（pip install -r requirements.txt）等
3.调试导入的项目，看是否运行成功，并复制静态文件。
记得修改django启动配置，否则只能本地启动，而不是服务器的启动。fix后我忘记截图，从网上找了个截图讲解，其中setting.py文件那默认没改。之后便可以访问服务端。
以上步骤完成即可正常访问，若还是如上图所示，请检查hosts文件有没有正确配置dev.蓝鲸服务器域名。
5.修改项目配置、新建分支（可选）
三.功能
a.复合条件查询
在获得前台id的值并在后台查出返回。
关键：
在该页面的js中把用户输入的值push到aoData：
aoData.push({"name": "queryDeviceType", "value": selectedvalues});
aoData.push({"name": "queryName", "value": $("#txt_ip_nam_sn").val()});
aoData.push({"name": "devicename", "value": $("#devicename").val()});
在view中，遍历前台传递的值并查询：
dataTable = {}
aodata = json.loads(request.POST.get("aodata"))
for item in aodata:
if item['name'] == "devicename":
devicename = (item['value']).strip() # 设备名称
if item['name'] == "ip":
ip = (item['value']).strip() # 带外ip
if item['name'] == "manufacturer":
manufacturer = (item['value']).strip() # 品牌厂商
if item['name'] == "model":
model = (item['value']).strip() # model
if item['name'] == "os":
os = (item['value']).strip() # 操作系统
if item['name'] == "roomname":
roomname = (item['value']).strip() # 机房名称
if item['name'] == "servicetag":
servicetag = (item['value']).strip() # ***
if item['name'] == "subtype":
subtype = (item['value']).strip() # 刀箱
if item['name'] == "ucount":
ucount = (item['value']).strip() # U数
if item['name'] == "sEcho":
sEcho = int(item['value']) # 客户端发送的标识
if item['name'] == "iDisplayStart":
iDisplayStart = int(item['value']) # 起始索引
if item['name'] == "iDisplayLength":
iDisplayLength = int(item['value']) # 每页显示的行数
if item['name'] == "iSortCol_0": # 排序
orderByIndex = "mDataProp_" + str(item['value'])
for it in aodata:
if it['name'] == orderByIndex:
orderBy = it['value']
if item['name'] == "sSortDir_0":
isDesc = item['value']
if item['name'] == "nowDate":
nowDate = item['value']
objects = Device.objects.filter(Q(type=6)
& Q(devicename__icontains=devicename)
& Q(ip__icontains=ip)
& Q(manufacturer__icontains=manufacturer)
& Q(model__icontains=model)
& Q(os__icontains=os)
& Q(roomname__icontains=roomname)
& Q(servicetag__icontains=servicetag)
& Q(subtype__icontains=subtype)
& Q(ucount__icontains=ucount)
)
b.日志
以json格式在日志中展示：who/when/what/result
who:
username = request.user.username
when:
在前端js中
function getLocalTime(now_timestamp) {
var d = new Date(now_timestamp);
var date = (d.getFullYear()) + "-" +
(d.getMonth() + 1) + "-" +
(d.getDate()) + " " +
(d.getHours()) + ":" +
(d.getMinutes()) + ":" +
(d.getSeconds());
return date;
}
//在initDataTable的js方法中
var now_timestamp = new Date().getTime();
var nowDate = getLocalTime(now_timestamp);
aoData.push({"name": "nowDate", "value": nowDate});
在view中将查询后得到的数据拼装起来
# 获得查询后的结果拼装成dict
d_query = {u'devicename': devicename, u'ip': ip, u'manufacturer': manufacturer,
u'model': model, u'os': os,u'roomname': roomname, u'servicetag': servicetag, u'subtype': subtype, u'ucount': ucount}
# 将上面获得的dict与其他信息嵌套
d_query1 = {u'username': username, u'nowDate': nowDate, u'd_query': d_query, u'result_length': result_length}
data = json.dumps(d_query1, ensure_ascii=False)
logger.info(data)