wjsp
1.0.0
แอปพลิเคชันหน้า JSP แบบดั้งเดิมไม่สามารถใช้คุณสมบัติ ES6 ไวยากรณ์ได้อย่างมีประสิทธิภาพและเป็นเรื่องยากที่จะจัดทำแพ็คเกจและบีบอัดโครงการและไม่สามารถอัปเดตร้อนได้ แอปพลิเคชันหน้าเดียวแบบดั้งเดิมไม่สามารถดำเนินการเรนเดอร์ฝั่งเซิร์ฟเวอร์ภายใต้คอนเทนเนอร์เช่น Tomcat เพื่อให้ได้ผลของ SEO โครงการนี้รวมเข้ากับคุณสมบัติของการแสดงผลฝั่งเซิร์ฟเวอร์ JSP แบบดั้งเดิมและคุณสมบัติการพัฒนาแอปพลิเคชันหน้าเดียวและใช้งานง่ายมาก!
ที่อยู่ซอร์สโค้ด
การสาธิตและเอกสาร
หากคุณต้องการสนับสนุน IE8 คุณต้องปรับลดลง WebPack เนื่องจาก WebPack2+ไม่รองรับ IE8 และพยายามหลีกเลี่ยงการใช้ห้องสมุดที่ไม่รองรับ IE8 เช่น JQuery2+, Lodash4+, Vue เป็นต้นโชคดี
หากคุณต้องการทำงานที่ดีคุณต้องลับเครื่องมือของคุณก่อน
หากคุณต้องการแก้ไข JS และ CSS ก็ไม่มีปัญหาในการใช้ VSCODE แต่ขอแนะนำให้ใช้แนวคิดเมื่อเขียน JSP และ Java
ต่อไปนี้สรุปบทความที่เกี่ยวข้องเกี่ยวกับการกำหนดค่าสภาพแวดล้อมสำหรับการอ้างอิงที่อยู่ดาวน์โหลด JDK, Intellij Idea Configuration, สภาพแวดล้อมการพัฒนาส่วนหน้า, Intellij Idea Configuration, Java Web Tomcat Environment, Maven ดาวน์โหลดและติดตั้ง, ดาวน์โหลดและติดตั้ง Git Bash
├── 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
โครงสร้างไดเรกทอรีในไดเรกทอรี SRC/Main/JS ได้รับการแก้ไขตามเทมเพลต WebPack ของ Vue-CLI หากคุณสร้างโครงการโดยใช้เทมเพลตนี้มันจะเริ่มต้นได้ง่าย
cd src/main/js npm run dev
เริ่มต้น Tomcat ในความคิด
เปิด http://localhost:8081 ในเบราว์เซอร์ของคุณ
ประเด็นต่อไปนี้จะต้องให้ความสนใจ
เป็นครั้งแรกที่เริ่มโครงการขอแนะนำให้เริ่ม Tomcat npm run dev ก่อน หลังจากนั้นหนึ่งในนั้นจะเริ่มต้นใหม่และอีกอันหนึ่งจะไม่จำเป็นต้องเริ่มต้นใหม่ โดยค่าเริ่มต้น npm run dev ทำงานภายใต้พอร์ต 8081, Tomcat ทำงานภายใต้พอร์ต 8080 ในที่สุดคุณจะต้องเข้าถึงหน้า 8081 ในเบราว์เซอร์และไม่จำเป็นต้องใช้หน้า 8080 ในโหมดการพัฒนา CSS ที่แนะนำโดย JS จะถูกนำมาใช้แบบไดนามิกและหน้าจะมีเอฟเฟกต์แฟลช ไม่ต้องกังวลมันจะไม่ปรากฏในสภาพแวดล้อมหลังการเปิดตัว เมื่อพัฒนาหน้า JSP การปรับใช้ HOT จะล่าช้า สำหรับรายละเอียดโปรดดูส่วนหน้า JSP เพื่อพัฒนาไฟล์ JSP ในไดเรกทอรีหน้าและไม่พัฒนาในไดเรกทอรี WebApp มิฉะนั้นหลังจากเปลี่ยนไปใช้ไดเรกทอรีหน้าเพื่อพัฒนาหรือแพ็คเกจไฟล์ JSP ภายใต้ WebApp จะถูกเขียนทับส่งผลให้เนื้อหาที่หายไปหายไป เมื่อไฟล์รายการที่กำหนดค่าใน JS-JSP-MAP.JS เพิ่มขึ้นการอัปเดตยอดนิยมของ WebPack-Dev-Server จะช้ามาก ขอแนะนำให้แสดงความคิดเห็นชั่วคราวบางไฟล์รายการที่ไม่ได้ใช้งานตามความต้องการในการพัฒนาปัจจุบันและรักษา 1 ถึง 3 ซึ่งจะเพิ่มเวลาอัปเดตที่ร้อนแรงอย่างมาก
npm run build
WebApp ใช้เป็นไดเรกทอรีเอาต์พุต ไฟล์ในแบบคงที่จะถูกคัดลอกไปยังไดเรกทอรีเอาต์พุต ไฟล์ JSP ในไดเรกทอรีหน้าจะถูกคัดลอกไปยังไดเรกทอรี WebApp/Web-Inf/JSP เป็นไฟล์เทมเพลต พอร์ทัล JS ที่เกี่ยวข้องกับ JSP จะถูกรวมและบีบอัดและนำเข้าสู่ร่างกายของไฟล์ JSP CSS ที่เกี่ยวข้องกับ JSP จะถูกแยกออกจากหัวไฟล์ JSP ที่แนะนำโดยไฟล์ CSS เดียว
หากบริบทแอปพลิเคชันของแอปพลิเคชันแพคเกจของคุณไม่ใช่/ตัวอย่างเช่น /app นั่นคือที่อยู่การเข้าถึงจะขึ้นอยู่กับ http://localhost:8080/app จากนั้นเมื่อบรรจุภัณฑ์อย่าลืมกำหนดค่า/แอ publicPath ที่กำหนดค่า/แอปทั้งหมดในหน้า JSP จะต้องเป็น ${pageContext.request.contextPath}/ ${ctx}/
JSP แบบดั้งเดิมได้รับการพัฒนาภายใต้ src/main/webapp ภายใต้กรอบโครงการนี้ไฟล์ JSP ได้รับการพัฒนาภายใต้ src/main/js/src/pages แม้ว่าไดเรกทอรีการพัฒนาจะไม่สอดคล้องกัน แต่ก็ยังมีคุณสมบัติทั้งหมดของการพัฒนา JSP แบบดั้งเดิม
<jsp:include page=''></jsp:include> หรือ <%@include file=""%><c:set> , <c:if> , <c:forEach> ฯลฯ สามารถใช้งานได้ทั้งหมด<% out.println("hello world"); %>File->Syncronize> syncronize (คีย์ลัด Ctrl+Alt+Y ) จากนั้นคลิกปุ่มที่สามทางด้านซ้ายของการรันและเลือก Update classes and resources เพื่ออัปเดตด้วยตนเอง หลังจากรีเฟรชหน้าคุณสามารถดูหน้าล่าสุดได้ ในความเป็นจริงเมื่อ npm run dev , JSP ในไดเรกทอรีหน้าจะถูกใช้เป็นไฟล์เทมเพลตสำหรับปลั๊กอิน HTMLWEBPACKPLUGIN ทุกครั้งที่ไฟล์ภายใต้หน้าถูกแก้ไขจะมีการส่งออกไปยังไดเรกทอรีสัมพัทธ์ภายใต้ webapp/WEB-INF/jsp หากคุณต้องการเข้าใจหลักการเฉพาะโปรดไปที่บทหลักนอกเหนือจากไลบรารีแท็ก C, FMT, FN มาตรฐานคุณยังสามารถปรับแต่งไลบรารีแท็กได้
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> โปรดทราบว่าที่อยู่ของหน้า JSP จะต้องเริ่มต้นด้วย/web-inf/และเส้นทางที่จะพัฒนา JSP อยู่ในไดเรกทอรี js/src/pages ซึ่งทำให้แนวคิดไม่สามารถแก้ไขเส้นทางไฟล์ TLD ในไดเรกทอรี JSP ได้ตามปกติและไม่สามารถเสร็จสมบูรณ์โดยอัตโนมัติเมื่อใช้แท็กที่กำหนดเอง อย่างไรก็ตามมันสามารถทำงานได้ตามปกติและกระบวนการพัฒนาจริงมีผลกระทบเพียงเล็กน้อย หากคุณมีทางออกที่ดีกว่าโปรดติดต่อเรา
เนื่องจากคุณใช้ WebPack เป็นเครื่องมือบรรจุภัณฑ์คุณสามารถทำการแปลงไวยากรณ์ของ JS และ CSS ได้อย่างง่ายดายและสนับสนุนในปัจจุบัน:
ในกระบวนการพัฒนาแอปพลิเคชันหน้าเดียวมีคุณสมบัติที่ยอดเยี่ยมที่ได้รับการอัปเดตร้อนแรง หากมีการแก้ไขไฟล์ JS หน้าจะทริกเกอร์การอัปเดตแบบเรียลไทม์ ภายใต้กรอบโครงการนี้คุณยังสามารถเพลิดเพลินไปกับความสุขของการอัปเดตที่ร้อนแรง เมื่อคุณแก้ไข JS และ CSS หน้าจะเรียกการอัปเดตแบบเรียลไทม์
โครงการนี้รองรับ Vue โดยค่าเริ่มต้นแล้ว บทนี้เขียนด้วย Vue และคุณสามารถเพลิดเพลินไปกับความสุขของการเขียนโค้ดที่นำโดย Vue
โครงการนี้รวมคุณสมบัติของ WebPack และ JSP เข้ากับแอพพลิเคชั่นหลายหน้าซึ่งเจ๋งมาก แล้วมันจะประสบความสำเร็จได้อย่างไร? ที่นี่เราจะพูดคุยเกี่ยวกับวิธีการแก้ปัญหาหลักมากที่สุดจากปัญหาที่พบในการสร้างโครงการ
การใช้ WebPack เพื่อใช้แอปพลิเคชันหลายหน้านั้นง่ายต่อการเชื่อมโยงกับการกำหนดค่าหลายรายการแต่ละรายการแต่ละรายการสอดคล้องกับ HtmlWebpackPlugin ไฟล์ jsp ใช้เป็นไฟล์เทมเพลตสำหรับ HtmlWebpackPlugin หลังจากรายการ JS ถูกบรรจุมันจะถูกแทรกเข้าไปในร่างกาย โครงการก็ถูกสร้างขึ้นด้วยวิธีนี้ นี่คือบางจุดที่ให้ความสนใจ
{ test: /.jsp$/, loader: 'raw-loader' } ใน WebPack ที่นี่ raw-loader ใช้สำหรับการคัดลอกข้อความธรรมดา หากคุณมีตัวโหลดที่เหมาะสมกว่าสำหรับ JSP คุณสามารถให้ไฟล์ JSP ได้มากมายconfig/js-jsp-map.jsTomcat ทำงานภายใต้พอร์ต 8080, Webpack-dev-Server ทำงานภายใต้พอร์ต 8081 และเป็นสองแอปพลิเคชั่นที่แตกต่างกัน ถ้าอย่างนั้นก็ไม่จำเป็นต้องเขียนการดีบักภายใต้ Tomcat เพื่อการพัฒนาและการดีบักใน Webpack-Dev-Server เพื่อการพัฒนา นี่จะไม่ลำบากมากเหรอ?
โชคดีที่ Webpack-Dev-Server มีพารามิเตอร์พร็อกซี เราใช้พร็อกซีเพื่อย้อนกลับคำขอทั้งหมดเพื่อเข้าถึง WebPack-Dev-Server เป็น 8080 ด้วยวิธีนี้ในระหว่างกระบวนการพัฒนาจริงเบราว์เซอร์จะต้องเปิดหน้าพอร์ต 8081 เท่านั้น สิ่งนี้จะคำนึงถึงฟังก์ชั่นของการเรนเดอร์เซิร์ฟเวอร์ JSP รวมถึงฟังก์ชั่นของการแปลงไวยากรณ์ WebPack และการอัปเดตร้อน Tomcat สามารถรีสตาร์ทได้เฉพาะเมื่อจำเป็น นี่คือบางจุดที่ให้ความสนใจ
npm run dev และ TOMCAT แต่จะต้องเริ่มต้นบริการก่อนที่เบราว์เซอร์จะเข้าถึง 8081npm run dev และรีสตาร์ท Tomcat โปรดจำไว้ว่าหากมีไฟล์และลบใหม่ควรรีสตาร์ททั้งสองบริการเรารู้ว่า WebPack-Dev-Server ใช้ระบบไฟล์ในหน่วยความจำ ในที่สุดหน้า JSP จะถูกเผยแพร่ไปยัง Tomcat ในที่สุดและไฟล์ JSP ในหน่วยความจำไม่สามารถรับฟังได้ตามความคิดดังนั้นแม้ว่าเอาต์พุตสุดท้ายการเปลี่ยนแปลง JSP จะไม่สามารถปรับใช้กับ Tomcat ได้ โชคดีที่เราพบปลั๊กอิน webpack writefileplugin ซึ่งสามารถบังคับไฟล์เอาต์พุตของโปรแกรม webpack-dev-server ไปยังระบบไฟล์ดิสก์ นี่คือบางจุดที่ให้ความสนใจ
แนวคิดนี้ไม่เพียง แต่ใช้กับแอปพลิเคชันหลายหน้า JSP ภายใต้ Tomcat แต่ยังใช้กับโหนดเป็นแอปพลิเคชันหลายหน้าเซิร์ฟเวอร์ สนุกกับมัน!
