Springboot+maven+idea+mysql实战之获取数据库信息显示在前端

51 浏览量 2020-12-21 18:32:27 上传评论 12 收藏 459KB PDF 举报

Springboot项目之与数据库交互展示数据库信息（Mysql数据库）大家好，我是菜鸟阿贵，很高兴能与您相互交流java相关知识！！！ #最近项目用到springboot与mysql进行交互，那么今天就来简单实现以下，供朋友们一起学习，欢迎指正！！！ ##首先项目用到：idea+springboot+maven+mysql 首先我们需要在项目中pom.xml文件中引入Mysql数据库相关架包：注意：springboot项目中引入架包时不需要加上版本号，因为自带的标签库中自带了每个jar包工具的版本号，当你导入需要的架包时候springboot会自动为你匹配相应的版本。 2：pom.xml 在本教程中，我们将探讨如何使用Spring Boot、Maven、IntelliJ IDEA和MySQL数据库创建一个实战项目，目的是从数据库获取信息并在前端展示。我们需要确保我们的开发环境已准备就绪，包括安装IntelliJ IDEA作为IDE，以及配置Spring Boot和Maven项目。 1. **项目构建** 创建一个Spring Boot项目，选择`Web`和`JPA`模块，这样会自动为我们添加必要的依赖。Spring Boot默认包含了Maven的父POM，因此我们无需手动添加Maven的版本信息。 2. **添加MySQL驱动依赖** 在`pom.xml`文件中，我们需要引入MySQL的JDBC驱动，以便与MySQL数据库进行交互。Spring Boot提供了对MySQL驱动的支持，我们只需添加如下依赖： ```xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> ``` 不需要指定版本号，Spring Boot会自动匹配适用的版本。 3. **配置数据库连接** 在`application.properties`或`application.yml`文件中配置数据库连接信息，包括URL、用户名、密码和驱动类名。例如在`application.properties`中： ``` spring.datasource.url=jdbc:mysql://127.0.0.1:3306/yuguang spring.datasource.username=root spring.datasource.password=1234 spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 如果你喜欢使用YAML格式，可以改为： ```yaml spring: datasource: url: jdbc:mysql://127.0.0.1:3306/yuguang username: root password: 1234 driver-class-name: com.mysql.jdbc.Driver ``` 注意YAML的语法要求，键值对之间要有空格。 4. **启动Spring Boot应用** 保存配置后，启动Spring Boot应用。如果一切正常，应用程序应该能够成功连接到MySQL数据库。 5. **编写业务代码** 要从数据库获取数据并在前端展示，我们需要创建一个`Controller`，注入`JdbcTemplate`来执行SQL查询。例如： ```java @RestController public class TestController { @Autowired private JdbcTemplate jdbcTemplate; @GetMapping("/getUsers") public List<Map<String, Object>> getUsers() { String sql = "SELECT * FROM userinfo"; return jdbcTemplate.queryForList(sql); } } ``` 这里的`/getUsers`是一个REST API端点，返回`userinfo`表的所有记录。 6. **前端展示** 现在，你需要一个前端页面来展示获取到的数据。这可能是一个HTML页面或者一个基于JavaScript的SPA（单页应用）。如果你使用Thymeleaf或其他模板引擎，可以在`templates`目录下创建一个HTML页面，通过Ajax请求获取`/getUsers`返回的数据，并在页面上显示。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Database Information</title> </head> <body> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th>  </tr> </thead> <tbody id="userTable"> </tbody> </table> <script> fetch('/getUsers') .then(response => response.json()) .then(data => { let tableBody = document.getElementById('userTable'); data.forEach(user => { let row = tableBody.insertRow(); Object.keys(user).forEach(key => { let cell = row.insertCell(); cell.textContent = user[key]; }); }); }); </script> </body> </html> ``` 7. **运行并测试** 通过浏览器访问`http://localhost:8080/getUsers`，确认数据是否正确返回。然后在前端页面中，你应该能看到数据库中的数据被加载并显示出来。 8. **端口配置** 如果8080端口被占用，可以在`application.properties`或`application.yml`中更改服务器端口。例如在`application.properties`中： ``` server.port=8081 ``` 之后，应用将在8081端口启动。通过以上步骤，你已经成功创建了一个使用Spring Boot、Maven、IntelliJ IDEA和MySQL的实战项目，实现了从数据库获取信息并在前端展示的功能。这只是一个基础示例，实际项目中可能还需要考虑更多因素，如事务管理、错误处理、安全性等。继续学习和实践，你将能掌握更多高级特性并创建更复杂的系统。

资源详情

资源评论

资源推荐