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

您所在的位置：网站首页 › id怎么展示页面 › Springboot+MySQL 实现从数据库获取数据展示到前端

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

2024-07-14 16:54| 来源: 网络整理| 查看: 265

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.导入依赖

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

org.apache.tomcat.embed tomcat-embed-jasper provided org.mybatis.spring.boot mybatis-spring-boot-starter 1.1.1 javax.servlet.jsp jsp-api 2.2 javax.servlet javax.servlet-api 3.1.0 jstl jstl 1.2 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 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 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

id name age email ${u.id} ${u.name} ${u.age} ${u.email} 11.运行效果

在这里插入图片描述

【本文地址】

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

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

今日新闻

推荐新闻