Springboot整合MyBatis通过ajax查询MySQL数据库数据

最新推荐文章于 2023-04-17 16:37:04 发布
最新推荐文章于 2023-04-17 16:37:04 发布
阅读量773 收藏 11
点赞数
分类专栏： Web程序设计 前端框架 文章标签： mysql java spring intellij idea css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mzbbox/article/details/116484691
版权

Springboot整合MyBatis通过ajax查询MySQL数据库数据

开发环境

IntelliJ IDEA 2020.1
在这里插入图片描述
MySQL8.0.24
在这里插入图片描述
Navicat12
在这里插入图片描述
SpringBoot2.4.5

程序运行效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据接口运行效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据库设计

新建数据库和数据表,新建数据库，名字是datademo。
在这里插入图片描述
在这里插入图片描述
创建数据表并添加记录

CREATE TABLE `t_msg` (
  `id` int(11) NOT NULL,
  `Message` varchar (255) default null comment 'message',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

在这里插入图片描述
在这里插入图片描述
MySQL数据库特点
MySQL的数据库名、表名、列名、别名大小写规则：
1、数据库名与表名区分大小写；
2、表的别名区分大小写；
3、列名与列的别名不区分大小写；
4、字段内容默认情况下不区分大小写。
在这里插入图片描述
查看数据库编码命令

show variables like '%char%';
 show create database datademo;

在这里插入图片描述

在这里插入图片描述

项目实现

新建Springboot工程，选择Maven依赖（Springboot工程本来就是属于Maven
类型的工程）: Lombok, web, MySQL and Mybatis
在这里插入图片描述
在这里插入图片描述
选择Lombok
在这里插入图片描述
选择web
在这里插入图片描述
选择MySQL and Mybatis
在这里插入图片描述

项目结构

开发顺序
创建包和Java类、接口文件，创建MyBatis配置文件，项目配置文件，修改Maven依赖文件。
（1）新建application.yml，删除原来的properties文件
（2）检查修改pom文件
（3）实体层entity
（4）数据访问层mapper
（5）数据访问服务层service
（6）数据访问服务实现层impl
（7）Html静态页面，在resource-static文件夹下
在这里插入图片描述

程序源码

application.yml

server:
  port: 80
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/datademo?characterEncoding=utf-8&useSSL=false
    username: root
    password: root1234
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath*:mapper/*Mapper.xml
  type-aliases-package: com.example.demo0421.entity

在这里插入图片描述
pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo0421</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo0421</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.20</version>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

在这里插入图片描述
创建entity包和TMsg.java类

package com.example.demo0421.entity;
import lombok.Data;
import java.io.Serializable;

@Data
public class TMsg implements Serializable {
    private Integer id;
    private String message;
}

在这里插入图片描述
创建mapper包和TMsgMapper.java接口

package com.example.demo0421.mapper;

import com.example.demo0421.entity.TMsg;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface TMsgMapper {
    public TMsg findById(Integer id); // id字段
    public TMsg findByMessage(String Message);//Message字段
    public List<TMsg> findTMsgAll();
}

在这里插入图片描述
在resource文件夹中创建mapper文件夹，在mapper文件夹中创建TMsgMapper.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo0421.mapper.TMsgMapper">
    <select id="findById" resultType="com.example.demo0421.entity.TMsg">
        SELECT id,message from t_msg WHERE id = #{id}
    </select>

    <select id="findByMessage" resultType="com.example.demo0421.entity.TMsg">
        SELECT id,message from t_msg WHERE Message = #{Message}
    </select>

    <select id="findTMsgAll" resultType="com.example.demo0421.entity.TMsg">
        select * from t_msg
    </select>
</mapper>

在这里插入图片描述
创建service包和TMsgService.java接口

package com.example.demo0421.service;

import com.example.demo0421.entity.TMsg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;


public interface TMsgService {
    public TMsg findById(Integer id);

    public TMsg findByMessage(String Message); // 获取Message

    public List<TMsg> findTMsgAll();
}

在这里插入图片描述
在service包下创建impl包，在impl包下创建TMsgServiceImpl类实现TMsgService接口

package com.example.demo0421.service.impl;

import com.example.demo0421.entity.TMsg;
import com.example.demo0421.mapper.TMsgMapper;
import com.example.demo0421.service.TMsgService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class TMsgServiceImpl implements TMsgService {

    @Autowired
    private TMsgMapper tMsgMapper;

    @Override
    public TMsg findById(Integer id) {
        return tMsgMapper.findById(id);
    }

    @Override // 获取Message
    public TMsg findByMessage(String Message) {

        return tMsgMapper.findByMessage(Message);
    }

    @Override // 获取所有
    public List<TMsg> findTMsgAll() {

        return tMsgMapper.findTMsgAll();
    }
}

在这里插入图片描述
创建controller包和TMsgController类

package com.example.demo0421.controller;

import com.example.demo0421.entity.TMsg;
import com.example.demo0421.service.TMsgService;
import com.google.gson.Gson;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/msg")
public class TMsgController {

    @Autowired
    private TMsgService tMsgService;

    @GetMapping("/getMsg")
    public String getMsg(@Param("id") Integer id){
        TMsg tMsg = tMsgService.findById(id);
        return tMsg.getMessage();
    }

    @GetMapping("/getId") // 通过Message获取id
    public Integer getId(@Param("Message") String Message){
        TMsg tMsg = tMsgService.findByMessage(Message);
        return tMsg.getId();
    }


    @GetMapping("/getOne") // 通过Message获取id
    public TMsg getAll(@Param("id") Integer id){
        TMsg tMsg = tMsgService.findById(id);
        return tMsg;
    }

    @GetMapping("/getJson") // 通过Message获取id
    public String getJson(@Param("id") Integer id){
        TMsg tMsg = tMsgService.findById(id);
        Gson gson = new Gson();
        return gson.toJson(tMsg);
    }

    @GetMapping("/getAll") // 通过Message获取id
    public List<TMsg> getAll(){
        List<TMsg> list = tMsgService.findTMsgAll();
        return list;
    }

    @GetMapping("/getAllJson") // 通过Message获取id
    public String getAllJson(){
        List<TMsg> list = tMsgService.findTMsgAll();
        Gson gson = new Gson();
        return gson.toJson(list);
    }
}

在这里插入图片描述
在resources文件夹中的static文件夹中创建index.html网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>珂码在前进</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                test1();
            });

            $("#btn2").click(function(){
                $.test2();
            });


        });

        function test1(){
            //alert("Text1: " + $("#test").text());
            $.ajax({
                url:'/msg/getAllJson',
                type:'get',
                dataType:'json',
                success:function(data){
                    $("#tabletest").find('tr').remove();
                    tr='<td>id</td><td>Message</td>'
                    $("#tabletest").append('<tr>'+tr+'</tr>')
                    //方法中传入的参数data为后台获取的数据
                    for(i in data) //data指的是数组，i为数组的索引
                    {
                        var tr;
                        tr='<td>'+data[i].id+'</td>'+'<td>'+data[i].message +'</td>'
                        $("#tabletest").append('<tr>'+tr+'</tr>')
                    }
                }
            });
        }

        $.test2 = function() {
            //alert("Text2: " + $("#id").val());
            $.ajax({
                url:'/msg/getOne',
                type:'get',
                dataType:'json', //返回数据类型
                //data:{id:parseInt($("#id").val())},
                //data:{"id":1},
                contentType: 'application/json', // 请求传递的参数格式
                data:{"id":$("#id").val()}, // 请求传递的参数
                success:function(data){
                    //alert("success");
                    $("#tabletest").find('tr').remove();
                    tr='<td>id</td><td>Message</td>'
                    $("#tabletest").append('<tr>'+tr+'</tr>')
                    //方法中传入的参数data为后台获取的数据
                        var tr;
                        tr='<td>'+data.id+'</td>'+'<td>'+data.message +'</td>'
                        $("#tabletest").append('<tr>'+tr+'</tr>')
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    alert("没有查询到数据！");
                    $("#tabletest").find('tr').remove();
                }
            });
        }

    </script>
    <style type="text/css">
        .center{
            margin: auto;
            text-align:center;
            font-size: 24px;
            width: 60%;
            background: lightblue;
        }
    </style>
</head>
<body>

<div class="center">
<p id="test">Springboot整合MyBatis通过ajax查询MySQL数据库数据</b></p>
    <button id="btn1">显示所有数据</button>
    <button id="btn2">查询</button>
<input id="id" name="id" type="text" placeholder="请输入id值"/>
<br>
    <table class="table table-bordered" id='tabletest'>
    </table>
</div>
</body>
</html>

在这里插入图片描述

珂码在前进
关注
专栏目录
使用ajax实现对数据库中数据的查询
Ailing_kildd的博客
05-04 3302
ajax的小例子，对数据库中的数据的在浏览器上进行局部刷新。
SpringBoot+Mybatis+mySQL+Ajax实现前后端数据交互（简单入手版）
m0_47974640的博客
10-24 6003
因为代码写得少，学的前端很杂，后端学得少，最近写后端，学到了一些东西。 开始记录**SpringBoot+Mybatis+mySQL+Ajax实现前后端数据交互**（一）数据库（二）SpringBoot的搭建（三）整合Mybatis（四）后端各层代码的搭建和测试（五）前端页面和Ajax数据的测试（六）结果 问题：要干什么？ 实现前后端数据的交互，当前端带参数（或不带参数）向后端发送请求之后，后端能从数据库中的数据“操作”（增删改查）后返回给前端页面。 传递的数据类型是json 前端收到后端传来的j
Springboot+ajax+mybatis实现简易网页
m0_51561690的博客
01-04 484
Springboot+ajax+mybatis实现简易网页
ajax访问数据库
cschengvdn的专栏
09-07 5785
http://www.w3school.com.cn/ajax/ajax_database.asp http://blog.csdn.net/cshmai/article/details/1103957 AJAX 可用来与数据库进行动态通信。 AJAX 数据库实例 下面的例子将演示网页如何通过 AJAX 从数据库读取信息： 请在下面的下拉列
Springboot开发指南（三）—ajax+mybatis+mysql从数据库读取数据并展示到前台
鲸鱼姐的专栏
12-11 3288
一 需求 二 项目效果 三 项目建设步骤 1. 在mysql里建设数据库表m_members 2.使用IDEA新建工程，引入依赖 3. 建后台目录及四层文件 4. 引入css和js，建前台html文件 5. 建数据库配置文件 需要源码，请加微信号，进技术交流群，发送springboot105，免费获取此文章源码。 一 需求 采用springb...
springboot+mybatis+thymeleaf+ajax+JQuery 技术整合搭建项目开发环境__03_技术落地（技术选型）
Coder_Boy_的博客
05-07 1464
在上一篇文章中，我简要的介绍： springboot整合框架的目录结构与如何与mybatis进行整合。 最终的工程目录结构如下图所示： 本节介绍技术选型的出发点与原则： 整合框架-——持久层框架选型： 持久化框架选择 Mybatis,选择技术的都是基于业务来说说的，适合当前业务场景，能方便高效及时解决业务的问题才是最佳的技术整合。 Mybatis可以更自由书写 SQL ...
Springboot整合MyBatis通过调用API查询MySQL数据库数据
最新发布
10-07
大家可以在B站一步一步跟着视频敲。...【Springboot整合MyBatis通过ajax查询MySQL数据库数据】 https://www.bilibili.com/video/BV1Nb4y1f76T/?share_source=copy_web&vd_source=33606ec04709ac5145579443fb0af1b2
SpringbootMybatis:SpringBoot+Mybatis+Mysql+Html实现的页面登录案例
05-11
在本项目中，我们探索了如何使用Spring Boot、Mybatis和Mysql数据库来构建一个简单的前端登录页面。这个案例展示了如何将这些技术有效地整合在一起，实现数据持久化、后端逻辑处理以及与前端HTML页面的交互。以下是...
基于springboot+mybatis+mysql+html公交管理系统
07-24
在本项目中，MyBatis作为数据访问层，负责与MySQL数据库进行交互，通过XML或注解的方式将Java对象映射为SQL语句，实现数据的增删改查操作。 【MySQL】MySQL是一种关系型数据库管理系统，以其开源、免费、性能优秀而...
SpringBoot整合Mybatis实现高德地图定位并将数据存入数据库
pxyyoona的博客
01-06 1992
第一步配置yml文件 server: port: 8080 spring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:3306/spring?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC driver-class-name: com.mysql.cj
Springboot集成spring-data-jpa增删查改使用ajax数据交互
07-01
使用Springboot进行简单的增删改查，用ajax让前后端的数据进行交流。踩过很多坑，才弄成的。
springboot+ajax示例
08-02
springboot+ajax的小例子，适合初学者，可以参考博文http://blog.csdn.net/oppo5630/article/details/52093898
从数据库中读取数据（AJAX版本）
03-01
博文链接：https://qmug.iteye.com/blog/221703
SpringBoot+MyBatis+Mysql+Easyui+Ajax实现CURD实例
04-16
通过Spring Initializr快速生成springboot项目+mybatis generator反向生成代码+easyui 的表单设计（增删改查-分页）+ajax异步操作+mysql源数据库+单元测试+详细注解及个人编程的运到困难
ssh框架下用ajax动态从数据库查询的菜单
10-29
ssh框架下用ajax动态从数据库查询的菜单
springboot+mybatis+thymeleaf+ajax+JQuery 技术整合搭建项目开发环境__02_技术落地（技术选型）
Coder_Boy_的博客
04-26 1724
目前各类公司开始采用前后端分离模式开发 这种开发模式的好处：分工明确，职责分明，可以提供更好的系统使用体验。 后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。 前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。 通过将整个开发团队分成前后端，让两边的工程师更加专注各自的领域，独立治理，然后构建出一个全栈式的精益求精的开发队伍 上面的介绍只是说明下本整合框架支...
ajax +javascript 查询数据库
三层楼的木房子
11-15 683
<br /><br /> <br />private void Common_AjaxGetBrowseData()<br />    {<br />        string strBindDatabase = HttpContext.Current.Server.UrlDecode(Request["strBindDatabase"]);<br />        string pageTablename = HttpContext.Current.Server.UrlDecode(Request["
基于springboot和ajax的简单项目 05 日志界面的查找功能
qq_38757863的博客
04-17 452
其中的id属性是input-group-btn的是一个div，.btn-search 表示id属性为btn-search的标签（元素），doQueryObjects是要执行的函数。因为直接使用更新table的函数，有一个问题就是，pageCurrent的值，不会一直是1，如果是大于1的数，根据sql语句，table中不会显示内容。其中的jQuery函数val()通常是和表单元素进行使用的，也就是input标签。在上次的page.html文件中的分页点击事件也是用这个写的，on函数。
ajax的数据库,AJAX 数据库
weixin_36284848的博客
08-06 270
AJAX 数据库实例AJAX 可用来与数据库进行动态通信。AJAX 数据库实例下面的例子将演示网页如何通过 AJAX 从数据库读取信息：请在下面的下拉列表中选择一个客户：实例functionshowCustomer(str){varxmlhttp;if(str==""){document.getElementById("txtHint").innerHTML="";return;}if(w...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

珂码在前进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值