vue admin webapp

vue-admin-webapp

بعد قراءة مقالة كتبها Nuggets، قمت بإنشاء نظام إدارة الواجهة الخلفية لـ Vue استنادًا إلى العروض التوضيحية التي قدمها أشخاص آخرون.

ناجتس عنوان المقال الأصلي

تتضمن مجموعات التكنولوجيا المشاركة في هذا المشروع vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

عنوان جيثب المشروع هذا vue-admin-webapp

عنوان تشغيل المشروع

مقدمة المشروع

vue-admin-webapp هو نظام إدارة خلفي يعتمد على vuecli و element-ui ، ويستخدم fastmock لمحاكاة البيانات، بما في ذلك المخططات والجداول والأذونات وExcel وما إلى ذلك. ويمكنك إضافة مسارات وفقًا لاحتياجاتك.

ثَبَّتَ

 # 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

بعد بدء التشغيل، سيتم فتح المتصفح http://localhost:8080 تلقائيًا، ويمكنك رؤية تأثير المشروع.

هيكل صفحة المشروع

انتقل إلى صفحة تسجيل الدخول. تتكون الصفحة بشكل أساسي من ثلاثة أجزاء: صفحة عرض الشريط الجانبي للرأس . يمكنك النقر على الشريط الجانبي للانتقال إلى المسار.

التحقق من إذن الدخول

احصل على الرمز المميز من fastmock، وقم بتخزينه في localStorage عند تسجيل الدخول، وقم بتعيين حارس أمامي عالمي، عند الدخول إلى صفحات أخرى، لا يمكنك الدخول إلا عندما يكون هناك رمز مميز، وإلا فسوف ينتقل إلى صفحة تسجيل الدخول

الحرس الأمامي العالمي

 router . beforeEach ( ( to , from , next ) => {
  const isLogin = localStorage . loginToken ? true : false ;
  if ( to . path == "/login" ) {
    next ( ) ;
  } else {
    isLogin ? next ( ) : next ( '/login' )
  }
} ) 

اعتراض الطلب

 axios . interceptors . request . use ( config => {
  // 判断是否有token
  if ( localStorage . loginToken ) {
    config . headers . Authorization = localStorage . loginToken ;
  }
  return config ;
} , err => {
  // 请求错误
  return Promise . reject ( err ) ;
} ) 

اعتراض الاستجابة

 axios . interceptors . response . use ( res => {
  return res ;
} ,
  err => {
    const { status } = err . response ;
    if ( status == 401 ) {
      // 后台定义401为过期
      alert ( "token过期,请重新登录!" )
      // 清楚token
      localStorage . removeItem ( "loginToken" ) ;
      router . push ( "/login" ) ;
    } else {
      alert ( err . response . data )
    }
    return Promise . reject ( err ) ;
  } ) ;

Echart مخطط متعدد

أن تكون بارعًا في استخدام Echart، والمخططات الخطية، والمخططات الدائرية، والمخططات الشريطية، ومخططات البيانات الديناميكية، وما إلى ذلك، مثل الصورة أدناه

اكسل

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

بيانات فاست موك

هنا اقتباس من المقدمة الرسمية

يتيح لك Fastmock محاكاة طلبات ajax عبر الإنترنت بدون برنامج خلفي. يمكنك استخدام Fatmock لتحقيق عرض توضيحي خالص لتأثير الواجهة الأمامية في المراحل الأولى من المشروع، أو يمكنك استخدام Fastmock لتنفيذ محاكاة البيانات أثناء التطوير لتحقيق الواجهة الأمامية. -الفصل بين النهاية والخلفية. قبل استخدام fastmock، قد يستخدم فريقك واحدًا أو أكثر من الحلول التالية لتنفيذ محاكاة البيانات:

• تولد محاكاة البيانات المكتوبة بخط اليد المحلية الكثير من الرموز الوهمية في كود الواجهة الأمامية.
• استخدم أداة can-fix الخاصة بـ mockjs أو canjs لتنفيذ اعتراض ajax وتكوين قواعد json الضرورية محليًا.
• تقوم الواجهة الخلفية بتصنيع البيانات في طبقة وحدة التحكم وإعادتها إلى الواجهة الأمامية.

---

منفذ مشروع Fastmock الخاص بي