XanaduCompany

1. اعتماد الحلول التقنية

التقنيات الرئيسية المستخدمة في هذا النظام هي كما يلي:

فيو3

1. Vue.js
2. العنصر بلس
3. أكسيوس
4. Node.js
5. تسلسل
6. كوا
7. قاعدة بيانات ماي اس كيو ال

تحديث 2022.11.19

فرع Vue3 الجديد، هو بالفعل الفرع الافتراضي الذي تم تطويره بواسطة zerotower69

• تم التحديث إلى Vue3 + TS + Element Plus

تحديث 2023.03.15

vue3 هو الفرع الرئيسي. بالنسبة لإصدار vue2، يرجى الرجوع إلى فرع vue2. يحتوي هذا الفرع حاليًا على العديد من العيوب، يرجى الرجوع إلى تأثير إصدار vue2.

2. بيئة التطوير

1. نظام التشغيل: ويندوز 10
2. قاعدة البيانات: MySQL (الإصدار 5.7.7)
3. خادم الويب: إنجينكس
4. أدوات التطوير: Webstorm
5. بيئة النظام الأساسية: Node.js
6. المتصفح: جوجل كروم

3. وصف الكتالوج

المشرف --- إدارة الخلفية

الويب --- عرض مكتب الاستقبال

الخادم --- خدمة الواجهة الخلفية

4. أدخل المشروع

النظام متصل للعرض

