初学nodejs,涉及内容太多,总找不到如何能处理数据之间的交换、提取,显示。查找众多资料,终于调试成功,为免遗忘,特记录如下:
安装nodejs,mongo数据库在这里不做记录了。
1、编写server.js文件:(C)
var express = require(‘express’);
var app = express();
var path = require(‘path’);
var db = require(‘./db1.js’)
app.use(bodyParser.json());//数据JSON类型
app.use(bodyParser.urlencoded({ extended: false }));//解析post请求数据
app.use(express.static(path.join(__dirname, ‘public’)));
app.get(‘/allstudent’, function (req, res) {
db.getAllStudent((arr) => {
res.json(arr);
});
});
app.get(‘/jsonp.html’, function (req, res) {
res.sendFile(__dirname + ‘/json.html’);
});
});
app.listen(1338);//监听localhost:1338端口
2、编写数据库访问文件db1.js(M)
const MongoClient = require(‘mongodb’).MongoClient;
var ObjectID = require(‘mongodb’).ObjectID;
const url = ‘mongodb://localhost:27017’;
const dbName = ‘xuesheng’;
function getAllStudent(callback){
MongoClient.connect(url, {useNewUrlParser: true}, function(err, client) {
if(err) {
console.log(“连接数据库失败,请mongod开机”);
return;
}
// Use the admin database for the operation
const db = client.db(dbName);
console.log(“数据库连接成功”);
db.collection(‘banji’).find({}).toArray(function (err,results){
if(err) {
console.log(“查询数据失败!”);
return;
}
console.log(results);
callback(results)
//关闭数据库
client.close();
})
})
}
exports.getAllStudent = getAllStudent;
3、编写数据展示json.html(V)
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>JSON数据获取</title>
<script src=”https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js”></script>
<style type=”text/css”>
table{
width: 78vw;
margin: auto;
}
table,tr,td,th{
border-collapse: collapse;
border: 1px solid #ccc;
}
tr:first-child {
background-color: skyblue;
}
#bb{
margin-top: 40px;
}
</style>
</head>
<body>
<table id=”bb”>
</table>
<script>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// arr=JSON.parse(this.responseText); //直接将接收返回的字符转换成JSON对象也可以
arr=eval(“(“+this.responseText+”)”); //利用eval加括号转换成一个js对象,从而可以访问其中的值
str=”<tr><th>姓名</th><th>年龄</th><th>性别</th><th>籍贯</th></tr>”;
arr.forEach((item) => {
str += `<tr><td>${item.uname}</td><td>${item.age}</td><td>${item.sex}</td><td>${item.provice}</td></th>`
});
document.getElementById(“bb”).innerHTML =str;
}
};
xmlhttp.open(“GET”, “/allstudent”, true);
xmlhttp.send();
</script>
</body>
</html>
4 启动服务
node server
5 在IE中访问127.0.0.1:1338/json.html
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/288812.html