Node.js 的学习（四）分别连接MongoDB与MySQL数据库，实现增删查改功能
一、Node.js 访问MongoDB 数据库
MongoDB 对许多平台都提供驱动可以访问数据库，如C#、Java、Node.js等。
1.1、安装MongoDB访问驱动
命令如下：
全局安装驱动：npm install mongodb -g
在当前项目中引入：npm install mongodb --save
1.2、连接数据库
const { MongoClient } = require("mongodb"); //导入依赖对象mongo客户端
let url="mongodb://127.0.0.1:27017"; //数据库连接字符串
let client=new MongoClient(url); //实例化一个mongo客户端
async function run(){
try{
await client.connect(); //连接
await client.db("nfit").command({ping:1}); //向数据库nfit发送命令
console.log("连接数据库成功！");
}
finally{
await client.close();
}
}
run().catch(console.log);
1.3、添加数据
const { MongoClient } = require("mongodb"); //依赖MongoClient
let client=new MongoClient("mongodb://127.0.0.1:27017"); //实例化一个客户端
async function run(){
try{
let db=await client.db("nfit"); //获取数据库
let students=await db.collection("students"); //获取集合，表
let doc={id:202201,name:"tom",age:19}; //将添加的数据对象
let result=await students.insertOne(doc); //执行向数据库中添加数据并等待响应结果
console.log(result);
}
finally{
await client.close(); //关闭数据库
}
}
run().catch(console.log);
1.4、添加多条数据
const { MongoClient } = require("mongodb"); //依赖MongoClient
let client=new MongoClient("mongodb://127.0.0.1:27017"); //实例化一个客户端
async function run(){
try{
let db=await client.db("nfit"); //获取数据库
let students=await db.collection("students"); //获取集合，表
let docs=[{id:202202,name:"rose",age:17},{id:202203,name:"mark",age:18}]; //将添加的数据对象
let result=await students.insertMany(docs); //执行向数据库中添加数据并等待响应结果
console.log(result);
}
finally{
await client.close(); //关闭数据库
}
}
run().catch(console.log);
1.5、修改数据
const { MongoClient } = require("mongodb");
let client=new MongoClient("mongodb://127.0.0.1:27017");
async function run(){
try{
let db=await client.db("nfit"); //获取数据库
let students=await db.collection("students"); //获取集合
let filter={id:202201}; //要更新的数据的过滤条件
let result=await students.updateOne(filter,{$set:{name:"汤姆"}}); //执行更新单条数据
console.log(result);
}
finally{
await client.close(); //关闭
}
}
run().catch(console.log);
1.6、查询数据
1.6.1、查询单条记录
const { MongoClient } = require("mongodb");
let client=new MongoClient("mongodb://127.0.0.1:27017");
async function run(){
try{
let db=await client.db("nfit"); //获取数据库
let students=await db.collection("students"); //获取集合
let filter={id:202201}; //过滤条件
let obj=await students.findOne(filter); //根据过滤条件查找单条数据
console.log(obj);
}
finally{
await client.close(); //关闭
}
}
run().catch(console.log);
1.6.2、查询多条记录
const { MongoClient } = require("mongodb");
let client=new MongoClient("mongodb://127.0.0.1:27017");
async function run(){
try{
let db=await client.db("nfit"); //获取数据库
let students=await db.collection("students"); //获取集合
let query={id:{$gte:202201}}; //查询条件是id大于等于202201
let cursor=await students.find(query); //执行查询并返回游标对象
let result=[]; //学生数组，返回包装用
await cursor.forEach(data=>result.push(data)); //遍历游标，取出数据
console.log(result);
}
finally{
await client.close(); //关闭
}
}
run().catch(console.log);
1.7、删除数据
const { MongoClient } = require("mongodb");
let client=new MongoClient("mongodb://127.0.0.1:27017");
async function run(){
try{
let db=await client.db("nfit"); //获取数据库
let students=await db.collection("students"); //获取集合
let filter={id:202201}; //要删除的数据的过滤条件
let result= await students.deleteOne(filter); //执行删除
console.log(result);
}
finally{
await client.close(); //关闭
}
}
run().catch(console.log);
1.8、连接MongoDB数据库，实现curd、图片上传（使用element-ui框架）功能的完整代码如下：
路由 Api 接口：
// 导入模块 var express = require('express'); var router = express.Router(); var _ = require("lodash"); var path = require("path"); var multer = require('multer'); // 图片上传 // 文件上传的内置方法 var imgName = ""; // 这个是保存在路径里的名称 const storage = multer.diskStorage({ // 文件存储路径 destination(req, file, callback) { // 上传的图片放到本地的文件夹里面 let imgUrl = "E:/qd/11. node.js/练习/test05_mongoDB/public/images" // 回调函数 callback(null, imgUrl) }, filename(req, file, callback) { // 后缀名，到时候添加数据的时候，先把它设为空，然后进入图片上传页，然后做修改的操作 imgName = _.random(0, 9999999999999) + path.extname(file.originalname); callback(null, imgName); // 把生成的名称放在这里 } }); // 也是内置函数 const addfild = multer({ storage }); // 连接数据库 const { MongoClient, ObjectId } = require("mongodb"); let url = "mongodb://127.0.0.1:27017"; let client = new MongoClient(url); // 传参数：需要的数据，i(如果它为1，就查询，2就添加...)，res：返回给客户端的数据 async function run(bookDate, i, res, req) { try { await client.connect(); let db = await client.db("book"); // 连接数据库的 let book = db.collection("bookInfo"); // 连接集合的 let result = ""; // SQL语句 // 执行哪个执行语句 if (i == 1) { result = await book.find().toArray(); // 查询所有数据的 } if (i == 2) { // 获取图书编号 let id = parseInt(req.params.id); // 查看id是什么类型的 console.log(typeof id); // 执行语句 result = await book.deleteOne({ id: id }); } if (i == 3) { // 获取通过post请求传递过来的参数 let inputText = req.body; // 获取编号最大的图书，实现编号自动增长 let maxObj = await (book.find().sort({_id:-1}).limit(1)).toArray(); // 获取id和图片名称，把id 和 图片名称存进数据库里面 inputText.id = parseInt(maxObj[0].id) + 1; inputText.picture = imgName; // // 执行语句 result = await book.insertOne(inputText); console.log(inputText); console.log(maxObj); console.log(inputText.id); } if (i == 4) { console.log(parseInt(req.params.id)); result = await book.find({ id: parseInt(req.params.id) }).toArray(); console.log(result); } if (i == 5) { let inputText = req.body; result = await book.updateOne({id:inputText.id}, {$set: {name: inputText.name,picture: imgName,author: inputText.author,price: inputText.price}}); console.log(result); } // 返回客户端的信息 res.json({ status: "成功！", data: result }); } finally { // 通常写关闭数据库的，但是，目前还不需要，因为只能查询一次，之后就关闭了！ // await client.close(); } } // 查询所有数据 router.get("/", (req, res, next) => { // 调用run 方法，传参数 run("", 1, res, req); }); // 删除 router.delete("/:id", (req, res, next) => { run("", 2, res, req); }); // 上传图片的 // 在这里传内置函数过去 router.post("/file", addfild.single('file'), (req, res, next) => { }) // 添加 router.post("/", (req, res, next) => { run("", 3, res, req); }) // 渲染数据 router.get("/:id", (req, res, next) => { run("", 4, res, req); }) // 修改数据 router.put("/", (req, res, next) => { run("", 5, res, req); }) module.exports = router;
ejs 页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="stylesheets/book.css"> <link rel="stylesheet" href="stylesheets/index.css"> </head> <body> <div id="app"> <h3>图书管理系统</h3> <div id="addbtn"> <!-- <div id="sort"> <button id="sortId" @click="sortId">按id倒序</button> </div> <div id="search"> <input type="text" name="" id="searchText"> <button id="searchbtn" @click="search">搜索</button> </div> --> <button id="appBook">新增图书 + </button> </div> <table> <tr> <th>编号</th> <th>书名</th> <th>封面</th> <th>作者</th> <th>价格</th> <th>操作</th> </tr> <tr v-for="(b, i) in book" :key="b.id"> <td>{{ b.id }}</td> <td>{{ b.name }}</td> <td> <div id="picture" :style="{backgroundImage: 'url(/images/' + b.picture + ')'}"></div> </td> <td>{{ b.author }}</td> <td>{{ b.price }}</td> <td> <button id="update" @click="edit(b.id)">编辑</button> <button id="delete" @click="del(b.id)">删除</button> </td> </tr> </table> <!-- 模态框 --> <div id="modal_box"> <!--修改or添加 --> <div id="mdinfo"> <table> <tr> <td colspan="2" id="td">新增图书信息</td> </tr> <tr> <td>书名：</td> <td> <input type="text" id="name" class="text" v-model="bookObj.name" /> </td> </tr> <tr> <td>作者：</td> <td> <input type="text" id="author" class="text" v-model="bookObj.author" /> </td> </tr> <tr> <td>价格：</td> <td> <input type="text" id="price" class="text" v-model="bookObj.price" /> </td> </tr> <tr> <td>封面：</td> <td style="display: flex;"> <el-upload ref="mYupload" action="string" :http-request="handleChange" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> <!-- <div class="Browse" :style="{backgroundImage: 'url(/images/' + + ')'}"></div> --> </td> </tr> <tr> <td colspan="2"> <button id="btn1" class="btn" @click="save">提交</button> <button id="btn2" class="btn" @click="cancel">取消</button> </td> </tr> </table> </div> </div> </div> </body> <script src="javascripts/jquery-1.12.4.js"></script> <script src="javascripts/axios.js"></script> <script src="javascripts/vue.js"></script> <script src="javascripts/index.js"></script> <script> var path = "http://127.0.0.1:8082/bookApi/"; var app = new Vue({ el: "#app", data: { book: [], bookObj: { "id": 0, "name": "", "picture": "", "author": "", "price": "" }, // 文件上传 dialogImageUrl: '', dialogVisible: false, rawName: "" }, created() { // 查询所有的数据 this.selectData(); // 把图片的名称赋值 this.bookObj.picture = this.rawName; }, methods: { // 查询 selectData() { axios .get(path) .then((res) => { this.book = res.data.data; }) }, // 删除 del(id) { if (confirm("您确定要删除这数据吗？")) { axios .delete(path + id) .then((res) => { console.log(id); console.log(res); alert("删除成功！"); // 调用查询全部的数据 this.selectData(); }) } }, // 文件上传的样式 // 删除 handleRemove(file, fileList) { }, // 放大 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, // 添加封面图 handleChange(file) { // 如果缩略图这个元素在的话，就删除这个这个，然后重新上传一个（其实就是为了方便修改图片） if ($('.el-upload-list__item').length > 0) { // 删除缩略图图片 $(".el-upload-list__item").remove(); } let formDate = new FormData(); formDate.append('file', file.raw); // console.log(file.raw.name); formDate.append("file", file); axios .post(path + "file", formDate) .then((data) => { }); this.rawName = file.raw.name; }, // 添加图书与修改图书 save() { if (this.bookObj.id) { // 修改 axios .put(path, this.bookObj) .then((data) => { if (data.data.status === "成功！") { // console.log(data.data.data); alert("修改成功！"); this.bookObj = { id: 0, name: "", picture: "", author: "", price: "" }; $("#modal_box").css("display", "none"); // 删除缩略图图片 $(".el-upload-list__item").remove(); // 重新查询一次数据 this.selectData(); } }) } else { // 添加 axios .post(path, this.bookObj) .then((data) => { if (data.data.status === "成功！") { // console.log(data.data.data); alert("添加成功！"); this.book.id = 0; // 因为是添加，所以id要重置为0 this.bookObj = { id: 0, name: "", picture: "", author: "", price: "" }; $("#modal_box").css("display", "none"); // 删除缩略图图片 $(".el-upload-list__item").remove(); // 重新查询一次数据 this.selectData(); } }) } }, // 编辑图书 edit(id) { $("#td").html("修改图书信息"); $("#modal_box").slideToggle(); axios .get(path + id) .then((data) => { this.bookObj = data.data.data[0]; // 寻找ul节点，然后创建li节点，并给li节点添加一个类，最后把li添加到ul里面 var ul = document.querySelector('ul'); var li = document.createElement("li"); li.className = "el-upload-list__item"; // 再创建一个img节点 var img = document.createElement("img"); //设置 img 图片地址、宽、高 img.src = "images/" + this.bookObj.picture; img.width = 148; img.height = 148; ul.appendChild(li); li.appendChild(img); // console.log(this.bookObj); }) }, // 模态框取消按钮 cancel() { $("#modal_box").css("display", "none"); $(".text").val(""); // 删除缩略图图片 $(".el-upload-list__item").remove(); } } }); // 模态框显示 $("#appBook").click(function () { $("#modal_box").slideToggle(); $("#td").html("新增图书信息"); }); </script> </html>
运行结果：
二、Node.js 访问 MySQL 数据库
2.1、导入mysql模块
npm i mysql;
2.2、连接并查询
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query("select id,name,sex from student",(err,results)=>{//执行查询
if(err) throw err; //如果有错误，则抛出异常
console.log(JSON.parse(JSON.stringify(results))); //转换并输出查询结果
conn.release(); //释放连接
});
});
2.3、带参数查询
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query("select id,name,sex from student where sex=?",['boy'],(err,results)=>{//执行查询
if(err) throw err; //如果有错误，则抛出异常
console.log(JSON.parse(JSON.stringify(results))); //转换并输出查询结果
conn.release(); //释放连接
});
});
2.4、新增数据
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
let sql="insert into student(name,sex) values(?,?)";
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,['tom','boy'],(err,results)=>{//执行添加，指定参数
if(err) throw err; //如果有错误，则抛出异常
console.log(results); //输出结果
conn.release(); //释放连接
});
});
2.5、便捷增加
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
let sql="insert into student set ?";
let student={name:"rose",sex:"girl"};
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,student,(err,results)=>{//执行添加，指定参数对象
if(err) throw err; //如果有错误，则抛出异常
console.log(results); //输出结果
conn.release(); //释放连接
//process.exit(1); //关闭应用
});
});
2.6、更新数据
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
let sql="update student set name=?,sex=? where id=?";
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,['mark','boy',34],(err,results)=>{//执行更新，指定参数
if(err) throw err; //如果有错误，则抛出异常
console.log(results); //输出结果
conn.release(); //释放连接
});
});
2.7、便捷更新数据
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
let sql="update student set ? where id=?";
let student={name:"jone",sex:'boy'};
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,[student,33],(err,results)=>{//执行更新，指定参数
if(err) throw err; //如果有错误，则抛出异常
console.log(results); //输出结果
conn.release(); //释放连接
});
});
2.8、删除数据
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"gomall" //数据库,port可以省去
});
let sql="delete from student where id=?";
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,[33],(err,results)=>{//执行查询
if(err) throw err; //如果有错误，则抛出异常
if(results.affectedRows===1){ //如果影响行数为1
console.log("删除成功");
}
else{
console.log("删除失败");
}
conn.release(); //释放连接
});
});
2.9、释放连接
//查询 pool.getConnection((err,conn)=>{ pool.query("select * from student",(err,results)=>{ results=JSON.parse(JSON.stringify(results)); results.forEach((stu,index)=>{ console.log(stu.id,stu.name,stu.sex); }); conn.release(); process.exit(1); }); });
2.10、路由文件参考：
// 1.导入mysql模块 const mysql = require('mysql') // 2.建立和MySQL数据库的联系 const db = mysql.createPool({ host: '127.0.0.1', //数据库的ip地址 user: 'root', //登录数据库的账号 password: 'hoshi1234', //登录数据库的密码 datebase: 'my_dv_01' //指定要操作那个数据库 }) // 3.测试mysql模块是否正常工作 db.query('select 1',(err, results) => { // mysql工作期间报错了 if(err) return console.log(err.message); // 能够正常执行SQL语句 console.log(results); // 返回 [ RowDataPacket { '1': 1 } ] }) // 4.查询 users 表中所有数据 const sqlStr = 'select * from my_dv_01.users' db.query(sqlStr ,(err, results) => { // mysql工作期间报错了 if(err) return console.log(err.message); // 能够正常执行SQL语句 console.log(results); // 返回 users表的字段 }) // 5.插入数据到 users 表中 // 要插入到表中的数据 const user = { usersname: 'benben', password:'886886' } // 待执行的 SQL语句 ，英文问号 ? 代表占位符(SQL语法) const sqlStr2 = 'insert into users (usersname, password) VALUES (?,?)' // 使用数组的形式，依次为 ? 占位符指定具体的位置 db.query(sqlStr2, [user.usersname , user.password],(err, results) => { // mysql工作期间报错了 if(err) return console.log(err.message); // 如果执行的是insert into这个插入语句，则results是一个对象 // 可以通过results.affectedRows判断是否成功 if(results.affectedRows === 1) { console.log('插入数据成功'); // 打开MySQL的users表格也能看到新数据 // 当前数据只有4条，本条数据id为什么是5？ // 因为之前有过4的数据，但是被删除了，id具有唯一性，删除了也不能被其他数据使用 } }) // 插入数据的便捷方式 const user = { usersname: 'niuniu', password:'000000' } // 定义待执行的 SQL 语句 const sqlStr = 'insert into my_dv_01.users set ?' // 执行 SQL 语句 db.query(sqlStr, user,(err, results) => { if(err) return console.log(err.message); if(results.affectedRows === 1) { console.log('插入数据成功'); } }) // 如何更新用户的信息（UPDATE 语句用于更新表中已存在的记录） // 要插入到表中的数据 const user = { id: 6, usersname: '犇犇', password:'000111' } // 定义SQL语句 const sqlStr = 'update my_dv_01.users set usersname=?, password=? where id=?' // 执行SQL语句 db.query(sqlStr,[user.usersname, user.password, user.id], (err, results) => { if(err) return console.log(err.message); if(results.affectedRows === 1) { console.log('插入数据成功'); } }) // 更新用户信息的便捷方式（数据对象的每个属性和字段一一对应的情况下可使用） const user = { id: 6, usersname: '夸夸牛', password:'000111' } // 定义SQL语句 const sqlStr = 'update my_dv_01.users set ? where id=?' // 执行SQL语句 db.query(sqlStr,[user, user.id], (err, results) => { if(err) return console.log(err.message); if(results.affectedRows === 1) { console.log('插入数据成功'); } }) // 删除数据 // 定义SQL语句 const sqlStr = 'delete from my_dv_01.users where id=?' // 执行SQL语句 // SQL语句中有多个占位符，则必须使用数组为每个占位符指定具体的值 // 如果只有一个占位符，则可以省略数组 db.query(sqlStr,5,(err,results) => { if(err) return console.log(err.message); if(results.affectedRows === 1) { console.log('删除数据成功'); } }) // 标记删除 // 使用delete语句会把数据真正删除掉，非常危险，一般情况下推荐使用标记删除，类似于修改status字段的状态，比如更新成1表示删除； // 定义SQL语句 const sqlStr = 'update my_dv_01.users set status=? where id=?' // 执行SQL语句 db.query(sqlStr,[1, 3],(err, results) => { if(err) return console.log(err.message); if(results.affectedRows === 1) { console.log('标记删除成功'); } })
2.11、封装代码
访问数据库的代码存在许多的重复，为了便于维护与扩展可以将数据库访问代码封装起来。
- 创建一个 mysqlutil.js 文件，代码如下：
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"bookInfo" //数据库,port可以省去
});
function query(sql,param){
return new Promise((resolve,reject)=>{
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,param||[],(err,results)=>{//执行sql
try{
if(err) reject(err);
resolve(JSON.parse(JSON.stringify(results)));
}
finally{
conn.release(); //释放连接
}
});
});
});
}
module.exports={query};
创建一个js文件，测试代码如下：
const mysqlutil=require("./mysqlutil"); //导入mysql工具模块
//查询所有
//mysqlutil.query("select * from student").then(console.log).catch(console.log);
//查询并带参数
//mysqlutil.query("select * from student where id=?",[1]).then(console.log).catch(console.log);
//执行更新
let sql="update student set ? where id=?";
let student={name:"张二",sex:"girl"};
//mysqlutil.query(sql,[student,1]).then(console.log).catch(console.log);
async function findAll(){
try{
let result= await mysqlutil.query("select * from student");
return result;
}
catch(err){
throw err;
}
}
findAll().then(console.log);
2.12、连接MySQL数据库，实现curd、图片上传（使用element-ui框架）功能的完整代码如下：
封装代码 util 包：
const mysql=require("mysql"); //依赖mysql模块
//创建连接池对象
let pool=mysql.createPool({
host:"localhost", //主机
user:"root", //用户名
password:"123456", //密码
database:"bookInfo" //数据库,port可以省去
});
function query(sql,param){
return new Promise((resolve,reject)=>{
pool.getConnection((connErr,conn)=>{ //获取连接对象
pool.query(sql,param||[],(err,results)=>{//执行sql
try{
if(err) reject(err);
resolve(JSON.parse(JSON.stringify(results)));
}
finally{
conn.release(); //释放连接
}
});
});
});
}
module.exports={query};
路由 Api 接口：
const mysqlutil = require("./mysqlutil"); //导入mysql工具模块
var express = require("express");
var router = express.Router();
async function findAll(sql, param) {
try {
let result = await mysqlutil.query(sql, param);
return result;
} catch (err) {
throw err;
}
}
// 查询
router.get("/", (req, res) => {
let sql = "select * from book";
findAll(sql, "").then(result => {
res.json({
status: "ok",
data: result
});
});
});
// 删除
router.delete("/:id", (req, res) => {
let sql = "delete from book where id=?";
findAll(sql, [req.params.id]).then(result => {
console.log(result);
res.json({
status: "ok",
data: result
});
});
});
// 添加
router.post("/", (req, res) => {
let sql = "insert into book set ?";
let inputTest = req.body;
findAll(sql, inputTest).then(result => {
res.json({
status: "ok",
data: result
});
});
});
// 显示信息
router.get("/:id", (req, res) => {
let sql = "select * from book where id= ?";
findAll(sql, [req.params.id]).then(result => {
res.json({
status: "ok",
data: result
});
});
});
// 修改
router.put("/", (req, res) => {
let sql = "update book set ? where id=?";
let inputTest = req.body;
findAll(sql, [inputTest, inputTest.id]).then(result => {
res.json({
status: "ok",
data: result
});
});
});
module.exports = router;
ejs 页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>连接MySQL实现增删查改 —— 图书管理系统</title> <!-- 图标 --> <!-- ejs里的图片路径直接不用管public ！！！ --> <link rel="shortcut icon" href="/images/taozi.svg" type="image/x-icon"> <!-- 样式 --> <link rel="stylesheet" href="/stylesheets/book.css"> </head> <body> <div id="app"> <h3>图书管理系统</h3> <div id="addbtn"> <button id="appBook">新增图书 + </button> </div> <table> <tr> <th>编号</th> <th>书名</th> <th>封面</th> <th>作者</th> <th>价格</th> <th>操作</th> </tr> <tr v-for="(b, i) in book" :key="b.id"> <td>{{ b.id }}</td> <td>{{ b.name }}</td> <td> <div id="picture" :style="{backgroundImage: 'url(/images/' + b.picture + ')'}"></div> </td> <td>{{ b.author }}</td> <td>{{ b.price }}</td> <td> <button id="update" @click="edit(b.id)">编辑</button> <button id="delete" @click="del(b.id)">删除</button> </td> </tr> </table> <!-- 模态框 --> <div id="modal_box"> <!--修改or添加 --> <div id="mdinfo"> <table> <tr> <td colspan="2" id="td">新增图书信息</td> </tr> <tr> <td>书名：</td> <td> <input type="text" id="name" class="text" v-model="bookObj.name" /> </td> </tr> <tr> <td>作者：</td> <td> <input type="text" id="author" class="text" v-model="bookObj.author" /> </td> </tr> <tr> <td>价格：</td> <td> <input type="text" id="price" class="text" v-model="bookObj.price" /> </td> </tr> <tr> <td>封面名称：</td> <td> <input type="text" id="pictures" class="text" v-model="bookObj.picture" /> </td> </tr> <tr> <td colspan="2"> <button id="btn1" @click="save" class="btn">提交</button> <button id="btn2" class="btn">取消</button> </td> </tr> </table> </div> </div> </div> </body> <script src="javascripts/jquery-1.12.4.js"></script> <script src="javascripts/axios.js"></script> <script src="javascripts/vue.js"></script> <script> var path = "http://127.0.0.1:8082/bookApi/"; var app = new Vue({ el: "#app", data: { book: [], bookObj: { id: 0, name: "", picture: "", author: "", price: "" }, // 获取编号最大的图书。即最新添加的编号 maxId: "" }, created() { this.seleBook(); }, methods: { seleBook() { axios .get(path) .then((data) => { this.book = data.data.data; // console.log(data.data.data); }) .catch((err) => { throw err; }); }, // 传该行对应的对象，和第几行的索引 del(id) { if (confirm("您确定要删除这数据吗？")) { axios .delete(path + id) .then((data) => { alert("删除成功！"); this.seleBook(); }) } }, save() { if (this.bookObj.id) { // 修改 axios .put(path, this.bookObj) .then((data) => { if (data.data.status === "ok") { alert("修改成功！"); this.book = data.data.data; this.bookObj = { id: 0, name: "", picture: "", author: "", price: "" }; $("#modal_box").css("display", "none"); this.seleBook(); } }) } else { console.log(this.bookObj); // 添加 axios .post(path, this.bookObj) .then((data) => { if (data.data.status === "ok") { alert("添加成功！"); this.book.id = 0; // 因为是添加，所以id要重置为0 this.bookObj = { id: 0, name: "", picture: "", author: "", price: "" }; $("#modal_box").css("display", "none"); this.seleBook(); } }) } }, // 显示数据到模态框 edit(id) { $("#td").html("修改图书信息"); $("#modal_box").slideToggle(); axios .get(path + id) .then((data) => { this.bookObj = data.data.data[0]; }) .catch((err) => { throw err; }) }, // 搜索 search() { console.log($("#searchText").val()); axios .get(path + ($("#searchText").val())) .then((data) => { this.book = [data.data.data]; // console.log(this.book.id); console.log(this.book); }) .catch((err) => { throw err; }) }, // 按id倒序 sortId() { axios .get(path + "book/sort") .then((data) => { this.book = data.data.data; }) .catch((err) => { throw err; }) }, // 文件上传的样式 // 删除 handleRemove(file) { console.log(file); }, hold() { $("#modal_box").css("display", "none"); } }, }); // 模态框显示 $("#appBook").click(function () { $("#modal_box").slideToggle(); $("#td").html("新增图书信息"); }); $("#btn2").click(function () { $("#modal_box").css("display", "none"); $(".text").val(""); }); </script> </html>
