node.js调用数据库MySQL，然后渲染到前端页面上
开始
调用及初始化
//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，调用ejs框架用到了res.render('/',result) 渲染到前端页面。
由此可以推出只要让ejs的render的参数result作为query()获得的result就可以实现将数据库的数据渲染到前端页面。
那我们把它们集合到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为查询到的结果
res.render('index',{
students:result
});
});
})
connection.end();
app.listen(8001);
index.ejs
Document
接下来我要用ejs渲染数据库数据到前端
学号
姓名
分数
<% for(var i=0;i
<%= students[i].id %>
<%= students[i].name %>
<%= students[i].score %>
<% } %>
总共有 <%= students.length %> 个学生
查看运行结果
完成任务，把数据库的数据渲染到了前端的页面上，可以实现前后端数据同步，但是这还缺一定的交互性，比如实现前端可以直接操作数据库数据，这个可能就需要get/post表单了
这里得分清一下表单的get/post方法区别
- GET - 从指定的资源请求数据。
- POST - 向指定的资源提交要被处理的数据
所以还是用GET比较简单吧！
首先我们得在前端界面创建一个form标签。
//省略了头文件
建立一个form表单,与数据库数据交互
学号
姓名
分数
<% for(var i=0;i
<%= student[i].id %>
<%= student[i].name %>
<%= student[i].score %>
<% } %>
我仅仅只在表格前面加一个输入框，和一个按钮。
我的目的就是可以在输入框输入，然后点击搜索后，表格数据会变更。
我的表单是get请求。
那我就需要在app.js加多一个get请求。
首先可以通过
//获取输入框的值
app.get('/search',function(req,res){
console.log(req.query);
res.send();
}
用到了req,query
然后看一下地址
http://localhost:8005/search?data_name=chen
通过get请求请求到了数据，看看console出什么
也就是说可以通过req,query.data_name获取chen
获取到的这个写入sql语句不就可以了。
var searchInfo=req.query.data_name;
var selectSql="select * from student where name='"+searchInfo+"'";
那接下来加多一个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为查询到的结果
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+"'";
//匹配到输入框的内容就会显示
connection.query(selectSql,function (err,result) {
//result为查询到的结果
if(err){
console.log(err.message);
}
res.render('index',{
student:result
});
});
})
app.listen(8005);
上面仅仅加多了一个get请求而已
什么原理？
我的理解是 前端通过form表单的get请求以及action='/search'，会跳转到地址下的search。在node.js下写一个app.get()，会实时检测到如果有/search的请求，就会执行。然后通过用res.render()渲染原来的网页index。重新刷新网页。
达到我们的目的。
但是！说一个小细节：搜索应该是匹配，而不是等于。
var selectSql='select * from student where name REGEXP \''+searchInfo+'\'';
修改了下sql语句。
这样才符合逻辑！
查询达到了目的。
那还有新建，删除，修改呢？
em....先加多几个标签
（虽然很丑，把基础弄好先把）
修改
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';
//匹配到输入框的内容就会显示
connection.query(Sql,function (err,result) {
//result为查询到的结果
if(err){
console.log('[select error]'+err.message);
}
res.render('index',{
student:result
});
});
})
看看效果
Yeah ~ 修改达到了目的！
新建
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';
//匹配到输入框的内容就会显示
connection.query(Sql,function (err,result) {
//result为查询到的结果
if(err){
console.log('[select error]'+err.message);
}
res.render('index',{
student:result
});
});
})
插入也完成了。感觉一样的道理。
删除
//删除
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';
//匹配到输入框的内容就会显示
connection.query(Sql,function (err,result) {
//result为查询到的结果
if(err){
console.log('[select error]'+err.message);
}
res.render('index',{
student:result
});
});
})
删除也完成！
每个部分的原理其实基本都很类似，通过get/post方式获取值，再用sql语句执行。
之后还有排序，创建多个表等的功能需要实现。
而且当前这个界面还不是我想要的，我想要的是实现一个真正的后台管理平台。
实现前端与数据库交互。
加油！