Ajax连接MySQL增删改查前端

最新推荐文章于 2023-07-11 16:24:05 发布
最新推荐文章于 2023-07-11 16:24:05 发布
阅读量746 收藏 7
点赞数 1
分类专栏： 前端分享 文章标签： mysql 数据库 sql ajax Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46703611/article/details/129475433
版权

上篇文章说到了不用mysql连接的增删改查

现在发一篇连接数据库的增删改查，这次是一个学习的这种连接的思路和增删改查的思路

以及一个分层的思路

当然还是先看页面，但是由于是功能的实现就没有写多好看

增删改查一应俱全，调用的数据库

由于下面的文件在不同文件夹里面，所以给一张文件夹的图，自己研究研究就好了

欢迎留言哦

app.js

const myexpress = require("express");
const studentRouter=require("./router/studentRouter");
const classRouter=require("./router/classRouter");
const logger = require("morgan");
const bodyParser=require('body-parser');

const app = myexpress();


app.use(logger('dev'));
app.use(myexpress.static(__dirname + "/public", { index: "/student.html" }));
app.use(bodyParser.json({linit:'2024kb'}));
app.use(bodyParser.urlencoded({extended:false}));
app.use(studentRouter);
app.use(classRouter);





app.listen(8888, function () {
    console.log("服务已经启动");
})

路由

const  myexpress=require("express");
const  classController=require("../controller/classController");
const  classRouter=myexpress.Router();



classRouter.get("/getClassList",classController.getClassList);


module.exports=classRouter;

这个是班级表的
const myexpress=require("express");
const studentController=require("../controller/studentController");
const studentRouter=myexpress.Router();


studentRouter.get("/getStudentList",studentController.getStudentList);
studentRouter.get("/delStudentById",studentController.delStudentById)
studentRouter.post("/addStudent",studentController.addStudent);
studentRouter.get("/getStudentInfoById",studentController.getStudentInfoById);
studentRouter.post("/updateStudentById",studentController.updateStudentById);




module.exports=studentRouter;

//这个是学生表单的

控制层的

const classModel = require("../model/classModel")

function getClassList(req, res) {
    classModel.getClassList(function (err, data) {
        if (err) {
            res.send({ code: 500, message: "数据库出错" });
            return
        }
        res.send({ code: 200, data });
    })
}


module.exports = {
    getClassList
}
const studentModel = require("../model/studentModel");


function getStudentList(req, res) {
    let { studentName, classId } = req.query;
    studentModel.getStudentList(studentName, classId, function (err, data) {
        if (err) {
            //错误日志，
            console.log(err);
            res.send({ code: 500, message: "数据库出错" })
            return
        }
        // console.log(data);
        res.send(data);
    })
}

function delStudentById(req, res) {
    let { id } = req.query;
    studentModel.delStudentById(id, function (err, data) {
        if (err) {
            //错误日志，
            res.send({ code: 500, message: "数据库出错" })
            return
        }
        console.log(id)
        if (data.affectedRows == 0) {
            res.send({ code: 201, massage: "删除失败" })
        } else {
            res.send({ code: 200, massage: "删除成功" })
        }
    })

}

function addStudent(req, res) {
    let { stuNO, stuName, address, sex, classId, age } = req.body;
    studentModel.addStudent(stuNO, stuName, address, sex, classId, age, (err, data) => {
        if (err) {
            //错误日志，
            console.log(err);
            res.send({ code: 500, message: "数据库出错" })
            return
        }
        // console.log(data);
        if (data.affectedRows == 0) {
            res.send({ code: 201, massage: "添加失败" })
            console.log(234);
        } else {
            res.send({ code: 200, massage: "添加成功" })
            console.log(235);
        }
    })
}

function getStudentInfoById(req, res) {
    let { id } = req.query;
    studentModel.getStudentInfoById(id, function (err, data) {
        if (err) {
            //错误日志，
            res.send({ code: 500, message: "数据库出错" })
            return;
        }
        res.send({ code: 200, data })
    })
}

