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

1.运行效果

效果图如下：

2.创建数据库表

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

3.新建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有添加依赖时自动导入。

4.运行SpringBoot

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

5.配置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

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>

7.开始写项目

一般的顺序是：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;
    }
}

8.编写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();
}

9.编写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";
    }


}

10. 创建前端页面

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>

11.运行效果