Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 4)

Chào buổi chiều. Trong bài viết này tôi muốn chia sẻ lần đầu tiên tôi làm quen với những thứ như Maven, Spring, Hibernate, MySQL và Tomcat trong quá trình tạo một ứng dụng CRUD đơn giản. Đây là phần cuối cùng. Bài viết chủ yếu dành cho những người đã hoàn thành cấp độ 30-40 tại đây, nhưng chưa vượt ra ngoài Java thuần túy và mới bắt đầu (hoặc sắp bắt đầu) bước vào thế giới mở với tất cả các công nghệ, khung công tác này và những thứ không quen thuộc khác. từ. Đây là phần thứ tư cuối cùng của bài viết “Giới thiệu về Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên”. Các phần trước có thể được xem bằng cách theo các liên kết:

• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 1)
• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 2)
• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 3)

Nội dung:

• Tài nguyên thiết kế và web
• Phân trang
• Phần kết luận

Tài nguyên thiết kế và web

Ứng dụng của chúng tôi hoạt động, nhưng bạn không thể nhìn vào nó mà không rơi nước mắt, những dòng chữ nhàm chán, những liên kết xấu xí, nền trắng trống rỗng. Chúng ta cần khắc phục điều này và thêm những vẻ đẹp khác nhau. Chung ta se lam như thê nao? Chà, trước hết, bạn có thể chơi đùa với các trang và làm đủ mọi việc bằng cách sử dụng các khả năng của HTML . Nhưng nếu bạn cố gắng thay đổi hình nền, màu sắc, kích thước, cách sắp xếp các thành phần, v.v. chỉ bằng HTML. và như thế. thì cuối cùng, bạn có thể tạo ra một trang lộn xộn đến mức sau này bạn không thể tìm ra bất cứ điều gì ở đó. Và bên cạnh đó, các tùy chọn thiết kế của HTML khá hạn chế. Tốt hơn là sử dụng CSS (Cascading Style Sheets) cho việc này . Sau đó, mọi thứ liên quan đến thiết kế có thể được thu thập ở một nơi và sau đó áp dụng cho thành phần mong muốn của trang. Mã CSS có thể được viết trực tiếp trên trang JSP bằng một thẻ đặc biệt, nhưng sẽ thuận tiện hơn nhiều nếu đặt nó vào một tệp riêng biệt, sau đó chỉ cần áp dụng nó cho các trang cần thiết. Để đặt các tệp có kiểu và tài nguyên web tĩnh khác, chúng tôi sẽ tạo một thư mục riêng bên trong ứng dụng web . Để không nhầm lẫn tài nguyên web với tài nguyên thông thường (nơi chúng tôi có db.properties ), hãy gọi thư mục này là res và đặt tất cả các tệp CSS, hình ảnh, v.v. vào đó: Để sử dụng các tệp này, chúng ta cần chỉ định vị trí của chúng trong cấu hình. Hãy đến lớp học của chúng tôi WebConfig. Trước đây, chúng tôi sử dụng chú thích @EnableWebMvcđể không định cấu hình bất cứ thứ gì mà chỉ sử dụng cấu hình mặc định. Nhưng bây giờ cần phải cấu hình một cái gì đó. Để thực hiện việc này, chúng tôi sử dụng giao diện WebMvcConfigurer, cho phép bạn ghi đè các phương thức cấu hình. Cái đó. chúng ta có thể sử dụng cấu hình mặc định, nhưng đồng thời tùy chỉnh một số khía cạnh cho riêng mình. Trong trường hợp này addResourceHandlers, chúng tôi cần một phương pháp để chỉ ra vị trí của tài nguyên web tĩnh. Để đề phòng, toàn bộ lớp học sẽ trông như thế này:

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;
    }
}

Bây giờ để sử dụng CSS của chúng tôi trên trang, bạn cần liên kết với nó bên trong thẻ head:

<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>

Chỉ cần thêm dòng này và tạo, ví dụ: tệp CSS đơn giản này:

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;
}