function updateStudentById(req, res) {
    let { id, stuName, address, sex, classId, age } = req.body;
    studentModel.updateStudentById(id, stuName, address, sex, classId, age, function (err, data) {
        if (err) {
            //错误日志，
            console.log(err);
            res.send({ code: 500, message: "数据库出错" })
            return
        }
        // console.log(data);
        if (data.affectedRows == 0) {
            res.send({ code: 201, massage: "修改失败" })
        } else {
            res.send({ code: 200, massage: "修改成功" })
        }
    })
}

module.exports = {
    getStudentList,
    delStudentById,
    addStudent,
    getStudentInfoById,
    updateStudentById
}

模型层的

const db = require("./dbConfig")


function getClassList(callback) {
    let sql = "select *from class ";
    db.query(sql, [], callback);
}


module.exports={
    getClassList
}
const mysql=require("mysql");
function query(sql,params,callback){
    const connect=mysql.createConnection({
        host:"localhost",
        user:"root",
        password:"",
        database:"nodejs",
        port:3306
    })

    connect.connect();
    connect.query(sql,params,callback);
    //params 没有参数给空数组
    connect.end();
}


module.exports={
    query
}
const db = require("./dbConfig");


//查询和渲染
function getStudentList(studentName,classId,callback) {
    let sql = `SELECT s.* ,c.className  FROM student s join class c on s.classId=c.classId  where 1=1 
    `;

        let params=[];
    if(studentName.trim().length!=0){
        sql+="and stuName like ?";
        params.push("%"+studentName+"%");
    }
    if(classId!="-1"){
        sql+="and  s.classId=?";
        params.push(classId);
    }
    db.query(sql,params, callback)
}

//删除
function delStudentById(id, callback) {
    let sql = "delete from student where id=?";
    db.query(sql, [id], callback)
}

//获取
function addStudent(stuNO, stuName, address, sex, classId, age, callback) {
    let sql = "INSERT INTO student (stuNO,stuName,address,sex,classId,age) VALUES (?,?,?,?,?,?)"
    
    db.query(sql, [stuNO, stuName, address, sex, classId, age], callback)
}

//修改
function getStudentInfoById(id,callback){
    let sql = `SELECT s.* ,c.className  FROM student s join class c on s.classId=c.classId  where s.id=?
    `;

    db.query(sql,[id],callback);
}

function updateStudentById(id, stuName, address, sex, classId, age, callback){
    let sql=`
             update  student set stuName =?, address=? , sex=?,  classId=? , age=?  where id=? `;
             db.query(sql,[stuName, address, sex, classId, age,id],callback);


}




module.exports = {
    getStudentList,
    delStudentById,
    addStudent,
    getStudentInfoById,
    updateStudentById
}

静态public里面的 Ajax也在里面

