Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 4)

Selamat petang. Dalam artikel ini saya ingin berkongsi pertemuan pertama saya dengan perkara seperti Maven, Spring, Hibernate, MySQL dan Tomcat dalam proses mencipta aplikasi CRUD yang mudah. Ini bahagian akhir. Artikel ini ditujukan terutamanya untuk mereka yang telah menyelesaikan 30-40 tahap di sini, tetapi masih belum menerokai Java tulen dan baru bermula (atau akan bermula) untuk memasuki dunia terbuka dengan semua teknologi, rangka kerja dan lain-lain yang tidak dikenali. perkataan. Ini adalah bahagian keempat terakhir artikel "Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD yang pertama." Bahagian sebelumnya boleh dilihat dengan mengikuti pautan:

• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 1)
• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 2)
• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 3)

Kandungan:

• Reka bentuk dan sumber web
• penomboran
• Kesimpulan

Reka bentuk dan sumber web

Aplikasi kami berfungsi, tetapi anda tidak boleh melihatnya tanpa air mata, inskripsi yang membosankan, pautan hodoh, latar belakang putih kosong. Kita perlu membetulkannya dan menambah keindahan yang berbeza. Bagaimana kita melakukan ini? Baiklah, pertama sekali, anda boleh bermain-main dengan halaman dan melakukan pelbagai perkara menggunakan keupayaan HTML . Tetapi jika anda cuba menukar latar belakang, warna, saiz, susunan elemen, dan lain-lain menggunakan HTML sahaja. dan sebagainya. maka pada akhirnya anda boleh membuat kucar-kacir daripada halaman yang anda tidak dapat melihat apa-apa di sana kemudian. Selain itu, pilihan reka bentuk HTML agak terhad. Adalah lebih baik untuk menggunakan CSS (Cascading Style Sheets) untuk ini . Kemudian semua yang berkaitan dengan reka bentuk boleh dikumpulkan di satu tempat, dan kemudian digunakan pada elemen halaman yang dikehendaki. Kod CSS boleh ditulis terus pada halaman JSP dalam teg khas, tetapi lebih mudah untuk meletakkannya dalam fail berasingan, dan kemudian hanya menggunakannya pada halaman yang diperlukan. Untuk meletakkan fail dengan gaya dan sumber web statik lain, kami akan membuat direktori berasingan di dalam aplikasi web . Untuk tidak mengelirukan sumber web dengan sumber biasa (di mana kita mempunyai db.properties ), mari kita panggil res direktori ini dan letakkan semua fail CSS, imej, dsb. di sana: Untuk menggunakan fail ini kita perlu menentukan lokasinya dalam konfigurasi. Jom ke kelas kita WebConfig. Sebelum ini, kami menggunakan anotasi @EnableWebMvcuntuk tidak mengkonfigurasi apa-apa, tetapi hanya menggunakan konfigurasi lalai. Tetapi kini terdapat keperluan untuk mengkonfigurasi sesuatu. Untuk melakukan ini, kami menggunakan antara muka WebMvcConfigurer, yang membolehkan anda mengatasi kaedah konfigurasi. Itu. kita boleh menggunakan konfigurasi lalai, tetapi pada masa yang sama menyesuaikan beberapa aspek untuk diri kita sendiri. Dalam kes ini addResourceHandlers, kami memerlukan kaedah yang kami gunakan untuk menunjukkan lokasi sumber web statik. Untuk berjaga-jaga, seluruh kelas akan kelihatan seperti ini:

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

Sekarang untuk menggunakan CSS kami pada halaman, anda perlu memautkannya di dalam teg head:

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

Hanya tambah baris ini dan buat, sebagai contoh, fail CSS mudah ini:

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

