node.js調(diào)用數(shù)據(jù)庫(kù)MySQL，然后渲染到前端頁(yè)面上
開(kāi)始
調(diào)用及初始化
//express框架
var express=require('express');
var app=express();
//mysql框架
var mysql=require('mysql');
var connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'root',
port:'3306',
database:'school'
})
connection.connect();
//ejs框架
var ejs=require('ejs');
//配置ejs
app.set('view engine','ejs');
app.use(express.static('public'));
由前文可知兔仰，node.js 連接MySQL用到了 connection.query()獲取到result，調(diào)用ejs框架用到了res.render('/',result) 渲染到前端頁(yè)面庄呈。
由此可以推出只要讓ejs的render的參數(shù)result作為query()獲得的result就可以實(shí)現(xiàn)將數(shù)據(jù)庫(kù)的數(shù)據(jù)渲染到前端頁(yè)面鸯乃。
那我們把它們集合到express框架的app.get()里面。
app.js
var express=require('express');
var app=express();
var mysql=require('mysql');
var connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'root',
port:'3306',
database:'school'
})
connection.connect();
var ejs=require('ejs');
app.set('view engine','ejs');
app.use(express.static('public'));
app.get('/',function (req,res) {
var mySql='select * from student';
connection.query(mySql,function (err,result) {
//result為查詢到的結(jié)果
res.render('index',{
students:result
});
});
})
connection.end();
app.listen(8001);
index.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="global.css">
</head>
<body>
<p>接下來(lái)我要用ejs渲染數(shù)據(jù)庫(kù)數(shù)據(jù)到前端</p>
<table border="1" cellpadding="15">
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>分?jǐn)?shù)</th>
</tr>
<% for(var i=0;i<students.length;i++) { %>
<tr>
<td><%= students[i].id %></td>
<td><%= students[i].name %></td>
<td><%= students[i].score %></td>
</tr>
<% } %>
</table>
<h4>總共有 <%= students.length %> 個(gè)學(xué)生</h4>
</body>
</html>
查看運(yùn)行結(jié)果
完成任務(wù)玄呛，把數(shù)據(jù)庫(kù)的數(shù)據(jù)渲染到了前端的頁(yè)面上阅懦，可以實(shí)現(xiàn)前后端數(shù)據(jù)同步，但是這還缺一定的交互性徘铝，比如實(shí)現(xiàn)前端可以直接操作數(shù)據(jù)庫(kù)數(shù)據(jù)耳胎，這個(gè)可能就需要get/post表單了
這里得分清一下表單的get/post方法區(qū)別
- GET - 從指定的資源請(qǐng)求數(shù)據(jù)。
- POST - 向指定的資源提交要被處理的數(shù)據(jù)
所以還是用GET比較簡(jiǎn)單吧惕它！
首先我們得在前端界面創(chuàng)建一個(gè)form標(biāo)簽怕午。
//省略了頭文件
<body>
<p>建立一個(gè)form表單,與數(shù)據(jù)庫(kù)數(shù)據(jù)交互</p>
<form action="/search" method="get">
<input type="text" name="data_name">
<input type="submit" value="搜索">
<br>
</form>
<br>
<table border="1" cellpadding="15">
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>分?jǐn)?shù)</th>
</tr>
<% for(var i=0;i<student.length;i++) { %>
<tr>
<td><%= student[i].id %></td>
<td><%= student[i].name %></td>
<td><%= student[i].score %></td>
</tr>
<% } %>
</table>
</body>
我僅僅只在表格前面加一個(gè)輸入框，和一個(gè)按鈕淹魄。
我的目的就是可以在輸入框輸入郁惜，然后點(diǎn)擊搜索后，表格數(shù)據(jù)會(huì)變更甲锡。
我的表單是get請(qǐng)求兆蕉。
那我就需要在app.js加多一個(gè)get請(qǐng)求羽戒。
首先可以通過(guò)
//獲取輸入框的值
app.get('/search',function(req,res){
console.log(req.query);
res.send();
}
用到了req,query
然后看一下地址
http://localhost:8005/search?data_name=chen
通過(guò)get請(qǐng)求請(qǐng)求到了數(shù)據(jù)，看看console出什么
也就是說(shuō)可以通過(guò)req,query.data_name獲取chen
獲取到的這個(gè)寫入sql語(yǔ)句不就可以了恨樟。
var searchInfo=req.query.data_name;
var selectSql="select * from student where name='"+searchInfo+"'";
那接下來(lái)加多一個(gè)app.get
var express=require('express');
var app=express();
var mysql=require('mysql');
var connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'root',
port:'3306',
database:'school'
})
connection.connect();
var ejs=require('ejs');
app.set('view engine','ejs');
app.use(express.static('public'));
app.get('/',function (req,res) {
var mySql='select * from student';
connection.query(mySql,function (err,result) {
//result為查詢到的結(jié)果
if(err){
console.log(err.message);
}
res.render('index',{
student:result
});
});
})
app.get('/search',function(req,res){
console.log(req.query);
searchInfo=req.query.data_name;
var selectSql="select * from student where name='"+searchInfo+"'";
//匹配到輸入框的內(nèi)容就會(huì)顯示
connection.query(selectSql,function (err,result) {
//result為查詢到的結(jié)果
if(err){
console.log(err.message);
}
res.render('index',{
student:result
});
});
})
app.listen(8005);
上面僅僅加多了一個(gè)get請(qǐng)求而已
什么原理半醉？
我的理解是 前端通過(guò)form表單的get請(qǐng)求以及action='/search'，會(huì)跳轉(zhuǎn)到地址下的search劝术。在node.js下寫一個(gè)app.get()缩多，會(huì)實(shí)時(shí)檢測(cè)到如果有/search的請(qǐng)求，就會(huì)執(zhí)行养晋。然后通過(guò)用res.render()渲染原來(lái)的網(wǎng)頁(yè)index衬吆。重新刷新網(wǎng)頁(yè)。
達(dá)到我們的目的绳泉。
但是逊抡！說(shuō)一個(gè)小細(xì)節(jié)：搜索應(yīng)該是匹配，而不是等于零酪。
var selectSql='select * from student where name REGEXP \''+searchInfo+'\'';
修改了下sql語(yǔ)句冒嫡。
這樣才符合邏輯！
查詢達(dá)到了目的四苇。
那還有新建孝凌，刪除，修改呢月腋？
em....先加多幾個(gè)標(biāo)簽
（雖然很丑蟀架，把基礎(chǔ)弄好先把）
修改
UPDATE 表名稱 SET 列名稱 = 新值 WHERE 列名稱 = 某值
//修改
app.get('/search',function(req,res){
console.log(req.query.update_info_before);
searchInfoBefore=req.query.update_info_before;
searchInfoAfter=req.query.update_info_after;
var updateSql="update student set name = ? where name=?";
var updateSql_Params = [searchInfoAfter, searchInfoBefore];
connection.query(updateSql,updateSql_Params,function (err,result) {
if(err) {
console.log('更新失敗' + err);
return;
}
console.log('更新成功!');
})
var Sql='select * from student';
//匹配到輸入框的內(nèi)容就會(huì)顯示
connection.query(Sql,function (err,result) {
//result為查詢到的結(jié)果
if(err){
console.log('[select error]'+err.message);
}
res.render('index',{
student:result
});
});
})
看看效果
Yeah ~ 修改達(dá)到了目的！
新建
INSERT INTO 表名稱 VALUES (值1, 值2,....)
//插入
app.get('/search',function(req,res){
var insertSql = 'insert into student(id,name,score) values(?,?,?)';
var insertSql_Params = [req.query.insert_Id,req.query.insert_Name,req.query.insert_Score];
connection.query(insertSql,insertSql_Params,function (err,result) {
if(err) {
console.log('插入失敗' + err);
return;
}
console.log('更新成功!');
})
var Sql='select * from student';
//匹配到輸入框的內(nèi)容就會(huì)顯示
connection.query(Sql,function (err,result) {
//result為查詢到的結(jié)果
if(err){
console.log('[select error]'+err.message);
}
res.render('index',{
student:result
});
});
})
插入也完成了榆骚。感覺(jué)一樣的道理片拍。
刪除
//刪除
app.get('/search',function(req,res){
var deleteSql = " delete from student where name='"+req.query.delete_info+"'";
connection.query(deleteSql,function (err,result) {
if(err) {
console.log('刪除失敗' + err);
return;
}
console.log('刪除成功!');
})
var Sql='select * from student';
//匹配到輸入框的內(nèi)容就會(huì)顯示
connection.query(Sql,function (err,result) {
//result為查詢到的結(jié)果
if(err){
console.log('[select error]'+err.message);
}
res.render('index',{
student:result
});
});
})
刪除也完成！
每個(gè)部分的原理其實(shí)基本都很類似妓肢，通過(guò)get/post方式獲取值捌省，再用sql語(yǔ)句執(zhí)行。
之后還有排序碉钠，創(chuàng)建多個(gè)表等的功能需要實(shí)現(xiàn)纲缓。
而且當(dāng)前這個(gè)界面還不是我想要的，我想要的是實(shí)現(xiàn)一個(gè)真正的后臺(tái)管理平臺(tái)放钦。
實(shí)現(xiàn)前端與數(shù)據(jù)庫(kù)交互色徘。
加油恭金！
