الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

Springboot2-vue3

قالب خلفية شائع يعتمد على Springboot2 وVue3، بدون وظائف زائدة عن الحاجة، فقط إدارة الأذونات والوظائف المشتركة . مشروع فصل الواجهة الأمامية والخلفية، اجتاز الكود 90٪ من مسح اتفاقية الترميز على بابا والعثور على الأخطاء

عنوان الإصدار الجديد 

 * 本项目不再维护，请关注新版

دليل البدء

سيساعدك الدليل التالي على تثبيت المشروع وتشغيله على جهازك المحلي للتطوير والاختبار. للحصول على معلومات حول كيفية نشر هذا المشروع في بيئة عبر الإنترنت، يرجى الرجوع إلى قسم النشر.

متطلبات التثبيت والخطوات

  • تثبيت وتكوين بيئة Java، JDK1.8
  • قم بتثبيت mysql 8 وإنشاء قاعدة بيانات (utf8mb4) واستيراد sql (في دليل doc)
  • لتثبيت redis ، ما عليك سوى تنزيله وتثبيته
  • تحتاج أدوات التطوير إلى تثبيت البرنامج الإضافي lombok (يوصى باستخدام IDEA لأدوات التطوير)
  • --- عملية خلفية (إذا كانت هناك مشكلة، فعادة ما يكون ذلك خطأ في تكوين مصدر البيانات في ملف تكوين yml)
  • تثبيت وتكوين بيئة العقدة
  • قم بتثبيت vue-cli3 ، وأدخل إلى دليل vue وقم بتنفيذ npm install
  • --- تشغيل npm run serve على الواجهة الأمامية (يمكن لـ WebStorm أو IDEA النقر مباشرة على المثلث الأخضر الموجود على يسار السطر 6 في ملف package.json )

العنوان التجريبي

  • عنوان التجريبي على الانترنت
    • اسم المستخدم:superadmin
    • كلمة المرور:111111
    • نصيحة: قد يتم طرد عدة مستخدمين يقومون بتسجيل الدخول في نفس الوقت.
    • نصيحة: لقد حظرت البيئة التجريبية عمليات الإضافة والحذف والتعديل، فقط تجاهل الخطأ.
    • نصيحة: إذا كانت هناك استثناءات أخرى، فيرجى فرض تحديث الصفحة (قد تكون هناك مشكلة في ذاكرة التخزين المؤقت)
  • وثائق الواجهة
    • swagger-bootstrap
    • نصائح: سيطالبك الطلب بـ 404، يرجى إضافة /github يدويًا أمام الطلب

نشر

  • قم بتشغيل أمر mvn clean package في دليل Springboot إلى package. بعد التعبئة، يكون الملف الذي تم إنشاؤه موجودًا في الدليل /target/build.
    • يقوم دليل التكوين بتخزين ملفات التكوين.
    • دليل lib هو حزمة الجرة التي يعتمد عليها maven.
    • يخزن الدليل الثابت الملفات الثابتة
    • ملف jar هو حزمة jar التي تم إنشاؤها (إذا ظلت تبعية pom دون تغيير في المستقبل، فيمكنك استبدال حزمة jar فقط)
  • قم بتشغيل أمر npm run build في دليل vue إلى package. بعد التعبئة، يكون الملف الذي تم إنشاؤه موجودًا في الدليل /dist.
    • تكوين الحزمة موجود في ملف .env وملف vue.config.js
  • يحتاج خادم النشر إلى تكوين بيئة JDK1.8 و mysql 8 و redis
  • تعمل حزمة jar على تشغيل nohup java -jar springboot.jar & ويمكن تشغيلها في الخلفية وإخراج السجل إلى ملف nohup.out في الدليل الحالي.
  • يوصى بتكوين nginx لخادم النشر، ويتم تجميع Vue ووضعه ضمن nginx، وإذا لم يتم تكوينه، فيمكن وضعه ضمن دليل ثابت في نفس الدليل لحزمة الجرة .

الأخطاء الشائعة

  • java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
    • خطأ: إنشاء فئة الكيان بناءً على قاعدة البيانات
    • الحل: قم بتغيير مسار حزمة الجرة في السطر 6 من Resources/config/generator-config.xml إلى مسار حزمة الجرة الخاصة بك
  • npm install
    • خطأ: خطأ في تبعية تثبيت vue، عادةً ما يكون عقدة sass
    • الحل: قم بتغيير صورة Taobao أو npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
  • /login ------请求失败-----error: Error: Cannot find module './q/Index'
    • خطأ: بعد إنشاء قائمة جديدة في الخلفية (لا تحتوي القائمة على مرؤوسين) والحصول على إذن لإضافة القائمة، يحدث هذا الخطأ عند تسجيل الدخول مرة أخرى.
    • الحل: أضف دليل القائمة وملف Index.vue إلى المسار /src/views/index/ في مشروع vue

نهاية الطريق:

Springboot، Mybatis، Redis

  1. مقدمة
    • تم إنشاء المشروع بناءً على قالب Springboot
  2. التكوين الأساسي
    • يمكن لملف .yml تكوين المعلومات ذات الصلة
    • يحتوي دليل التكوين على تكوينات الوحدة النمطية الشائعة.
    • تم تكوين عامل التصفية باستخدام المجال المشترك ، وتصفية IP ، وتصفية المعلمات ، وما إلى ذلك.
      • تقوم طلبات تصفية المعلمات بإزالة المسافات البادئة واللاحقة تلقائيًا ، باستخدام Jsoup لتصفية علامات html (يمكن تخصيص مستوى التصفية)
  3. إدارة الأذونات
    • واجهة تحتوي على تعليق توضيحي @AdminAuthToken ، يجب أن يحتوي رأس الطلب على رمز مميز للوصول إليه
    • التعاون مع صفحة الواجهة الأمامية vue لعرض التوجيه وإخفاء زر العرض ديناميكيًا: يتم حفظ الزر في $store.state.role['buttons'] (الواجهة الأمامية)
    • بدقة بالنسبة لأذونات مستوى الواجهة، يجب تحسين واجهة برمجة التطبيقات المقابلة للقائمة أو الزر في إدارة الوظائف ، وإلا فسيتم السماح بها افتراضيًا بعد وجود الرمز المميز .
  4. يستخدم مصنع التعبئة والتغليف CURD ويرث BaseService فقط.
    • سيقوم baseInsert() و baseUpdate() تلقائيًا بتصفية الحقول ذات القيم الخالية
    • يرجى تصفية معلمات baseUpdate() ، أو إنشاء فئة كيان جديدة لعملية التعيين.
  5. إنشاء فئات الكيانات تلقائيًا بناءً على قاعدة البيانات
    • قم بتشغيل طريقة org.mybatis.generator.plugin.MyBatisTest.main()
    • موارد التكوين المحددة/config/generator-config.xml
  6. يتم تخزين السجلات بشكل يومي، والتكوين المحدد موجود في Resources/config/logback-spring.xml
  7. قم بتسجيل سجل المستخدم الإداري تلقائيًا، ويمكن وضع تعليق توضيحي @SystemLog على وحدة التحكم

الواجهة الأمامية:

وجهة النظر:

  1. مقدمة

    • تم إنشاء المشروع بناءً على vue cli3
    • واجهة المستخدم: عنصر واجهة المستخدم
    • طلب الشبكة: أكسيوس
      • طريقة الاتصال العامة this.$axios({ url: '', data: {}, success(data) {} });
        • عنوان url: مطلوب فقط العنوان الذي يلي اسم المجال
        • النجاح: يحتاج رد الاتصال فقط إلى معالجة الحالة التي يكون فيها الرمز 200
    • المتغيرات والأساليب العامة موجودة في الدليل /src/utils
    • تجاوز نمط element-ui في الملف /src/assets/sass/element-variables.scss
    • تقديم مكتبة الخطوط Iconfont
      • فقط قم بالكتابة فوق الملفات الموجودة في الدليل /src/assets/font/iconfont
      • اقتباس <i class="iconfont iconfont-address"></i>
    • معظم المشاريع لديها تعليقات

  2. التكوين الأساسي

    • التعاون مع الواجهة الخلفية لتنفيذ التوجيه الديناميكي: املأ المسار في نموذج إدارة الوظائف، مسار الجذر الافتراضي هو /src/views/index/
    • يعد ملف .env.production/development و vue.config.js من ملفات التكوين

  3. المكونات المغلفة شائعة الاستخدام ( للحصول على التفاصيل، يرجى الرجوع إلى /src/views/index/system/sysUser/ للحصول على تعليقات مفصلة )

    • الحوار: مربع منبثق
      • التفاصيل: عرض البيانات في شكل عنوان + محتوى
      • النموذج: إرسال النموذج، يحتاج @submit فقط إلى معالجة الموقف بعد التحقق من النموذج
      • الفهرس: المربع المنبثق العادي
    • طاولة: طاولة
      • تم قبول مثال الإرجاع بواسطة النموذج: {"list":[],"pageNum":1,"pageSize":10}
      • طلب بيانات الجدول tableDataRequest: { url: '', data: {} }
        • عنوان URL: عنوان الطلب
        • البيانات: معلمات إضافية تستخدم مع أهم عمليات البحث
      • عرض الجدول tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] يقبل مصفوفة --- ارجع إلى جدولlayui
        • المنسق: عرض معقد، يمكنه إرجاع dom

شكر وتقدير

بادئ ذي بدء، بفضل Springboot و Vue و Element-UI وغيرها من المشاريع الممتازة مفتوحة المصدر، ثانيا، يشير هذا المشروع إلى العديد من الأمثلة عبر الإنترنت، إذا رأيت تعليمات برمجية مماثلة، فهناك إجابة واحدة فقط.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل