前言：老师指导下的实践在前几节中已经全部完成，在本节里，我们将继续进行一些新的尝试，让我们的网页丰富起来。但果不其然，自我探索的过程总是曲折的，会有大大小小的问题在前面等着你，但是不要害怕，因为问题最终都会被解决的，这只是时间的问题～
本节目标
对查询结果按某个字段进行排序
对多个查询条件进行复合查询
对查询结果进行分页显示
美化我们的页面
（一）排序
- 语法：在 select 查询语句中添加 order by 子句
order by column_name,column_name asc/desc;降序使用 desc 关键字。
var fetchSql = "select url,source_name,title,author,publish_date " +"from fetches where title like '%" + request.query.title + "%'"+"order by author";
- 效果：修改 index.js 文件，根据 author 字段进行排序，可以看到相同作者的文章前后紧挨排列
（二）复合查询
- 对同一字段复合查询
修改 index.js 文件，利用 split 方法将字符串转化为数组，获取多个关键词，通过循环添加 select 查询条件
router.get('/process_get', function(request, response) {
//sql字符串和参数
var titlearray=request.query.title.split(" ");
var fetchSql = "select url,source_name,title,author,publish_date " +
"from fetches where title like '%" + titlearray[0] + "%'";
for(var i=1;i<titlearray.length;i++){
fetchSql+="and title like '%"+ titlearray[i] + "%'";
}
mysql.query(fetchSql, function(err, result, fields) {
response.writeHead(200, {
"Content-Type": "application/json"
});
response.write(JSON.stringify(result));
response.end();
});
});
效果
- 对多个字段复合查询
（1）修改 search.html 文件：添加输入文本框，通过输入框名获取到关键词添加到 HTTP GET 请求中，来从服务器加载数据。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<form>
<br> 标题：<input type="text" name="title_text">
<br> 关键词：<input type="text" name="keywords_text">
<input class="form-submit" type="button" value="查询">
</form>
<div class="cardLayout" style="margin: 10px 0px">
<table width="100%" id="record2"></table>
</div>
<script>
$(document).ready(function() {
$("input:button").click(function() {
$.get('/process_get?title=' + $("input[name='title_text']").val()+"&keywords="+$("input[name='keywords_text']").val(), function(data) {//添加关键词
$("#record2").empty();
$("#record2").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
'<td>title</td><td>author</td><td>keywords</td><td>publish_date</td></tr>');
for (let list of data) {
let table = '<tr class="cardLayout"><td>';
Object.values(list).forEach(element => {
table += (element + '</td><td>');
});
$("#record2").append(table + '</td></tr>');
}
});
});
});
</script>
</body>
</html>
（2）修改index.js文件：在select语句中添加关键词查询
var express = require('express');
var router = express.Router();
var mysql = require('../mysql.js');
//var moment=require('moment')
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/process_get', function(request, response) {
//sql字符串和参数
var fetchSql = "select url,source_name,title,author,keywords,publish_date " + "from fetches where keywords like '%" + request.query.keywords + "%'";
var titlearray=request.query.title.split(" ");
for(var i=0;i<titlearray.length;i++){
fetchSql+="and title like '%"+ titlearray[i] + "%'";
}
mysql.query(fetchSql, function(err, result, fields) {
response.writeHead(200, {
"Content-Type": "application/json"
});
response.write(JSON.stringify(result));
response.end();
});
});
module.exports = router;
效果：成功筛选！
（三）分页显示
本以为很容易实现的分页显示，结果花费了一天的时间，由于呈现的效果不理想，一直在做尝试更改，最后发现导致实现不了的问题也很简单：
（1）引入支持Bootstrap表的CSS和JavaScript的外部链接来源不同；
（2）对数据的处理直接交给 bootstrapTable 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
<script src="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
</head>
<body>
<form>
<br> 标题：<input type="text" name="title_text"></br>
<br> 关键词：<input type="text" name="keywords_text"><input class="form-submit" type="button" value="查询"></br>
</form>
<div class="cardLayout" style="margin: 10px 0px">
<table width="100%" id="record2" ></table>
</div>
<script>
$(document).ready(function() {
$("input:button").click(function() {
// $.get('/process_get?title=' + $("input[name='title_text']").val()+"&keywords="+$("input[name='keywords_text']").val(), function(data) {
// $("#record2").empty();
// $("#record2").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
// '<td>title</td><td>author</td><td>keywords</td><td>publish_date</td></tr>');
// for (let list of data) {
// let table = '<tr class="cardLayout"><td>';
// Object.values(list).forEach(element => {
// table += (element + '</td><td>');
// });
// $("#record2").append(table + '</td></tr>');
// }
// });
$.get('/process_get?title=' + $("input[name='title_text']").val()+"&keywords="+$("input[name='keywords_text']").val(), function(data) {
$("#record2").bootstrapTable({
search:true, //加上搜索控件
method: 'get', //请求方式（*）
pagination: true, //是否显示分页（*）
striped: true, //是否显示行间隔色
uniqueId: "userId", //每一行的唯一标识，一般为主键列
pageSize: 5, //每页的记录行数（*）
sidePagination : 'client',
//showRefresh: true,//是否显示刷新按钮
//showToggle:true, //是否显示详细视图和列表视图的切换按钮
columns:[{
field:'url', //对应数据库字段名
title:'链接',
},{
field:'source_name',
title:'来源'
},{
field:'title',
title:'标题'
},{
field:'author',
title:'作者'
},{
field:'keywords',
title:'关键词'
},{
field:'publish_date',
title:'发布时间',
}],
data: data,
});
});
});
});
</script>
</body>
</html>
为对我们查询出来的结果进一步搜索，我们还可以添加一个搜索控件：在初始化方法里，多添加一个参数即可：search:true
（四）美化页面
最后若要把页面提供给用户使用，用CSS来美化我们的页面。第一次应用，在一些小问题上翻了好几个跟头，比如：
（1）设置背景图链接时，要添加url()，与直接在< body >内设置不同；
（2）设置字体颜色时，外部不能添加引号；
（3）对 body 颜色设置不能更改bootstrapTable中的字体颜色，是因为权重也就是优先级不够，可以通过table的id来定位，设置字体颜色。
在< head >标签里添加< style >标签，不直接在标签里设置样式，实现一定程度上的html代码和css样式分离
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：选择器{属性:值;属性:值;}
<style>
body
{
font-size:15px;
font-family:"宋体";
background-image:url("images/bg1.png");
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:fixed;
color: #FFFFFF;
}
h2{
color: #000000;
text-align:center;
}
#record2{
color: #FFFFFF;
text-align:center;
}
</style>
在< body >标签内插入标题
<h2>NBA最新资讯查询</h2>
最后效果
总结：
这一节里，自己不断摸索，遇到了各种各样的问题，由于网上的资料来源不一，有时甚至可能会有错误语法，真是经历了九九八十一难，历时两天，此刻的我由于盯着电脑屏幕过久，脑袋昏昏沉沉，但看到最后页面还是非常开心。
我给目前为止这八篇博文取了不同的名字，也算是记录了自己的心路历程，像是通关打怪一样，来到这里，我消耗了很多能量值，但是我的能力等级已经和刚刚开启关卡时的我全然不同了。
当然这个项目并不会就此结束，因为它没有最终的关卡，学习永远不会止步，希望我的装备升级后，再来此开拓新的天地，来日方长，我们不见不散！
OS：下一篇也许就叫开天辟地吧～
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
