var express = require("express"); //映入express 沒有的下載 可以在網上找百度
var mysql = require('mysql'); //引入mysql

var app=express();

app.use(express.static(__dirname + "/public")); //公共 目錄 定義

//配置數據庫信息
var connection = mysql.createConnection({
host : '127.0.0.1',
user : 'root',
password : '',
database : 'study'
});

//連接 connection.connect();

//路徑get請求
app.get("/",function(req,res){
//跨域
res.setHeader("Access-Control-Allow-Origin", "*");

res.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});

//查詢
connection.query('SELECT * FROM `作業`', function (err,data) {
if(err){
console.log(err);
}else{
//console.log(data); //打印數據
res.end(JSON.stringify(data)); 轉化成字符串
}
});
});


//刪除
app.get("/del",function(req,res){
res.setHeader("Access-Control-Allow-Origin", "*");

var id = req.query.aaa; 前臺傳入的id
//console.log(req.query);
//刪除
var delSql = 'DELETE FROM 作業 where id='+id;

//console.log(delSql);
connection.query(delSql,function (err) {
if(err){
res.end("0") 未刪除的時候返回0
}else{
res.end("1") 成功返回1
}
});

});




//添加
app.get("/add",function(req,res){
res.setHeader("Access-Control-Allow-Origin", "*");

console.log(req.query);

//增 插入
var sql = "INSERT INTO `作業` (`id`, `img`, `til`, `price`, `h6`, `day`, `xing`) VALUES (NULL, '"+req.query.img+"', '"+req.query.til+"', '"+req.query.price+"', '"+req.query.h6+"', '"+req.query.day+"', '"+req.query.xing+"')";
console.log(sql)
connection.query(sql,function (err, result) {
if(err){
console.log("錯誤"+err);
res.end("1")
}else{
res.end("2")
}
});


});




//修改
app.get("/xiu/gai",function(req,res){
res.setHeader("Access-Control-Allow-Origin", "*");
console.log(req.query);

//改
var mosql = "UPDATE `作業` SET `img` = '"+req.query.img+"', `til` = '"+req.query.til+"', `price` = '"+req.query.price+"', `h6` = '"+req.query.h6+"', `day` = '"+req.query.day+"', `xing` = '"+req.query.xing+"' WHERE `作業`.`id` ="+req.query.id;
connection.query(mosql,function (err) {
if(err){
console.log(err); //錯誤
}else{
res.end("x") //成功
}
});
});

app.listen(4848);
console.log('4848 running');




// 用ajax渲染數據
$.ajax({
url:"http://127.0.0.1:4848", //路徑
dataType:"json",
success:function(res){
console.log(res);

var str ="";
for(var temp of res){
str +=`<li>
<a href="http://127.0.0.1:4848/user/${temp.id}"><img src="${temp.img}" alt="" val="${temp.img}"/></a>
<p class="p1">${temp.til}</p>
<p><span class="p2">${temp.price}</span>起/人</p>
<input type="button" value="刪除" class="sc" text="${temp.id}" />
<input type="button" value="修改" class="xg" jia="${temp.price}" index="${temp.id}" img="${temp.img}" til="${temp.til}" />
</li>`
}
$(".box ul").append(str); //添加

// 點擊折行刪除
$('.sc').click(function () {
// $(this).parent().remove();
var id = $(this).attr("text");//獲取自定義屬性text id的值
var $that = $(this); //保存this
if(confirm("確定刪除嗎？")){
// console.log(id);ajax發送數據到后臺
$.ajax({
url: 'http://127.0.0.1:4848/del', //路徑
data:{aaa:id}, //歘id值到后臺
success: function (res) {
console.log(res); //后臺返回值 1成功 然后判斷
if(res == 1){
$that.parent().remove();
}else{
alert("失敗")
}
}
});
}
});

點擊按鈕提交數據到后臺
$("#tij").click(function(){

$.ajax({
url:"http://127.0.0.1:4848/xiu/gai",
data:{
img:$(".mo1 input").eq(0).val(), //input框值傳到后臺
til:$(".mo1 input").eq(1).val(),
price:$(".mo1 input").eq(2).val(),
day:$(".mo1 input").eq(3).val(),
h6:$(".mo1 input").eq(4).val(),
xing:$(".mo1 input").eq(5).val(),
id:num
},
success:function(res){
console.log(res);
if(res){
location.reload() //成功刷新頁面 不成功就是else
}else{
console.log("shi");
}
}
})
})

} })
//------------------------------------------------------------------

轉載于:https://www.cnblogs.com/yut99/p/8074621.html

總結

以上是生活随笔為你收集整理的nodejs + Mysql 在前端页面控制后台数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。