node封装对MySQL的操作方法(增删改查)

node对数据库的操作无非就是增删改查,所以封装好方法供以后调用是非常有必要的,总结网上的方法,并亲自测试后,特意记录一下!

  • 特别要注意WHERE 条件的数据类型
  • SQL语句的准确性很关键

第一步 首先封装好连接数据库的方法 直接看代码
配置文件: config.js
代码:

const mysql = require('mysql')

const connectdb=()=>{
  let connection = mysql.createConnection({
    host     : '192.168.1.2',
    port     : '3306',
    user     : 'root',
    password : '123',
    database : 'myfirst'
  })
  return connection;
}

module.exports=connectdb;

第二步封装对数据库的操作方法,注意包含增删改查
文件名称: db.js
代码内容:代码里面注释很详细了,应该都能看懂,不懂可以加我QQ讨论2377200400

const conn = require('./config');
const connection = conn();
// 查询所有数据
let selectAll = (sql,callback)=>{
  connection.query(sql,(err,result)=>{
    if(err){
        console.log('错误信息-',err.sqlMessage);
        let errNews = err.sqlMessage;
        callback(errNews,'');
        return;
    } 
    var string=JSON.stringify(result); 
    var data = JSON.parse(string);
    callback('',data);
    // console.log(string);
  })
}
// 插入一条数据
let insertData = (table,datas,callback)=>{
  var fields='';
  var values='';
  for( var k in datas){
      fields+=k+',';
      values=values+"'"+datas[k]+"',"
  }
  fields=fields.slice(0,-1);
  values=values.slice(0,-1);
  console.log(fields,values);
  var sql="INSERT INTO "+table+'('+fields+') VALUES('+values+')';
  connection.query(sql,callback);
}
// 更新一条数据
let updateData=function(table,sets,where,callback){
    var _SETS='';
    var _WHERE='';
    var keys='';
    var values='';
    for(var k in sets){
        _SETS+=k+"='"+sets[k]+"',";
    }
    _SETS=_SETS.slice(0,-1);
    for(var k2 in where){
      //  _WHERE+=k2+"='"+where[k2]+"' AND ";
      _WHERE+= k2+"="+where[k2];
    }
    // UPDATE user SET Password='321' WHERE UserId=12
    //update table set username='admin2',age='55'   where id="5";
    var sql="UPDATE "+table+' SET '+_SETS+' WHERE '+_WHERE;
    console.log(sql);
    connection.query(sql,callback);
}

// 删除一条数据
let deleteData=function(table,where,callback){
    var _WHERE='';
    for(var k2 in where){
      //多个筛选条件使用  _WHERE+=k2+"='"+where[k2]+"' AND ";
      _WHERE+= k2+"="+where[k2];
    }
    // DELETE  FROM user WHERE UserId=12  注意UserId的数据类型要和数据库一致
    var sql="DELETE  FROM "+table+' WHERE '+_WHERE;
    connection.query(sql,callback);
}


exports.selectAll = selectAll;
exports.insertData = insertData;
exports.deleteData = deleteData;
exports.updateData = updateData;

第三步使用方法,调用
我是以写接口的方式来搞的,主要就是先从注册,登录,修改,删除账户,接口写在了单独的路由页面,
文件在route文件下的base文件下的index.js
代码:

const express = require('express')
const app = express()
const router = express.Router()
const db = require('./../../db/db.js')

// 该路由使用的中间件
/*router.use(function timeLog(req, res, next) {
  console.log('Time: ', new Date());
  next();
});*/

// 定义网站主页的路由
router.get('/', function(req, res) {
  res.send('Birds home page');
});

// 登录接口,并且验证密码--查询方法的使用案例

