使用Netbeans构建Spring Boot Java MVC Web App

￡神魔★判官ぃ 2023-09-30 09:24 19阅读 0赞

在这个 Spring Boot 教程中，我们将指导您如何使用 Netbeans 构建 MVC Java Web 应用程序（我们使用的是 Apache Netbeans 11.1）。自版本 9 起，Apache 继续开发 Netbeans IDE。您也可以使用 Eclipse、Intellij 或 JDeveloper。通过使用 Spring Boot，构建 Java Web 应用程序实际上比使用 Maven 或 Gradle 手动创建 Java 项目要容易一些。特别是当我们使用 Spring Initialzr 时，它将帮助您创建一组具有受支持依赖项的应用程序包。

#### **目录：** ####

*  [步骤 \#1：生成 Spring Boot Java Web 应用程序][_1_ Spring Boot Java Web]
 *  [步骤 \#2：创建 Java 模型或实体类][_2_ Java]
 *  [步骤 \#3：创建 Java 存储库接口][_3_ Java]
 *  [步骤\#4：创建 Spring MVC 控制器][4_ Spring MVC]
 *  [步骤 \#5：创建 Spring MVC 视图][_5_ Spring MVC]
 *  [第 6 步：运行 Spring Boot Java Web 应用程序][6 _ Spring Boot Java Web]

正如您在上面的目录中看到的那样，构建 MVC Java Web 应用程序需要几个步骤。从创建 Spring Boot 项目、Java 模型、Java 存储库、Java 控制器和 Java 视图开始。此 MVC Java Web 应用程序还使用数据库，我们将使用 H2 In-Memory 数据库或 HSQLDB。对于视图，我们将使用 Thymeleaf 和 Bootstrap。因此，本教程需要以下工具、框架和库：

1.  [Java Development Kit (JDK) 8][Java Development Kit _JDK_ 8]
2.  [Gradle][]
3.  [Spring Boot][]
4.  [Spring MVC][]
5.  [Spring Data JPA][]
6.  [H2 Database][]
7.  [Thymeleaf][]
8.  [Webjars Bootstrap][]
9.  [Spring Initializer][]
10. [Netbeans][]
11. Terminal or cmd

我们假设你必须在你的机器上安装 Netbeans、JDK 8 和 Gradle。所以，我们只需要生成一个新的 Spring Boot Gradle Java Web App。

##    **步骤 \#1：生成 Spring Boot Java Web 应用程序** ##

我们将使用 Spring Initializer 创建一个新的 Spring Boot Gradle 项目。Spring Initializr 提供了一个可扩展的 API 来生成快速启动项目，并检查用于生成项目的元数据，例如，列出可用的依赖项和版本。只需转到 Spring Initializer 基于 Web 的 Spring 项目生成器，然后填写所需的框架和库（Spring Web、H2 数据库、Thymeleaf、Spring Data JPA、Spring Data JDBC）。

![e16d0c7952839c20f6b0a636d0e1d076.png][]

填写完所有字段后，单击生成项目。它将自动下载压缩的项目。接下来，将压缩后的项目解压缩到您的 java 项目文件夹，然后从 Netbeans IDE 中打开该文件夹一个项目（使用打开项目菜单）。接下来，从 Projects 面板中展开项目名称（我们的：springmvc），然后展开 Build Scripts，您将看到 build.gradle 文件。打开该文件，您将看到此项目信息、插件、存储库和依赖项。

plugins {
        id 'org.springframework.boot' version '2.1.9.RELEASE'
        id 'io.spring.dependency-management' version '1.0.8.RELEASE'
        id 'java'
    }
    
    group = 'com.djamware'
    version = '0.0.1-SNAPSHOT'
    sourceCompatibility = '1.8'
    
    repositories {
        mavenCentral()
    }
    
    dependencies {
        implementation 'org.springframework.boot:spring-boot-starter-data-jdbc'
        implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
        implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
        implementation 'org.springframework.boot:spring-boot-starter-web'
        runtimeOnly 'com.h2database:h2'
        testImplementation 'org.springframework.boot:spring-boot-starter-test'
    }

在依赖项正文中为 Bootstrap 和 Thymeleaf 布局方言添加此依赖项。

dependencies {
      ...
        compile 'org.webjars:bootstrap:3.3.7'
      compile 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.4.1'
        ...
    }

在 Netbeans 中，右键单击项目名称，然后单击 build 以首次构建项目。

###    **步骤 \#2：创建 Java 模型或实体类** ###

我们将为这个 Spring MVC Java Web 应用程序创建一个产品数据表。现在，我们将通过创建一个新的 Java 模型或实体来实现 Spring MVC 的术语“M”。右键单击项目名称 -> 新建 -> Java 类。类名填写为 Product，包名填写为 com.djamware.springmvc.models，其他字段保持默认，然后单击 Finish 按钮。新的 Java 类自动打开，然后将所有 Java 代码替换为 Java 实体、自动生成 ID、必填字段、构造函数以及 getter 和 setter 代码。

package com.djamware.springmvc.models;
    
    import javax.persistence.Entity;
    import javax.persistence.GeneratedValue;
    import javax.persistence.GenerationType;
    import javax.persistence.Id;
    
    @Entity
    public class Product {
    
        @Id
        @GeneratedValue(strategy = GenerationType.AUTO)
        private Long id;
    
        private String prodName;
    
        private String prodDesc;
    
        private String prodImage;
    
        private Double prodPrice;
    
        public Product() {
        }
    
        public Product(String prodName, String prodDesc, String prodImage, Double prodPrice) {
            this.prodName = prodName;
            this.prodDesc = prodDesc;
            this.prodImage = prodImage;
            this.prodPrice = prodPrice;
        }
    
        public Long getId() {
            return id;
        }
    
        public void setId(Long id) {
            this.id = id;
        }
    
        public String getProdName() {
            return prodName;
        }
    
        public void setProdName(String prodName) {
            this.prodName = prodName;
        }
    
        public String getProdDesc() {
            return prodDesc;
        }
    
        public void setProdDesc(String prodDesc) {
            this.prodDesc = prodDesc;
        }
    
        public String getProdImage() {
            return prodImage;
        }
    
        public void setProdImage(String prodImage) {
            this.prodImage = prodImage;
        }
    
        public Double getProdPrice() {
            return prodPrice;
        }
    
        public void setProdPrice(Double prodPrice) {
            this.prodPrice = prodPrice;
        }
    
    }

###    **步骤 \#3：创建 Java 存储库接口** ###

接下来，我们必须创建一个扩展产品模型的 JPA 存储库的用户存储库。右键单击项目名称 -> 新建 -> Java 接口。填写类名ProductRepository，包名com.djamware.springmvc.repositories，其他字段默认，点击Finish按钮。新创建的文件将打开，然后用这些代码替换所有 Java 代码。

package com.djamware.springmvc.repositories;
    
    import com.djamware.springmvc.models.Product;
    import org.springframework.data.jpa.repository.JpaRepository;
    
    public interface ProductRepository extends JpaRepository<Product, Long> {
    
        Product findByProdName(final String prodName);
    
    }

如您所见，ProductRepository 接口现在扩展了 Product 类型的 JpaRepository，它只有一个额外的按产品名称查找产品的查询接口。从 Spring Boot 2.1 开始，默认情况下覆盖是禁用的。因此，覆盖此 ProductRepository 将导致运行时出现此错误。

***在 null 中定义的 bean 'productRepository' 无法注册。已在 null 中定义了具有该名称的 bean，并且禁用了覆盖。***

要解决此问题，只需打开并编辑“Resources/application.properties”，然后添加此行以启用覆盖。

spring.main.allow-bean-definition-overriding=true

###    **步骤\#4：创建 Spring MVC 控制器** ###

现在，是时候使用 MVC 的“C”术语了，即控制器。要在 Netbeans 上创建它，只需右键单击项目名称 -> 新建 -> Java 类。用 ProductController 填充类名，用 com.djamware.springmvc.controllers 填充包。将其他字段保留为默认值，然后单击“完成”按钮。新创建的 Java 类文件将自动打开。将所有 Java 代码替换为 @Controller、@RequestMapping、@RequestParam、ProductRepository 的这些代码以及为每个 CRUD 操作返回页面的所有必需的 CRUD 方法。

/*
     * To change this license header, choose License Headers in Project Properties.
     * To change this template file, choose Tools | Templates
     * and open the template in the editor.
     */
    package com.djamware.springmvc.controllers;
    
    import com.djamware.springmvc.models.Product;
    import com.djamware.springmvc.repositories.ProductRepository;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    @Controller
    public class ProductController {
    
        @Autowired
        ProductRepository productRepository;
    
        @RequestMapping("/product")
        public String product(Model model) {
            model.addAttribute("products", productRepository.findAll());
            return "product";
        }
    
        @RequestMapping("/create")
        public String create(Model model) {
            return "create";
        }
    
        @RequestMapping("/save")
        public String save(@RequestParam String prodName, @RequestParam String prodDesc, @RequestParam Double prodPrice, @RequestParam String prodImage) {
            Product product = new Product();
            product.setProdName(prodName);
            product.setProdDesc(prodDesc);
            product.setProdImage(prodImage);
            product.setProdPrice(prodPrice);
            productRepository.save(product);
    
            return "redirect:/show/" + product.getId();
        }
    
        @RequestMapping("/show/{id}")
        public String show(@PathVariable Long id, Model model) {
            model.addAttribute("product", productRepository.findById(id).orElse(null));
            return "show";
        }
    
        @RequestMapping("/delete")
        public String delete(@RequestParam Long id) {
            Product product = productRepository.findById(id).orElse(null);
            productRepository.delete(product);
    
            return "redirect:/product";
        }
    
        @RequestMapping("/edit/{id}")
        public String edit(@PathVariable Long id, Model model) {
            model.addAttribute("product", productRepository.findById(id).orElse(null));
            return "edit";
        }
    
        @RequestMapping("/update")
        public String update(@RequestParam Long id, @RequestParam String prodName, @RequestParam String prodDesc, @RequestParam Double prodPrice, @RequestParam String prodImage) {
            Product product = productRepository.findById(id).orElse(null);
            product.setProdName(prodName);
            product.setProdDesc(prodDesc);
            product.setProdImage(prodImage);
            product.setProdPrice(prodPrice);
            productRepository.save(product);
    
            return "redirect:/show/" + product.getId();
        }
    
    }

###  ###

**步骤 \#5：创建 Spring MVC 视图**

现在，是 MVC 模式视图的 \`V\` 的时候了。由于我们使用 Thymeleaf 库作为视图模板，因此我们可以为所有 HTML 页面创建相同的布局。Thymeleaf 是一个 Java XML/XHTML/HTML5 模板引擎，可以在 web（基于 servlet）和非 web 环境中工作。它更适合在基于 MVC 的 Web 应用程序的视图层提供 XHTML/HTML5，但它甚至可以在离线环境中处理任何 XML 文件。要创建布局，首先，在 \`Resources/templates\` 文件夹中创建一个 \`default.html\` 文件，然后用这些代码行添加或替换它。

<!DOCTYPE html>
    <html lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
        <head>
            <meta charset="UTF-8"/>
            <title>Default title for my pages</title>
            <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
            <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
            <link rel="stylesheet" href="/css/style.css" />
        </head>
        <body>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Spring MVC</a>
                    </div>
                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="/product">Home</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
    
            <div class="container">
                <div class="starter-template" layout:fragment="content"></div>
            </div>
    
            <script src="/webjars/jquery/1.11.1/jquery.min.js"></script>
            <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>
    </html>

该 HTML 显示使用 Thymeleaf 布局的布局模板。要使此布局正常工作，请确保您具有先前在第一步中添加的 Thymeleaf 布局方言的其他依赖项。所有 CSS 和 Javascript 文件都放在该文件上，并为所有使用“default.html”作为布局持有者的页面调用一次。此外，我们在该文件上调用 Bootstrap 和 JQuery。接下来，我们为产品列表创建一个名为“product.html”的视图，然后用它替换该文件的所有代码。

<!DOCTYPE HTML>
    <html lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="default">
        <head>
            <title>Product List</title>
        </head>
        <body>
            <div layout:fragment="content" class="row">
                <div class="col-xs-8 col-md-8">
                    <h3>
                        <a href="/create" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Product</a>
                    </h3>
                    <h2>Product List</h2>
                    <div class="table-responsive">
                        <table class="table" id="product-table">
                            <thead>
                                <tr>
                                    <th>Product Name</th>
                                    <th>Product Desc</th>
                                    <th>Product Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="product : ${products}">
                                    <td><a th:text="${product.prodName}" th:href="@{'/show/' + ${product.id}}"></a></td>
                                    <td th:text="${product.prodDesc}"></td>
                                    <td th:text="${product.prodPrice}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </body>
    </html>

接下来，在 \`Resources/templates\` 文件夹中创建一个名为 \`create.html\` 的产品表单的视图，然后用它替换所有代码。

<!DOCTYPE HTML>
    <html lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="default">
        <head>
            <title>Create Product</title>
        </head>
        <body>
            <div layout:fragment="content" class="row">
                <div class="col-xs-8 col-md-8">
                    <h3>
                        <a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
                    </h3>
                    <h2>Create Product</h2>
                    <form action="/save">
                        <div class="form-group">
                            <label for="email">Product Name:</label>
                            <input type="text" class="form-control" name="prodName" />
                        </div>
                        <div class="form-group">
                            <label for="email">Product Description</label>
                            <textarea class="form-control" name="prodDesc" cols="60" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="email">Product Price</label>
                            <input type="number" class="form-control" name="prodPrice" />
                        </div>
                        <div class="form-group">
                            <label for="email">Product Image URL:</label>
                            <input type="url" class="form-control" name="prodImage" />
                        </div>
                        <button type="submit" class="btn btn-success">Save</button>
                    </form>
                </div>
            </div>
        </body>
    </html>

接下来，在 \`Resources/templates\` 文件夹中创建一个名为 \`show.html\` 的显示产品详细信息视图，然后用此替换所有代码。

<!DOCTYPE HTML>
    <html lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="default">
        <head>
            <title>Show Product</title>
        </head>
        <body>
            <div layout:fragment="content" class="row">
                <div class="col-xs-8 col-md-8">
                    <h3>
                        <a href="/product" class="btn btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
                    </h3>
                    <h2 th:text="${product.prodName}"></h2>
                    <h2><img th:src="${product.prodImage}" width="200" /></h2>
                    <dl class="list">
                        <dt>Product Description</dt>
                        <dd th:text="${product.prodDesc}"></dd>
                        <dt>Product Description</dt>
                        <dd th:text="${product.prodPrice}"></dd>
                    </dl>
                    <form action="/delete">
                        <input type="hidden" name="id" th:value="${product.id}" />
                        <h2><input type="submit" class="btn btn-danger" value="Delete" onclick="return confirm('Are you sure?');" />
                            <a th:href="@{'/edit/' + ${product.id}}" class="btn btn-warning">Edit</a></h2>
                    </form>
                </div>
            </div>
        </body>
    </html>

接下来，在 \`Resources/templates\` 文件夹中创建一个名为 \`edit.html\` 的编辑产品视图，然后用此替换所有代码。

<!DOCTYPE HTML>
    <html lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="default">
        <head>
            <title>Edit Product</title>
        </head>
        <body>
            <div layout:fragment="content" class="row">
                <div class="col-xs-8 col-md-8">
                    <h3>
                        <a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
                    </h3>
                    <h2>Edit Product</h2>
                    <form action="/update">
                        <div class="form-group">
                            <label for="email">Product Name:</label>
                            <input type="text" class="form-control" name="prodName" th:value="${product.prodName}" />
                        </div>
                        <div class="form-group">
                            <label for="email">Product Description</label>
                            <textarea class="form-control" name="prodDesc" cols="60" rows="3" th:text="${product.prodDesc}"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="email">Product Price</label>
                            <input type="number" class="form-control" name="prodPrice" th:value="${product.prodPrice}" />
                        </div>
                        <div class="form-group">
                            <label for="email">Product Image URL:</label>
                            <input type="url" class="form-control" name="prodImage" th:value="${product.prodImage}" />
                        </div>
                        <input type="hidden" name="id" th:value="${product.id}" />
                        <button type="submit" class="btn btn-success">Save</button>
                    </form>
                </div>
            </div>
        </body>
    </html>

接下来，打开并编辑静态 HTML 文件“Resources/static/index.html”，然后用它替换所有代码。

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Spring MVC Java Web App</title>
        </head>
        <body>
            <h2>Spring MVC Java Web App</h2>
            <p><a href="/product">Product List</a></p>
        </body>
    </html>

这个 \`index.html\` 是 Web 应用程序运行后在浏览器上显示的第一个页面。接下来，通过在静态文件夹中创建一个新的 CSS 文件夹来添加一点样式，然后添加一个文件 \`style.css\`。将这些 CSS 代码行添加到该 CSS 文件中。

body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }

###    **第 6 步：运行 Spring Boot Java Web 应用程序** ###

要在 Netbeans IDE 中运行 Spring Boot 应用程序，只需单击工具栏中的播放按钮或右键单击项目面板中的项目名称，然后单击运行。这与从终端输入此命令相同。

./gradlew --configure-on-demand -x check bootRun

完整的 Spring Boot MVC Java Web 应用程序如下所示。

![55e87bd9806d4f7ba79216ce45e3a5dd.png][]

它是一种使用 Spring Boot、Data 和 MVC 只需 5 个步骤即可快速创建 Java Web 应用程序的方法。您可以从我们的[GitHub][]获取完整的工作源代码。

[_1_ Spring Boot Java Web]: https://www.djamware.com/post/5d9896d3abbb349ea4003e94/spring-boot-tutorial-build-an-mvc-java-web-app-using-netbeans#springboot-java-webapp
[_2_ Java]: https://www.djamware.com/post/5d9896d3abbb349ea4003e94/spring-boot-tutorial-build-an-mvc-java-web-app-using-netbeans#java-model-entity-class
[_3_ Java]: https://www.djamware.com/post/5d9896d3abbb349ea4003e94/spring-boot-tutorial-build-an-mvc-java-web-app-using-netbeans#java-repository-interface
[4_ Spring MVC]: https://www.djamware.com/post/5d9896d3abbb349ea4003e94/spring-boot-tutorial-build-an-mvc-java-web-app-using-netbeans#spring-mvc-controller
[_5_ Spring MVC]: https://www.djamware.com/post/5d9896d3abbb349ea4003e94/spring-boot-tutorial-build-an-mvc-java-web-app-using-netbeans#spring-mvc-view
[6 _ Spring Boot Java Web]: https://www.djamware.com/post/5d9896d3abbb349ea4003e94/spring-boot-tutorial-build-an-mvc-java-web-app-using-netbeans#run-springboot-java-webapp
[Java Development Kit _JDK_ 8]: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
[Gradle]: https://gradle.org/
[Spring Boot]: https://projects.spring.io/spring-boot/
[Spring MVC]: https://spring.io/guides/gs/serving-web-content/
[Spring Data JPA]: https://spring.io/projects/spring-data
[H2 Database]: https://www.h2database.com/
[Thymeleaf]: https://www.thymeleaf.org/
[Webjars Bootstrap]: https://mvnrepository.com/artifact/org.webjars/bootstrap/3.3.7
[Spring Initializer]: https://start.spring.io/
[Netbeans]: https://netbeans.apache.org/
[e16d0c7952839c20f6b0a636d0e1d076.png]: https://img-blog.csdnimg.cn/img_convert/e16d0c7952839c20f6b0a636d0e1d076.png
[55e87bd9806d4f7ba79216ce45e3a5dd.png]: https://img-blog.csdnimg.cn/img_convert/55e87bd9806d4f7ba79216ce45e3a5dd.png
[GitHub]: https://github.com/didinj/springboot-mvc-java-web-app.git