Springboot后台数据接口(Layui)

我们搭建一个springboot应用,我们在springboot应用中给它输出这个数据。输出的数据让前端进行加载。

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

这里我们要导入的依赖

<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1.tmp</version>
</dependency>
<?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.3.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.southwind</groupId>
    <artifactId>layui01</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>layui01</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-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
	<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1.tmp</version>
	</dependency>
    </dependencies>

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

</project>

当我们使用到数据库表的时候第一反应首先是先有实体类
当我们有了实体类以后我们就要测验一下能不能调通。(这个时候我们就需要创建一个接口)

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

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/zc_db
    username: root
    password: root
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

在这里插入图片描述在这里插入图片描述在这里插入图片描述我们需要在启动类里面加一个MapperScan

package com.southwind.layui01;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.southwind.layui01.mapper")
public class Layui01Application {

    public static void main(String[] args) {
        SpringApplication.run(Layui01Application.class, args);
    }

}

在这里插入图片描述

package com.southwind.layui01.mapper;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class ZcInfoMapperTest {
    @Autowired
    private ZcInfoMapper zcInfoMapper;

    @Test
    void Test(){
        zcInfoMapper.selectList(null).forEach(System.out::println);
    }
}

它会自动把数据库中的下划线转成驼峰

接口测通了我们就可以去写业务了(给前端返json数据)
在这里插入图片描述前后端的对接接口一定是要对应的。
在这里插入图片描述page是分页的功能
在这里插入图片描述

在这里插入图片描述在这里插入图片描述分页操作是会用到总数据量的
在这里插入图片描述因为实体类的数据结构数据类型跟我们前端的数据要求不一致(基本相似但是有点出入),所以我们就需要根据实体类封装一套跟前端所吻合的结构。这个东西就叫vo(视图对象)
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

package com.southwind.layui01.vo;

import lombok.Data;

import java.util.List;

@Data
public class DataVo<T> {
    private Integer code;
    private String msg;
    private Integer count;
    private List<T> data;
}

接下来就开始封装我们的业务层了(service就是然后后端返回前端的数据)

package com.southwind.layui01.service;

import com.southwind.layui01.entity.ZcInfo;
import com.southwind.layui01.vo.DataVo;

import javax.xml.crypto.Data;

public interface ZcInfoService {
    public DataVo<ZcInfo> findData();
}

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

在这里插入图片描述通过id来查找到那一行的数据,然后获取name值。
在这里插入图片描述当然我们不选中自己写也是ok的

package com.southwind.layui01.service.impl;

import com.southwind.layui01.entity.ZcInfo;
import com.southwind.layui01.mapper.ZcInfoMapper;
import com.southwind.layui01.service.ZcInfoService;
import com.southwind.layui01.vo.DataVo;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ZcInfoServiceImpl implements ZcInfoService {
    @Autowired
    private ZcInfoMapper zcInfoMapper;
    @Override
    public DataVo<ZcInfo> findData() {
        DataVo dataVo=new DataVo();
        dataVo.setCode(0);
        dataVo.setMsg("");
        //查询出表格中数据的数量
        dataVo.setCount(zcInfoMapper.selectCount(null));
        //把数据库里面的所有数据查出来
        List<ZcInfo> zcInfoList=zcInfoMapper.selectList(null);
        dataVo.setData(zcInfoList);
        return dataVo;
    }

}

package com.southwind.layui01.service;

import com.southwind.layui01.entity.ZcInfo;
import com.southwind.layui01.vo.DataVo;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class ZcInfoServiceTest {
    @Autowired
    private ZcInfoService zcInfoService;

    @Test
    void findData() {
        DataVo dataVo =zcInfoService.findData();
        int i=0;
    }
}

在这里插入图片描述
在这里插入图片描述接口已经搞定了,接下来我们就是把这个接口对外开发了(让前端调用后端开发的接口就可以访问到后端的数据了)。

package com.southwind.layui01.controller;

import com.southwind.layui01.service.ZcInfoService;
import com.southwind.layui01.vo.DataVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ZcInfoController {
    @Autowired
    private ZcInfoService zcInfoService;
    @RequestMapping("/list")
    public DataVo list(){
        return zcInfoService.findData();
    }
}

接下来就是让前端访问真实的后端数据
在这里插入图片描述
这个时候我们还是访问不到,因为涉及到了跨域问题。
如何解决跨域问题:https://blog.csdn.net/liulang68/article/details/108711063

接下来就是让前端的分页功能生效
所有我们后台需要做分页的功能