1. عرض بوابة المؤسسة (https://xanadu.aerowang.cn/)

2. إدارة خلفية النظام (https://xanadu.aerowang.cn/admin)

   • الحساب: youke، كلمة المرور: a123456

   • المسؤول: كلمة المرور المشرف: 654321

     يمكنك أيضًا التسجيل في

5. كيفية التشغيل محليا

إذا كانت هناك مشكلة، فقم بإلقاء نظرة على البرامج النصية في package.json. يمكنك أن ترى أن أوامر التطوير والتشغيل يتم إنشاؤها من لا شيء. إذا تعذر تنفيذ الأمر، فلا يجب تعريفه!

1. ابدأ الواجهة الخلفية أولاً (ضمن دليل الخادم)

npm install

npm run start(本地启动)

或者 npm run dev(实时监听改动重启，边改边跑) 需要全局安装 nodemon（任何说不是xxx命令的错误都是没有全局安装，请先安装后再运行）

2. ابدأ الواجهة الأمامية (دليل الويب أو المسؤول)

 # 1.安装
npm install
   #又或者
pnpm install
# 2.启动
npm run serve 
   #又或者
pnpm serve
# 3.打包
npm run build 
 #又或者
pnpm build
# 4.清除 node_modules
npm run clear 
  # 又或者
pnpm clear #由于rmdir 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

الرجاء تثبيت الأمر pnpm عالميًا مسبقًا

npm i pnpm -g

6. عامل ميناء

Docker النشر التلقائي بنقرة واحدة

طلب

 # 主目录下
docker compose up -d

# 即可访问

يجب تغيير الملفات التالية:

• ./admin/.env.production

  VUE_APP_BASE_API = '你自己的域名:3000/api/v1'

• ./admin/vue.config.js

  line.27 publicPath: '/', => publicPath: '/admin/',

• ./server/config/dbinfo.js

  host: "localhost", => host: "xanadu-db",

• ./web/.env.production

  VUE_APP_PRODURL = "你自己的域名/admin/#/login"

• ./web/src/utils/request.ts

  baseURL: '/api' =>你自己的域名:3000/api

عامل الإرساء لا يستخدم إصدار go

7. تعليمات تكميلية

نظرًا لأن هذا النظام قام بتحسين موارد تحميل CDN، فيجب عليك الاتصال بشبكة سريعة ومستقرة نسبيًا لتشغيل هذا النظام، وإلا ستظهر بعض الأخطاء على صفحة النظام!

تحديث 2022.11.19

تأتي بعض مراجع الموارد من cdn.jsdelivr.net. قد يكون الوصول حاليًا (2022.11.19) بطيئًا بعض الشيء. إذا كنت مهتمًا، يمكنك تعديل الرابط المرجعي بنفسك.

تحديث 2023.03.15

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

2. يرجى التحقق بدقة من إصدار العقدة لديك. نظرًا للمشكلات التي تم اكتشافها، يوصى باستخدام الإصدار الأكبر من العقدة 14 في بيئة Windows، بالإضافة إلى ذلك، يوفر ملف المجموعة لمجموعة QQ حزمة مضغوطة من الحزم التابعة، والتي يمكن استخدامها أيضًا كـ محاولة؛ أنظمة ماك 14 و16 كلاهما على ما يرام (يعملان على APPLE أعلى من M1).

3. إذا تم الإبلاغ عن خطأ في اتصال قاعدة البيانات، فيرجى التحقق أولاً مما إذا كان تكوين dbinfo.js في دليل التكوين ضمن الخادم (عقدة الواجهة الخلفية) وتكوين قاعدة البيانات الخاصة بك صحيحين.

4. قبل تشغيل المشروع، يرجى التأكد من تثبيت npm لتثبيت التبعيات ذات الصلة، والانتقال إلى نهاية pcweb ونهاية الإدارة والواجهة الخلفية لإلقاء نظرة على ملفات package.json الخاصة بها، وإلقاء نظرة على قسم البرامج النصية ، والتأكد من ذلك تم تحديد الأمر الذي تريد تشغيله. لم يتم تحديد أمر dev. إذا كنت تريد تنفيذ npm run dev ، فسيتم الإبلاغ عن خطأ بالتأكيد، وتعني رسالة الخطأ الأولى أن dev ليس موجودًا في البرامج النصية على أي حال، وسترى الكلمتين الرئيسيتين package.json والبرامج النصية تظهران يجب أن يشير السطر الأول في تقرير الخطأ إلى أنه تم تنفيذ أمر غير محدد.

5. للحصول على البرنامج النصي لقاعدة البيانات (initial_data.sql)، يرجى الرجوع إلى مجموعة QQ: 434063310 (مالك هذه المجموعة ليس المؤلف الأصلي، ولكنه يحتفظ بها طوعًا).

6. توصي Node باستخدام أداة إدارة إصدار nvm. يمكن لمستخدمي Windows استخدام .exe مباشرة للتثبيت دون قلق. ويمكن لمستخدمي Mac استخدام Brew للتثبيت.

brew install nvm

بعد تثبيت nvm، يمكنك استخدامه لتبديل إصدارات العقدة. nvm install xxx هو أمر التثبيت. تذكر استخدام nvm use xxx للتبديل إلى الإصدار الذي تريد استخدامه في كل مرة تقوم فيها بالتبديل.

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

8. فيما يتعلق باستخدام الوكيل، يرجى التأكد من تكوين الوكيل العكسي في nginx في بيئة الإنتاج.

9. لا يوجد حاليًا حل تغليف مناسب للعقدة الخلفية، بشكل عام، يستخدم الخادم PM2 مباشرة لبدء خدمة العقدة. يرجى تثبيت PM2 على الخادم واستخدام:

npm i pm2 -g

إذا كنت بحاجة حقًا إلى تعبئتها، فيرجى مراجعة المقالة الموجودة على Zhihu، جودة Baidu ليست جيدة. لكن مفهوم التغليف هنا يختلف عن مفهوم Java. حتى إذا كنت تستخدم حزمة الويب للتغليف، فإن الكود الخاص بك لا يزال JS بدلاً من تحويله إلى رمز ثانوي بواسطة المترجم مثل Java a إن وقت تشغيل JavaScript ليس لغة جديدة، بل إن نواة V8 المكتوبة بلغة C++ توفر واجهات برمجة التطبيقات الخاصة بالعقدة. واللغة الحقيقية المسؤولة عن التفاعل مع النظام هي لغة C++.

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

11. بالنسبة لمشكلات مسار الصورة، يرجى محاولة استخدام خدمة CDN الخاصة بك أو وضع الموارد على الخادم الخاص بك لاستبدال مسار الصورة الموجود بالفعل في قاعدة البيانات، ويمكنك استخدام عبارة SQL التالية:

 UPDATE [tablename] SET [fieldname] = REPLACE([fieldname], ' locolhost:3000 ' , ' [yourHOST] ' )

لا تتطلب موارد الصور وكيل nginx العكسي، يمكنك الرجوع إلى التكوين التالي:

 location ~ .*.(gif|jpg|jpeg|png|bmp|swf|webp|jfif)$
    {
        #图片在server/static里，改写root路径就可以了！
        root /www/wwwroot/zero/company/server/static;
        expires      30d ;
        error_log /dev/null;
        access_log /dev/null;
    }

12. عندما تواجه رسالة خطأ، لا تنزعج إذا رأيتها باللغة الإنجليزية، وانظر إلى الجملة الأولى والأخيرة. على سبيل المثال، إذا كان هناك "مفتاح خارجي" في خطأ الواجهة الخلفية، فيجب أن تكون هناك مشكلة في المفتاح الخارجي، يرجى التحقق من تعريف النموذج أو تعريف قاعدة البيانات أو البيانات. الواجهة الأمامية غير محددة. ترتبط هذه المشكلة في الغالب بالاستخدام غير الصحيح لـ cdn. قم بالتعليق على vue.config.js (vue3). هناك تعليمات بالفعل. إذا كان هناك الكثير من الأخطاء باللغة الإنجليزية، فلا تقرأها، فليس من الصعب فتح Youdao (يوصى باستخدام Google أكثر) وترجمتها.

13. يوصى بطرح أسئلة محددة في المجموعة إذا كنت تريد أن تسأل عن كيفية تثبيت nginx، فمن المستحسن أن تقوم بزيارة google أو bing.com أولاً (إذا كنت منزعجًا جدًا من nginx ولا تريد أن تهتم به، يمكنك أيضًا استخدام نشر Pagoda Fool، ولكن لا يزال يُنصح بإلقاء نظرة على nginx بعد التكوين وتعلم كيفية التعلم). السبب وراء عدم توصية Baidu بذلك هو أن معظم المحتوى الذي يتم استرداده هو CSDN، وجودة محتواه متفاوتة، وهو أمر غير جيد للمبتدئين. قد لا تكون جميع الأشياء المنشورة على المدونة صحيحة، إذا كنت مبتدئًا، فمن الأفضل التحلي بالصبر وقراءة الوثائق. إذا لم تتمكن من تحمل ذلك، فإن المحطة B هي أيضًا مكان جيد للتعلم. لا تزال الأشياء المتضمنة في هذا المشروع بسيطة للغاية، ويمكن للوثائق وBilibili الإجابة على معظم أسئلتك. ربما عندما يتعلق الأمر بهذا، يشعر بعض الناس أننا لا نريد أن يطرح الناس الأسئلة. ولكن إذا كان سؤالك كبيرًا جدًا ولا يمكنك حتى اجتياز مقدمة التثبيت، فلن يرغب معظم الأشخاص في الإجابة عليه، لكنهم لا يعرفون حقًا من أي زاوية يجب عليهم الإجابة عليك، فهناك الكثير من الأشياء التي يجب شرحها. لذلك من الأفضل تجاهلها.

14. إذا كنت بحاجة إلى إضافة وظائف جديدة، فمن المستحسن قراءة الكود أولاً، فهو في الواقع ليس صعبًا، فأنت لست على دراية باللغة الجديدة وقد بدأت تشعر بالألم. لا يحتوي التصميم الوظيفي على ميزات خاصة، ومن المستحيل نسخ هذا الجزء من الكود، بل يمكن أن يكون من إبداعك الأصلي فقط. إذا لم تفهم جزء الكود، يمكنك نشر صورة لطرح الأسئلة ( تأكد من نشر صورة ). إذا لم تنظر إلى الكود لفترة من الوقت، فسوف تنسى نشر الصورة لطرح الأسئلة يمكن أن يضمن إمكانية الإجابة على ارتباكك في الوقت المناسب.

آمل ألا يتمكن الجميع من معرفة كيفية استخدام هذا المشروع من الوثائق فحسب، بل يمكنهم أيضًا اكتساب المهارات ذات الصلة حتى يتمكنوا من إحراز تقدم في الواجهة الأمامية. بعد رؤية هذا، لماذا لا تعطيني نجمة؟ اترك نجمك لعاهرة أخرى (كلب).

7. الأخير والأخير

تذكر أن تعطي نجمة ღ(´･ᴗ･`)~ مجموعة جديدة: 434063310. (الرد في الوقت المناسب غير مضمون)

8. وصف التحديث الأخير لـ Zerotower69

1. الهدف الأصلي للمشروع هو السماح للجميع بإجراء مقارنة بناء جملة لإصدار vue3، بحيث تتوافق العديد من الوظائف مع فرع vue2. نظرًا لأن الأخطاء أمر لا مفر منه في التطوير، يرجى الرجوع إلى فرع vue2 أو نشر تعديلات الإصدار إذا لزم الأمر. 2. أنا لست مسؤولاً عن تجربة أي شخص آخر، إذا كان لديك أي أخطاء، فنحن نرحب بطرح الأسئلة عليك، لكنني لست مدرسًا. قد يكون المعلم الذي تحتاجه هو:

• البرنامج التعليمي للمبتدئين
• بنج
• bilibili
• يأمل vue3 أن تقرأ هذا المستند بالتفصيل، وأن ترجع إلى موارد تعليمية عالية الجودة، وأن تقرأ عددًا أقل من csdn عند البدء!