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

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

引用

CSDN

1.

https://blog.csdn.net/weixin_44088274/article/details/106970073

创建数据库表

数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。

新建SpringBoot项目

1. 选择Spring Initializr，在本地路径下选择对应的SDK文件，选择默认的Service URL，选择Next。
2. 把Version改为“1.0.0-SNAPSHOT”，选择Next。
3. 这里需要导入3个依赖，选择Web-Spring Web，选择SQL-MySQL Driver，选择Developer Tool-Lombok。

4. 选择存放路径。
5. 创建项目时可能会出现这种error。
   5.1. 打开settings，找到http Proxy，选择Auto-detect proxy settings，选择Check connection，输入“https://start.aliyun.com/”。

5.2. 按之前的步骤把项目重新创建一次，选择“Custom”输入“https://start.aliyun.com/”，其他的步骤不变。
6. 创建好的项目是这样子的。
7. 右下角的Maven提示选择“Enable Auto-Import”，pom有添加依赖时自动导入。

运行SpringBoot

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

配置application.properties

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

导入依赖

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

<dependencies>
    <!--内置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>
</dependencies>

开始写项目

一般的顺序是：pojo → Mapper/Dao → Controller → Service

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

1. 在demo包下新建pojo包，pojo包下新建User类。
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;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

编写Mapper

1. demo包下创建mapper包，mapper包下创建UserMapper接口。
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 {
    @Select("select * from user")
    List<User> findAll();
}

编写Controller

1. 在controller包下新建UserController类。
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;

    @RequestMapping("/user")
    public String userMapper(Model m){
        List<User> users = userMapper.findAll();
        m.addAttribute("user",users);
        return "user";
    }
}

创建前端页面

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

src
-main
–webapp
—WEB-INF
----jsp

2. 打开file中的Project Stucture。
3. 选择Modules，选择项目demo，选择Web，选择右边的+号，添加webapp的路径。
4. webapp就被标记成web文件夹，在jsp文件夹下新建user.jsp文件。
   如果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="${user}" var="u" varStatus="st">
        <tr>
            <td>${u.id}</td>
            <td>${u.name}</td>
            <td>${u.age}</td>
            <td>${u.email}</td>
        </tr>
    </c:forEach>
</table>