后端首先要把前端分页的参数接收到(控制层,接口层,实现类层都需要加上参数)

在这里插入图片描述

package com.southwind.layui01.controller;

import com.southwind.layui01.service.ZcInfoService;
import com.southwind.layui01.vo.DataVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ZcInfoController {
    @Autowired
    private ZcInfoService zcInfoService;
    @RequestMapping("/list")
    public DataVo list(Integer page,Integer limit){
        return zcInfoService.findData(page,limit);
    }
}

package com.southwind.layui01.service.impl;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.southwind.layui01.entity.ZcInfo;
import com.southwind.layui01.mapper.ZcInfoMapper;
import com.southwind.layui01.service.ZcInfoService;
import com.southwind.layui01.vo.DataVo;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ZcInfoServiceImpl implements ZcInfoService {
    @Autowired
    private ZcInfoMapper zcInfoMapper;
    @Override
    public DataVo<ZcInfo> findData(Integer page,Integer limit) {
        DataVo dataVo=new DataVo();
        dataVo.setCode(0);
        dataVo.setMsg("");
        IPage<ZcInfo> zcInfoIPage=new Page<>(page,limit);
        IPage<ZcInfo> result=zcInfoMapper.selectPage(zcInfoIPage,null);//这里的null还是指的是查询所有的数据
       dataVo.setCount(result.getTotal());
        //把数据库里面的所有数据查出来
        List<ZcInfo> zcInfoList=result.getRecords();
        dataVo.setData(zcInfoList);
        return dataVo;
    }

}

虽然我们已经把分页的逻辑加上去了,但是我们还需要写一个拦截器,如果没有这个拦截器它是无法进行分页处理的。
在这里插入图片描述

package com.southwind.layui01.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MyBatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor(){
        return new PaginationInterceptor();
    }
}

package com.southwind.layui01.service.impl;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.southwind.layui01.entity.ZcInfo;
import com.southwind.layui01.mapper.ZcInfoMapper;
import com.southwind.layui01.service.ZcInfoService;
import com.southwind.layui01.vo.DataVo;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ZcInfoServiceImpl implements ZcInfoService {
    @Autowired
    private ZcInfoMapper zcInfoMapper;
    @Override
    public DataVo<ZcInfo> findData(Integer page,Integer limit) {
        DataVo dataVo=new DataVo();
        dataVo.setCode(0);
        dataVo.setMsg("");
        IPage<ZcInfo> zcInfoIPage=new Page<>(page,limit);
        IPage<ZcInfo> result=zcInfoMapper.selectPage(zcInfoIPage,null);//这里的null还是指的是查询所有的数据
       dataVo.setCount(result.getTotal());
        //把数据库里面的所有数据查出来
        List<ZcInfo> zcInfoList=result.getRecords();
        dataVo.setData(zcInfoList);
        return dataVo;
    }

}