router.post('/login', function(req, res) {
  let name = JSON.stringify(req.body.name);
  let pwd  = req.body.pwd;
  let resData = {"name":name,"pass":pwd};
  let errText = '',resultData='';
  db.selectAll('select * from user where Account = '+ name,(e,r)=>{
      if(e){
        res.status(200).json({"status":false,"msg":e,"data":[]});
      }
      let tt = r.length ;
      if(tt == 0){
        errText="账号不存在";
      }else if(pwd != r[0].Password){
        errText="密码错误";  
      }else{
        resultData = r[0];
      }
      // console.log(tt,errText);
      res.status(200).json({"status":true,"msg":errText,"data":resultData});
  })
  //res.status(200).json({"status":true,"msg":"","data":resData});
});
// 注册接口 增加的方法使用案例
router.post('/register',(req,res)=>{
  let  name = req.body.names;
  let  password = req.body.pwd;
  let errText = '',resultData='sccusee';
  let saveData = {"Account":name,"Password":password};
  db.insertData('user',saveData,(e,r)=>{
    if(e){
        res.status(200).json({"status":false,"msg":e,"data":[]});
    }
    res.status(200).json({"status":true,"msg":errText,"data":resultData});
  })
})
// 注销接口 删除的方法使用案例
router.post('/cancel',(req,res)=>{
  let datas = req.body;
  let deleteId = {UserId:11};
  console.log(datas);
  db.deleteData('user',deleteId,(e,r)=>{
    if(e){
      return  res.status(200).json({"status":false,"msg":e,"data":''});
    }
    res.status(200).json({"status":true,"msg":"ok","data":'resultData'});
  });

})
// 修改密码接口 修改的方法使用案例
router.post('/modify',(req,res)=>{
  let _where = {UserId : req.body.UserId};
  let _set = {Password :req.body.pwd};

  db.updateData('user',_set,_where,(e,r)=>{
    if(e){
      return  res.status(200).json({"status":false,"msg":e,"data":''});
    }
    res.status(200).json({"status":true,"msg":'ok',"data":'resultData'});
  })
})
module.exports = router;

多说一句,在入口页面app.js需要添加上这个路由

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 我的基础路由文件
const base = require('./routes/base/index.js')

const db = require('./db/db.js')

app.get('/',function(req,res){
  db.selectAll('select * from user',(e,r)=>{
      if(e){
        res.status(200).json({"status":false,"msg":e,"data":[]});
      }
      res.status(200).json({"status":true,"msg":"","data":r});
  })

})



// json 解析 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    next();
});
// 暴露公共资源
app.use(express.static('public'))
app.use('/base',base)
app.listen(8010)

console.log('app run port 8010')

好了这样一套完整的操作就收工了。
可以用下面的代码进行测试:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>
  <form>
    姓名: <input type="text" name="user" id="user">  <br>
    密码: <input type="text" name="password" id="pwd">
  </form>
  <button onclick="submit()">submit</button>

  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  <script type="text/javascript">
    function submit(){
      var qdata = {
          "UserId": $('#user').val(),
          "pwd": $('#pwd').val()
          };
            console.log(qdata)
      $.ajax({
        url:'http://192.168.1.202:8010/base/modify',
        dataType:'json',
        type:'POST',
        data: qdata,
        //contentType:"application/json",
        success: function(result){
          console.log(result)

        },
        error:(error)=>{
          console.log(error)
        }
      })      
    }
  </script>
