AJAX
ajax是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)的简称,是一种比较流行的加载页面的手法,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
提高网页加载的速度,减少网络请求的数据量,在不刷新页面的情况下修改网页。
由于AJAX的语法本身不是本次的重点,所以就不详细讲了。
具体实现
要想使用AJAX,前端和后端都需要做相应的修改,下面先讲一下我工程中的业务逻辑,我打算实现的功能是对日志信息的模糊搜索。
为了方便阐述,先上几张图(不要嘲笑理工男的审美 >_< )
①登陆成功后显示的默认主页 ↓↓
②点击WAF日志之后向后台查询数据库并动态生成表格显示出来↓↓
③在搜索框输入想要查询的关键字,通过AJAX与服务器通信,把关键字POST到服务器,通过where like的句型可以做到模糊搜索↓↓
下面从代码上来阐述实现的过程。
前端
具体的思路都写到注释里了,比较清晰,就不再重述一遍了。
$(function (){
$(document).ready(function(){
$('.btn-search').click(search);//对搜索按钮绑定search处理函数
$('td:last-child').each(function() { //根据最后一个字段的值显示不同的底色
if($.trim($(this).text()) == 'true') {
$(this).parent().addClass('success');
} else {
$(this).parent().addClass('danger');
}
});
});
});
function search() {
let content = $('#searchBox').val();
if (content) { //判断点击搜索时是否已经输入了内容
$.post('/waf_log',{content:content},function(result){
//AJAX,将查询的内容POST到服务器,并处理传回的数据
let length = result.len;
if ($.isEmptyObject(result.logs)) { //如果没有查询到数据则返回提示
alert(`
No result matched the given condition!
Please retry!`);
} else { //如果查询到数据则动态生成表格
let tbody = $('tbody');
tbody.html("");
for (var i = 0;i<length;i++) {
let tr = $('<tr></tr>');
tr.appendTo(tbody);
$('<td></td>').text(result.logs[i].id).appendTo(tr);
$('<td></td>').text(result.logs[i].time).appendTo(tr);
$('<td></td>').text(result.logs[i].username).appendTo(tr);
$('<td></td>').text(result.logs[i].function).appendTo(tr);
$('<td></td>').text(result.logs[i].url).appendTo(tr);
$('<td></td>').text(result.logs[i].param).appendTo(tr);
$('<td></td>').text(result.logs[i].result).appendTo(tr);
if ($.trim(result.logs[i].result) == 'true') {
tr.addClass('success');
} else {
tr.addClass('danger');
}
}
}
});
} else { //没有输入要搜索的关键词,则弹出提示
alert('There is no condition!');
}
}
后端
具体的思路都写到注释里了,比较清晰,就不再重述一遍了。
//采用AJAX处理对waf_log表的查询
router.post('/waf_log',async function(ctx,next) {
var logs = {}; //用于存储查询的结果
var len = 0; //多个for循环共用的下标计数器
var content = ctx.request.body.content; //解析出请求的内容
var content1 = '%'+content+'%'; //前后加上‘%’用于模糊搜索
if (typeof(content) == Number) { //针对ID的查询,不支持模糊搜索
var result1 = await WafLogs.where('id','=',content).fetchAll();
for(;len < result1.length;len++){
logs[len] = result1.models[len].attributes;
}
}
//针对其它字段的查询,全部使用模糊搜索的机制处理
var result2 = await WafLogs.where('time','like',content1).fetchAll();
var result3 = await WafLogs.where('username','like',content1).fetchAll();
var result4 = await WafLogs.where('function','like',content1).fetchAll();
var result5 = await WafLogs.where('url','like',content1).fetchAll();
var result6 = await WafLogs.where('param','like',content1).fetchAll();
var result7 = await WafLogs.where('result','like',content1).fetchAll();
//将所有查询得到的结果拼接在一起
for(;len < result2.length;len++){
logs[len] = result2.models[len].attributes;
}
for(;len < result3.length;len++){
logs[len] = result3.models[len].attributes;
}
for(;len < result4.length;len++){
logs[len] = result4.models[len].attributes;
}
for(;len < result5.length;len++){
logs[len] = result5.models[len].attributes;
}
for(;len < result6.length;len++){
logs[len] = result6.models[len].attributes;
}
for(;len < result7.length;len++){
logs[len] = result7.models[len].attributes;
}
ctx.body = {logs,len}; //将结果返回到前端
});
总结
整个过程理顺了以后,还是比较清晰的,由于业务逻辑不是很复杂,所以还算简单,以后写到复杂的模块,再回来补充整理。