VPC

VPC

التحكم في إذن Vue

وصف المشروع

تم تطوير نظام خلفي لإدارة حقوق المستخدم الأمامي لتسجيل الدخول الموحد بناءً على vue

عنوان المشروع

• ديف الرياح

يبني

 # install node+git please

# install dependencies
$ npm install / cnpm install

# serve with hot reload at localhost:8060
$ npm run dev

# build for production with minification
$ npm run build

تحليل المشروع

الفكرة الأساسية

تصور

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

هيكل عظمي

بعد تهيئة vue-cli للمشروع، يتكون من مكونات هيكلية معيارية: تسجيل الدخول + الصفحة الرئيسية، الشريط الجانبي، الصفحة الرئيسية، ويمكن وضع محتوى الأعمال في محتوى Hoem.

تسجيل الدخول

VPC مناسب لتسجيل الدخول الموحد لمشاريع متعددة، ويتم إرجاع الرمز المميز بعد تسجيل الدخول الناجح في صفحة تسجيل الدخول في الخطوة الثانية للحصول على بيانات المستخدم، مع الأخذ في الاعتبار مشكلة التحديث، ويجب وضع الحصول على بيانات المستخدم في المكون الجذر App.vue نظرًا لأن Vue عبارة عن فكرة تدفق أحادية الاتجاه، فإن تسجيل الدخول، باعتباره مكونًا فرعيًا للتطبيق، يحتاج إلى إرسال $ إلى التطبيق بعد تسجيل الدخول بنجاح وتنفيذ رد الاتصال للحصول على بيانات المستخدم.

واجهة وهمية

كما هو مذكور أعلاه، يستخدم هذا المشروع بيانات وهمية سهلة الاستخدام. تستخدم لوائح البيانات الخلفية بروتوكول RestFul للسخرية من عدة مستخدمين بهويات مختلفة من خلال flyio، تذكر أن هذه هي المرة الأولى بعد إضافته إلى صفحة تسجيل الدخول، تحتاج إلى إضافة رمز مميز لكل استدعاء واجهة، وهو ما يمكن القيام به في اعتراض flyio.

عمليات بيانات المستخدم

قم بإرجاع مصفوفة الأذونات على صفحة التطبيق من خلال مسار كامل متكرر. تحصل جميع عمليات التوجيه المحلية على المسار الفعال للمستخدم وحفظه في Vuex.

عرض الصفحة

في الشريط الجانبي للحلقة، يتم عرض المسار الفعال المخزن في vuex ويتم عرض المكون الرئيسي لعرض المحتوى المحدد للمسار.

تكوين التصميم

بناء

 │
├─build
│      build.js
│      check-versions.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│
├─src
│  │  404.vue
│  │  App.vue                                // 根组件
│  │  bus.js                                 // EventBus 适用于兄弟组件 通信
│  │  dave.js                                // canvas 效果
│  │  globar.js                              // webpack 全局注册ui组件
│  │  main.js                                // 项目入口
│  │  tools.js                               // 插件
│  │
│  ├─api
│  │      axios.js
│  │      common.js                          // 基本接口
│  │      request.js                         // flyio 拦截器
│  │      weather.js                         // 天气接口
│  │
│  ├─assets
│  │  │  logo.png
│  │  │
│  │  └─theme-dave                            // 自定义主题
│  │
│  ├─components                               // 主要组件
│  │  ├─common
│  │  │      Header.vue
│  │  │      Home.vue
│  │  │      Login.vue
│  │  │      SideBar.vue
│  │  │
│  │  ├─render                                 // render 渲染组件 适用多条件渲染
│  │  │      btn-render.vue
│  │  │
│  │  ├─ui
│  │  │      baseButton.vue                    // 基于element-ui btn ui组件 可层叠复用
│  │  │
│  │  └─view
│  │          403.vue
│  │          404.vue
│  │          allocation.vue
│  │          render.vue
│  │          watch.vue
│  │
│  ├─router                                    // 本地所有路由
│  │      fullPath.js
│  │      index.js                             // 基本路由
│  │
│  └─store                                     // 状态管理 全局变量
│          actions.js
│          getters.js
│          index.js
│          mutations.js
│          state.js
│
│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js                                 // 基于airbnb-base 个人配置的代码规则
│  .gitignore
│  .postcssrc.js
│  index.html
│  package-lock.json
│  package.json
│  README.md

