【Express连接MySQL数据库】

꒰ঌsnail໒꒱

已于 2022-07-31 22:59:36 修改

阅读量3.6k

点赞数 3

分类专栏： express框架数据库文章标签：数据库 mysql

于 2022-07-28 21:46:15 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/126038982

版权

数据库同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

express框架

4 篇文章 1 订阅

订阅专栏

1、安装MySQL模块

npm install mysql

2、创建一个配置文件

创建一个配置文件：用于连接MySQL数据库

3、增，删，改，查操作

大致流程如下：

（1）在前端页面中使用表单来收集数据

（2）通过jQuery的方法向服务器发起异步请求,将数据提交给服务器

（3）服务器接收到前端的请求数据后,将数据写入数据库,同时给前端发送响应信息

数据库查询方法：

conn.query(sql, params, function (err, result) {
    // sql：数据库查询语句
    // params：参数，通配符?所对应的值
    // result：数据库查询结果
})

dbconfig.js配置文件代码如下：

var dbconfig = {
    host:'localhost',
    port:3306,
    user:'root',
    password:'123456',
    database:'xy' //所连接的数据库名
}
module.exports =dbconfig;

app.js后端代码：

var crudRouter =require('./routes/crud')
app.use('/crud',crudRouter);

（1）查询操作

crud.js数据库路由代码如下：

var express =require('express')
var mysql = require('mysql')//导模块
var dbconfig = require('../config/dbconfig')//导入自定义模块

var router = express.Router()

//http://localhost:3000/crud/findAll
router.get('/findAll',(req, res) => {
    //1、连接数据库，获取数据库的连接对象
    let conn = mysql.createConnection(dbconfig);
    console.log(conn)
    //2、调用数据库连接对象的query方法执行查询
    conn.query('select * from stu',function(err,results,fields){
        if(err){
            throw err
        }
        console.log(results)//输出查询结果
        res.send(results)
    })
    //3、关闭数据库的连接
    conn.end((err)=>{
        if(err){
            console.log(err)
            return
        }
    })
 })
 module.exports =router;

运行结果如下：
在postman软件测试如下：
在这里插入图片描述

（2）增加操作

☀️前端页面代码如下（因为要用JQuery,所以要导入JQuery库）：

<!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>
</head>
<body>
    <div>
        <form id="reg">
            <label>
                学号：<input type="text" name="s_id">
            </label>
            <br><br>
            <label>
                姓名：<input type="text" name="s_name">
            </label>
            <br><br>
            <label>
                年龄：<input type="number" name="s_age">
            </label>
            <br><br>
            <label>
               性别：<input type="text" name="s_gender">
            </label>
            <br><br>
            <button type="button" id="btn_ok">提交</button>
            <button type="button" id="btn_update">修改</button>
        </form>
        <br><br>
     <span id="msg"></span>
       <br><br>  
      <label>
        删除的学号：<input type="text" id="sid">
        <button type="button" id="btn_del"> 删除</button>
     </label>
    </div>
</body>
</html>

Ajax异步请求代码：


    <script src="../js/jquery-3.4.1.js"></script>
    <script>
     $(function(){
        $('#btn_ok').bind('click',function(){
            $.ajax(
                {
                url:'http://localhost:3000/crud/add',
                type:'post',
                dataType:'json',
                data:$('#reg').serialize(),//表单序列化
                success:function(result){ //result,是一个json对象
                    $('#msg').html(result.info)
                },
                error:function(err){
                    console.log(err)
                }
            })
        })  
     })
    </script>

服务器后端代码crud.js：