在这里插入图片描述

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: Spring Boot 是一个基于 Java 的开发框架,它简化了 Spring 应用程序的配置和部署过程。MyBatis 是一种能够对关系型数据库进行持久化操作的框架。而 Layui 是一个简洁易用的前端框架,它能帮助开发者快速构建出美观的用户界面。 使用 Spring Boot 结合 MyBatis 实现新增数据的功能非常简单。首先需要在项目的 pom.xml 文件引入相关的依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>tk.mybatis</groupId> <artifactId>mapper-spring-boot-starter</artifactId> <version>版本号</version> </dependency> ``` 然后,在 Spring Boot 的配置文件 application.properties 配置数据库连接信息: ```properties spring.datasource.url=jdbc:mysql://localhost:3306/数据库名 spring.datasource.username=用户名 spring.datasource.password=密码 spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 接下来,创建一个实体类,用于表示数据的一张表: ```java @Entity @Table(name = "表名") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; // 省略getter和setter方法 } ``` 然后,创建一个 Mapper 接口,用于定义对数据库的增删改查操作: ```java @Repository public interface UserMapper extends Mapper<User> { } ``` 在 Service 层调用 Mapper 接口的方法,实现对数据库的操作: ```java @Service public class UserService { @Autowired private UserMapper userMapper; public void addUser(User user) { userMapper.insert(user); } } ``` 最后,在前端页面使用 Layui 的表单组件,通过 Ajax 发送请求,将数据提交给后端: ```html <form class="layui-form" onsubmit="return false;"> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-block"> <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submit">提交</button> </div> </div> </form> <script> layui.use(['form', 'layer'], function() { var form = layui.form; var layer = layui.layer; // 监听提交事件 form.on('submit(submit)', function(data) { // 获取表单数据 var name = data.field.name; var age = data.field.age; // 发送 Ajax 请求,将数据提交给后端 $.ajax({ url: '后端接口地址', type: 'post', dataType: 'json', data: { name: name, age: age }, success: function(res) { if (res.code === 0) { layer.msg('新增成功'); } else { layer.msg('新增失败'); } }, error: function() { layer.msg('网络错误'); } }); return false; }); }); // 引入 layui 的 css 和 js 文件 </script> ``` 以上就是使用 Spring Boot 和 MyBatis 实现新增数据并结合 Layui 实现前端页面的简单示例。通过这种方式,我们可以快速实现对数据库的增删改查操作,并将数据以美观的方式展示给用户。 ### 回答2: Spring Boot是一个用于构建Java应用程序的开发框架,它提供了一种快速、方便的方式来配置和构建独立的、基于Spring的应用程序。而MyBatis是一个持久层框架,它可以将数据库操作与Java对象的映射关系进行配置,简化了数据库操作的编写过程。 在Spring Boot,我们可以通过集成MyBatis来实现对数据库的访问。首先,我们需要在项目的pom.xml文件添加MyBatis和MyBatis-Spring的依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.0</version> </dependency> 然后,在application.properties或application.yml文件配置数据库的相关信息,包括数据库的URL、用户名、密码等。在配置完成后,我们就可以使用MyBatis进行数据库操作了。 在新增数据方面,我们可以定义一个POJO类来表示数据的表。然后,通过在接口定义相应的方法,使用@Insert注解标记需要进行插入操作的方法。在方法,我们可以使用@Param注解来传递参数,将数据插入到数据。 在前端方面,我们可以使用Layui作为前端框架来构建用户界面。Layui是一个模块化的前端框架,提供了一系列的组件,包括表格、表单、弹窗等,使得前端开发更加简单和高效。 在新增数据的界面,我们可以使用Layui的表单组件来收集用户输入的数据。然后,使用Ajax来将数据发送到后端调用对应的接口实现数据的新增操作。在后端接收到数据后,通过MyBatis将数据插入到数据。 综上所述,通过Spring Boot集成MyBatis实现数据的新增操作,再配合Layui构建前端界面,可以快速、方便地实现数据的录入和展示功能。这样可以大大提高开发效率,减少重复的编码工作。 ### 回答3: Spring Boot是一个开发框架,它简化了基于Java的应用程序的开发过程,并且提供了很多开箱即用的功能。MyBatis是一个持久化框架,它可以帮助我们更方便地访问数据库。 要实现新增的功能,我们可以结合Spring Boot和MyBatis来实现。下面是一个简单的示例: 首先,我们需要创建一个Spring Boot项目。你可以通过 https://start.spring.io/ 或者使用IDE的创建项目向导来创建一个空的Spring Boot项目。 接下来,我们需要集成MyBatis。在Spring Boot,我们可以通过在pom.xml文件添加MyBatis的依赖来实现。例如,可以添加以下依赖: ```xml <dependencies> <!-- 添加Spring Boot依赖 --> <!-- 添加MyBatis依赖 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.4</version> </dependency> <!-- 添加数据库驱动依赖 --> </dependencies> ``` 然后,我们需要配置MyBatis。可以在application.properties文件添加以下配置: ```properties # MyBatis配置 mybatis.mapper-locations=classpath*:mapper/**/*.xml mybatis.type-aliases-package=com.example.demo.entity ``` 接下来,我们需要定义一个实体类和一个Mapper接口。实体类对应数据的表,Mapper接口定义了对表的操作方法。 ```java // 实体类 @Data public class User { private Long id; private String name; private Integer age; } // Mapper接口 @Mapper public interface UserMapper { void insert(User user); } ``` 最后,我们可以在Controller使用Mapper来实现新增功能。例如,可以添加以下代码: ```java @Controller public class UserController { @Autowired private UserMapper userMapper; @PostMapping("/add") public String addUser(User user) { userMapper.insert(user); return "success"; } } ``` 现在,我们可以使用Layui来实现前端页面。在前端页面,我们可以通过发送POST请求来调用Controller的addUser方法,从而实现新增用户的功能。具体的前端代码可以参考Layui的文档。 以上是一个简单的示例,演示了如何使用Spring Boot和MyBatis实现新增功能,并结合Layui来实现前端页面。实际项目可能会更加复杂,但基本的原理是相同的。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值