安装mysql模块
npm i mysql -S
在项目中引入mysql模块
const mysql = require("mysql")
建立数据库连接
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: "yunheshop",
port: '3306'
})
构建sql语句,执行并返回结果
一、查询
前端代码部分:
axios.get('/product',{
params: {
键值对
}
})
.then((res)=>{
console.log(res.data)
})
Express后端部分的代码
// 数据接口逻辑 (Mock数据 模拟数据)
app.get("/product", (req, res) => {
//接收参数
let { productName } = req.query;
// let sql = "select * from product where productName = 'w1' and price >300"
// let sql = "select * from product where productName = ? and price > ?"
// 模糊查询
// let sql = "select * from product where productName like ?"
// conn.query(sql,[`%${productName}%`],function(err,result){
let sql = "select * from product where productName = ?"
conn.query(sql, [productName], function (err, result) {
if (err) {
console.log('查询数据库失败');
} else {
// console.log(result);
let data;
if (result.length) {
data = {
code: 0,
list: result
}
} else {
data = {
code: 1,
msg: '没有结果 '
}
}
res.send(data)
}
})
})
二、新增
特别注意: 要使用Restful风格的API
post请求的参数,需要借助于body-parser模块来解析
前端代码部分:
axios.post("/product",{键值对})
.then((res)=>{
console.log(res.data)
})
后端部分代码
- 安装body-parser
npm i body-parser -S
//引入解析post请求参数的模块
const bodyParser = require("body-parser")
// 解析表单数据application/x-www-form-urlencoded
// extended: true表示用qs模块来解析post数据,false表示用原生的queryString模块来解析
app.use(bodyParser.urlencoded({ extended: false }))
// 解析post请求以json格式传递的参数 application/json
app.use(bodyParser.json())
......
//添加商品
app.post("/product",(req,res)=>{
//接收参数
let { productName, price , imgUrl} = req.body;
let sql = "insert into product (productName,price,imgUrl) values (?,?,?)"
conn.query(sql,[productName, price , imgUrl],(err,result)=>{
if (err){
console.log('增加失败');
return;
}
let data;
if (result.affectedRows === 1){
data = {
code: 0,
msg: '添加成功'
}
}else{
data = {
code: 1,
msg: '添加失败'
}
}
res.send(data)
})
})
三、删除
前端代码
function delProduct() {
let delProductBtn = $(".delProduct")
delProductBtn.onclick = function () {
let id = 42;
axios.delete("/product", {
params: {
id
}
})
.then((res) => {
console.log(res.data);
})
}
}
后端代码
//删除商品
router.delete("/product",(req,res)=>{
//接收参数
let { id} = req.query;
let sql = "delete from product where id = ?"
conn.query(sql,[id],(err,result)=>{
if (err){
console.log('增加失败');
return;
}
let data;
if (result.affectedRows === 1){
data = {
code: 0,
msg: '删除成功'
}
}else{
data = {
code: 1,
msg: '删除失败'
}
}
res.send(data)
})
})
更新商品信息
前端代码
//单击按钮,修改商品
function updateProduct() {
let updateProductBtn = $(".updateProduct")
updateProductBtn.onclick = function () {
let productInfo = {
id: 38,
productName: '护手霜',
price: 23,
imgUrl: '23.jpg'
}
axios.put("/product", productInfo)
.then((res) => {
console.log(res.data);
})
}
}
后端代码
//更新商品
router.put("/product",(req,res)=>{
//接收参数
let { id,productName,price,imgUrl} = req.body;
console.log(req.body);
let sql = "update product set productName=?,price=?,imgUrl=? where id = ?"
conn.query(sql,[productName,price,imgUrl,id],(err,result)=>{
if (err){
console.log('服务器异常');
return;
}
let data;
if (result.affectedRows === 1){
data = {
code: 0,
msg: '更新成功'
}
}else{
data = {
code: 1,
msg: '更新失败'
}
}
res.send(data)
})
})