Dan ini akan mengubah jadual kami sepenuhnya (ia kelihatan bodoh, sudah tentu, tetapi ia seperti ini, sebagai contoh): Nah, saya fikir tidak perlu bercakap secara terperinci tentang CSS, semuanya agak mudah. Di Internet anda boleh menemui banyak pilihan siap sedia untuk mereka bentuk jadual dan borang. Tetapi lebih baik, sudah tentu, untuk melakukan reka bentuk sendiri, anda tidak perlu menjadi seorang pereka, lagipun, ini bukan sejenis laman web yang rumit. Walaupun beberapa jam selepas kenalan pertama akan cukup untuk mencipta reka bentuk yang agak cantik dan kemas untuk halaman yang begitu mudah. Di samping itu, Internet penuh dengan semua jenis pelajaran, contoh, terdapat tapak khas di mana anda boleh mengedit HTML, CSS pada satu skrin secara serentak dan segera melihat rupa semuanya. Dengan sedikit latihan anda boleh mencipta seni sebenar. Benar, anda juga tidak boleh terlalu terbawa-bawa di sini (melainkan, sudah tentu, anda mempunyai rancangan untuk menjadi seorang pereka), jika tidak reka bentuk adalah perkara sedemikian, anda boleh terperangkap di sini untuk masa yang lama. Apabila saya mula memahami CSS, saya tersekat. Saya ingin mencuba segala-galanya, setiap harta, memutar sesuatu, mengutak-atiknya, bereksperimen, mengambil halaman beberapa laman web dan membuat semula tanpa dapat dikenali. Saya mungkin berseronok dengan mainan ini selama seminggu, tidak melakukan apa-apa lagi, sehingga ia melepaskan saya :) Nah, secara umum, sudah tentu, anda tidak sepatutnya keterlaluan dan membuat keajaiban berwarna-warni yang tidak dapat difahami, anda perlu melakukannya dengan mudah dan dengan sedap. Satu-satunya perkara yang perlu diperhatikan. Anda perlu memahami bahawa CSS ialah perihalan reka bentuk dan HTML ialah markup . Anda tidak sepatutnya cuba melakukan segala-galanya melalui CSS; sesetengah aspek akan menjadi sangat sukar untuk dilakukan, dan sesetengahnya adalah mustahil, apabila dalam HTML ini dilakukan dengan beberapa baris tambahan, atau bahkan hanya satu atribut dalam teg. Anda perlu menggabungkannya, membuat semua jenis warna, latar belakang, fon dalam CSS, dan jika, sebagai contoh, anda perlu menggabungkan beberapa sel jadual, lebih mudah untuk menggunakan alat HTML. Nah, sebagai contoh, inilah yang saya dapat lakukan dengan halaman dalam beberapa jam mengutak-atik CSS dan HTML (Saya tidak akan menerangkan secara terperinci di sini tentang kekacauan yang saya buat untuk mencapai ini, pada akhirnya akan ada pautan ke GitHub projek ini di mana anda boleh melihat): Sudah tentu, saya tidak tahu betapa cekapnya saya melakukan segala-galanya di sana, tetapi memandangkan saya mula-mula melihat CSS seminggu sebelum ini, saya fikir ia ternyata agak baik.

penomboran

Sekarang semuanya berfungsi, ia kelihatan baik, tetapi hanya terdapat beberapa rekod dalam jadual setakat ini. Bagaimana jika terdapat seratus filem di dalamnya, atau seribu? Ia tidak begitu mudah untuk menatal senarai yang begitu panjang. Ia lebih mudah apabila senarai dipaparkan dalam halaman 10 entri, sebagai contoh. Oleh itu, sekarang kami akan cuba melaksanakan pemisahan senarai ke dalam halaman (kadangkala ini juga dipanggil "paging" atau "penomboran" ( penomboran bahasa Inggeris )). Ini boleh dilakukan dengan cara yang berbeza. Sebagai contoh, anda boleh memindahkan senarai penuh ke halaman jsp dan membuat jadual di sana untuk bilangan rekod yang diperlukan. Atau anda boleh, sebagai contoh, mengeluarkan rekod yang diperlukan daripada senarai umum dalam perkhidmatan, dan kemudian menghantar senarai mini ini ke halaman jsp untuk paparan. Tetapi yang terbaik, sudah tentu, untuk melakukan ini di peringkat pangkalan data. Ideanya bukanlah untuk mengambil senarai lengkap dari pangkalan data dan kemudian memecahkannya menjadi kepingan, tetapi pada mulanya mendapatkan bahagian yang diperlukan daripada pangkalan data tanpa menyentuh segala-galanya. Lagipun, mengapa kita perlu mengeluarkan semua ratusan atau ribuan rekod dari pangkalan data sekali gus, jika yang kita perlukan adalah dalam sepuluh teratas, lebih baik kita tarik satu sepuluh ini sahaja. Mari pergi ke DAO dan tambahkan allFilmsparameter pada kaedah int page, yang akan bertanggungjawab untuk nombor halaman (dalam perkhidmatan, sudah tentu, kami melakukan perkara yang sama). Dan mari kita ubah sedikit pelaksanaan kaedah ini; jika sebelum ini kami mengeluarkan keseluruhan senarai, kini kami hanya akan mengeluarkan sebahagian sahaja. setFirstResultKaedah (baris jadual yang mana untuk dimulakan) dan setMaxResults(berapa banyak rekod untuk dipaparkan) akan membantu kami dengan ini :

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

