node.js+express+mysql+axios 实现对数据的增删查改完美方案（附源码）

最新推荐文章于 2023-06-25 17:53:31 发布

原创最新推荐文章于 2023-06-25 17:53:31 发布 · 2.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#mysql #vue #node.js #https #restful

本文详细介绍了如何使用Node.js、Express框架和MySQL数据库进行数据的增删查改操作，包括数据库连接、数据表创建、数据插入、查询、更新和删除的完整流程，同时提供了实际代码示例。

node.js+express+mysql+axios 实现对数据的增删查改完美方案

准备工作

提示：安装好 mysql数据库，node.js

完成图

在这里插入图片描述

1.创建数据库及创建数据表

//创建数据库 books
create database books;
//创建数据库表 定义id，书名，作者，描述
create table newbooks 
(id INT(255) AUTO_INCREMENT PRIMARY KEY, 
book_name VARCHAR(255),
 book_author VARCHAR(255),book_desc 
VARCHAR(255));
//插入几条数据
insert into newbooks values (1,'三国演义','罗贯中','中国四大名著1');
insert into newbooks values (2,'水浒传','施耐庵','中国四大名著2');
insert into newbooks values (3,'红楼梦','曹雪芹','中国四大名著3');
insert into newbooks values (4,'西游记','吴承恩','中国四大名著4');

在这里插入图片描述

2. 创建文件夹及安装express,mysql等依赖

//一定要初始化
npm init -y
//安装mysql，express,body-parser,cors
npm i -S express
npm install body-parser --save
npm install cors --save

3. 创建一个db.js 封装一个数据库操作文件(可直接复制修改自己信息即可用)

// 操作数据库通用API
// 引用mysql
const mysql = require('mysql')
// 封装一个连接数据库 函数
exports.base = (sql,data,callback) => {
	// 配置数据库信息
 const connection = mysql.createConnection({
  host     : 'localhost',
  user     : '',  //是用自己的数据库账号
  password : '', //使用自己的数据库密码
  database : 'books'
});
 // 建立数据库连接
connection.connect();
 
 // 数据库操作 是异步的
connection.query(sql,data, function (error, results, fields) {
  if (error) throw error;
	  callback(results);
});
 // 结束数据库操作
connection.end();
}

4.创建增删查改的js文件

//引用mysql依赖
const mysql = require('mysql')
//引用express依赖
const express = require('express');
//引用body-parser 解析post传参
const bodyParser = require('body-parser');
//express实例化
const app = express();
//引用封装的数据库操作文件
const db = require('./db.js');
//引用 cors  
const cors = require('cors');
//关闭Form表单传值
app.use(bodyParser.urlencoded({extended: false}));
//使用Json传值
app.use(bodyParser.json());
//使用cors 解决跨域问题
app.use(cors());

//1.Post请求 插入一条数据 输入对应的插入信息后 点提交时接口
app.post('/books', (req,res) => {
	let param = req.body;
	let sql = 'insert into newbooks set ?';
     let data = {
		book_name: param.book_name,
		book_author: param.book_author,
		book_desc: param.book_desc
	}
db.base(sql,data,(results) => {
//简单返回了下  ，这里可以做返回状态
		res.json('创建成功！');
})	
});

//2.查询出数据库表中所有的数据
app.get('/books',(req,res) => {
	let sql = 'select * from newbooks'
	let data = null
	db.base(sql,data,(results) => {
		res.json(results)
	})
})

//通过ID查询出一条相应的信息 前端点击编辑时接口
app.get('/books/:id',(req,res) => {
	let sql = 'select * from newbooks where id=?'
	let data = [req.params.id]
	db.base(sql,data,(results) => {
		res.json(results)
	})
})

//根据ID删除相应的信息 前端点击删除时接口
app.delete('/books/:id',(req,res) => {
	let sql = 'delete from newbooks where id= ?'
	let data = [req.params.id]
	db.base(sql,data,(results) => {
		res.json('删除成功！')
	})
})

//通过 前端点击编辑获取到对应的信息，修改后点击提交时用接口
app.put('/books/edit/:id',(req,res) => {
	let sql = 'update newbooks set book_name= ?,book_author= ?,book_desc= ? where id= ?'
	let data = [req.body.book_name,req.body.book_author,req.body.book_desc,req.body.id]
	db.base(sql,data,(results) => {
		res.json('修改成功！')
	})
})
app.listen(3000, () => {
	console.log('running...');
})

5.在文件夹创建一个测试的THML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.grid table {
				width: 500px;
				text-align: center;
				border-collapse: collapse;
			}

			.grid tr th {
				background-color: orange;
			}

			.grid tr td {
				border: 1px dashed orange;
			}

			h1 {
				margin-left: 15%;
			}

			.book {
				border-bottom: 1px dashed greenyellow;
				background-color: orange;
				width: 500px;
				padding: 10px 0px 10px 0px;
			}

			.grid {
				margin-left: 30%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="grid">
				<div>
					<h1>图书管理</h1>
					<div class="book">
						<div>书名：<input type="text" v-model="goods.book_name" /></div>
						<div>作者：<input type="text" v-model="goods.book_author" /></div>
						<div>描述：<input type="text" v-model="goods.book_desc" /></div>
						<div><button type="button" @click="handle">提交</button></div>
						<div><button type="button" @click="updateBtn">修改</button>
						</div>
					</div>
				</div>

				<table>
					<tr>
						<th>编号</th>
						<th>名称</th>
						<th>作者</th>
						<th>描述</th>
						<th>操作</th>
					</tr>
					<tr :key='item.id' v-for="item in books">
						<td>{{item.id}}</td>
						<td>{{item.book_name}}</td>
						<td>{{item.book_author}}</td>
						<td>{{item.book_desc}}</td>
						<td><a href="" @click.prevent="editBtn(item.id)">编辑</a>
							<span>|</span>
							<a href="" @click.prevent="deleteBook(item.id)">删除</a></td>
					</tr>

				</table>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
			axios.defaults.baseURL = 'http://localhost:3000';
			axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
			const app = new Vue({
				el: '#app',
				created() {
					this.getBooks()
				},
				data: {
					books: [],
					goods: {
						id: '',
						book_name: '',
						book_author: '',
						book_desc: ''
					}
				},
				methods: {
					// 获取数据表所有信息
					async getBooks() {
						const {
							data: res
						} = await axios.get('/books')
						this.books = res
						console.log(this.books);
					},
					// 添加数据
					async handle() {
						const {
							data: res
						} = await axios.post('/books', this.goods)
						this.getBooks()
					},
					//删除数据
					async deleteBook(id) {
						const {
							data: res
						} = await axios.delete(`/books/${id}`)
						console.log(res);
						this.getBooks()
					},
					//编辑数据 通过id获取数据
					async editBtn(id) {
						const {
							data: res
						} = await axios.get(`/books/${id}`)
						console.log(res);
						this.goods = res[0]
					},
					//修改按钮 时完成修改
					async updateBtn() {
						const {
							data: res
						} = await axios.put('/books/edit/' + this.goods.id, this.goods)
						this.getBooks()
					}
				}
			})
		</script>
	</body>
</html>