vue nodejs elementUI mysql express demo

vue-nodejs-elementUI-mysql-express-demo

تعلم كيفية استخدام مشاريع Vue+nodejs للواجهة الأمامية والخلفية، بما في ذلك عمليات الإدخال الأساسية. بما في ذلك عملية التنفيذ منذ إنشاء المشروع وحتى النشر النهائي وملخص لبعض المشاكل التي تمت مواجهتها أثناء العملية.

عنوان معاينة المشروع: عنوان المعاينة--aixiaodou.cn

عنوان التعليق والمناقشة: المدونة الشخصية-- https://blog.csdn.net/qq_32442967/article/details/103459148

عنوان قاعدة البيانات: Express-demo/doc/demo2.sql

قاعدة بيانات MySQL

قاعدة البيانات هي التجريبي 2

إنشاء قاعدة بيانات Demo2 > تشغيل عبارة SQL

قم بتعديل تكوين اتصال قاعدة البيانات model/connDb.js في مشروع العرض التوضيحي السريع

العرض التوضيحي السريع للويب: مشروع الويب الأمامي

 # 安装依赖
npm install

# 运行项目
npm run dev

العرض التوضيحي السريع: مشروع Nodejs الخلفي

 # 安装依赖
npm install

# 运行项目
npm start

---

هذا المشروع عبارة عن مشروع للمبتدئين، يستخدم وضع فصل النهاية الأمامي (vue) والخلفي (nodejs).

التقنيات المستخدمة بشكل رئيسي:

• الواجهة الأمامية: vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
• الواجهة الخلفية:nodejs+express+jsonwebtoken
• قاعدة البيانات: ماي ​​اس كيو ال
• بيئة النشر: nginx
• خادم النشر: لينكس Centos7

مقدمة إلى الوظائف الحالية:

1. وحدة تنزيل أداة ToolsDown: الاستعلام عن القائمة من قاعدة البيانات وعرضها حسب الفئة
2. تسجيل الدخول، تسجيل الدخول، التسجيل، وحدة تسجيل الخروج: يمكن معاينة الصفحة الرئيسية وصفحة تنزيل الأداة دون تسجيل الدخول، وستكون صفحة قائمة المستخدمين مرئية بعد تسجيل الدخول. احفظ رمز الجلسة في ملف تعريف الارتباط ومعرف المستخدم بعد تسجيل الدخول في التخزين المحلي. اعتمادًا على ما إذا كنت قد قمت بتسجيل الدخول أم لا، قم بعرض معلومات تسجيل الدخول أو الصورة الرمزية في الزاوية اليمنى العليا.
3. وحدة قائمة المستخدمين userManage: وظائف الترحيل والبحث الغامض وتحرير المستخدم وحذفه
4. واجهة رابط الصديق friends_link: ضع روابط الأصدقاء وحفظ المعلومات في قاعدة البيانات
5. إحصائيات عدد تنزيلات البرامج
6. وظائف التعديل والحذف للمستخدم

---

V 1.0.2 تنزيل الإحصائيات/التحقق من تسجيل الدخول (البنود 5-6)

1. تحسين التحقق من الرمز المميز
2. إحصائيات عدد تنزيلات البرامج
3. وظائف التعديل والحذف للمستخدم

V 1.0.1 تنفيذ الوظائف الأساسية (البنود 1-4) - تسجيل بعض المشكلات التي تمت مواجهتها بشكل أساسي

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

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

نهاية الطريق

1. يتصل Nodejs بقاعدة بيانات MySQL إذا تم استخدام تجمع اتصال، فيجب تحرير الاتصال بعد الاستخدام، وإلا فسيتم تجاوز الحد الأقصى لعدد الاتصالات

نشر

1. بعد نشر nginx لمشروع vue، لن تكون هناك مشكلة في الوصول العادي، ولكن ستظهر مشكلة 404 عند التحديث.
2. يتم تشغيل Nodejs بشكل دائم في Linux باستخدام الرابط المرجعي الدائم

---

V 1.0.0 إنشاء مشاريع الواجهة الأمامية والخلفية

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

1. استخدم vue-cli+ webpack لإنشاء مشاريع vue
2. تكوين جهاز التوجيه، المتجر، الأدوات، axios، elementUI، رقم المنفذ...

نهاية الطريق

1. استخدم Express لإنشاء روابط مرجعية لمشروع Nodejs
2. قم بتثبيت حزمة تبعية jsonwebtoken، وقم بإنشاء الرمز المميز، وأعد الرابط المرجعي للواجهة الأمامية بعد تسجيل الدخول بنجاح.
3. تثبيت حزمة تبعية قاعدة بيانات MySQL

حل مشكلة عبر المجال لمشاريع فصل الواجهة الأمامية والخلفية (إعداد رؤوس الطلب) الرابط المرجعي

• الواجهة الأمامية: اعتراض الطلب في axios، وتعيين sessionToken، واستخدامه كتحقق خلفي لتحديد ما إذا كان خادمًا مسموحًا به
• الواجهة الخلفية: قم بتعيين رؤوس الطلب في app.js - أضف app.all()
• الواجهة الخلفية: نظرًا لرمز جلسة رأس الطلب المخصص، بالنسبة للطلبات المعقدة عبر النطاق، سيكون هناك طلب مسبق للخيارات، وتتم معالجة الطلبات ذات خيارات الطريقة بسرعة وإرجاع 200

قاعدة البيانات

1. إنشاء قاعدة بيانات > جدول [user,tools_down,friend_link]
2. محاكاة بيانات الاختبار