Sebelumnya, kami menggunakan EasyUi dan SSH untuk membangun kerangka dasar backend dan melakukan fungsi dasar dari backend, termasuk manajemen kategori produk dan manajemen produk. Di bagian ini, kami mulai membangun halaman Frontend.
Gagasan membuat halaman beranda: dengan asumsi bahwa logika bisnis produk sekarang tersedia, pertama-tama kita perlu membuat pendengar, dan menanyakan data di halaman beranda dan memasukkannya ke dalam aplikasi ketika proyek dimulai, yaitu, panggil metode logika bisnis produk back-end di pendengar.
1. Logika tampilan produk halaman beranda
Di halaman beranda, kami hanya menampilkan beberapa produk pertama dalam kategori produk panas, seperti waktu luang anak -anak, waktu luang wanita, dan waktu luang pria. Kami akan memiliki tiga bagian untuk menampilkan kategori produk yang berbeda, dan beberapa produk spesifik akan ditampilkan di setiap kategori. Jika kita ingin mengimplementasikan beranda seperti itu, data apa yang perlu kita minta? Pertama -tama, ini jelas merupakan kategori topik hangat, yaitu, item kueri dalam database yang kategori ini merupakan topik hangat, dan kemudian produk kueri kaskade dari kategori tersebut dari database berdasarkan kategori topik hangat, sehingga kami memiliki semua data yang kami inginkan. Mari selesaikan layanan kueri ini di latar belakang terlebih dahulu:
// CategoryService Antarmuka Antarmuka Publik CategoryService Memperluas BASESERVICE <Gategory> {// hilangkan metode lain ... // kueri kategori hot atau non-hot berdasarkan Nilai Boelen Daftar Publik <Gategory> QueryByHot (Boolean Hot); } @Suppresswarnings ("Uncecked") @Service ("CategoryService") Kategori Public CategoryServiceImpl memperluas BASESERVICEIMPL <Gategory> mengimplementasikan CategoryService {// hapus metode lain ... @Override Daftar Publik <Kategori> querybyhot (boolean) hot "hot"; hot co; hot co; hot co; return getsession (). Createqueery (HQL) .setBoolean ("Hot", Hot) .list (); }} // ProductService Antarmuka Antarmuka Publik ProductService Memperluas BASESERVICE <Product> {// menghilangkan metode lain ... // Query Produk yang Disarankan Berdasarkan Kategori Panas (Hanya 4) Daftar Publik pertama <product> QuerbyCategoryID (int CID); } @SuppressWarnings ("Uncecked") @Service ("ProductService") ProductServiceImpl memperluas BaseserviceImpl <product> mengimplementasikan ProductService {// menghilangkan metode lain ... @Override Daftar Public = P. Product> QuerbyCategoryID (int CID) {string hql = "dari produk p. p. p. p. p. p. p. p. p. p. p. p. p. p. {int string hql =" p. p.category.id =: order cid oleh p.date desc "; return getsession (). Createqueery (HQL) .setInteger ("CID", CID) .setFirStresult (0) .setMaxResults (4) .list (); }} 2. Buat initDataListener untuk mendapatkan data beranda
Latar belakang telah menyelesaikan bisnis logika tampilan produk, dan kami akan mulai mendapatkan data yang diperlukan. Pertama -tama buat pendengar InitDataSistener mewarisi ServletContextListener. Untuk bagaimana pendengar mendapatkan file konfigurasi pegas, silakan merujuk ke posting blog ini: Bagaimana pendengar mendapatkan file konfigurasi pegas
//@komponen // pendengar adalah komponen dari lapisan web. Ini dipakai oleh Tomcat, bukan musim semi. Tidak dapat dimasukkan ke dalam Spring Public Class InitDataListener Implements ServletContextListener {private ProductService ProductService = null; Kategori Kategori Privat CategoryService = NULL; Private ApplicationContext Context = NULL; @Override public void contextDestroyed (event servletContextEvent) {// toddo metode yang dihasilkan secara otomatis} @Override public void contextInitialized (SERVLETContextEvent event) {contextcontext () ());) ;getWebApplicationContex CategoryService = (CategoryService) Context.getBean ("CategoryService"); // Muat Informasi Kategori ProductService = (ProductService) Context.getBean ("ProductService"); // Muat Daftar Informasi Produk <Daftar <product>> BigList = New ArrayList <List <Product> () (); // BigList menyimpan daftar dengan kelas kategori di biglist // 1. Permintaan kategori hot spot untuk (kategori kategori: kategoriService.querybyhot (true)) {// Dapatkan informasi produk yang disarankan berdasarkan daftar ID Kategori Hot Spot <Product> LST = ProductService.QuerByCategoryId (Category.get.get.); biglist.add (lst); // Masukkan daftar dengan kategori di biglist} // 2. Tinggalkan biglist kueri ke acara objek bawaan.getSerVletContext (). SetAttribute ("biglist", biglist); }} Oke, sekarang semua data dimasukkan ke dalam koleksi daftar biglist.
3. Desain Halaman Halaman Beranda UI
Kami akan mendapatkan template dari artis di beranda UI. Template ini adalah HTML. Yang harus kami lakukan adalah mengubahnya menjadi JSP kami, dan kemudian menampilkan data dalam koleksi daftar biglist di beranda. Pertama, kami menyalin gambar dan CSS yang diperlukan oleh templat ke direktori webroot, dan kemudian memperkenalkan kedua file ini di webroot/public/head.jspf, karena head.jspf adalah header publik yang perlu disertakan halaman lain:
Kemudian embed HTML di templat ke index.jsp di beranda meja depan, dan gunakan tag JSTL untuk memodifikasi konten tampilan, seperti yang ditunjukkan di bawah ini (hanya tangkapan layar untuk menampilkan bagian produk):
Sekarang kami memasukkan halaman produk Tambah Backend yang telah kami lakukan sebelumnya, tambahkan beberapa produk ke kelas kasual wanita, lalu mulailah ke Tomcat, dan jalankan indeks halaman beranda.jsp, efeknya adalah sebagai berikut:
Oke, antarmuka UI meja depan telah diatur, dan langkah selanjutnya adalah menyelesaikan beberapa bisnis yang berbeda.
Alamat asli: http://blog.csdn.net/eson_15/article/details/51373403
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.