Springboot+MySQL 实现从数据库获取数据展示到前端

2023年1月2日 925次阅读 来源: Space Tripper

1.运行效果

效果图如下：
《Springboot+MySQL 实现从数据库获取数据展示到前端》

2.创建数据库表

数据库名为”springboot”,数据库表名为”user”，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

3.新建SpringBoot项目

1、选择Spring Initializr，在本地路径下选择对应的SDK文件，选择默认的Service URL，选择Next。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
2、把Version改为“1.0.0-SNAPSHOT”，选择Next。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
3、这里需要导入3个依赖，选择Web-Spring Web，选择SQL-MySQL Driver，选择Developer Tool-Lombok。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》

4、选择存放路径。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
5、创建项目时可能会出现这种error。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
5.1、打开settings，找到http Proxy，选择Auto-detect proxy settings，选择Check connection，输入“https://start.aliyun.com/”。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
5.2、按之前的步骤把项目重新创建一次，选择“Custom”输入“https://start.aliyun.com/”，其他的步骤不变。

《Springboot+MySQL 实现从数据库获取数据展示到前端》
6.创建好的项目是这样子的。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
7.右下角的Maven提示选择“Enable Auto-Import”，pom有添加依赖时自动导入。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

4.运行SpringBoot

1、先写个小页面让SpringBoot跑起来，在demo包下新建“controller”包，“controller”包下新建“HelloController”类。
2、在“HelloController”方法上添加注解“@RestController”，意思是返回json数据，“@Controller”是返回页面。
3、写个Hello方法，String返回值类型，在方法上添加”@RequestMapping“返回json数据，@RequestMapping(“/hello”)括号里面的内容是等下要访问的路径名，方法里面直接return ”Hello“。
4、默认是8080端口。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》

5.配置application.properties

《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
application.properties 代码如下：

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot?characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

6.导入依赖

除了之前导入的”依赖还需要下面这些依赖。

		<!--内置tomcat对Jsp支持的依赖，用于编译Jsp-->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>
        <!--引入jsp相关-->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <!--引入Servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
        <!--引入jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

 
 
 
 
 
    
  
  
  • 1
    • 
  
  
  • 2
    • 
  
  
  • 3
    • 
  
  
  • 4
    • 
  
  
  • 5
    • 
  
  
  • 6
    • 
  
  
  • 7
    • 
  
  
  • 8
    • 
  
  
  • 9
    • 
  
  
  • 10
    • 
  
  
  • 11
    • 
  
  
  • 12
    • 
  
  
  • 13
    • 
  
  
  • 14
    • 
  
  
  • 15
    • 
  
  
  • 16
    • 
  
  
  • 17
    • 
  
  
  • 18
    • 
  
  
  • 19
    • 
  
  
  • 20
    • 
  
  
  • 21
    • 
  
  
  • 22
    • 
  
  
  • 23
    • 
  
  
  • 24
    • 
  
  
  • 25
    • 
  
  
  • 26
    • 
  
  
  • 27
    • 
  
  
  • 28
    • 
  
  
  • 29
    • 
  
  
  • 30
    •

7.开始写项目

一般的顺序是：pojo → Mapper/Dao → Controller → Service
Entity：实体层，数据库在项目中的类。pojo 实体类 User.java
Dao：持久层，主要与数据库交互。Mapper UserMapper(接口，需要写实现类)
Service层：业务层 控制业务。（接口，需要写实现类）
Controller层：控制层 控制业务逻辑。 UserController.java

1、在demo包下新建pojo包，pojo包下新建User类。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
2、User.java 中添加数据库表user中的四个字段，”id、name、age、email“和getter和setter方法。
User.java

package com.example.demo.pojo;

