数据库信息调用实操：ssm+java解决后端搭建、数据库读取与信息显示！

2022-11-01 04:20:20

构建Java Web应用程序以显示数据库中的商品信息

准备工作

在开始之前，确保已安装以下软件：

IntelliJ IDEA 2020
Tomcat 9.0
MySQL 8.0.25
Maven 3.5.0

搭建环境

使用 Maven 管理项目依赖关系。创建一个新的 Maven 项目，并添加以下依赖关系：

<dependencies>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>5.3.22</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.22</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>5.3.22</version>
  </dependency>
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.25</version>
  </dependency>
  <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>2.0.12</version>
  </dependency>
</dependencies>

编写数据库

创建名为“product”的数据库，并在其中创建一个名为“product_info”的表：

CREATE TABLE `product_info` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(255) NOT NULL,
  `price` DECIMAL(10, 2) NOT NULL,
  `description` TEXT,
  PRIMARY KEY (`id`)
);

编写Java代码

在“ProductController”类中，定义一个“getProductList”方法，该方法将查询数据库并返回所有商品信息：

@RestController
@RequestMapping("/product")
public class ProductController {

  @Autowired
  private ProductService productService;

  @GetMapping("/list")
  public List<Product> getProductList() {
    return productService.getProductList();
  }
}

编写前端页面

创建一个名为“index.html”的页面，并使用 Ajax 调用“ProductController”的“getProductList”方法：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "/product/list",
        type: "GET",
        success: function(data) {
          var html = "";
          for (var i = 0; i < data.length; i++) {
            html += "<tr>";
            html += "<td>" + data[i].id + "</td>";
            html += "<td>" + data[i].name + "</td>";
            html += "<td>" + data[i].price + "</td>";
            html += "<td>" + data[i].description + "</td>";
            html += "</tr>";
          }
          $("#product-list").html(html);
        }
      });
    });
  </script>
</head>
<body>
  <h1>商品信息</h1>
  <table id="product-list">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>价格</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
</html>