最近寫(xiě)vue摘符，有時(shí)候打包后贤斜，想看看打包后的dist的效果，就想搭建一個(gè)簡(jiǎn)易的服務(wù)器议慰，就去看了看node蠢古，發(fā)現(xiàn)node真的是特別強(qiáng)大可以實(shí)現(xiàn)搭建服務(wù)器并連接數(shù)據(jù)庫(kù)后，繼而實(shí)現(xiàn)前后端同時(shí)寫(xiě)在一個(gè)項(xiàng)目里别凹，相當(dāng)全棧的不容錯(cuò)過(guò)啊
node環(huán)境先安裝好草讶。
首先npm init
去初始化package.json
然后npm install express --save
//test.js
var express = require("express");
var app = express();
//mysql 連接方法 你首先要有自己本地的mysql， 我這里就不細(xì)說(shuō)了炉菲，這個(gè)host如果你有線上服務(wù)器的堕战，可以寫(xiě)線上的
var mysql = require('mysql');
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '123456',
database: 'html'
});
//增
app.get("/addStudent", (req, res) => {
const id = req.query.id;
const name = req.query.name;
const age = req.query.age;
const sql = 'INSERT INTO student (id,name,age) VALUES (?,?,?)'
const value = [id, name, age];
connection.query(sql, value, (error, data) => {
if (error) {
var result = {
"status": "500",
"message": "服務(wù)器錯(cuò)誤"
}
return res.jsonp(result);
} else {
var result = {
"status": "200",
"message": "success",
data: data
}
return res.jsonp(result);
}
});
})
//查
app.get("/selectStudent", (req, res) => {
const id = req.query.id
const sql = 'select * from student where id =?'
connection.query(sql, id, (error, data) => {
if (error) {
var result = {
"status": "500",
"message": error
}
return res.jsonp(result);
} else {
var result = {
"status": "200",
"message": "success",
data: data
}
return res.jsonp(result);
}
});
})
//刪
app.get("/deleteStudent",(req,res)=>{
const id = req.query.id
const sql = "delete from student where id = ?"
connection.query(sql,id,(error,data)=>{
if (error) {
var result = {
"status": "500",
"message": error
}
return res.jsonp(result);
} else {
var result = {
"status": "200",
"message": "success",
data: data
}
return res.jsonp(result);
}
})
})
//如果沒(méi)有路徑取靜態(tài)目錄
app.use(express.static("public"));
// Listen
app.listen(3000)
console.log("我啟動(dòng)了")
靜態(tài)頁(yè)面我們放到public 下index.html里,代碼我直接貼進(jìn)來(lái)，其中public跟test.js同級(jí)
就是通過(guò)引入jq拍霜，然后get向后臺(tái)發(fā)請(qǐng)求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div>
學(xué)生id：<input type="text" name="id">
學(xué)生姓名：<input type="text" name="name">
學(xué)生年齡：<input type="text" name="age">
<input type="button" id="btn1" value="添加">
</div>
<div>
學(xué)生id：<input type="text" name="idSearch">
<input type="button" id="btn2" value="搜索">
<div class="isShowClass">
</div>
</div>
<script type="text/javascript">
function deleteBox(id) {
$.get("/deleteStudent",{
id:id
},function(date){
if(data.status){
alert("刪除成功");
}
})
}
$(function() {
$("#btn2").click(function() {
var id = $("input[name=idSearch]").val();
$.get("/selectStudent", {
id: id,
}, function(date) {
let str = ''
let data = date.data;
for (var i = 0; i < data.length; i++) {
str += "<p>" + data[i].id + "===" + data[i].name + "===" + data[i].age + "</p><input onclick='deleteBox(" + id + ")' type='button' id='btn3' value='刪除'>"
}
console.log(str)
$(".isShowClass").html(str)
})
})
$("#btn1").click(function() {
var id = $("input[name=id]").val();
var name = $("input[name=name]").val();
var age = $("input[name=age]").val();
$.get("/addStudent", {
id: id,
name: name,
age: age
}, function(data) {
console.log(data)
})
})
})
</script>
</body>
</html>
這個(gè)看似簡(jiǎn)單嘱丢，實(shí)際上可以做好多事情，最簡(jiǎn)單的就是如果你買(mǎi)了服務(wù)器和域名祠饺，可以直接放到服務(wù)器上越驻，就可以實(shí)現(xiàn)一個(gè)線上地址，實(shí)現(xiàn)全棧的目標(biāo)道偷。
