mysql.js文件相关
将第四节的mysql.js文件拷贝到项目中
运行mysql.js
node mysql.js
npm install mysql --save
save将mysql安装到这个项目,更重要的是将它保存进package.json
npm install
安装所有package.json中的依赖项
打开routes/index.js,准备修改
原来自动创建出的代码见上
我们需要加入代码
var express = require('express');
var router = express.Router();
var mysql = require('../mysql.js');//mysql.js与index.js并不在同一个文件夹下
/* 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,publish_date " +
"from fetches where title like '%" + request.query.title + "%'";
mysql.query(fetchSql, function(err, result, fields) {
response.writeHead(200, {
"Content-Type": "application/json"
});
response.write(JSON.stringify(result));
response.end();
});
});
module.exports = router;
为了方便比较,附上第七节后端代码
var express = require('express'); //须安装express
var mysql = require('./mysql.js') //见第4篇的mysql.js
var app = express();
//app.use(express.static('public'));
app.get('/7.03.html', function(req, res) {
res.sendFile(__dirname + "/" + "7.03.html"); //如果请求的是7.03.html,向前端发送7.03.html即不断刷新原来的页面
})
app.get('/process_get', function(req, res) {//发送process_get,从mysql中调取信息发送给前端
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' }); //设置res编码为utf-8,向前端发送信息时,建议带上writehead
//sql字符串和参数
var fetchSql = "select url,source_name,title,author,publish_date from fetches where title like '%" +
req.query.title + "%'";//mysql语句
mysql.query(fetchSql, function(err, result, fields) {
console.log(result);//类似于之前的vals,向命令行中发送result
res.end(JSON.stringify(result));//向前端发送字符化的result
});
})
var server = app.listen(8080, function() {
console.log("访问地址为 http://127.0.0.1:8080/7.03.html")
})//8080端口,第二个参数回调函数
创建后端
search.html
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!--设置编码,防乱码>
<title>
Welcome to Search!
</tilte>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<!--引入jquery,bootcdn已经挂了,采用jsdelivr>
</header>
<body>
<form>
<br/>
标题:
<input type="text" name="title_text">
<input class="form-submit" type="button" value="查询">
<!--button常与js配合>
</form>//
<div class="cardLayout" style="margin: 10px 0px">
<table width="100%" id="record2"></table>
<!--div是一个块级元素,常使用class和id,将文档分出一个部分进行管理>
</div>
<script>
$(document).ready(function() {
//读取后进行操作函数
$("input:button").click(function() {//input:button即上方的button,click为它注册一个函数
$.get('/process_get?title=' + $("input:text").val(), function(data) {//等我们打入关键词查询时网址栏会出现/process_get?title=xxx,val返回所填关键词.
$("#record2").empty();//上面的table元素,#加一个id表示一个元素,$为动态运算,empty让表格清空
$("#record2").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
'<td>title</td><td>author</td><td>publish_date</td></tr>');//append是指在被选元素的末尾插入一级子元素,此处插入第一行标志,效果可以见下一部分,jquery填加td tr是十分常见的,td为单元格.
for (let list of data) {//let没有变量提升,有块级作用域,此处遍历元素
let table = '<tr class="cardLayout"><td>';
Object.values(list).forEach(element => {
table += (element + '</td><td>');
});//list为遍历中的一个对象,forEach设置一个操作函数,使table动态修改.
$("#record2").append(table + '</td></tr>');//与上面tr,td对应
}
});
});
});
</script>
<!--script为js代码部分>
</body>
</html>
执行代码
node bin/www
功能补充
forever start bin/www
forever start crawler1.js
forever start crawler2.js
forever start crawler3.js
forever使用见第四节
这样实现了后台运行代码
具体实现可以登上
www.guofjpt.cn:3000/index.html
或者www.guofjpt.cn:3000
(已失效)
将search.html命名为index.html,就不用在访问时多打/search.html
后面可能进行功能的扩展
补充http状态码
它在之前的图片中出现
304就是其中一种
为了简便,我附上http状态码的百科
http状态码
最新 -2020/4/28
由于一些错误操作,tomcat和原来的express框架已经失效,所以上面的网址失效
正计划重新配置服务器,由于时间问题,无法继续进行这一项目。