文章
開始
開始學習
JavaRush /Java Blog /Random-TW /Maven、Spring、MySQL、Hibernate 和第一個 CRUD 應用程式簡介（第 4 部分）
Макс
等級 41

Maven、Spring、MySQL、Hibernate 和第一個 CRUD 應用程式簡介（第 4 部分）

在 Random-TW 群組發布
午安. 在這篇文章中，我想分享我在創建一個簡單的 CRUD 應用程式的過程中第一次接觸到 Maven、Spring、Hibernate、MySQL 和 Tomcat 等東西。這是最後一部分。本文主要針對那些已經完成 30-40 個級別，但尚未超越純 Java 並剛開始（或即將開始）進入擁有所有這些技術、框架和其他不熟悉的開放世界的人字。 這是文章「Maven、Spring、MySQL、Hibernate 簡介和第一個 CRUD 應用程式」的最後第四部分。前面的部分可以透過以下連結查看：

內容：

設計和網路資源

我們的應用程式可以工作，但你看它時會流淚、無聊的銘文、醜陋的連結、空蕩蕩的白色背景。我們需要解決這個問題並添加不同的美感。我們如何做到這一點？好吧，首先，您可以使用HTML的功能來玩弄頁面並執行各種操作。但如果您嘗試單獨使用 HTML 來更改背景、顏色、大小、元素的排列等。等等。那麼最終你會把頁面弄得一團糟，以至於以後你什麼也看不清楚。此外，HTML 的設計選項非常有限。最好使用CSS（層疊樣式表）來實現此目的。然後，與設計相關的所有內容都可以收集到一個地方，然後應用於頁面的所需元素。CSS程式碼可以直接寫在JSP頁面上的特殊標籤中，但將其放在單獨的文件中，然後簡單地將其應用到必要的頁面中要方便得多。為了放置帶有樣式和其他靜態 Web 資源的文件，我們將在webapp中建立一個單獨的目錄。為了不將 Web 資源與常規資源（其中有db.properties）混淆，我們將此目錄命名為res並將所有 CSS 文件、圖像等放置在其中：
Maven、Spring、MySQL、Hibernate 和第一個 CRUD 應用程式簡介（第 4 部分）- 1
要使用這些文件，我們需要在配置中指定它們的位置。我們去我們班吧WebConfig。之前我們使用註解的時候@EnableWebMvc沒有配置任何東西，只是簡單的使用預設的配置。但現在需要配置一些東西。為此，我們使用接口WebMvcConfigurer，它允許您覆蓋配置方法。那。我們可以使用預設配置，但同時可以為自己自訂一些方面。在這種情況下addResourceHandlers，我們需要一種方法來指示靜態 Web 資源的位置。以防萬一，整個類別最終看起來像這樣： 
package testgroup.filmography.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "testgroup.filmography")
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/res/**").addResourceLocations("/res/");
    }

    @Bean
    ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/pages/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
}
Java-университет
現在要在頁面上使用我們的 CSS，您需要在標籤內連結到它head： 
<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>
只需添加這一行並創建一個簡單的 CSS 文件，例如： 
table {
    border-spacing: 0 10px;
    font:  bold 100% Georgia, serif;
    margin: 40px auto;
    text-shadow: 5px 5px 5px #3F3F7F;
    background: #B1B9D9;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    border: 10px solid blue;
}
這將徹底改變我們的表格（當然，它看起來很愚蠢，但它是這樣的，例如）： Maven、Spring、MySQL、Hibernate 和第一個 CRUD 應用程式簡介（第 4 部分）- 2嗯，我認為沒有必要詳細談論CSS，一切都很簡單。在互聯網上，您可以找到許多用於設計表格和表單的現成選項。但當然，最好自己做設計，你不需要成為設計師，畢竟這不是什麼複雜的網站。即使在第一次熟悉後的幾個小時也足以為這樣一個簡單的頁面創建一個相當漂亮和整潔的設計。此外，網路上充滿了各種各樣的課程、範例，還有一些特殊的網站，您可以在一個螢幕上同時編輯 HTML、CSS，並立即看到它們的樣子。只要稍加練習，您就可以創造出真正的藝術。確實，你也不應該在這裡太得意忘形（當然，除非你打算成為設計師），否則設計就是這樣的事情，你可能會被困在這裡很長一段時間。當我第一次開始理解 CSS 時，我陷入了困境。我想嘗試一切，每一個屬性，扭曲一些東西，修補它，進行實驗，抓取一些網站的頁面並將它們重新製作得面目全非。我可能用這個玩具玩了一個星期，什麼也不做，直到它讓我離開:) 好吧，一般來說，當然，你不應該做得太過分，創造一個難以理解的多彩奇蹟，你需要簡單地做，並且有品味。唯一值得注意的是。您需要了解CSS 是設計的描述，而HTML 是標記。你不應該嘗試透過 CSS 完成所有事情；有些方面會很難做到，有些方面根本不可能，而在 HTML 中，這是透過幾行額外的行，甚至只是標籤中的一個屬性來完成的。您需要將它們組合起來，在 CSS 中製作各種顏色、背景、字體，例如，如果您需要組合幾個表格單元格，那麼使用 HTML 工具會更容易。好吧，例如，這就是我在幾個小時擺弄 CSS 和 HTML 的情況下對頁面所做的事情（我不會在這裡詳細介紹我為實現這一目標而造成的混亂，最後將會有該項目的GitHub 連結（您可以在其中查看）： Знакомство с Maven, Spring, MySQL, Hibernate и первое CRUD приложение (часть 4) - 3當然，我不知道我在那裡做的所有事情有多熟練，但考慮到我一周前第一次看到 CSS，我認為結果相當不錯。

分頁

現在一切正常，看起來不錯，但到目前為止表中只有幾筆記錄。如果裡面有一百部電影，或是一千部電影怎麼辦？這麼長的清單滾起來不太方便。例如，當清單以 10 個條目的頁面形式顯示時，會更方便。因此，現在我們將嘗試實現將清單拆分為頁面（有時這也稱為「分頁」或「分頁」（英文pagination））。這可以透過不同的方式來完成。例如，您可以將完整清單傳輸到 jsp 頁面，並在其中建立包含所需記錄數的表。或者，例如，您可以從服務中的常規清單中提取所需的記錄，然後將這個迷你清單傳送到jsp頁面進行顯示。但當然最好是在資料庫層級執行此操作。這個想法不是從資料庫中獲取完整的列表，然後將其分成幾部分，而是首先從資料庫中獲取所需的部分，而不觸及其他所有內容。畢竟，為什麼我們需要一次性從資料庫中取出數百或數千筆記錄，如果我們需要的是前十筆記錄，那麼最好只取出這十筆記錄。讓我們轉到DAO並在方法中添加allFilms一個參數int page，該參數將負責頁碼（當然，在服務中我們也這樣做）。讓我們稍微改變一下這個方法的實作；如果之前我們提取了整個列表，那麼現在我們將只提取一部分。setFirstResult方法（從表格的哪一行開始）和setMaxResults（顯示多少筆記錄） 將幫助我們： 
@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}
那些。如果這是第1 頁，則最多顯示10 條記錄，從第0 條開始；如果這是第5 頁，則從第40 條開始顯示10 條記錄（不要忘記資料庫中的編號是從0 開始的） 。我們也會再建立一個方法來傳回表中的記錄數。我們需要這個來了解所有頁面的數量並在我們的 jsp 頁面上為它們創建連結： 
public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }
使用這樣的查詢，我們將獲得表中所有記錄的數量（作為int值），而無需提取記錄本身。現在讓我們轉到控制器並處理返回帶有電影列表的主頁的方法： 
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView allFilms(@RequestParam(defaultValue = "1") int page) {
    List&ltFilm> films = filmService.allFilms(page);
    int filmsCount = filmService.filmsCount();
    int pagesCount = (filmsCount + 9)/10;
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("films");
    modelAndView.addObject("page", page);
    modelAndView.addObject("filmsList", films);
    modelAndView.addObject("filmsCount", filmsCount);
    modelAndView.addObject("pagesCount", pagesCount);
    return modelAndView;
}
這裡出現了一個新的註釋@RequestParam，它表明我們正在從請求參數中獲取該值。現在，如果我們存取帶有參數的位址，例如http://localhost:8080/ ?page=4，我們將相應地獲得第四頁。我們將預設值設為“ 1 ”，這樣當應用程式啟動時，當我們訪問不帶http://localhost:8080/參數的位址時，我們會得到第一頁。在該方法中，我們取得所有記錄的數量，然後透過這種簡單的方式我們計算頁數。那些。如果我們有 10 條記錄，這是 1 頁，如果有 11 條記錄，則這已經是 2 頁。好吧，我們將整個事情轉移到模型中。您需要知道頁面數，以便在一個循環中為所有頁面建立鏈接，並讓電影數存在以防萬一，例如，如果您想在頁面上的某個位置顯示此資訊。現在剩下的就是轉到movie.jsp並使用以下構造添加到每個頁面的連結： 
<c:forEach begin="1" end="${pagesCount}" step="1" varStatus="i">
    <c:url value="/" var="url">
        <c:param name="page" value="${i.index}"/>
    </c:url>
    <a href="${url}">${i.index}</a>
</c:forEach>
我們透過計數器 1、2、3、... 建立鏈接，並透過索引值設定參數。

順便說一下，與分頁一樣，您可以添加其他功能，例如排序、過濾和搜尋。我們只需將各種參數傳遞給 DAO 方法，並使用它們形成對資料庫的適當查詢，以便按所需順序提取所需記錄。
讓我們再添加一點小改動。我們回到控制器。在新增、編輯和刪除方法中，操作完成後，我們重定向到主頁面「redirect:/」。那。如果我們在第 50 頁上的某個位置並按一下編輯條目，那麼執行後我們將轉到地址“ / ”，即 讓我們回到第 1 頁。這不太方便；我想回到我們來的地方。讓我們非常簡單地解決這個問題。讓我們在類別中建立FilmController一個實例變數int page 
private int page;
在方法內部，allFilms我們將參數的值指派給該變數page： 
this.page = page;
那。每次執行此方法時（即當我們瀏覽頁面時），當前頁面的值將被寫入變數。然後我們在方法中使用這個值來重定向回同一頁。 
modelAndView.setViewName("redirect:/?page=" + this.page);

結論

我們可能會在這裡結束。結果是一個成熟的 CRUD 應用程式。它當然離理想還很遠（非常遠），但它可以優化和改進，修復錯誤並添加功能。可以使用內建方法進行增刪改查操作；新增過濾、搜尋、排序；新增其他相關表格；透過授權和認證等實現對不同使用者的支援。等等。想像的空間是無限的，所以盡情發揮吧。 連結到該專案的 github。感謝您的關注。 PS這是我人生第一次嘗試寫文章，所以不要嚴格評判:)。我很抱歉沒有添加任何不同的有用資源連結；不幸的是，我仍然無法養成保存獲取資訊來源連結的習慣。當然，我對這麼多信表示歉意，簡潔不是我的天賦，我希望有人能處理它。 所有部分的連結
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION