مساء الخير. أود في هذه المقالة أن أشارككم تجربتي الأولى مع أشياء مثل Maven، وSpring، وHibernate، وMySQL، وTomcat أثناء عملية إنشاء تطبيق CRUD بسيط. هذا هو الجزء الأخير. هذه المقالة مخصصة في المقام الأول لأولئك الذين أكملوا بالفعل 30-40 مستوى هنا، ولكنهم لم يغامروا بعد بما هو أبعد من Java النقي وبدأوا للتو (أو على وشك البدء) في دخول العالم المفتوح بكل هذه التقنيات والأطر وغيرها من الأشياء غير المألوفة. كلمات. هذا هو الجزء الرابع الأخير من المقالة "مقدمة إلى Maven وSpring وMySQL وHbernate وأول تطبيق CRUD." يمكن مشاهدة الأجزاء السابقة من خلال الروابط التالية:
تطبيقنا يعمل، لكن لا يمكنك النظر إليه بدون دموع، ونقوش مملة، وروابط قبيحة، وخلفية بيضاء فارغة. نحن بحاجة إلى إصلاح هذا وإضافة الجمال المختلفة. كيف نفعل ذلك؟ حسنًا، أولاً وقبل كل شيء، يمكنك فقط التلاعب بالصفحات والقيام بكل أنواع الأشياء باستخدام إمكانيات HTML . ولكن إذا حاولت تغيير الخلفيات والألوان والأحجام وترتيب العناصر وما إلى ذلك باستخدام HTML وحده. وما إلى ذلك وهلم جرا. ثم في النهاية يمكنك إحداث فوضى كبيرة في الصفحة بحيث لا يمكنك معرفة أي شيء هناك لاحقًا. علاوة على ذلك، فإن خيارات تصميم HTML محدودة للغاية. من الأفضل استخدام CSS (أوراق الأنماط المتتالية) لهذا الغرض . ومن ثم يمكن جمع كل ما يتعلق بالتصميم في مكان واحد، ثم تطبيقه على العنصر المطلوب في الصفحة. يمكن كتابة كود CSS مباشرة على صفحة JSP في علامة خاصة، ولكن من الملائم جدًا وضعه في ملف منفصل، ثم تطبيقه ببساطة على الصفحات الضرورية. لوضع الملفات ذات الأنماط وموارد الويب الثابتة الأخرى، سنقوم بإنشاء دليل منفصل داخل webapp . لكي لا نخلط بين موارد الويب والموارد العادية (حيث لدينا db.properties )، فلنستدعي هذا الدليل res ونضع جميع ملفات CSS والصور وما إلى ذلك هناك:
لاستخدام هذه الملفات نحتاج إلى تحديد موقعها في التكوين. دعنا نذهب إلى صفنا WebConfig. في السابق، استخدمنا التعليق التوضيحي @EnableWebMvcلعدم تكوين أي شيء، ولكن ببساطة استخدم التكوين الافتراضي. ولكن الآن هناك حاجة لتكوين شيء ما. للقيام بذلك، نستخدم الواجهة WebMvcConfigurer، والتي تسمح لك بتجاوز طرق التكوين. الذي - التي. يمكننا استخدام التكوين الافتراضي، ولكن في نفس الوقت تخصيص بعض الجوانب لأنفسنا. في هذه الحالة addResourceHandlers، نحتاج إلى طريقة نشير بها إلى موقع موارد الويب الثابتة. فقط في حالة ظهور الفصل بأكمله على النحو التالي:
وهذا سيغير طاولتنا تمامًا (يبدو غبيًا بالطبع، لكنه هكذا، على سبيل المثال): حسنًا، أعتقد أنه ليست هناك حاجة للحديث بالتفصيل عن CSS، كل شيء بسيط للغاية. يمكنك العثور على الإنترنت على الكثير من الخيارات الجاهزة لتصميم الجداول والنماذج. لكن من الأفضل، بالطبع، أن تقوم بالتصميم بنفسك، لست بحاجة إلى أن تكون مصممًا، لأنه ليس موقعًا معقدًا. حتى بعد ساعات قليلة من التعارف الأول سيكون كافيًا لإنشاء تصميم جميل وأنيق إلى حد ما لمثل هذه الصفحة البسيطة. بالإضافة إلى ذلك، فإن الإنترنت مليء بجميع أنواع الدروس والأمثلة، وهناك مواقع خاصة حيث يمكنك تحرير HTML وCSS في نفس الوقت على شاشة واحدة ورؤية شكل كل شيء على الفور. مع القليل من الممارسة، يمكنك إنشاء فن حقيقي. صحيح، لا ينبغي عليك أن تنجرف هنا أيضًا (ما لم تكن لديك خطط لتصبح مصممًا بالطبع)، وإلا فإن التصميم شيء من هذا القبيل، فمن الممكن أن تتعثر هنا لفترة طويلة جدًا. عندما بدأت في فهم CSS لأول مرة، تعثرت. كنت أرغب في تجربة كل شيء، كل خاصية، تحريف شيء ما، التلاعب به، التجربة، أخذ صفحات من بعض المواقع وإعادة تصميمها بشكل لا يمكن التعرف عليه. ربما استمتعت بهذه اللعبة لمدة أسبوع، دون أن أفعل شيئًا آخر، حتى سمحت لي بالرحيل :) حسنًا، بشكل عام، بالطبع، لا يستحق المبالغة في ذلك والقيام بمعجزة ملونة غير مفهومة، عليك أن تفعل ذلك ببساطة و بذوق. الشيء الوحيد الجدير بالملاحظة. عليك أن تفهم أن CSS هو وصف للتصميم ، و HTML هو ترميز . لا يجب أن تحاول القيام بكل شيء على الإطلاق من خلال CSS؛ سيكون تنفيذ بعض الجوانب صعبًا للغاية، وبعضها ببساطة مستحيل، عندما يتم ذلك في HTML باستخدام سطرين إضافيين، أو حتى سمة واحدة فقط في علامة. تحتاج إلى دمجها وإنشاء جميع أنواع الألوان والخلفيات والخطوط في CSS، وإذا كنت، على سبيل المثال، تحتاج إلى الجمع بين خليتين من خلايا الجدول، فمن الأسهل استخدام أدوات HTML. حسنًا، على سبيل المثال، إليك ما تمكنت من فعله بالصفحات في بضع ساعات من التلاعب بـ CSS وHTML (لن أخوض هنا في التفاصيل حول الفوضى التي أحدثتها لتحقيق ذلك، في النهاية سيكون هناك رابط إلى GitHub لهذا المشروع حيث يمكنك البحث): بالطبع، لا أعرف مدى كفاءتي في القيام بكل شيء هناك، ولكن بالنظر إلى أنني رأيت CSS لأول مرة قبل أسبوع، أعتقد أن الأمر سار بشكل جيد.
ترقيم الصفحات
الآن كل شيء يعمل، ويبدو جيدًا، ولكن لا يوجد سوى عدد قليل من السجلات في الجدول حتى الآن. ماذا لو كان هناك مائة فيلم، أو ألف فيلم؟ ليس من الملائم تصفح مثل هذه القائمة الطويلة. يكون الأمر أكثر ملاءمة عندما يتم عرض القائمة في صفحات مكونة من 10 إدخالات، على سبيل المثال. لذلك، سنحاول الآن تنفيذ تقسيم القائمة إلى صفحات (أحيانًا يُطلق على هذا أيضًا اسم "ترحيل الصفحات" أو "ترقيم الصفحات" ( ترقيم الصفحات باللغة الإنجليزية )). يمكن القيام بذلك بطرق مختلفة. على سبيل المثال، يمكنك نقل القائمة الكاملة إلى صفحة jsp وإنشاء جدول هناك يضم العدد المطلوب من السجلات. أو، على سبيل المثال، يمكنك سحب السجلات المطلوبة من القائمة العامة في الخدمة، ثم إرسال هذه القائمة المصغرة إلى صفحة jsp للعرض. لكن من الأفضل بالطبع القيام بذلك على مستوى قاعدة البيانات. لا تكمن الفكرة في أخذ قائمة كاملة من قاعدة البيانات ثم تقسيمها إلى أجزاء، ولكن في البداية الحصول على القطعة المطلوبة من قاعدة البيانات دون لمس أي شيء آخر. بعد كل شيء، لماذا نحتاج إلى سحب جميع مئات أو آلاف السجلات من قاعدة البيانات مرة واحدة، إذا كان السجل الذي نحتاجه هو في العشرة الأوائل، فمن الأفضل سحب هذه العشرة فقط. دعنا نذهب إلى DAO ونضيف allFilmsمعلمة إلى الطريقة int page، والتي ستكون مسؤولة عن رقم الصفحة (في الخدمة، بالطبع، نفعل الشيء نفسه). ودعنا نغير تطبيق هذه الطريقة قليلاً، إذا قمنا سابقًا بسحب القائمة بأكملها، فسنقوم الآن بسحب جزء فقط. ستساعدنا الطرق setFirstResult(أي صف من الجدول نبدأ به) و setMaxResults(كم عدد السجلات المراد عرضها) في هذا:
أولئك. إذا كانت هذه هي الصفحة الأولى، فإننا نعرض 10 سجلات كحد أقصى، بدءًا من الصفحة 0؛ وإذا كانت هذه هي الصفحة الخامسة، فإننا نعرض 10 سجلات بدءًا من الصفحة 40 (لا تنس أن الترقيم في قاعدة البيانات يبدأ من 0). سنقوم أيضًا بإنشاء طريقة تُرجع عدد السجلات في الجدول. سنحتاج إلى ذلك لمعرفة عدد جميع الصفحات وإنشاء روابط لها على صفحة jsp الخاصة بنا:
publicintfilmsCount(){Session session = sessionFactory.getCurrentSession();return session.createQuery("select count(*) from Film",Number.class).getSingleResult().intValue();}
باستخدام مثل هذا الاستعلام، سنحصل على عدد كافة السجلات في الجدول (كقيمة int) دون سحب السجلات نفسها. لننتقل الآن إلى وحدة التحكم ونعمل على الطريقة التي تُرجع الصفحة الرئيسية بقائمة الأفلام:
ظهر هنا تعليق توضيحي جديد @RequestParamيشير إلى أننا نحصل على هذه القيمة من معلمة الطلب. الآن، إذا انتقلنا إلى عنوان به معلمة، على سبيل المثال http://localhost:8080/ ?page=4 ، فسنحصل وفقًا لذلك على الصفحة الرابعة. لقد قمنا بتعيين القيمة الافتراضية على " 1 " بحيث عندما يبدأ التطبيق، عندما نذهب إلى عنوان بدون المعلمة http://localhost:8080/ ، نحصل على الصفحة الأولى. في الطريقة نحصل على عدد جميع السجلات، ثم بهذه الطريقة البسيطة نحسب عدد الصفحات. أولئك. إذا كان لدينا 10 سجلات، فهذه صفحة واحدة، وإذا كان هناك 11، فهذه بالفعل 2. حسنًا، ننقل هذا الأمر برمته إلى النموذج. تحتاج إلى معرفة عدد الصفحات من أجل إنشاء روابط لها جميعًا في الدورة، والسماح لعدد الأفلام أن يكون موجودًا فقط في حالة، على سبيل المثال، إذا كنت تريد عرض هذه المعلومات في مكان ما على الصفحة. الآن كل ما تبقى هو الانتقال إلى film.jsp وإضافة روابط إلى كل صفحة باستخدام هذا البناء:
نقوم بإنشاء الروابط حسب العداد 1، 2، 3، ... ونقوم بتعيين المعلمة حسب قيمة الفهرس.
بالمناسبة، بنفس الطريقة كما هو الحال مع ترقيم الصفحات، يمكنك إضافة ميزات أخرى، مثل الفرز والتصفية والبحث. نحن ببساطة نقوم بتمرير معلمات مختلفة إلى طريقة DAO ونستخدمها لتكوين استعلام مناسب لقاعدة البيانات من أجل سحب السجلات المطلوبة بالترتيب المطلوب.
دعونا نضيف لمسة صغيرة أخرى. نعود إلى وحدة التحكم. في طرق الإضافة والتحرير والحذف، بعد انتهاء العملية، نقوم بإعادة التوجيه إلى الصفحة الرئيسية "redirect:/" . الذي - التي. إذا كنا في مكان ما في الصفحة الخمسين وقمنا بالنقر فوق "تحرير الإدخال"، فبعد التنفيذ، سننتقل إلى العنوان " / "، أي. دعنا نعود إلى الصفحة 1. هذا ليس مريحًا جدًا، أود العودة من حيث أتينا. دعونا نحل هذا بكل بساطة. FilmControllerلنقم بإنشاء متغير مثيل في الفصلint page
privateint page;
داخل الطريقة allFilmsسنقوم بتعيين قيمة المعلمة لهذا المتغير page:
this.page = page;
الذي - التي. في كل مرة يتم فيها تنفيذ هذه الطريقة (أي عندما نتنقل عبر الصفحات)، ستتم كتابة قيمة الصفحة الحالية إلى المتغير. ثم نستخدم هذه القيمة في أساليبنا لإعادة التوجيه مرة أخرى إلى نفس الصفحة.
ربما سننتهي هنا. والنتيجة هي تطبيق CRUD كامل. إنه بالتأكيد بعيد عن المثالية (بعيد جدًا)، ولكن يمكن تحسينه وتحسينه وإصلاح الأخطاء وإضافة الوظائف. يمكنك استخدام الأساليب المضمنة للعمليات الخام؛ إضافة التصفية والبحث والفرز؛ إضافة جداول أخرى ذات صلة؛ تنفيذ الدعم لمستخدمين مختلفين من خلال التفويض والمصادقة، وما إلى ذلك. وما إلى ذلك وهلم جرا. نطاق الخيال لا حدود له، لذلك عليك أن تسعى إليه. رابط إلى جيثب لهذا المشروع . شكرًا لكم على اهتمامكم. ملحوظة: هذه أول محاولة لي في حياتي لكتابة مقال، فلا تحكم بدقة :). أعتذر عن عدم إضافة أي روابط مختلفة إلى الموارد المفيدة، ولسوء الحظ، ما زلت لا أستطيع تطوير عادة حفظ الروابط إلى المصادر التي أحصل منها على المعلومات. وطبعًا أعتذر عن كثرة الرسائل، فالإيجاز ليس موهبتي، وأتمنى أن يتمكن أحد من التعامل مع هذا الأمر. روابط لجميع الأجزاء
حسنًا، أعتقد أنه ليست هناك حاجة للحديث بالتفصيل عن CSS، كل شيء بسيط للغاية. يمكنك العثور على الإنترنت على الكثير من الخيارات الجاهزة لتصميم الجداول والنماذج. لكن من الأفضل، بالطبع، أن تقوم بالتصميم بنفسك، لست بحاجة إلى أن تكون مصممًا، لأنه ليس موقعًا معقدًا. حتى بعد ساعات قليلة من التعارف الأول سيكون كافيًا لإنشاء تصميم جميل وأنيق إلى حد ما لمثل هذه الصفحة البسيطة. بالإضافة إلى ذلك، فإن الإنترنت مليء بجميع أنواع الدروس والأمثلة، وهناك مواقع خاصة حيث يمكنك تحرير HTML وCSS في نفس الوقت على شاشة واحدة ورؤية شكل كل شيء على الفور. مع القليل من الممارسة، يمكنك إنشاء فن حقيقي. صحيح، لا ينبغي عليك أن تنجرف هنا أيضًا (ما لم تكن لديك خطط لتصبح مصممًا بالطبع)، وإلا فإن التصميم شيء من هذا القبيل، فمن الممكن أن تتعثر هنا لفترة طويلة جدًا. عندما بدأت في فهم CSS لأول مرة، تعثرت. كنت أرغب في تجربة كل شيء، كل خاصية، تحريف شيء ما، التلاعب به، التجربة، أخذ صفحات من بعض المواقع وإعادة تصميمها بشكل لا يمكن التعرف عليه. ربما استمتعت بهذه اللعبة لمدة أسبوع، دون أن أفعل شيئًا آخر، حتى سمحت لي بالرحيل :) حسنًا، بشكل عام، بالطبع، لا يستحق المبالغة في ذلك والقيام بمعجزة ملونة غير مفهومة، عليك أن تفعل ذلك ببساطة و بذوق. الشيء الوحيد الجدير بالملاحظة. عليك أن تفهم أن CSS هو وصف للتصميم ، و HTML هو ترميز . لا يجب أن تحاول القيام بكل شيء على الإطلاق من خلال CSS؛ سيكون تنفيذ بعض الجوانب صعبًا للغاية، وبعضها ببساطة مستحيل، عندما يتم ذلك في HTML باستخدام سطرين إضافيين، أو حتى سمة واحدة فقط في علامة. تحتاج إلى دمجها وإنشاء جميع أنواع الألوان والخلفيات والخطوط في CSS، وإذا كنت، على سبيل المثال، تحتاج إلى الجمع بين خليتين من خلايا الجدول، فمن الأسهل استخدام أدوات HTML. حسنًا، على سبيل المثال، إليك ما تمكنت من فعله بالصفحات في بضع ساعات من التلاعب بـ CSS وHTML (لن أخوض هنا في التفاصيل حول الفوضى التي أحدثتها لتحقيق ذلك، في النهاية سيكون هناك رابط إلى GitHub لهذا المشروع حيث يمكنك البحث): 
بالطبع، لا أعرف مدى كفاءتي في القيام بكل شيء هناك، ولكن بالنظر إلى أنني رأيت CSS لأول مرة قبل أسبوع، أعتقد أن الأمر سار بشكل جيد.
GO TO FULL VERSION