用list<map>将数据库信息展示在前端

时间: 2024-03-10 14:47:26 浏览: 98

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

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的实战项目，实现了从数据库获取信息并在前端展示的功能。这只是一个基础示例，实际项目中可能还需要考虑更多因素，如事务管理、错误处理、安全性等。继续学习和实践，你将能掌握更多高级特性并创建更复杂的系统。

好的，以下是一个使用`List<Map>`将数据库信息展示在前端的示例Java代码： ```java // 定义一个获取数据库中所有信息的方法 public List<Map<String, Object>> getAllData() { Connection conn = null; Statement stmt = null; ResultSet rs = null; List<Map<String, Object>> dataList = new ArrayList<>(); try { // 获取数据库连接 conn = DriverManager.getConnection(DB_URL, USER, PASS); // 执行查询语句 stmt = conn.createStatement(); String sql = "SELECT * FROM table_name"; rs = stmt.executeQuery(sql); // 处理结果集 ResultSetMetaData metaData = rs.getMetaData(); int columnCount = metaData.getColumnCount(); while (rs.next()) { Map<String, Object> dataMap = new HashMap<>(); for (int i = 1; i <= columnCount; i++) { dataMap.put(metaData.getColumnName(i), rs.getObject(i)); } dataList.add(dataMap); } } catch (SQLException e) { e.printStackTrace(); } finally { // 关闭资源 try { if (rs != null) { rs.close(); } if (stmt != null) { stmt.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } return dataList; } ``` 在这个方法中，我们通过执行查询语句获取数据库中的所有数据，并将结果保存在一个`List<Map>`中。每个`Map`对象表示一条数据，其中`Map`的key表示列名，value表示对应的值。接下来，我们将这个`List<Map>`传递给前端页面进行展示。以下是一个简单的JSP页面示例，在这个页面中，我们使用JSTL标签库来遍历`List<Map>`，并将每个`Map`中的数据展示出来： ```jsp <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <title>Database Data</title> </head> <body> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <c:forEach var="data" items="${dataList}"> <tr> <td>${data.column1}</td> <td>${data.column2}</td> <td>${data.column3}</td> </tr> </c:forEach> </tbody> </table> </body> </html> ``` 在这个JSP页面中，我们使用`<c:forEach>`标签来遍历`List<Map>`中的每个`Map`对象，并使用`${data.key}`的方式来获取每个key对应的值。这样就可以将数据库中的数据展示在前端页面上了。

阅读全文

用list<map>将数据库信息展示在前端

相关推荐

struts<optionsCollection>应用文档+实例

dwr-demo.rar_DEMO_DWR DE_dwr Demo_list set map

Django创建models.py读取数据库信息在前端用Echarts绘制图形的实现方法描述

idea连接mysql数据库使数据在前端显示

用前端和后端java和数据库写一个学生管理系统

怎么将数据库里的照片地址和信息渲染到前端，请帮我写一个接口和前端页面的样式和网络请求

最新推荐

ajax动态获取数据库中的数据方法

(源码)基于QT框架的云存储系统.zip

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

"互动学习：行动中的多样性与论文攻读经历"

点阵式显示屏常见故障诊断方法

名词性从句包括哪些类别？它们各自有哪些引导词？请结合例句详细解释。