Itu. jika ini adalah halaman pertama, kami memaparkan maksimum 10 rekod, bermula dari ke-0; jika ini adalah halaman ke-5, maka 10 rekod bermula dari ke-40 (jangan lupa bahawa penomboran dalam pangkalan data bermula dari 0). Kami juga akan mencipta kaedah yang akan mengembalikan bilangan rekod dalam jadual. Kami memerlukan ini untuk mengetahui bilangan semua halaman dan membuat pautan untuknya di halaman jsp kami:

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

Menggunakan pertanyaan sedemikian, kami akan mendapat nombor semua rekod dalam jadual (sebagai intnilai) tanpa mengeluarkan rekod itu sendiri. Sekarang mari pergi ke pengawal dan kerjakan kaedah yang mengembalikan halaman utama dengan senarai filem:

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

Anotasi baharu telah muncul di sini @RequestParam, yang menunjukkan bahawa kami mendapat nilai ini daripada parameter permintaan. Sekarang, jika kita pergi ke alamat dengan parameter, contohnya http://localhost:8080/ ?page=4 , kita akan mendapat, sewajarnya, halaman ke-4. Kami menetapkan nilai lalai kepada " 1 " supaya apabila aplikasi bermula, apabila kami pergi ke alamat tanpa parameter http://localhost:8080/ , kami mendapat halaman pertama. Dalam kaedah kita mendapat bilangan semua rekod, maka dengan cara mudah ini kita mengira bilangan halaman. Itu. jika kita mempunyai 10 rekod, ini adalah 1 halaman, dan jika terdapat 11, maka ini sudah 2. Nah, kita memindahkan semua perkara ini kepada model. Anda perlu mengetahui bilangan halaman untuk membuat pautan untuk mereka semua dalam satu kitaran, dan biarkan bilangan filem berada di sana untuk berjaga-jaga, sebagai contoh, jika anda ingin memaparkan maklumat ini di suatu tempat di halaman. Sekarang yang tinggal hanyalah pergi ke films.jsp dan tambahkan pautan ke setiap halaman menggunakan binaan ini:

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

Kami mencipta pautan mengikut kaunter 1, 2, 3, ... dan menetapkan parameter mengikut nilai indeks. Mari tambah satu lagi sentuhan kecil. Kami kembali kepada pengawal. Dalam kaedah tambah, edit dan padam, selepas operasi selesai, kami mengubah hala ke halaman utama "redirect:/" . Itu. jika kita berada di suatu tempat di halaman ke-50 dan klik edit entri, maka selepas pelaksanaan kita akan pergi ke alamat " / ", i.e. Mari kita kembali ke halaman 1. Ini tidak begitu mudah; saya ingin kembali ke tempat asal kami. Mari kita selesaikan ini dengan sangat mudah. FilmControllerMari buat pembolehubah contoh dalam kelasint page

private int page;

Di dalam kaedah allFilmskami akan memberikan nilai parameter kepada pembolehubah ini page:

this.page = page;

Itu. Setiap kali kaedah ini dilaksanakan (iaitu apabila kita menavigasi melalui halaman), nilai halaman semasa akan ditulis kepada pembolehubah. Dan kemudian kami menggunakan nilai ini dalam kaedah kami untuk mengubah hala kembali ke halaman yang sama.

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

Kesimpulan

Kita mungkin akan berakhir di sini. Hasilnya ialah aplikasi CRUD yang lengkap. Ia sememangnya jauh dari ideal (sangat jauh), tetapi ia boleh dioptimumkan dan dipertingkatkan, pepijat diperbaiki dan fungsi ditambah. Anda boleh menggunakan kaedah terbina dalam untuk operasi mentah; menambah penapisan, mencari, menyusun; tambah jadual lain yang berkaitan; melaksanakan sokongan untuk pengguna yang berbeza dengan kebenaran dan pengesahan, dsb. dan sebagainya. Skop untuk imaginasi tidak terhad, jadi lakukannya. Pautan ke github projek ini . Terima kasih kerana memberi perhatian. PS Ini adalah percubaan pertama saya dalam hidup saya untuk menulis artikel, jadi jangan menilai dengan tegas :). Saya memohon maaf kerana tidak menambah apa-apa pautan yang berbeza kepada sumber yang berguna; malangnya, saya masih tidak dapat membangunkan tabiat menyimpan pautan ke sumber dari mana saya mendapat maklumat. Dan, sudah tentu, saya memohon maaf untuk banyak surat, singkatnya bukan bakat saya, saya harap seseorang dapat mengendalikannya. Pautan ke semua bahagian

• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 1)
• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 2)
• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 3)
• Pengenalan kepada Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (bahagian 4)