وحدة المشروع

تسجيل الدخول

• المشروع مناسب لتسجيل الدخول الموحد مع أنظمة خلفية متعددة. واجهة تسجيل دخول واحدة هي تسجيل دخول عادي بكلمة مرور. يتم إرجاع الرمز المميز وتخزينه في التفويض.
• في App.vue، وهو عرض جهاز التوجيه للمكون الجذر، اقبل المكون الفرعي $emit ثم قم بتنفيذ طريقة تسجيل الدخول لاستدعاء الواجهة للحصول على بيانات الإذن بشكل موحد وإكمالها في التطبيق.

 < router-view @login =" login " @clearData =" clearData " > </ router-view > 

وظيفة واضحة موحدة

يلتزم الكود بالغرض المتمثل في مدخل واحد ومخرج واحد.

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

 clearData ( ) {
 if ( this . $route . path === '/login' ) {
     delete request . config . headers [ 'Authorization' ] ;
     localStorage . removeItem ( 'token' ) ;
     this . $store . dispatch ( 'CLEAR_STORE' ) ;
 }       
} 

الرمز غير صالح

ستعود استجابة Flyio العالمية للاعتراض إلى صفحة تسجيل الدخول طالما أن المستخدم غير الصالح يصل إلى الصفحة ويستدعي رمز حالة فشل الواجهة ويعيد 401.

 if ( err . response . status === 401 ) {
    window . location . href = '/#/login' ;
  } 

flyio

• Flyio رائع ويمكن استخدامه في بيئات مختلفة لعقدة المتصفح وتطبيقات الهاتف المحمول، في webpack.base.conf.js، يكون تكوين الاستيراد كما يلي.
• يستخدم Flyio وحدة الحزمة wx في البرنامج المصغر للحصول على التفاصيل، يرجى مراجعة الموقع الرسمي أو mpvue-netBar.

alias: {
  'vue$' : 'vue/dist/vue.esm.js' ,
  '@' : resolve ( 'src' ) ,
  'flyio' : 'flyio/dist/npm/fly'
    }
    

• لا توجد طريقة jsonp في اختبار flyio الشخصي حاليًا، الحل عبر المجال هو تعيين Access-Control-Allow-Origin: '*' في الرأس على الواجهة الخلفية.
• يستخدم هذا المشروع ajax jsonp (هل عدنا إلى عصر كتابة jquery؟ jquery قوي حقًا !!)

تسجيل المكونات

قطعة أثرية من حزمة الويب تتطلب سياقًا

• استخدم require.context لقراءة المكونات ضمن المسار المحدد، على سبيل المثال، نحتاج إلى كتابة الكثير من مكونات واجهة المستخدم العامة، ولكن استيرادها في كل مرة أمر مزعج للغاية، لذا استخدمه.
• التأثير هو أن المكون المطلوب الديناميكي التلقائي يتطلب ثلاثة معلمات: ما إذا كان سيتم البحث في دليل الملف المراد البحث فيه عن الدلائل الفرعية والتعبير العادي، وهذا كل شيء.

تحسين التغليف

• يمكن لـ npm run build --report تحليل حجم حزمة التوزيعة لتدمير الملف اللعين تدريجيًا
• قم بتغيير config Index.js productionSourceMap وcssSourceMap إلى false لإيقاف ملف الخريطة اللعين.
• بعد تثبيت npm --save-dev Compression-webpack-plugin، قم بتعيين productionGzip على القيمة true وتمكين وضع Yasuo، وسيؤدي ذلك أيضًا إلى تقليل الحجم.
• المكونات غير المتزامنة، ولكن في الحقيقة، لا يمكن للمكونات غير المتزامنة تحسين حجم التوزيع كثيرًا.
• الموارد المحملة خارجيًا لـ cdn webpack.base.conf.js بالإضافة إلى العناصر الخارجية (على الرغم من أنني أخطئ في كتابتها في كل مرة)

 externals: {
    vue : 'Vue' ,
    'element-ui' : 'ElementUI' ,
    nprogress : 'NProgress' ,
    jquery : 'window.$'
  }
  