Và điều này sẽ thay đổi hoàn toàn bảng của chúng ta (tất nhiên trông có vẻ ngu ngốc, nhưng nó lại như thế này chẳng hạn): Chà, tôi nghĩ không cần phải nói chi tiết về CSS, mọi thứ khá đơn giản. Trên Internet, bạn có thể tìm thấy rất nhiều tùy chọn làm sẵn để thiết kế bảng và biểu mẫu. Nhưng tất nhiên, tốt hơn hết là bạn nên tự thiết kế, bạn không cần phải là nhà thiết kế, dù sao thì đây cũng không phải là một loại trang web phức tạp. Thậm chí chỉ vài giờ sau lần làm quen đầu tiên cũng đủ để tạo ra một thiết kế khá đẹp và gọn gàng cho một trang đơn giản như vậy. Ngoài ra, Internet có đầy đủ các loại bài học, ví dụ, có những trang web đặc biệt nơi bạn có thể chỉnh sửa đồng thời HTML, CSS trên một màn hình và ngay lập tức xem tất cả trông như thế nào. Với một chút luyện tập, bạn có thể tạo ra nghệ thuật thực sự. Đúng vậy, bạn cũng không nên quá bận tâm ở đây (tất nhiên trừ khi bạn có kế hoạch trở thành một nhà thiết kế), nếu không thiết kế là một thứ như vậy, bạn có thể bị mắc kẹt ở đây trong một thời gian rất dài. Khi tôi mới bắt đầu hiểu CSS, tôi đã gặp khó khăn. Tôi muốn thử mọi thứ, mọi thuộc tính, vặn vẹo thứ gì đó, mày mò, thử nghiệm, lấy các trang của một số trang web và làm lại chúng đến mức không thể nhận ra. Có lẽ tôi đã thích thú với món đồ chơi này trong một tuần, không làm gì khác, cho đến khi nó buông tôi ra :) Nói chung, tất nhiên, bạn không nên lạm dụng nó và tạo ra một phép màu đầy màu sắc khó hiểu, bạn cần làm điều đó một cách đơn giản và một cách trang nhã. Điều duy nhất đáng chú ý. Bạn cần hiểu rằng CSS là mô tả về thiết kế và HTML là đánh dấu . Bạn không nên cố gắng làm tất cả mọi thứ thông qua CSS; một số khía cạnh sẽ rất khó thực hiện và một số thì đơn giản là không thể, khi trong HTML, việc này được thực hiện với một vài dòng bổ sung hoặc thậm chí chỉ một thuộc tính trong thẻ. Bạn cần kết hợp chúng, tạo tất cả các loại màu sắc, hình nền, phông chữ trong CSS và nếu, chẳng hạn, bạn cần kết hợp một vài ô trong bảng, thì việc sử dụng các công cụ HTML sẽ dễ dàng hơn. Chà, ví dụ, đây là những gì tôi có thể làm với các trang này trong vài giờ loay hoay với CSS và HTML (tôi sẽ không đi sâu vào chi tiết ở đây về sự lộn xộn mà tôi đã tạo ra để đạt được điều này, cuối cùng sẽ có một liên kết tới GitHub của dự án này nơi bạn có thể xem): Tất nhiên, tôi không biết mình đã làm mọi thứ ở đó thành thạo như thế nào, nhưng xét đến việc tôi nhìn thấy CSS lần đầu tiên một tuần trước đó, tôi nghĩ nó diễn ra khá tốt.

Phân trang

Bây giờ mọi thứ đều hoạt động, có vẻ ổn, nhưng cho đến nay chỉ có một vài bản ghi trong bảng. Điều gì sẽ xảy ra nếu có hàng trăm hoặc hàng nghìn bộ phim trong đó? Việc cuộn qua một danh sách dài như vậy không thuận tiện lắm. Chẳng hạn, sẽ thuận tiện hơn nhiều khi danh sách được hiển thị trong các trang gồm 10 mục. Vì vậy, bây giờ chúng ta sẽ thử thực hiện chia danh sách thành các trang (đôi khi việc này còn được gọi là “phân trang” hoặc “phân trang” ( pagination trong tiếng Anh )). Điều này có thể được thực hiện theo những cách khác nhau. Ví dụ: bạn có thể chuyển danh sách đầy đủ sang một trang jsp và tạo một bảng ở đó với số lượng bản ghi được yêu cầu. Hoặc, ví dụ, bạn có thể lấy ra các bản ghi cần thiết từ danh sách chung trong dịch vụ, sau đó gửi danh sách nhỏ này đến trang jsp để hiển thị. Nhưng tất nhiên, tốt nhất là thực hiện việc này ở cấp cơ sở dữ liệu. Ý tưởng không phải là lấy một danh sách đầy đủ từ cơ sở dữ liệu rồi chia nó thành nhiều phần mà ban đầu là lấy phần được yêu cầu từ cơ sở dữ liệu mà không cần chạm vào mọi thứ khác. Rốt cuộc, tại sao chúng ta cần lấy tất cả hàng trăm hoặc hàng nghìn bản ghi từ cơ sở dữ liệu cùng một lúc, nếu cái chúng ta cần nằm trong top 10, tốt hơn hết là chỉ lấy ra 10 bản ghi này. Hãy vào DAO và thêm allFilmsmột tham số vào phương thức int page, tham số này sẽ chịu trách nhiệm về số trang (tất nhiên trong dịch vụ chúng tôi cũng làm như vậy). Và hãy thay đổi cách thực hiện phương pháp này một chút, nếu trước đó chúng ta đã lấy ra toàn bộ danh sách thì bây giờ chúng ta sẽ chỉ lấy ra một phần. setFirstResultCác phương thức (bắt đầu bằng hàng nào của bảng) và setMaxResults(hiển thị bao nhiêu bản ghi) sẽ giúp chúng ta điều này :

@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}