var express =require('express')
var mysql = require('mysql')//导模块
var dbconfig = require('../config/dbconfig')//导入自定义模块
var router = express.Router()
//http://localhost:3000/crud/add
router.post('/add',(req, res) => {
    //1、就是客户端的请求数据
    let sid =req.body.s_id
    let sname =req.body.s_name
    let age =req.body.s_age
    let gender=req.body.s_gender
    //2、将数据封装成对象
    let data ={sid,sname,age,gender}
    //3、创建数据库的连接对象
    let conn = mysql.createConnection(dbconfig);
    //4、将数据插入到数据库中
    conn.query('insert into stu set ?',data,function(err,result){
        if(err){
            res.send({
                code:1001,
                info:'数据插入失败'
            })
        }else{
            res.send({
                code:1002,
                info:'数据插入成功'
            })
        }
    })
    //5、关闭数据库连接
    conn.end((err)=>{
        if(err){
            console.log(err)
            return
        }
    })
})
 module.exports =router;

运行结果如下：
在postman软件测试如下：
在这里插入图片描述

（3）删除操作

Ajax异步请求代码：


    <script src="../js/jquery-3.4.1.js"></script>
    <script>
     $(function(){
        $('#btn_del').bind('click',function(){
            $.ajax({
                url:'http://localhost:3000/crud/remove',
                type:'delete',
                dataType:'json',
                data:{s_id:$('#sid').val()},
                success:function(result){
                    $('#msg').html(result.info)
                },
                error:function(err){
                    console.log(err)
                }
            })
        })
     })
    </script>

服务器后端代码crud.js：（其余同上，此为关键代码）

//http://localhost:3000/crud/remove
router.delete('/remove',(req, res) => {
    //1、获取客户端的请求数据
    let sid = req.body.s_id
    //2、获取数据库的连接
    let conn = mysql.createConnection(dbconfig);
    //3、执行删除
    conn.query('delete from stu where sid=?',sid,function(err,result){
        if(err){
            console.log(err)
            res.send({
                code:1001,
                info:'删除失败'
            })
        }else{
            res.send({
                code:1002,
                info:'数据删除成功'
            })
        }
    })
    conn.end((err)=>{
        if(err) {
            console.log(err)
            return
        }
    })

})

运行结果如下：
在这里插入图片描述

（4）修改操作

Ajax异步请求代码：

        $('#btn_update').bind('click',function(){
            $.ajax(
                {
                url:'http://localhost:3000/crud/modify',
                type:'put',
                dataType:'json',
                data:$('#reg').serialize(),//表单序列化
                success:function(result){
                    $('#msg').html(result.info)
                },
                error:function(err){
                    console.log(err)
                }
            })
        })

服务器后端代码crud.js：（其余同上，此为关键代码）

//http://localhost:3000/crud/modify
router.put('/modify',(req, res) => {

    //1、就是客户端的请求数据
    let sid =req.body.s_id
    let sname =req.body.s_name
    let age =req.body.s_age
    let gender=req.body.s_gender

    //2、创建数据库的连接对象
    let conn = mysql.createConnection(dbconfig);
    //3、将数据插入到数据库中
    conn.query('update stu set sname=?,age=?,gender=? where sid=?',[sname,age,gender,sid],function(err,result){
        if(err){
            console.log(err)
            res.send({
                code:1001,
                info:'数据更新失败'
            })
        }else{
            res.send({
                code:1002,
                info:'数据更新成功'
            })
        }
    })
    //5、关闭数据库连接
    conn.end((err)=>{
        if(err){
            console.log(err)
            return
        }
    })
})

数据库xy的stu表部分内容如下：
在这里插入图片描述

我们要修改S_1001 liuYi 35 male这条信息：

在这里插入图片描述
查看表，数据修改成功：

꒰ঌsnail໒꒱

关注

3
点赞
踩
58

收藏

觉得还不错? 一键收藏
1
评论
【Express连接MySQL数据库】

3）服务器接收到前端的请求数据后,将数据写入数据库,同时给前端发送响应信息。（2）通过jQuery的方法向服务器发起异步请求,将数据提交给服务器。创建一个配置文件用于连接MySQL数据库。（1）在前端页面中使用表单来收集数据。..................
复制链接

扫一扫

专栏目录