栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

SpringBoot+Mybatis+mySQL+Ajax实现前后端数据交互(简单入手版)

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

SpringBoot+Mybatis+mySQL+Ajax实现前后端数据交互(简单入手版)

因为代码写得少,学的前端很杂,后端学得少,最近写后端,学到了一些东西。
开始记录

**SpringBoot+Mybatis+mySQL+Ajax实现前后端数据交互**
  • (一)数据库
  • (二)SpringBoot的搭建
  • (三)整合Mybatis
  • (四)后端各层代码的搭建和测试
  • (五)前端页面和Ajax数据的测试
  • (六)结果

问题:要干什么?

实现前后端数据的交互,当前端带参数(或不带参数)向后端发送请求之后,后端能从数据库中的数据“操作”(增删改查)后返回给前端页面。

传递的数据类型是json
前端收到后端传来的json数据后可以对将json对象中的数据整合到html标签中,直接显示当前的一个后者使用遍历。
后端收到前端的数据可以对数据库进行增删改查。

(一)数据库
  1. 创建数据库和数据表并插入数据
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `t_user`
-- ----------------------------
DROp TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8_bin DEFAULT NULL,
  `msg` varchar(255) COLLATE utf8_bin DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

-- ----------------------------
-- Records of t_user
-- ----------------------------
INSERT INTO `t_user` VALUES ('1', '林一一', '业精于勤荒于嬉,行成于思毁于随');
INSERT INTO `t_user` VALUES ('2', '一一林', '今天的自信源自昨天的踏实努力');
(二)SpringBoot的搭建

1.创建项目

2. 勾选依赖

pom.xml (可以CV后使用)



    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.5.6
         
    
    com.example
    ajax
    0.0.1-SNAPSHOT
    ajax
    Demo project for Spring Boot
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.0
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            com.google.code.gson
            gson
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            
        
    



(三)整合Mybatis
server:
  port: 8099
spring:
#数据源,连接到springbootajax数据库
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/springbootajax
    username: root
    password:
  mvc:
    view:
      prefix:
        classpaths: /templates
      suffix: .html
mybatis:
#扫描实体类的包
  type-aliases-package: com.example.ajax.pojo
#ָ指定myBatis的核心配置文件与Mapper映射文件
  mapper-locations: classpath:mapper/*.xml

(四)后端各层代码的搭建和测试
  1. 项目结构

    2.实体类
package com.example.ajax.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {
    private Integer id;
    private String name;
    private String msg;

}
  1. 实体类的接口
package com.example.ajax.mapper;

import com.example.ajax.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface UserMapper {
    User getUserById(Integer id);
    String getMsgById(Integer id);
    List getAllUser();
}

  1. 对接口进行测试
package com.example.ajax;

import com.example.ajax.mapper.UserMapper;
import com.example.ajax.pojo.User;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;


import java.util.*;

@SpringBootTest
public class TestUserMapper {
    @Autowired
    UserMapper userMapper;
    @Test
    public void selectById(){
        User user=userMapper.getUserById(1);
        System.out.println(user);
    }
    @Test
    public void gatAll(){
       List< User> users=userMapper.getAllUser();
        System.out.println(users);
    }
    @Test
    public void getMag(){
        String msg=userMapper.getMsgById(1);
        System.out.println(msg);
    }
}

  1. 测试完成后写Service层
    (1)Service接口
package com.example.ajax.service;

import com.example.ajax.pojo.User;

import java.util.List;

public interface UserService {
    User getUserById(Integer id);
    String getMsgById(Integer id);
    List getAllUser();
}

(2)Service实现类

package com.example.ajax.service.Impl;

import com.example.ajax.mapper.UserMapper;
import com.example.ajax.pojo.User;
import com.example.ajax.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserMapper userMapper;

    @Override
    public User getUserById(Integer id) {
        return userMapper.getUserById(id);
    }

    @Override
    public String getMsgById(Integer id) {
        return userMapper.getMsgById(id);
    }

    @Override
    public List getAllUser() {
        return userMapper.getAllUser();
    }
}

  1. 控制层
package com.example.ajax.controller;

import com.example.ajax.pojo.User;
import com.example.ajax.service.UserService;
import com.google.gson.Gson;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.*;

@Controller
@ResponseBody
@RequestMapping("/msg")
public class UserController {
    @Autowired
    UserService userService;

    @GetMapping("/getJsonOne")
    public String getUserById(@Param("id") Integer id){
        User user=userService.getUserById(id);
        Gson gson = new Gson();
        return gson.toJson(user);
        }
    @GetMapping("/getOne")
    public User getUser(@Param("id") Integer id){
        User user=userService.getUserById(id);
       return user;
    }

    @GetMapping("/getJsonAll")
    public String getUser(){
        List users=userService.getAllUser();
        Gson gson = new Gson();
        return gson.toJson(users);
    }
}


(五)前端页面和Ajax数据的测试
  1. springBoot项目可以直接访问static下的html,所以直接把html放在static下就可以了。



    
    Title
    
    


(六)结果
  1. 点击按钮1
  2. 点击按钮2


就这样~ 简单,可复用来测试关键的代码和逻辑 ~~

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/345969.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号