当前位置：网站首页>【Express连接MySQL数据库】

【Express连接MySQL数据库】

2022-07-29 04:23:00 【꒰ঌsnail໒꒱】

目录

1、安装MySQL模块

npm install mysql

2、创建一个配置文件

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

3、增，删，改，查操作

大致流程如下：

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

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

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

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໒꒱]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_46839072/article/details/126038982

边栏推荐

猜你喜欢

随机推荐