一、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>