• ثم قم بتحميل مورد cdn في الفهرس. تذكر أنه لا يمكن كتابة Vue.use في كود جميع السيارات الخارجية. وإلا فإن تحميل cdn يعد هراء لأن Vue.use هو المكون الإضافي الذي كتبه Vue وسيتم تثبيته على Vue. النموذج الأولي.

النشر التلقائي

لمزيد من التفاصيل، يرجى زيارة الموقع الرسمي ترافيس CI.

• يجب تعديل تكوين حزمة الويب في config Index.js المدمج في VPC إلى الأصولPublicPath: '' بدلاً من الدليل الجذر '/' وإلا فإن js سيكون 404
• تختلف نتائج تكوين travis-CI المحددة للحصول على التفاصيل، يرجى مراجعة الموقع الرسمي أو اتباع تكوين VPC .travis.yml.

التحليل الفني

تحليل استخدام اتصالات مكون Vue

1.Vuex: وضع إدارة الحالة، وإدارة التخزين المركزية لحالة جميع مكونات التطبيق، والقواعد المقابلة لضمان تغير الحالة بطريقة يمكن التنبؤ بها. 2.EventBus: يستخدم اتصال المكونات غير الأصلية والتابعة مراكز الأحداث لـ السماح للمكونات بإعادة إنتاج حالة الاتصال المجاني: ما الذي يجب علي فعله، على سبيل المثال، عندما أقوم بتغيير قيمة سمة متغيرة في مكون الرأس في هذا المشروع وأطلب من المكونات الجانبية والرئيسية الاستجابة للتغيير؟ 3. التحليل: Vuex، كما يوحي الاسم، يدير المتغيرات العامة. هنا الإدارة، وليست للقراءة فقط، وهي قابلة للقراءة والتغيير والاكتشاف. أولاً، دعنا نقدم سمتين لـ ECMAScript : سمات البيانات وسمات الوصول. السابقة: [Configurable]، [[Enumerable]، [Writable]، [Value] قيمة قابلة للتكوين، قابلة للتعداد، وقابلة للتجاوز. عادةً ما يقوم الكائن الحرفي بإنشاء كائن var person = { name: "dave" } أي أن ما تتغير سمات البيانات وتقرأه هو فقط قيمة الكائن، وخصائص الوصول الأخيرة [Configurable]]، [[Enumerable]]، [[Get]]، [[Set]، في JavaScript نستخدم Object .defineProperty لتحديد الوصول للحصول على هذا الشخص في Vue، تتمثل سمة الجهاز في استدعاء طريقة get لتعيينها، وهي الطريقة المحددة. لدى Vue شجرة بيانات خاصة بها، ومن خلال سمة الوصول يتم تنفيذ مراقبة تتبع التبعية بالإضافة إلى Vuex EventBus، لا تحتوي Vue.prototype.xx وthis.$root ومتغيرات مكون عملية التخزين المحلي على وظيفة المراقبة.

4. الملخص: Vue.prototype.xx، يمكن قراءة وتغيير هذا $root فقط. يمكنك التعديل والقراءة على نموذج Vue الأولي ولكن لا يمكن لـ Vue.prototype.xx كتابة متغيرات عامة للمعايرة والتحقق بشكل افتراضي. تعمل القيم وما إلى ذلك على التخزين المحلي أيضًا. يمكنه قراءة الإعدادات. يقول بعض الأشخاص أنه يمكنك استخدام addEventListener لمراقبة التخزين، لكنك لا تتوقع القيام بذلك في طبقة Vue. الرمز المميز لهذا المشروع هو استخدام التخزين المحلي vuex. نحتاج إلى أن تكون المتغيرات قابلة للتنبؤ بها ثم نقوم بتنفيذ رد الاتصال. إذا كنت تعتقد أنك تواجه مشكلة، فما عليك سوى استخدام المكونات الشقيقة لـ EventBus للتواصل، وسيقوم $emit بتشغيل رد الاتصال $on الاستماع.

سيجارة بعد ذلك

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