• 【Express连接MySQL数据库】

    目录

    1、安装MySQL模块

    npm install mysql

    2、创建一个配置文件

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

    3、增，删，改，查操作

    大致流程如下：

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

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

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

    数据库查询方法：

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    app.js后端代码：

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

    • 1
    • 2

    （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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    运行结果如下：
    在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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    服务器后端代码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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    运行结果如下：
    在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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    服务器后端代码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
        }
    })

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

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

    （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)
                }
            })
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    服务器后端代码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
        }
    })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

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

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

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

  • 相关阅读:
    MathorCup大数据挑战赛第二届A题-自动驾驶中的车辆调头问题赛题解析（附MATLAB实现代码）
    矢量化的步骤
    K8s高可用集群二进制部署-V1.20
    安装ipmitool时报错，EVP_CIPHER_CTX ctx 未识别
    sql基本语法+实验实践
    医学访问学者申请四点规划建议
    缓和曲线与原曲线任意点坐标计算程序
    【算法——双指针】LeetCode 18 四数之和
    vue学习笔记汇总
    golang 多层map如何增加key
  • 原文地址：https://blog.csdn.net/m0_46839072/article/details/126038982