使用express框架实现增删改查
背景：数据库实训，要求我们实现以下对数据库表的增删改查，node超挫，大家看功能实现了就行
前端：vue+elementui构建页面，使用jQuery封装的ajax发送数据请求（复习一下）
后端：node+express创建数据接口
数据库：MySQL
首先，数据库设计表，填写几条记录（一张表很简单，就不做介绍）
其次，使用elementui快速构建简单操作展示页面
页面很简单，相信大家都可以写出来
数据请求：
query
//获取所有学生信息（GET请求）
$.get('http://接口地址', {
db: this.db//传入这个参数是为了三张表的切换，控制查询不同的表
}, data => {
console.log(JSON.parse(data));
var len = JSON.parse(data).length;
if (len == 0) {
this.tableData = JSON.parse(data);
} else {
for (let i = 0; i < len; i++) {
this.tableData.splice(i, 1, JSON.parse(data)[i]);
}
}
});
delete
//删除学生信息
$.get('http:接口地址', {
name: this.tableData[index].sname,//通过学生姓名删除
db: this.db
}, data => {
this.tableData = [];//预置空，使数据实时更新到页面，有风险，这里这种做法是不对的
for (let i = 0; i < JSON.parse(data).length; i++) {
this.tableData.splice(i, 1, JSON.parse(data)[i]);
}
});
update
//修改学生信息
$.post('接口地址', {
name: this.tableData[index].sname,//以姓名作为where 的条件进行修改
//修改的内容
sname: this.form1.name,
sno: this.form1.num,
sbirth: this.form1.birth,
ssex: this.form1.sex,
scredit: this.form1.credit,
scollege: this.form1.college
},
data => {
for (let i = 0; i < JSON.parse(data).length; i++) {
this.tableData.splice(i, 1, JSON.parse(data)[i]);
}
});
add
//添加学生信息
$.post('接口地址', {
db: this.db,//控制选择不同的表
//添加的学生信息
sname: this.form2.name,
sno: this.form2.num,
sbirth: this.form2.birth,
ssex: this.form2.sex,
scredit: this.form2.credit,
scollege: this.form2.college
},
data => {
this.tableData = [];//预置空，使数据实时更新到页面，有风险，这里这种做法是不对的
for (let i = 0; i < JSON.parse(data).length; i++) {
this.tableData.splice(i, 1, JSON.parse(data)[i]);
}
});
将服务端写在server.js里面
server.js
首先，连接MySQL数据库
//创建mysql链接对象
const mysql = require('mysql');
//创建连接，链接数据库
const conn = mysql.createConnection({
host: 'localhost',
port: 3306,
user: 'summer',
password: '123',
database: 'demo'
});
//连接mysql
conn.connect((err) => {
if (err) {
console.log(err)
return;
}
console.log('mysql is connected successfully');
});
query
//创建路由规则,查询所有信息
app.get('/getStudent', (request, response) => {
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//注意：使用url.parse(request.url, true).query.db获取参数数据时，需要导入url包（const url = require("url");）
var db = url.parse(request.url, true).query.db || app.newDb.db;//定义在app上的对象newDb，app.newDb.db作用是重定向时选择不同的表
//查询所有数据
var sqlAll = "SELECT * FROM " + db;
conn.query(sqlAll, function(err, result) {
if (err) {
console.log('[SELECT ERROR]:', err.message);
} else {
//设置响应体
response.send(JSON.stringify(result));
}
});
});
delete
app.get('/delete', (request, response) => {
response.header('Access-Control-Allow-Origin', '*');
var name = url.parse(request.url, true).query.name || url.parse(request.url, true).query.sno;
var db = url.parse(request.url, true).query.db;
if (db == "student") {
var sqlDelete = "DELETE FROM " + db + " WHERE sname = '";
} else if (db == "db2") {
var sqlDelete = "DELETE FROM " + db + " WHERE cname = '";
} else if (db == "db3") {
var sqlDelete = "DELETE FROM " + db + " WHERE sno = '";
}
conn.query(sqlDelete + name + "'", function(err, res) {
if (err) {
console.log("删除失败" + err);
} else {
console.log(name + "删除成功!");
}
});
app.newDb.db = db;
response.redirect('/getStudent');
});
add
app.post('/add', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
//注意：使用req.body获取参数数据时，需要导入body-parser包
var db = req.body.db;
if (db == "student") {
var sname = req.body.sname;
var sno = req.body.sno;
var sbirth = req.body.sbirth;
var ssex = req.body.ssex;
var scredit = req.body.scredit;
var scollege = req.body.scollege;
var sqlAdd = "insert into " + db + "(sname,sno,sbirth,ssex,scredit,scollege) values('";
conn.query(sqlAdd + sname + "','" + sno + "','" + sbirth + "','" + ssex + "','" + scredit + "','" + scollege + "')", function(err, res) {
if (err) {
console.log("添加失败" + err);
} else {
console.log("添加成功");
}
});
} else if (db == "db2") {
//……
} else if (db == "db3") {
//……
}
app.newDb.db = db;
res.redirect('/getStudent');//重定向到数据查询那里
});
update
app.post('/update', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
var db = req.body.db;
if (db == "student") {
var name = req.body.name;
var sname = req.body.sname;
var sno = req.body.sno;
var sbirth = req.body.sbirth;
var ssex = req.body.ssex;
var scredit = req.body.scredit;
var scollege = req.body.scollege;
var sqlUpdate = "update " + db + " set sname = '" + sname + "',sno = '" + sno + "',sbirth = '" + sbirth + "',ssex = '" + ssex + "',scredit = '" + scredit + "',scollege = '" + scollege + "' where sname = '" + name + "'";
} else if (db == "db1") {
} else if (db == "db2") {
}
conn.query(sqlUpdate, function(err, res) {
if (err) {
console.log("修改失败" + err);
} else {
console.log("修改成功");
}
});
app.newDb.db = db;
res.redirect('/getStudent');
});
注意：
创建路由和增删改查需要注意顺序，如果查询语句在路由规则外面，那么数据就只会查询一次，即很有可能你会遇到，数据增删改查成功了，但是视图没有更新的问题，但是视图不更新，还有可能是因为vue中接受数据时，对数组或者对象的某些操作姿势不对
例如:在vue中直接通过下标修改数组的的某个元素，或者直接改变数组的长度，不会触发视图更新（官方文档）
我对于以上问题的解决方案是使用splice，splice操作可以触发视图更新，还有可以触发更新的对数组的操作：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
其他对 数组、对象 修改可以触发视图更新的操作
//1.数组修改
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
//2.对象修改
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)
//3. 数组对象直接修改属性，可以触发视图更新
this.array[0].show = true;
this.array.forEach(function(item){
item.show = true;
});
//4. splice方法修改数组，可以触发视图更新
this.array.splice(indexOfItem, 1, newElement)
//5. 数组赋值为新数组，可以触发视图更新
this.array = this.array.filter(...)
this.array = this.array.concat(...)
//6. 用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新
//Object.assign的单层的覆盖前面的属性，不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})
//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})
//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})
5595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
