写这篇博文时我的心情是原地爆炸的。
因为我在做 Node.js + Express 框架的管理系统,我想从数据库读数据放到html页面用 table 标签显示出来,然而网上的各种教程全是:
读取数据库内容后直接console输出;
没有完整的哪个文件写哪,也就是看不懂;
或者各种代码混到一起;
而我实际上需要的是后台获取数据库内容,以参数形式传到html的js代码里面,然后解析获取我要的信息,再封装到表格的各种标签里面。
人生如此多艰!希望这篇教程能帮到大家。(我也是新手,有错请多多指教)
整体介绍
大家建立的基于Node.js + Express 的项目目录一般是这样的:( db.js 是我自己加的)
PS:安装 Node.js + Express 请参考别的教程。
此时你要安装和 Node.js 配套的mysql连接器,网上也挺多这个教程的。
然后在routes文件夹里面有 index.js。这个js是放置各种函数和操作的。我这里的教程只有简单查询。
代码
第一步:新建db.js,就我图片上那个,代码是:
// 创建数据库连接
const mysql = require("mysql")
const connection = mysql.createConnection({
host: "localhost",
port: 3306,
user: "root",
password: "123456789",
database: "student_1"
})
connection.connect((err) => {
if (err) { console.log("连接失败") }
else { console.log("连接成功") }
})
let query=(sql, callback)=>{
connection.query(sql, function (err, rows) {
callback(err, rows);
});
}
exports.query = query
第二步:在你的 index.js 里面增加代码
var express = require('express');
var router = express.Router();
//上面两行和最后一行是所有 index.js 都得有的,不是我这个查询操作单独的
let db=require("../db")
router.get('/scyj2', function (request, response) {
let sql="select * from student";
let mydata = [];
db.query(sql,(err,rows)=>{
if(err){
response.json({err:"chucuole"})
}
else{
for(let em of rows)
{
//console.log(em);
let record = [em['Sno'], em['Sname'], em['Ssex'], em['Sage'], em['Sdept']];
mydata.push(record);
}
console.log(mydata);
response.writeHead(200, {
"Content-Type": "application/json"
});
response.write(JSON.stringify(mydata));
response.end();
};
});
});
module.exports = router;
额,给大家看下我的数据库截图,要不然你看不懂上面的代码了:
大家要注意到代码里面有一句console.log(mydata);没啥用,调试用的,不过他的输出结果很重要,这是我传递给html的,他的输出是:
是不是把数据库的内容提取出来了?实际上这个数据结构是JSON类型,方便传输的。
当你的终端输出这个结构时已经成功了一半了,其实我为了找到一个可以用来传给html的结构,也就是response.write不会报错的结构,我花了很长时间,包括传数组,传对象,最后都不对。把上面那个结构转换为JSON类型就很好了。
最后一步:你的HTML页面,先看代码:
<body>
<div class="cardLayout" style="margin: 10px 0px">
<p style="text-align: center">学生信息表</p>
<table width="100%" id="record2">
<tr class="cardLayout">
<td>Sno</td>
<td>Sname</td>
<td>Ssex</td>
<td>Sage</td>
<td>Sdept</td>
</tr>
<!--js将在此处添加条目-->
</table>
</div>
<script>
$(function () {
$.get('/scyj2', function (data) {
for (let list of data) {
let table = '<tr class="cardLayout"><td>';
let s = '</td><td>';
for (let ele of list) {
table += (ele + s);
}
table += '</td></tr>';
$("#record2").append(table);
}
});
});
</script>
</body>
那段JS代码就是把传过来的数据依次用表格标签封装起来,然后添加到实际页面中。
说明一下,$.get(’/scyj2’, function (data) {它是自动调用我前面在index.js里面写的那个函数router.get(’/scyj2’, function (request, response)的。
写在最后,对于网页每个人的需求都不一样,有时候查不到自己想要的,全是类似但又不同的,花了7个小时搞这个传数据我还算不负苦心人,加油!