</body>
</html>
<think>我们正在寻找一个基于Vue3、Node.js和MySQL实现增删改查功能的前后端交互项目示例。根据提供的引用内容,我们可以构建一个简单的示例项目结构。###项目结构1.**前端**:使用Vue3(组合式API)构建用户界面,通过Axios与后端交互。2.**后端**:使用Node.js(Express框架)提供RESTfulAPI。3.**数据库**:使用MySQL存储数据。###后端实现(Node.js+Express+MySQL)首先,创建一个Express服务器,并连接MySQL数据库。####步骤1:初始化项目并安装依赖```bashnpminit-ynpminstallexpressmysqlbody-parsercors```####步骤2:创建数据库连接模块(db.js)```javascript//db.jsconstmysql=require('mysql');//创建连接池constpool=mysql.createPool({host:'localhost',port:'3306',user:'root',password:'Fyl123456',//替换为你的密码database:'test',//替换为你的数据库名multipleStatements:true//允许执行多条SQL语句});//封装查询方法functionquery(sql,params){returnnewPromise((resolve,reject)=>{pool.query(sql,params,(err,results)=>{if(err){reject(err);}else{resolve(results);}});});}module.exports=query;```####步骤3:创建Express服务器(index.js)```javascript//index.jsconstexpress=require('express');constbodyParser=require('body-parser');constcors=require('cors');constquery=require('./db');constapp=express();constport=3000;app.use(cors());app.use(bodyParser.json());//创建路由:获取所有数据app.get('/api/products',async(req,res)=>{try{constsql='SELECT*FROMproduct';constresults=awaitquery(sql);res.json({code:200,data:results});}catch(err){res.status(500).json({code:500,message:err.message});}});//创建路由:添加数据app.post('/api/products',async(req,res)=>{const{name,price}=req.body;try{constsql='INSERTINTOproduct(name,price)VALUES(?,?)';constresult=awaitquery(sql,[name,price]);res.json({code:200,message:'添加成功',data:result.insertId});}catch(err){res.status(500).json({code:500,message:err.message});}});//创建路由:更新数据app.put('/api/products/:id',async(req,res)=>{const{id}=req.params;const{name,price}=req.body;try{constsql='UPDATEproductSETname=?,price=?WHEREid=?';awaitquery(sql,[name,price,id]);res.json({code:200,message:'更新成功'});}catch(err){res.status(500).json({code:500,message:err.message});}});//创建路由:删除数据app.delete('/api/products/:id',async(req,res)=>{const{id}=req.params;try{constsql='DELETEFROMproductWHEREid=?';awaitquery(sql,[id]);res.json({code:200,message:'删除成功'});}catch(err){res.status(500).json({code:500,message:err.message});}});app.listen(port,()=>{console.log(`Serverrunningathttp://localhost:${port}`);});```###前端实现(Vue3)使用Vue3创建前端项目,并通过Axios与后端交互。####步骤1:创建Vue项目```bashnpmcreatevue@latest#选择需要的配置,安装Axiosnpminstallaxios```####步骤2:创建产品列表组件(ProductList.vue)```vue<scriptsetup>import{ref,onMounted}from'vue';importaxiosfrom'axios';constproducts=ref([]);constnewProduct=ref({name:'',price:0});//获取产品列表constfetchProducts=async()=>{try{constresponse=awaitaxios.get('http://localhost:3000/api/products');products.value=response.data.data;}catch(error){console.error('获取产品失败:',error);}};//添加产品constaddProduct=async()=>{try{awaitaxios.post('http://localhost:3000/api/products',newProduct.value);newProduct.value={name:'',price:0};fetchProducts();//刷新列表}catch(error){console.error('添加产品失败:',error);}};//删除产品constdeleteProduct=async(id)=>{try{awaitaxios.delete(`http://localhost:3000/api/products/${id}`);fetchProducts();//刷新列表}catch(error){console.error('删除产品失败:',error);}};onMounted(()=>{fetchProducts();});</script><template><div><h1>产品列表</h1><ul><liv-for="productinproducts":key="product.id">{{product.name}}-¥{{product.price}}<button@click="deleteProduct(product.id)">删除</button></li></ul><div><inputv-model="newProduct.name"placeholder="产品名称"><inputv-model.number="newProduct.price"type="number"placeholder="价格"><button@click="addProduct">添加</button></div></div></template>```###数据库准备在MySQL中创建数据库和表:```sqlCREATEDATABASEtest;USEtest;CREATETABLEproduct(idINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(100)NOTNULL,priceDECIMAL(10,2)NOTNULL);```###运行项目1.启动后端:`nodeindex.js`2.启动前端:`npmrundev`###注意事项-确保MySQL服务已启动。-前后端端口可能冲突,注意配置(前端默认端口5173,后端3000)。-跨域问题:后端使用`cors`中间件解决。###引用说明以上示例参考了引用[1][^1]、引用[2][^2]和引用[3][^3]中的核心代码结构,并针对Vue3进行了更新。§§相关问题§§1.如何优化Vue3与Node.js的交互性能?2.在Node.js中如何处理数据库连接池?3.Vue3项目如何配置代理解决跨域问题?</think>基于 Vue3、Node.js 和 MySQL 实现增删改查功能的前后端交互项目,以下是完整的实现方案: ### 一、项目结构 ``` project/ ├── frontend/ # Vue3 前端 │ ├── src/ │ │ ├── api/ # 接口封装 │ │ ├── views/ # 页面组件 │ ├── backend/ # Node.js 后端 │ ├── db.js # 数据库配置 │ ├── index.js # 主入口 │ ├── routes/ # 路由文件 │ └── database/ # SQL 脚本 ``` ### 二、后端实现 (Node.js + Express) #### 1. 数据库配置 `db.js` ```javascript // 引入 mysql 模块 const mysql = require('mysql'); // 创建连接池 const pool = mysql.createPool({ host: 'localhost', port: '3306', user: 'root', password: 'your_password', // 修改为你的密码 database: 'vue_db', // 数据库名 multipleStatements: true // 允许执行多条SQL }); // 封装查询方法 function query(sql, values) { return new Promise((resolve, reject) => { pool.query(sql, values, (err, results) => { if (err) reject(err); else resolve(results); }); }); } module.exports = query; ``` #### 2. 主入口 `index.js` ```javascript const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const productRoutes = require('./routes/productRoutes'); const app = express(); const PORT = 3000; // 中间件 app.use(cors()); app.use(bodyParser.json()); // 路由 app.use('/api/products', productRoutes); app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); }); ``` #### 3. 产品路由 `routes/productRoutes.js` ```javascript const express = require('express'); const router = express.Router(); const query = require('../db'); // 获取所有产品 router.get('/', async (req, res) => { try { const sql = "SELECT * FROM products"; const results = await query(sql); res.json(results); } catch (err) { res.status(500).json({ error: err.message }); } }); // 添加新产品 router.post('/', async (req, res) => { const { name, price } = req.body; try { const sql = "INSERT INTO products (name, price) VALUES (?, ?)"; const result = await query(sql, [name, price]); res.json({ id: result.insertId, name, price }); } catch (err) { res.status(500).json({ error: err.message }); } }); // 删除产品 router.delete('/:id', async (req, res) => { const id = req.params.id; try { const sql = "DELETE FROM products WHERE id = ?"; await query(sql, [id]); res.json({ message: 'Product deleted' }); } catch (err) { res.status(500).json({ error: err.message }); } }); // 更新产品 router.put('/:id', async (req, res) => { const id = req.params.id; const { name, price } = req.body; try { const sql = "UPDATE products SET name = ?, price = ? WHERE id = ?"; await query(sql, [name, price, id]); res.json({ id, name, price }); } catch (err) { res.status(500).json({ error: err.message }); } }); module.exports = router; ``` ### 三、前端实现 (Vue3) #### 1. API 封装 `src/api/productApi.js` ```javascript import axios from 'axios'; const API_URL = 'http://localhost:3000/api/products'; export default { // 获取所有产品 async getAll() { const response = await axios.get(API_URL); return response.data; }, // 添加产品 async create(product) { const response = await axios.post(API_URL, product); return response.data; }, // 删除产品 async delete(id) { await axios.delete(`${API_URL}/${id}`); }, // 更新产品 async update(id, product) { const response = await axios.put(`${API_URL}/${id}`, product); return response.data; } }; ``` #### 2. 产品列表组件 `src/views/ProductList.vue` ```vue <script setup> import { ref, onMounted } from 'vue'; import productApi from '../api/productApi'; const products = ref([]); const newProduct = ref({ name: '', price: 0 }); // 加载产品列表 const loadProducts = async () => { products.value = await productApi.getAll(); }; // 添加新产品 const addProduct = async () => { await productApi.create(newProduct.value); newProduct.value = { name: '', price: 0 }; loadProducts(); }; // 删除产品 const removeProduct = async (id) => { await productApi.delete(id); loadProducts(); }; onMounted(() => { loadProducts(); }); </script> <template> <div> <h2>产品管理</h2> <!-- 添加表单 --> <div class="add-form"> <input v-model="newProduct.name" placeholder="产品名称"> <input v-model.number="newProduct.price" type="number" placeholder="价格"> <button @click="addProduct">添加</button> </div> <!-- 产品列表 --> <ul> <li v-for="product in products" :key="product.id"> {{ product.name }} - ¥{{ product.price }} <button @click="removeProduct(product.id)">删除</button> </li> </ul> </div> </template> ``` ### 四、数据库准备 创建数据库和表: ```sql CREATE DATABASE vue_db; USE vue_db; CREATE TABLE products ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, price DECIMAL(10, 2) NOT NULL ); -- 测试数据 INSERT INTO products (name, price) VALUES ('笔记本电脑', 5999.00), ('智能手机', 3999.00), ('无线耳机', 899.00); ``` ### 五、运行步骤 1. **启动后端**: ```bash cd backend npm install express mysql body-parser cors node index.js ``` 2. **启动前端**: ```bash cd frontend npm install axios npm run dev ``` 3. 访问前端页面:`http://localhost:5173` ### 六、技术要点 1. **前后端分离架构**: - 前端通过 Axios 发送 RESTful 请求 - 后端提供标准 JSON API 接口 2. **数据库安全**: - 使用参数化查询防止 SQL 注入 - 连接池管理数据库连接 3. **错误处理**: - 统一捕获数据库操作异常 - 返回标准错误格式给前端 > 示例参考了引用[1][^1]、引用[2][^2]和引用[3][^3]中的核心实现模式,并根据 Vue3 特性进行了优化。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值