<!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>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="js/layui-v2.6.8/layui/css/layui.css" />
    <style>
      .red {
        background-color: red;
        color: white;
        border-radius: 3px;
      }
      .green {
        background-color: green;
        color: white;
        border-radius: 3px;
      }
      #tbStudent:empty::after {
        content: "查询无数据";
        color: red;
        display: block;
      }

      .zhuti {
        width: 100%;
        height: 80px;
        background-color: coral;
        text-align: center;
        color: #fff;
       
      }
    </style>
  </head>
  <body>
    <div class="zhuti"><h1>学生管理</h1></div>
    <div>
      <input type="text" id="txtSearchName" placeholder="姓名" />
      班级：<select name="selClass" id="selClass"></select>
      <button class="btn btn-primary" id="btnSearch">搜索</button>
      <button class="btn btn-default" id="btnAdd">添加</button>
    </div>

    <table class="table table-respose">
      <thead>
        <tr>
          <th>id</th>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>班级</th>
          <th>年龄</th>
          <th>状态</th>
          <th>时间</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbStudent"></tbody>
    </table>

    <!-- 模态框 编辑 -->

    <div class="modal fade" id="studentModel" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">学生信息</h4>
          </div>
          <div class="modal-body">
            <form action="#">
              <input type="hidden" name="" id="txtId" />
              <p><input type="text" placeholder="学号" id="txtStuNo" /></p>
              <p><input type="text" placeholder="姓名" id="txtStuName" /></p>
              <p><input type="text" placeholder="年龄" id="txtAge" /></p>
              <p>
                <select name="selSex" id="selSex">
                  <option>女</option>
                  <option>男</option>
                </select>
              </p>
              <p>
                <input type="text" name="" id="txtAddress" placeholder="地址" />
              </p>
              <p><select name="selClass" id="selEditClass"></select></p>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="btnSave">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/layui-v2.6.8/layui/layui.js"></script>
    <script>
      let studentName = "";
      let classId = "-1";

      $(document).ready(function () {
        getStudentList();
        addDelEvent();
        getClassList();
        addSearchEvent();
        addEditEvent();
        addSaveEvent();
        addTianjia();

        //搜索
        function addSearchEvent() {
          $("#btnSearch").click(function () {
            studentName = $("#txtSearchName").val();
            classId = $("#selClass").val();

            getStudentList();
          });
        }

        function displayData(data) {
          $("#tbStudent").html("");
          let fragment = document.createDocumentFragment();
          for (let i = 0; i < data.length; i++) {
            $(fragment).append(`   <tr>
                <td>${data[i].id}</td>
                <td>${data[i].stuNO}</td>
                <td>${data[i].stuName}</td>
                <td>${data[i].sex}</td>
                <td>${data[i].className}</td>
                <td>${data[i].age}</td>
                <td>${
                  data[i].state == 1
                    ? "<span class='green'>启用</span>"
                    : "<span class='red'>禁用</span>"
                }</td>
                <td>${new Date(data[i].create_time).toLocaleDateString()}</td>
                <td>${data[i].address}</td>
                <td>
                     <button class="del btn btn-danger" data-id='${
                       data[i].id
                     }'>删除</button>
                     <button class="edit btn btn-primary"  data-id='${
                       data[i].id
                     }'>修改</button>
                </td>
             </tr>`);
          }

          $("#tbStudent").append(fragment);
        }

        //给删除按钮添加事件
        function addDelEvent() {
          $("#tbStudent").on("click", ".del", function (e) {
            let id = $(e.target).attr("data-id");

            $.ajax({
              method: "get",
              url: "/delStudentById",
              data: { id },
              success: function (data) {
                if (data.code == 200) {
                  layer.msg(data.massage);
                  getStudentList();
                } else {
                  layer.msg(data.massage);
                }
              },
            });
          });
        }

        function getStudentList() {
          //发起Ajax请求
          $.ajax({
            method: "get",
            url: "/getStudentList",
            data: { studentName, classId },
            success: function (data) {
              displayData(data);
            },
          });
        }

        //下拉框的配置
        function displayClassData(data) {
          $("#selClass").html("<option value='-1'>全选</option>");
          $("#selEditClass").html("");
          let frag = document.createDocumentFragment();
          data.forEach((item) => {
            $(frag).append(
              `<option value="${item.classId}">${item.className} </option>`
            );
          });
          $("#selEditClass").append(frag.cloneNode(true));
          $("#selClass").append(frag);
        }

        function getClassList() {
          $.ajax({
            method: "get",
            url: "/getClassList",
            success: function (data) {
              if (data.code == 200) {
                displayClassData(data.data);
              } else {
                layer.msg(data.massage);
              }
            },
          });
        }

        //给编辑按钮添加事件
        function addEditEvent() {
          $("#tbStudent").on("click", ".edit", function (e) {
            let id = $(e.target).attr("data-id");
            $("#studentModel").modal("show");
            displayStudentInfoById(id);
          });
        }
        //点击保存按钮做一个判断，可以实现修改和添加
        function addSaveEvent() {
          $("#btnSave").click(function () {
            let id = $("#txtId").val();
            let stuNO = $("#txtStuNo").val();
            let stuName = $("#txtStuName").val();
            let age = $("#txtAge").val();
            let address = $("#txtAddress").val();
            let sex = $("#selSex").val();
            let classId = $("#selEditClass").val();
            $("#studentModel").modal("hide");
            if ($("#txtId").val() != "") {
              //给保存按钮做判断
              console.log(123);
              $.ajax({
                method: "post",
                url: "/updateStudentById",
                data: { id, stuName, age, address, sex, classId },
                success: function (data) {
                  if (data.code == 200) {
                    getStudentList();
                  } else {
                    layer.msg(data.massage);
                  }
                },
              });
            } else {
              $.ajax({
                method: "post",
                url: "/addStudent",
                data: { stuNO, stuName, address, sex, classId, age },
                success: function (data) {
                  if (data.code == 200) {
                    getStudentList();
                  } else {
                    layer.msg(data.massage);
                    console.log(stuNO);
                  }
                },
              });
            }
          });
        }
        //获取input框的信息
        function displayStudentInfoById(id) {
          //获取信息
          $.ajax({
            method: "get",
            url: "/getStudentInfoById",
            data: { id },
            success: function (data) {
              if (data.code == 200) {
                $("#txtId").val(data.data[0].id);
                $("#txtStuNo").val(data.data[0].stuNO);
                $("#txtStuName").val(data.data[0].stuName);
                $("#txtAge").val(data.data[0].age);
                $("#txtAddress").val(data.data[0].address);
                $("#selSex").val(data.data[0].sex);
                $("#selEditClass").val(data.data[0].classId);
              } else {
                layer.msg(data.massage);
              }
            },
          });
        }

        //点击添加按钮发生的事件
        function addTianjia() {
          $("#btnAdd").click(function () {
            $("#txtId").val("");
            $("#txtStuNo").val("");
            $("#txtStuName").val("");
            $("#txtAge").val("");
            $("#txtAddress").val("");
            $("#studentModel").modal("show");
          });
        }
      });
    </script>
  </body>