Những thứ kia. nếu đây là trang đầu tiên, chúng tôi hiển thị tối đa 10 bản ghi, bắt đầu từ trang 0; nếu đây là trang thứ 5 thì 10 bản ghi bắt đầu từ trang thứ 40 (đừng quên rằng việc đánh số trong cơ sở dữ liệu bắt đầu từ 0). Ngoài ra, chúng ta cũng sẽ tạo một phương thức trả về số lượng bản ghi trong bảng. Chúng tôi sẽ cần điều này để biết số lượng tất cả các trang và tạo liên kết cho chúng trên trang jsp của chúng tôi:

public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }

Sử dụng truy vấn như vậy, chúng ta sẽ nhận được số lượng tất cả các bản ghi trong bảng (dưới dạng intgiá trị) mà không cần tự mình lấy ra các bản ghi. Bây giờ chúng ta hãy đi tới bộ điều khiển và làm việc với phương thức trả về trang chính với danh sách phim:

@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;
}

Một chú thích mới đã xuất hiện ở đây @RequestParam, cho biết rằng chúng tôi đang nhận được giá trị này từ một tham số yêu cầu. Bây giờ, nếu chúng ta truy cập một địa chỉ có tham số, ví dụ : http://localhost:8080/ ?page=4 , tương ứng, chúng ta sẽ nhận được trang thứ 4. Chúng ta đặt giá trị mặc định là " 1 " để khi ứng dụng khởi động, khi chúng ta đến một địa chỉ không có tham số http://localhost:8080/ thì sẽ được trang đầu tiên. Trong phương pháp này, chúng tôi nhận được số lượng tất cả các bản ghi, sau đó, theo cách đơn giản này, chúng tôi tính toán số trang. Những thứ kia. nếu chúng ta có 10 bản ghi thì đây là 1 trang và nếu có 11 bản ghi thì đây đã là 2. Chà, chúng ta chuyển toàn bộ thứ này sang mô hình. Bạn cần biết số lượng trang để tạo liên kết cho tất cả chúng trong một chu kỳ và để số lượng phim ở đó, chẳng hạn như trong trường hợp bạn muốn hiển thị thông tin này ở đâu đó trên trang. Bây giờ tất cả những gì còn lại là truy cập movies.jsp và thêm liên kết đến từng trang bằng cấu trúc này:

<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>

Chúng ta tạo liên kết theo bộ đếm 1, 2, 3,... và đặt tham số theo giá trị chỉ số. Hãy thêm một liên lạc nhỏ nữa. Chúng tôi quay trở lại bộ điều khiển. Trong các phương thức thêm, chỉnh sửa và xóa, sau khi thao tác hoàn tất, chúng tôi chuyển hướng đến trang chính "redirect:/" . Cái đó. nếu chúng ta đang ở đâu đó trên trang thứ 50 và nhấp vào chỉnh sửa mục nhập, thì sau khi thực hiện, chúng ta sẽ đi đến địa chỉ " / ", tức là. Chúng ta hãy quay lại trang 1. Điều này không thuận tiện lắm; tôi muốn quay lại nơi chúng ta đã xuất phát. Hãy giải quyết điều này rất đơn giản. FilmControllerHãy tạo một biến thể hiện trong lớpint page

private int page;

Bên trong phương thức, allFilmschúng ta sẽ gán giá trị của tham số cho biến này page:

this.page = page;

Cái đó. Mỗi khi phương thức này được thực thi (tức là khi chúng ta điều hướng qua các trang), giá trị của trang hiện tại sẽ được ghi vào biến. Và sau đó chúng tôi sử dụng giá trị này trong các phương thức của mình để chuyển hướng trở lại cùng một trang.

modelAndView.setViewName("redirect:/?page=" + this.page);

Phần kết luận

Có lẽ chúng ta sẽ kết thúc ở đây. Kết quả là một ứng dụng CRUD hoàn chỉnh. Nó chắc chắn là không lý tưởng (rất xa), nhưng nó có thể được tối ưu hóa và cải tiến, sửa lỗi và thêm chức năng. Bạn có thể sử dụng các phương thức có sẵn cho các thao tác thô; thêm tính năng lọc, tìm kiếm, sắp xếp; thêm các bảng liên quan khác; triển khai hỗ trợ cho những người dùng khác nhau bằng ủy quyền và xác thực, v.v. và như thế. Phạm vi cho trí tưởng tượng là vô hạn, vì vậy hãy cứ tận dụng nó. Liên kết tới github của dự án này . Cám ơn vì sự quan tâm của bạn. Tái bút Đây là nỗ lực đầu tiên trong đời của tôi để viết một bài báo, vì vậy đừng phán xét nghiêm túc :). Tôi xin lỗi vì đã không thêm bất kỳ liên kết nào khác vào các tài nguyên hữu ích; thật không may, tôi vẫn chưa thể hình thành thói quen lưu liên kết đến các nguồn mà tôi lấy thông tin. Và tất nhiên, tôi xin lỗi vì viết nhiều thư, sự ngắn gọn không phải là tài năng của tôi, tôi mong ai đó có thể xử lý được. Liên kết đến tất cả các phần

• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 1)
• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 2)
• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 3)
• Giới thiệu Maven, Spring, MySQL, Hibernate và ứng dụng CRUD đầu tiên (phần 4)