wjsp
1.0.0
Aplikasi halaman JSP tradisional tidak dapat secara efektif menggunakan fitur sintaks ES6, dan sulit untuk mengemas dan mengompres proyek, dan tidak dapat diperbarui panas. Aplikasi satu halaman tradisional tidak dapat melakukan rendering sisi server di bawah wadah seperti Tomcat untuk mencapai efek SEO. Proyek ini terintegrasi dengan baik dengan karakteristik rendering sisi server halaman JSP tradisional dan fitur pengembangan aplikasi satu halaman, dan sangat mudah digunakan!
Alamat kode sumber
Demo dan dokumentasi
Jika Anda ingin mendukung IE8, Anda perlu menurunkan peringkat web, karena WebPack2+tidak mendukung IE8, dan mencoba menghindari penggunaan perpustakaan yang tidak mendukung IE8, seperti jQuery2+, Lodash4+, vue, dll. Semoga sukses.
Jika Anda ingin melakukan pekerjaan dengan baik, terlebih dahulu Anda harus mempertajam alat Anda.
Jika Anda suka mengedit JS dan CSS, juga tidak masalah untuk menggunakan vscode, tetapi disarankan untuk menggunakan ide saat menulis JSP dan Java.
Berikut ini merangkum artikel terkait tentang konfigurasi lingkungan, untuk referensi, alamat unduhan JDK, konfigurasi intellij ide, lingkungan pengembangan front-end, konfigurasi ide intellij, lingkungan java web tomcat, unduhan dan instalasi maven, unduhan dan instalasi bash git git dan instalasi git bash dan instalasi git bash git dan instalasi git bash dan git bash bash dan instalasi git bash dan git bash bash dan instalasi git bash dan git bash bash dan instalasi git bash dan git bash bash git bash bash git bash bash git bash git bash git bash bash git
├── pom.xml // maven配置文件
├── src
| ├── main
| | ├── filters
| | | └── resources // java工程资源配置目录
| | ├── java // java代码目录
| | ├── js // 前端页面工程
| | | ├── build // 编译相关以及webpack相关配置
| | | | ├── build.js
| | | | ├── check-versions.js
| | | | ├── logo.png
| | | | ├── utils.js
| | | | ├── webpack.base.conf.js
| | | | ├── webpack.dev.conf.js
| | | | └── webpack.prod.conf.js
| | | ├── config // 配置相关
| | | | ├── dev.env.js
| | | | ├── index.js
| | | | ├── js-jsp-map.js // 配置入口js和jsp的映射
| | | | └── prod.env.js
| | | ├── package.json // npm配置
| | | ├── src // web项目工程目录
| | | | ├── pages // jsp页面，最终的jsp文件们会按照pages相对路径打包进webapp/WEB-INF/jsp目录下
| | | | | ├── include // 共享的jsp页面，通过jsp:include引入
| | | | | | ├── common_script.jsp
| | | | | | ├── footer.jsp
| | | | | | ├── header.jsp
| | | | | | ├── init.jsp
| | | | | | └── meta.jsp
| | | | | ├── index // 页面1
| | | | | | ├── index.js // 需要在在config/js-jsp-map.js配置与jsp的映射关系，这样编译后的js会加载jsp的body下。一般js与jsp在同一个目录下。
| | | | | | └── index.jsp
| | | | | └── start // 页面2
| | | | | ├── dashboard.css
| | | | | ├── index.js
| | | | | └── index.jsp
| | | | └── my-component.vue 支持VUE
| | | ├── polyfills 兼容相关的代码
| | | | ├── console.js
| | | | ├── index.js
| | | | └── promise.js
| | | ├── static // 存在静态文件，最终这些文件会拷贝到webapp目录下
| | | | ├── favicon.ico
| | | | ├── images
| | | | | ├── jsp.svg
| | | | | └── webpack.svg
| | | | ├── js
| | | | | └── lib
| | | | | └── jquery.min.js
| | | | └── WEB-INF
| | | | ├── tld
| | | | └── web.xml
| | | └── styles
| | └── webapp // 该目录下的文件不用开发人员手动添加修改，在npm run dev或npm run build的时候自动生成。
| └── test
| └── java
Struktur direktori dalam direktori SRC/Main/JS dimodifikasi berdasarkan templat webpack Vue-Cli. Jika Anda telah membuat proyek menggunakan templat ini, akan mudah untuk memulai.
cd src/main/js npm run dev
Mulailah Tomcat dalam Ide
Buka http://localhost:8081 di browser Anda
Poin -poin berikut perlu diperhatikan
Untuk pertama kalinya memulai proyek, disarankan untuk memulai Tomcat npm run dev terlebih dahulu. Setelah itu, salah satunya akan restart, dan yang lain tidak perlu dimulai ulang. Secara default, npm run dev berjalan di bawah port 8081, Tomcat berjalan di bawah port 8080. Pada akhirnya, Anda hanya perlu mengakses halaman 8081 di browser, dan halaman 8080 tidak diperlukan. Dalam mode pengembangan, CSS yang diperkenalkan oleh JS diperkenalkan secara dinamis, dan halaman akan memiliki efek flash. Jangan khawatir, itu tidak akan muncul di lingkungan pasca-rilis. Saat mengembangkan halaman JSP, penyebaran panas akan menunda. Untuk detailnya, silakan merujuk ke bagian halaman JSP untuk mengembangkan file JSP di direktori halaman dan tidak berkembang di direktori WebApp. Jika tidak, setelah beralih ke direktori halaman untuk dikembangkan atau dikemas, file JSP di bawah WebApp akan ditimpa, menghasilkan konten yang dimodifikasi yang hilang. Ketika file entri yang dikonfigurasi dalam JS-JSP-MAP.js meningkat, pembaruan panas dari webpack-dev-server akan sangat lambat. Dianjurkan untuk sementara waktu mengomentari beberapa file entri yang tidak digunakan sesuai dengan kebutuhan pengembangan saat ini dan menjaga 1 hingga 3, yang akan sangat meningkatkan waktu pembaruan panas.
npm run build
Webapp digunakan sebagai direktori output. File -file dalam statis akan disalin ke direktori output. File JSP di direktori halaman akan disalin ke direktori Webapp/Web-INF/JSP sebagai file template. Portal JS yang terkait dengan JSP akan digabungkan dan dikompresi dan dimasukkan ke dalam tubuh file JSP. CSS terkait JSP akan diekstraksi dari kepala file JSP yang diperkenalkan oleh satu file CSS.
Jika konteks aplikasi dari aplikasi paket Anda tidak/, misalnya, /app , yaitu alamat akses didasarkan pada http://localhost:8080/app , maka saat pengemasan, ingat untuk mengkonfigurasi/ publicPath konfigurasi/aplikasi, dan semua alamat dalam halaman JSP harus ${pageContext.request.contextPath}/ yang ada di coBreveated {pageContext.request.contextpath} yang ada di coBreviating ${ctx}/ yang ada di coBreviated kerangka kerja
JSP tradisional dikembangkan di bawah src/main/webapp . Di bawah kerangka proyek ini, file JSP dikembangkan di bawah src/main/js/src/pages . Meskipun direktori pengembangan tidak konsisten, ia masih memiliki semua fitur pengembangan JSP tradisional.
<jsp:include page=''></jsp:include> atau <%@include file=""%><c:set> , <c:if> , <c:forEach> dll. semuanya dapat digunakan<% out.println("hello world"); %>File->Syncronize> Sinkronisasi (Kunci pintas Ctrl+Alt+Y ), lalu klik tombol ketiga di sebelah kiri Run dan pilih Update classes and resources untuk memperbarui secara manual. Setelah menyegarkan halaman, Anda dapat melihat halaman terbaru. Bahkan, ketika npm run dev , JSP di direktori halaman akan digunakan sebagai file template untuk plugin HTMLWebPackplugin. Setiap kali file di bawah halaman dimodifikasi, itu akan menjadi output ke direktori relatif di bawah webapp/WEB-INF/jsp . Jika Anda perlu memahami prinsip -prinsip tertentu, silakan buka bab intiSelain pustaka tag C standar C, FMT, FN, Anda juga dapat menyesuaikan pustaka tag.
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> Perhatikan bahwa alamat halaman JSP harus dimulai dengan/web-inf/, dan jalur untuk benar-benar mengembangkan JSP ada di direktori js/src/pages , yang menyebabkan ide gagal menyelesaikan jalur file TLD di direktori JSP secara normal, dan tidak dapat secara otomatis diselesaikan saat menggunakan tag khusus. Namun, itu dapat berjalan secara normal, dan proses pengembangan aktual memiliki dampak kecil. Jika Anda memiliki solusi yang lebih baik, silakan hubungi kami.
Karena Anda menggunakan Webpack sebagai alat pengemasan, Anda dapat dengan mudah melakukan konversi sintaks JS dan CSS, dan saat ini mendukung:
Dalam proses pengembangan aplikasi satu halaman, ada fitur hebat yang merupakan pembaruan panas. Jika file JS dimodifikasi, halaman akan memicu pembaruan secara real time. Di bawah kerangka proyek ini, Anda masih dapat menikmati kegembiraan pembaruan panas. Saat Anda memodifikasi JS dan CSS, halaman akan memicu pembaruan secara real time.
Proyek ini sudah mendukung VUE secara default. Bab ini juga ditulis dalam Vue, dan Anda dapat menikmati kegembiraan pengkodean yang dibawa oleh Vue.
Proyek ini menggabungkan fitur webpack dan JSP untuk mengimplementasikan aplikasi multi-halaman, yang keren. Lalu bagaimana itu bisa dicapai? Di sini kita akan berbicara tentang cara memecahkan masalah inti paling banyak dari masalah yang dihadapi dalam membangun proyek.
Menggunakan WebPack untuk mengimplementasikan aplikasi multi-halaman mudah dikaitkan dengan mengkonfigurasi beberapa portal entri, setiap entri sesuai dengan HtmlWebpackPlugin . File JSP digunakan sebagai file template untuk HtmlWebpackPlugin . Setelah entri JS dikemas, itu akan dimasukkan ke dalam tubuh. Proyek ini juga dibangun dengan cara ini. Berikut adalah beberapa poin yang harus diperhatikan
{ test: /.jsp$/, loader: 'raw-loader' } di webpack. Di sini, raw-loader digunakan untuk menyalin teks biasa. Jika Anda memiliki loader yang lebih cocok untuk JSP, maka Anda dapat memberikan banyak fitur file JSP.config/js-jsp-map.js .Tomcat berjalan di bawah Port 8080, Webpack-Dev-Server berjalan di bawah port 8081, dan dua aplikasi yang berbeda. Maka bukankah perlu untuk menulis debugging di bawah Tomcat untuk pengembangan, dan debugging di webpack-dev-server untuk pengembangan. Bukankah ini akan sangat merepotkan?
Untungnya, webpack-dev-server memiliki parameter proxy. Kami menggunakan proxy untuk membalikkan semua permintaan untuk mengakses webpack-dev-server ke 8080. Dengan cara ini, selama proses pengembangan yang sebenarnya, browser hanya perlu membuka halaman port 8081. Ini akan memperhitungkan fungsi rendering server JSP, serta fungsi konversi sintaksis webpack dan pembaruan panas. Tomcat hanya bisa dimulai ulang bila perlu. Berikut adalah beberapa poin yang harus diperhatikan
npm run dev dan Tomcat, tetapi kedua layanan perlu dimulai sebelum browser mengakses 8081.npm run dev dan restart tomcat. Ingat, jika ada file dan penghapusan baru, yang terbaik adalah memulai kembali kedua layanan.Kita tahu bahwa webpack-dev-server menggunakan sistem file dalam memori. Halaman JSP akhirnya diterbitkan ke Tomcat, dan file JSP dalam memori tidak dapat didengarkan dengan ide, jadi bahkan jika output akhir JSP berubah, itu tidak dapat digunakan ke Tomcat. Untungnya, kami menemukan plugin webpack WriteFileplugin, yang dapat memaksa file output dari program webpack-dev-server ke sistem file disk. Berikut adalah beberapa poin yang harus diperhatikan
Gagasan ini sebenarnya tidak hanya berlaku untuk aplikasi multi-halaman JSP di bawah Tomcat, tetapi juga untuk berlaku untuk node sebagai aplikasi multi-halaman server. Nikmati!
