wjsp
1.0.0
لا يمكن لتطبيقات صفحة JSP التقليدية استخدام ميزات بناء جملة ES6 بشكل فعال ، ومن الصعب حزم المشاريع وضغطها ، ولا يمكن تحديثها. لا يمكن للتطبيقات التقليدية لصفحة واحدة أن تؤدي عرضًا من جانب الخادم تحت حاويات مثل Tomcat لتحقيق تأثير تحسين محركات البحث. تم دمج هذا المشروع بشكل جيد مع خصائص عرض الخادم التقليدي لصفحة JSP وميزات تطوير التطبيقات ذات الصفحة الواحدة ، وهي سهلة الاستخدام للغاية!
عنوان رمز المصدر
العروض التوضيحية والوثائق
إذا كنت ترغب في دعم IE8 ، فأنت بحاجة إلى خفض مستوى WebPack ، لأن WebPack2+لا يدعم IE8 ، ومحاولة تجنب استخدام المكتبات التي لا تدعم IE8 ، مثل JQuery2+، Lodash4+، Vue ، إلخ. حظًا سعيدًا.
إذا كنت ترغب في القيام بعمل جيد ، فيجب عليك أولاً شحذ أدواتك.
إذا كنت ترغب في تحرير JS و CSS ، فلا توجد مشكلة أيضًا في استخدام VSCode ، ولكن يوصى باستخدام الفكرة عند كتابة JSP و Java.
يلخص ما يلي المقالات ذات الصلة حول تكوين البيئة ، للرجوع إليها ، عنوان تنزيل JDK ، تكوين فكرة Intellij ، بيئة تطوير الواجهة الأمامية ، تكوين Idea Intellij ، Java Web Tomcat Environm
├── 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 ، سوف يتأخر النشر الساخن. للحصول على التفاصيل ، يرجى الرجوع إلى قسم صفحة JSP لتطوير ملفات JSP في دليل الصفحات وعدم تطويره في دليل WebApp. خلاف ذلك ، بعد التبديل إلى دليل الصفحات لتطوير أو حزمة ، سيتم كتابة ملف JSP أسفل WebApp ، مما يؤدي إلى محتوى مفقود مفقود. مع زيادة ملفات الإدخال التي تم تكوينها في JS-JSP-Map.js ، سيكون التحديث الساخن لخادم WebPack-DEV بطيئًا للغاية. يوصى بالتعليق مؤقتًا على بعض ملفات الدخول غير المستخدمة وفقًا لاحتياجات التطوير الحالية والحفاظ على 1 إلى 3 ، مما سيزيد بشكل كبير من وقت التحديث الساخن.
npm run build
يتم استخدام WebApp كدليل الإخراج. سيتم نسخ الملفات الموجودة في الثابت إلى دليل الإخراج. سيتم نسخ ملف JSP في دليل الصفحات إلى دليل WebApp/Web-INF/JSP كملف قالب. سيتم دمج بوابة JS المرتبطة بـ JSP وضغطها وإدخالها في جسم ملف JSP. سيتم استخراج CSS المرتبطة JSP من رأس ملف JSP الذي تم تقديمه بواسطة ملف CSS واحد.
إذا كان سياق التطبيق للتطبيق المعبأ الخاص بك غير/، على سبيل المثال ، /app ، أي ، يعتمد عنوان الوصول على http://localhost:8080/app ، ثم عند التغليف ، تذكر أن تكوين/ publicPath Configurate/App ، وكل العناوين في صفحة JSP يجب أن تكون $ ${ctx}/ ${pageContext.request.contextPath}/ نطاق
تم تطوير 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.js .يعمل Tomcat تحت المنفذ 8080 ، يعمل WebPack-Dev-Server تحت المنفذ 8081 ، وهو تطبيقان مختلفان. بعد ذلك ، لن يكون من الضروري كتابة تصحيح الأخطاء بموجب Tomcat للتنمية ، وتصحيح الأخطاء في خادم Webpack-Dev للتنمية. ألن يكون هذا مزعجًا جدًا؟
لحسن الحظ ، لدى WebPack-Dev-Server معلمة وكيل. نحن نستخدم الوكيل لعكس جميع الطلبات للوصول إلى خادم Webpack-Dev-Server إلى 8080. وبهذه الطريقة ، أثناء عملية التطوير الفعلية ، يحتاج المتصفح فقط إلى فتح صفحة منفذ 8081. سيأخذ هذا في الاعتبار وظائف عرض خادم JSP ، بالإضافة إلى وظائف تحويل بناء جملة WebPack وتحديثها الساخن. لا يمكن إعادة تشغيل Tomcat إلا عند الضرورة. فيما يلي بعض النقاط التي يجب الانتباه إليها
npm run dev و Tomcat ، ولكن يجب بدء كلا الخدمتين قبل الوصول إلى المتصفح 8081.npm run dev وإعادة تشغيل TOMCAT. تذكر أنه إذا كانت هناك ملفات وحذف جديدة ، فمن الأفضل إعادة تشغيل كلتا الخدمتين.نحن نعلم أن WebPack-Dev-Server يستخدم نظام الملفات في الذاكرة. يتم نشر صفحة JSP في النهاية إلى Tomcat ، ولا يمكن الاستماع إلى ملف JSP في الذاكرة بواسطة IDEA ، لذلك حتى إذا تغير الإخراج النهائي JSP ، فلا يمكن نشره في Tomcat. لحسن الحظ ، وجدنا مكونًا إضافيًا لـ WebPack WriteFilePlugin ، والذي يمكن أن يجبر ملفات الإخراج لبرنامج WebPack-Dev-Server إلى نظام ملفات القرص. فيما يلي بعض النقاط التي يجب الانتباه إليها
لا تنطبق هذه الفكرة في الواقع على تطبيقات JSP متعددة الصفحات فقط تحت Tomcat ، ولكن أيضًا لتطبيقها على العقدة كتطبيقات متعددة الصفحات من الخادم. استمتع بها!
