Dalam dua artikel pertama, kami mengintegrasikan SSH dan mengekstraksi antarmuka bagian layanan dan tindakan. Dapat dikatakan bahwa lingkungan pembangunan dasar telah dibangun. Di bagian ini, kami akan membangun halaman backend. Mari kita bahas dua cara membangun: berbasis frameset dan unggas. Akhirnya, kami akan menggunakan easyui untuk berkembang.
1. Ekstrak halaman JSP publik
Pertama -tama mari kita lihat halaman JSP saat ini:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <Html> <head> </head> <body> <!-oMit ...-> </c: foreach> </body> </html> </span>
Jangan membaca konten bagian tubuh terlebih dahulu, karena ini semua digunakan untuk tes sebelumnya. Mengekstrak halaman JSP berarti mengekstraksi beberapa bagian umum ke dalam halaman JSP baru dan kemudian memasukkannya di halaman JSP saat ini. Karena proyek -proyek selanjutnya pasti akan memperkenalkan JS, CSS dan file lainnya, jika ditulis pada setiap halaman JSP, itu akan sangat berlebihan, jadi kami harus mengekstrak JSP umum untuk memperkenalkan file -file ini dan hal -hal lain. Kami membuat folder publik baru di Direktori Webroot dan membuat head.jspf baru (JSPF mewakili fragmen JSP untuk halaman JSP lainnya untuk dimasukkan).
<%@ page language = "java" pageEncoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "C"%> <c: set value = "$" pagecontex type = "text/javascript" src = ""> </script> <style type = "text/css"> </tyle> -> </span>
Bagian komentar terutama termasuk JS dan CSS, karena belum digunakan, hanya membangun kerangka kerja dan menghapusnya saat digunakan. Tag <c: set> menggunakan $ {pagecontext.Request.contextPath} untuk mengganti $ {shop} untuk penulisan mudah. Dengan cara ini, JSP baru hanya perlu memasukkan head.jspf ini di masa depan. Mari kita lihat Index.jsp yang dimodifikasi:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // enc"> <html> <head> <%@ cantumkan file = "/head.jspf. </html> </span>
Apakah ada ide yang berorientasi pada objek?
2. Bangun halaman latar belakang berdasarkan frameset
2.1 Menemukan Masalah
Template telah diekstraksi, dan sekarang kami sudah mulai membangun kerangka halaman latar belakang. Pertama, kami menggunakan Frameset untuk melakukannya. Buat folder baru, utama di direktori Web-INF, dan buat empat file JSP baru di Main: aindex.jsp, top.jsp, left.jsp dan right.jsp. Frameset kami ditulis dalam aindex.jsp. Tiga lainnya hanya ditulis dalam kalimat sederhana untuk pengujian. Mari kita lihat AIndex.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <!-- The frame body contains 3+1 pages--> <frameset rows = "150,*"> <frame src = "top.jsp"/> <frameset cols = "150,*"> <frame src = "left.jsp"/> <frame src = "right.jsp"/> </frameset> </frameset> </html> </span>
Strukturnya sangat jelas, halaman dibagi menjadi 3 buah, dan halaman di sebelah kiri dan kanan. Setiap modul berisi halaman JSP yang sesuai, dan kemudian kami menulis tes <a href = "/wen-inf/main/aindex.jsp"> ke latar belakang </a> Di badan index.jsp, mulai Tomcat, dan temukan bahwa mengklik tautan tidak dapat mengakses latar belakang. Alasannya adalah bahwa JSP di direktori web-INF tidak dapat secara langsung dialihkan, dan perlu dialihkan melalui servlet atau tindakan. Tidak mungkin, saya hanya bisa menulis aksi lompatan baru.
2.2 Tulis Tindakan Jump Halaman
Kami pertama -tama menulis tindakan untuk menyelesaikan pengalihan halaman. Tindakan ini hanya mengimplementasikan pengalihan halaman dan tidak menangani logika bisnis apa pun.
/ ** * @description: TODO (Tindakan ini digunakan untuk menyelesaikan fungsi penerusan permintaan JSP dan JSP di Web-INF, dan tindakan ini tidak menangani logika apa pun) * @Author ESON_15 * */ Kelas Publik Sendaction memperluas ActionSupport {public string execute () {return "kirim"; }} Kita dapat melihat bahwa sendaction tidak mewarisi basa yang kita ekstrak sebelumnya, tetapi cukup mewarisi tindakan yang mendukung. Kemudian kami mengonfigurasinya di file struts.xml:
<? Xml Version = "1.0" encoding = "UTF-8"?> <! Doctype Struts Public "-// Apache Software Foundation // DTD Struts Configuration 2.3 // en" "http://struts.apache. Untuk semua tindakan dalam paket ini-> </span> <global-results> <result name = "aIndex">/web-inf/main/aindex.jsp </hasilnya> </global-results> <!-hilangkan konfigurasi tindakan lain ... </span>->-digunakan untuk menyelesaikan tindakan penerusan sistem permintaan sistem, semua permintaan diberikan kepada over over over over over over = " name = "Send">/Web-inf/{1}/{2} .jsp </result> </chere> </packing> </struts> Jangan lupa untuk mengkonfigurasinya di beans.xml: <bean id = "sendaction" />.
Alasan mengapa dua angka*ditetapkan dalam tindakan ini adalah untuk memfasilitasi akses ke web-inf/*/*. JSP, yang mensyaratkan perjanjian tentang metode penulisan alamat dalam JSP. Mari kita lihat metode penulisan di aindex.jsp:
<span style = "font-family: microsoft yahei;"> <%@ page language = "java" import = "java.util.*" pageEncoding = "UTF-8"%> <! DocType html public "-// w3c // dtd html 4.01 transisi html//w3c // html html 4.01 transisi////@@ html <%html 4.01 transitional/@@@ html html 4.01 transitional/@@@ html 4. %> < /head> <!-Badan bingkai berisi 3+1 halaman-> <bingkai frameset = "150,*"> <frame src = "send_main_top.action" /> <frameset cols = "150,*" <frame src = "send_main_left.action" /<frame src = " /f frame =" send.main_left.action </html> </span>
Dari aindex.jsp yang dimodifikasi, kita dapat melihat bahwa kita tidak secara langsung mengakses JSP di bawah Web-Inf/ (kita juga tidak dapat mengaksesnya). Kami melompati tindakan, sehingga kami menulis <a href = "send_main_aindex.action"> ke tubuh index.jsp untuk mengujinya ke latar belakang </a>, dan kemudian mulai Tomcat, dan kemudian klik tautan untuk mengakses halaman rumah backend secara normal.
Dilihat dari proses di atas menggunakan Frameset untuk membangun halaman backend, ini cukup merepotkan. Ini termasuk dalam setiap halaman, dan frameset tidak digunakan dalam pengembangan. Easyui hanya memiliki satu halaman, dan semua permintaan adalah permintaan AJAX. Selanjutnya, mari kita lihat cara menggunakan easyui untuk membangun halaman backend.
3. Bangun halaman latar belakang berdasarkan easyui
JQuery Easyui adalah kumpulan plug-in UI berdasarkan jQuery, dan tujuan jQuery easyui adalah untuk membantu pengembang web membuat antarmuka UI yang kaya akan fitur dan indah. Pengembang tidak perlu menulis javascript yang kompleks, juga tidak perlu memiliki pemahaman mendalam tentang gaya CSS. Yang perlu diketahui oleh semua pengembang adalah beberapa tag HTML sederhana.
3.1 Impor komponen terkait easyui
Kami pertama -tama mengimpor komponen yang diperlukan untuk easyui di direktori webroot di proyek, dan ada unduhan di internet. Saya menggunakan jQuery-easyui-1.3.5 untuk menghapus beberapa hal yang tidak perlu. Hasil akhirnya adalah sebagai berikut:
3.2 Membangun Lingkungan Easyui
Kami membuka file head.jspf yang baru saja kami ekstrak, mengimpor CSS dan JS yang bergantung pada EasyUi di sini, dan memperkenalkan file JSPF di halaman lain secara tidak langsung memperkenalkan CSS dan JS yang bergantung pada EasyUi pada:
<%@ page language = "java" pageEncoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set value = "$" pagecontex Lingkungan Easyi-> <tautan rel = "stylesheet" href = "$ {shop} /jQuery-easyUi-1.3.5/themes/icon.css" type = "text/css"> </tautan.cault-{link.cault-href = "$ {shop}/link.caUs.caes-{shop}/link. type = "text/css"> </link> <script type = "text/javascript" src = "$ {shop} /jQuery-easyui-1.3.5/jQuery.min.js"> </script> <script type = "text/javascript" src = "$ {$ {$ {$ {$ {$ {script> } /JQuery-EASYUI-1.3.5/jQuery.easyUi.min.js "> </script> <script type =" text/javascript "src =" $ {shop} /JQuery-EasyUi-1.3.5/locale/easyUi-lang-zh_cn.js "> </</scrips"> </cn.js "> </cn.js"> </cns "> </cns"> </cns "> </cns"> </cns "> </cns"> </cns "> </cns"> </cn.> 3.3 Bangun kerangka kerja untuk latar belakang
Hapus top.jsp, left.jsp dan right.jsp di Web-Inf/ Main/ Direktori karena tidak lagi tersedia sekarang. Kemudian ubah halaman AIndex.jsp. Anda sekarang dapat menggunakan easyui untuk melakukannya:
<%@ page language = "java" import = "java.util.*" pageenCoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <pead> <%@ termasuk file = "/head.jspf.jspf.jspf"%"%"%@ termasuk file = "/head.jspf.jspf.jspf. data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'West',split:true"> <!-- The system menu is displayed here --> <div id="aa"> <div data-options="iconCls:'icon-save'" style = "overflow: auto; padding: 10px;"> <h3 style = "color:#0099ff;"> akordeon untuk jQuery </h3> <p> Accordion adalah bagian dari kerangka kerja mudah untuk jQuery. Ini memungkinkan Anda mendefinisikan komponen akordeon Anda di halaman web dengan lebih mudah. </p> </div> <div data-Options = "iconcls: 'ikon-reload', dipilih: true" style = "padding: 10px;"> Content2 </Div> <v> Content3 </Div> </Div> </Div> </Div> </Div> <v> Content3 </Div> </Div> </Div> </Div> </Div> Data-OP- style = "padding: 5px; latar belakang: #eee;"> </div> </body> </html>
Begitu banyak <ve> s di sini semua dirujuk ke dokumen deskripsi easyui di atas, dan saya mempostingnya di bawah ini. Pertama -tama lakukan seluruh tata letak tata letak dan lepaskan apa yang tidak kita butuhkan. Kami hanya membutuhkan tiga bagian: utara, barat dan tengah:
Kemudian tambahkan tata letak klasifikasi Accordon di div di bagian barat dan tambahkan kode ke head.jspf:
Dengan cara ini, kita hanya membangun kerangka halaman backend, dan pada tahap selanjutnya, kita hanya perlu mengisi sesuatu. Mari kita mengujinya di index.jsp: <a href = "send_main_aindex.action"> langsung ke versi latar belakang easyui </a>, sehingga JSP akan menemukan aksi sendaction yang baru saja kita tulis dan kemudian melompat ke EWB-Inf/main/aindex.jsp, dan kerangka latar belakang dapat ditampilkan dengan benar, sebagai berikut: sebagai berikut:
Pada titik ini, kami telah berhasil membangun kerangka kerja halaman latar belakang menggunakan easyui.
(Catatan: Pada akhirnya, saya akan memberikan pengunduhan kode sumber dari seluruh proyek! Semua orang dipersilakan untuk mengumpulkan atau berbagi)
Alamat unduhan kode sumber dari seluruh proyek: //www.vevb.com/article/86099.htm
Alamat asli: http://blog.csdn.net/eson_15/article/details/51312490
Di atas adalah seluruh konten artikel ini. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.