</html>
周周_加油
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax Jsp 连接MySQL数据库
11-30
在Jsp页面使用Ajax读取MySQL数据库内容，同一个页面多个Ajax任务
Ajax常见请求方式详解（增删改查）
热门推荐
杜小白的博客
02-05 1万+
1、GET请求（查）  一般应用于从服务器获取数据，如果get请求向服务器传递内容，一般使用url问号传参的方式。 $.ajax({ url: "", type: "GET", dataType: "json", data: { "id":2 }, success:
ajax 连接 mysql_ajax连接数据库并操作数据库
weixin_35636570的博客
01-19 457
Response.Write("alert('用户名不能为空！请输入！')");---------------------------------------------------------------function showCustomer() {alert("ddd")var str = document.getElementById("txtvalue").value;if (str ...
使用Ajax实现简单的增删查改&&前端Ajax传的值，后端如何获取
蘇小白的博客
07-25 4036
实现查询和增删改一、Ajax最基本语法二、增删查改1.查询(Get请求)2.增删改(Post请求)三、后台(MVC/WebForm)1.MVC(Post请求)2.WebForm(Post请求) 本人小白一个。 其中所说可能有些不足，因为这些是我自己在写项目的过程中所使用的Ajax 如有不对的地方，欢迎评论提出建议。 一、Ajax最基本语法 话不多说，直接上代码 $.ajax({ url: "/User/GetUser",(这里写请求路径) type: "g
ajax实现增删查改
qq_57104988的博客
08-29 1809
【代码】ajax实现增删查改。
学生信息管理系统（实现增删改查操作）Java+Servlet+HTML+CSS+数据库
12-09
数据库部分：创建表、增删改查语句的书写等。 前端部分：HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化（添加私有...
实现增删改查的SSM项目整合包
05-28
这是一个用ssm框架实现了增删改查的项目压缩包，功能虽少，但涵盖了一个javaweb项目所必要的大部分技术，整合了ssm三大框架，以及前端框架bootstrap，并由maven进行项目管理，用到的技术包括分页组件pageHelper以及...
php+mysql+bootstrap+jquery实现增删查改的前后端
05-03
PHP+MYSQL入门学习并实现后端增删改查，bootstrap实现后端页面；前端有ajax请求json格式数据，jquery动态创建元素等
基于BootStrap和SpringBoot的学生信息管理系统，支持增删改查等基础操作，适合个人web开发学习，毕业设计或课设等
06-18
基于BootStrap和SpringBoot的学生信息管理系统，支持增删改查等基础操作，适合个人web开发学习，毕业设计或课设等 以 Maven 架构项目，使用 JSP + Servlet 开发以及 Spring + SpringMVC + MyBatis 框架；采用 c3p0 ...
计算机Web开发课程作业-学生成绩管理-实现成绩的增删改查（源码）
06-09
计算机Web开发课程作业-学生成绩管理-实现成绩的增删改查： 使用Html+css+JavaScript实现前端页面，使用Ajax技术实现数据的请求和页面展示，使用Php技术实现后台接口，使用Mysql实现数据的存储。 给出的是完整项目的...
Jquery Ajax动态增删改查
10-10
Jquery Ajax动态增删改查，Jquery Ajax
Ajax实现增删改查的demo
04-01
Ajax实现增删改查的demo
AJAX实现数据的增删改查操作详解【java后台】
10-15
主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
随记（ajax效果的增删改查）
10-16
新人一枚，网上搜了很多关于ajax增删改查的例子，都不是自己要的效果，自己写的，虽然花了点时间，并且很基础，但是增删改查还是全的。希望可以帮到您哦。这个是我自己没有休整过的，注释较白话，大神什么的勿喷。
一个页面实现Ajax效果的增删改查-JQuery+Json版
08-25
一个页面实现Ajax效果的增删改查-JQuery+Json版包含数据库
SSM框架用Ajax增删改查一个页面（简单易懂）
最新发布
passerby的博客
07-11 793
async: false是ajax中的一个参数，它表示是否异步执行请求。当async为false时，请求将会同步执行，即在请求完成之前，浏览器将会被锁定，用户无法进行其他操作。这种方式一般不推荐使用，因为会影响用户体验。而当async为true时，请求将会异步执行，即在请求过程中，浏览器不会被锁定，用户可以进行其他操作。这种方式更加常用，因为可以提高页面的响应速度和用户体验。 3.3，属性display:none Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置
javascript怎么通过ajax连接mysql数据库
weixin_42602241的博客
01-07 465
你可以使用 JavaScript 中的 XMLHttpRequest 对象发送 AJAX 请求来连接 MySQL 数据库。 这是一个简单的示例代码： var xhr = new XMLHttpRequest(); xhr.open('GET', '/my/url', true); xhr.onload = function () { // 使用 xhr.responseText 或 xhr....
通过ajax查询mysql数据并将查询数据返回
jiweidelu的博客
10-23 774
通过ajax查询mysql数据，并将返回的数据显示在待选列表中，再通过选择最终将选项加入到已选区，可以用在许多后台管理系统中。调用Multiselect插件。MYSQL数据表结构。Ajax查询数据操作。
AJAX实现增删改查
zhanglijie__1的博客
10-08 837
实例介绍 1.做一个网页，可以进行数据的增删改查的为佳 2.用pycharm工具建flask框架 3.按照MVC标准进行ajax前后端分离的代码 4.运行实现 代码分析 因为是MVC模式，所以有个dao包，有个controller包，有个service包，然后因为有些类需要重复使用，所以有个封装类的文件，在entity包里，pycharm中Flask框架生成的app文件，动态前端页面存在tem...
app连接虚拟机中的Django+MySQL实现增删改查
05-20
要实现连接虚拟机中的Django+MySQL并进行增删改查，需要以下步骤： 1. 确保虚拟机中Django和MySQL已经正确安装并启动。 2. 在Django中创建一个可以进行数据库操作的应用程序，在应用程序中创建模型类，定义好需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值