public class User {
private Integer id;
private String name;
private Integer age;
private String email;

<span class="token keyword">public</span> Integer <span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> id<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setId</span><span class="token punctuation">(</span>Integer id<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> String <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setName</span><span class="token punctuation">(</span>String name<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> Integer <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setAge</span><span class="token punctuation">(</span>Integer age<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> String <span class="token function">getEmail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> email<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setEmail</span><span class="token punctuation">(</span>String email<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>email <span class="token operator">=</span> email<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

8.编写Mapper

1、demo包下创建mapper包，mapper包下创建UserMapper接口。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
2、UserMapper 是接口，@Mapper为了把mapper这个DAO交给Spring管理，方法里面的内容是从user表中查询所有的数据。

UserMapper.java

package com.example.demo.mapper;

import com.example.demo.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserMapper { 

<span class="token annotation punctuation">@Select</span><span class="token punctuation">(</span><span class="token string">"select * from user"</span><span class="token punctuation">)</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>User<span class="token punctuation">&gt;</span></span> <span class="token function">findAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

9.编写Controller

1、在controller包下新建UserController类。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

2、@Controller 是返回页面，需要调用UserMapper，所以用@AutoWired
自动注入UserMapper，return ”user“ 返回的是一个页面，所以需要创建一个
user.jsp。

UserController.java

package com.example.demo.controller;

import com.example.demo.mapper.UserMapper;
import com.example.demo.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class UserControll {
@Autowired
UserMapper userMapper;

<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/user"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> String <span class="token function">userMapper</span><span class="token punctuation">(</span>Model m<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    List<span class="token generics function"><span class="token punctuation">&lt;</span>User<span class="token punctuation">&gt;</span></span> users <span class="token operator">=</span> userMapper<span class="token punctuation">.</span><span class="token function">findAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    m<span class="token punctuation">.</span><span class="token function">addAttribute</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span>users<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token string">"user"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

10. 创建前端页面

1、在src/main下创建webapp文件夹，webapp文件夹下创建WEB-INF文件夹，WEB-INF文件夹下创建jsp文件夹。
src
-main
–webapp
—WEB-INF
—-jsp

《Springboot+MySQL 实现从数据库获取数据展示到前端》
2、打开file中的Project Stucture。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
3、选择Modules，选择项目demo，选择Web，选择右边的+号，添加webapp的路径。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
4、webapp就被标记成web文件夹，在jsp文件夹下新建user.jsp文件。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
如果jsp页面报错的话，可以看下pom文件的依赖是否都导入成功。

user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>

<table align=‘center’ border=‘1’ cellspacing=‘0’>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>email</td>
</tr>
<c:forEach items=”KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 31: … varStatus=”st”&̲gt; &lt…{u.id}</td>
<td>KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 9: {u.name}&̲lt;/td&gt; …{u.age}</td>
<td>${u.email}</td>
</tr>
</c:forEach>
</table>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

11.运行效果

《Springboot+MySQL 实现从数据库获取数据展示到前端》

,

1.运行效果

效果图如下：
《Springboot+MySQL 实现从数据库获取数据展示到前端》

2.创建数据库表

数据库名为”springboot”,数据库表名为”user”，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

3.新建SpringBoot项目

1、选择Spring Initializr，在本地路径下选择对应的SDK文件，选择默认的Service URL，选择Next。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
2、把Version改为“1.0.0-SNAPSHOT”，选择Next。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
3、这里需要导入3个依赖，选择Web-Spring Web，选择SQL-MySQL Driver，选择Developer Tool-Lombok。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》

4、选择存放路径。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
5、创建项目时可能会出现这种error。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
5.1、打开settings，找到http Proxy，选择Auto-detect proxy settings，选择Check connection，输入“https://start.aliyun.com/”。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
5.2、按之前的步骤把项目重新创建一次，选择“Custom”输入“https://start.aliyun.com/”，其他的步骤不变。

《Springboot+MySQL 实现从数据库获取数据展示到前端》
6.创建好的项目是这样子的。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
7.右下角的Maven提示选择“Enable Auto-Import”，pom有添加依赖时自动导入。
《Springboot+MySQL 实现从数据库获取数据展示到前端》

4.运行SpringBoot

1、先写个小页面让SpringBoot跑起来，在demo包下新建“controller”包，“controller”包下新建“HelloController”类。
2、在“HelloController”方法上添加注解“@RestController”，意思是返回json数据，“@Controller”是返回页面。
3、写个Hello方法，String返回值类型，在方法上添加”@RequestMapping“返回json数据，@RequestMapping(“/hello”)括号里面的内容是等下要访问的路径名，方法里面直接return ”Hello“。
4、默认是8080端口。
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》

5.配置application.properties

《Springboot+MySQL 实现从数据库获取数据展示到前端》
《Springboot+MySQL 实现从数据库获取数据展示到前端》
application.properties 代码如下：

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot?characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    原文作者：Space Tripper
    原文地址: https://blog.csdn.net/qq_45793102/article/details/118461186
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