最近写vue,有时候打包后,想看看打包后的dist的效果,就想搭建一个简易的服务器,就去看了看node,发现node真的是特别强大可以实现搭建服务器并连接数据库后,继而实现前后端同时写在一个项目里,相当全栈的不容错过啊
node环境先安装好。
首先npm init
去初始化package.json
然后npm install express --save
//test.js
var express = require("express");
var app = express();
//mysql 连接方法 你首先要有自己本地的mysql, 我这里就不细说了,这个host如果你有线上服务器的,可以写线上的
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": "服务器错误"
}
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);
}
})
})
//如果没有路径取静态目录
app.use(express.static("public"));
// Listen
app.listen(3000)
console.log("我启动了")
静态页面我们放到public 下index.html里,代码我直接贴进来,其中public跟test.js同级
就是通过引入jq,然后get向后台发请求
学生id:
学生姓名:
学生年龄:
学生id:
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 += "
" + data[i].id + "===" + data[i].name + "===" + data[i].age + "
"}
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)
})
})
})
这个看似简单,实际上可以做好多事情,最简单的就是如果你买了服务器和域名,可以直接放到服务器上,就可以实现一个线上地址,实现全栈的目标。