كيفية بناء التطبيق CRUD بسيط مع vuejs و codefii

في هذا البرنامج التعليمي ، سنبني تطبيقًا بسيطًا للركام باستخدام vuejs كإطار عمل من جانب العميل و codefii باسم RESTful Api.

قبل أن نبدأ ، تحتاج إلى تنزيل vuejs HttpRequest Library عن طريق النقر على هذا الرابط https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js. والشيء التالي هو تنزيل vuejs من خلال البحث على https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js

لنبدأ السحر المرئي :)

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

وإلا ، فلنبدأ بفتح جهازنا الطرفية (في حالتي باستخدام linnux "fedora") لذا لمستخدمي windows ، يرجى تشغيل cmd ونوع

الملحن إنشاء المشروع - تفضيل distef codefii / codefii myApp

بمجرد الانتهاء من ذلك ، انتقل إلى Codefii / Controllers وقم بإنشاء ملف باسم ApiController.php واكتب التعليمة البرمجية التالية.

<؟ PHP
مساحة الاسم Codefii \ Controllers؛
استخدام Network \ Controller \ Controller ؛
استخدام الشبكة \ طلب \ طلب ؛
استخدام Codefii \ Models \ ApiModel؛
الطبقة ApiController يمتد تحكم {
الوظيفة العامة api () {
 $ res = array ('error' => false) ؛
 $ read = 'read' ؛ // متغير عمومي للتحقق من صحة الأساليب العالمية
 إذا (طلب الحصول :: ( 'العمل')) {
 $ read = Request :: get ('action')؛
 }
 // هذا يقرأ قيمة api التي تحتوي على "قراءة"
 إذا ($ قراءة == 'قراءة') {
 $ المستخدمين = array () ؛
 foreach (ApiModel :: getAllUsers () -> النتائج () كـ $ row) {
 array_push ($ المستخدمين، $ صف).
 }
 $ res [‘users’] = $ users ؛
 echo json_encode ($ res)؛
 }
 / / نفس الوظيفة ولكن قيم مختلفة مثل "إنشاء"
 إذا ($ قراءة == 'خلق') {
 إذا (ApiModel :: addUser (طلب الحصول :: ( 'اسم المستخدم')،
 طلب الحصول على :: ( 'البريد الإلكتروني')، طلب الحصول على :: ( 'الهاتف'))) //
 {
 $ res [‘message '] =" تمت إضافة المستخدم بنجاح "؛
 echo json_encode ($ res)؛
 }آخر{
 $ res [‘message '] =" تعذر إضافة مستخدم "؛
 echo json_encode ($ res)؛
 }
 / / طباعة النص في json جميلة
 }
 إذا ($ قراءة == 'تحديث') {
 إذا (ApiModel :: updateUser (طلب الحصول :: ( 'اسم المستخدم')، طلب الحصول على :: ( 'البريد الإلكتروني')،
 طلب الحصول على :: ( 'الهاتف')، طلب الحصول على :: ( 'الهوية'))) //
 {
 $ res [‘message '] =" تحديث المستخدم "؛
 echo json_encode ($ res)؛
 }آخر{
 $ res [‘message '] =" تعذر تحديث المستخدم "؛
 echo json_encode ($ res)؛
 }
 / / طباعة النص في json جميلة
 }
إذا ($ قراءة == 'حذف') {
 إذا (ApiModel :: deleteUser (طلب الحصول :: ( 'الهوية'))) //
 {
 $ res [‘message '] =" تم حذف المستخدم "؛
 echo json_encode ($ res)؛
 }آخر{
 $ res ['error'] = صواب ؛
 $ res [‘message '] =" تعذر حذف المستخدم "؛
 echo json_encode ($ res)؛
 }
 / / طباعة النص في json جميلة
 }
}
}

مباشرة بعد إنشاء وحدة التحكم ، والشيء التالي هو هيكل النموذج. انتقل إلى Codefii / Models وقم بإنشاء ملف باسم ApiModel.php واكتب التعليمة البرمجية التالية:

<؟ PHP
مساحة الاسم Codefii \ Models؛
استخدام Network \ Model \ Model؛
الطبقة ApiModel يمتد النموذج {
  الوظيفة الثابتة الساكنة العامة (اسم المستخدم ، البريد الإلكتروني ، $ الهاتف) {
    إرجاع الذات :: getDb () -> insertInTo ('المستخدمين' ، صفيف (
      "اسم المستخدم" => $ المستخدم،
      "البريد الإلكتروني" => $ البريد الإلكتروني،
      "الهاتف" => $ الهاتف
    ))؛
  }
  أداة تحديث الوظيفة الثابتة العامة (اسم المستخدم $ ، البريد الإلكتروني $ ، الهاتف $ ، $ id) {
      عائد الذات :: getDb () -> تحديث ('المستخدمين' ، $ id ، صفيف (
        "اسم المستخدم" => $ المستخدم،
        "البريد الإلكتروني" => $ البريد الإلكتروني،
        "الهاتف" => $ الهاتف
      ))؛
  }
  وظيفة ثابتة عامة deleteUser ($ id) {
      إرجاع الذات :: getDb () -> حذف ('المستخدمين' ، صفيف (
        "الهوية"، "=" $ معرف
      ))؛
  }
  الوظيفة الثابتة العامة getAllUsers () {
      return self :: getDb () -> query ("SELECT * FROM users")؛
  }
}

آمل أن كل شيء يسير على ما يرام؟ رائع ، والآن دعنا ننتقل إلى الخطوة التالية من خلال تكوين إعدادات قاعدة البيانات الخاصة بنا. افتح بيئة mysql الخاصة بك ، وقم بإنشاء قاعدة بيانات بأي اسم من اختيارك ، لكن في حالتنا ، سنستخدم "vue" كاسم لقاعدة البيانات.

بعد القيام بذلك ، فإن الخطوة التالية هي تحديد موقع ملف Codefii / Database / Config.php ؛ قم بتعديل الإعدادات التالية على إعدادات الخادم / قاعدة البيانات الخاصة بك ونحن جيدون.

GLOBALS $ ['config'] = صفيف (
  'الخلية' => مجموعة (
    'المضيف' => 'المضيف المحلي،
    'المستخدم' => 'جذور'،
    'كلمة السر' => 'XXXXXX'،
    'قاعدة' => 'النظرية،
    'encoding' => 'utf8' ،
    "المنطقة الزمنية" => "UTC" ،
    'cacheMetadata' => صحيح ،
    'log' => false ،

الآن دعونا نحدد طرقنا من خلال تحرير ملف Routes.php الموجود في Codefii / Routes / وإضافة هذا السطر إليه

$ router-> طرق ( 'ApiController'، [ 'تحكم' => 'ApiController'، 'العمل' => 'المعهد'])؛

الناس ، دعونا أداء السحر المرئي الذي تم ذكره في وقت سابق. إذا لاحظت أننا لم ننشئ أي ملف عرض منذ ذلك لأن مجلد myApp موجود في دليل الخادم الخاص بنا. لنقم بإنشاء مجلد جديد في "المستندات / الدليل" كملف للملفات التالية:

  1. app.js
  2. index.html و
  3. style.css

في ملف app.js ، أضف الكود التالي إليه

var app = vue new ({
  ايل: '# codefii،
  البيانات: {
    showAddModal: خطأ ،
    showEditModal: false ،
    showDeleteModal: false ،
    رسالة خطأ:""،
    نجاح رسالة: ""،
    المستخدمين: []،
    newUser: {اسم المستخدم: "" ، البريد الإلكتروني: "" ، phone: ""}،
    clickedUser: {}
  }،
  شنت: وظيفة () {
    this.getAllUsers ()؛
  }،
طرق:{
    getAllUsers: وظيفة () {
      axios.get ( "HTTP: // المضيف المحلي / اسم التطبيق / ApiController عمل = قراءة")
      . ثم (وظيفة (الاستجابة) {
        إذا (response.data.error) {
          app.errorMessage = response.data.message؛
        }آخر{
          app.users = response.data.users؛
        }
      })؛
    }،
saveUser: وظيفة () {
      var formData = app.toFormData (app.newUser) ؛
      axios.post ( "HTTP: // المضيف المحلي / اسم التطبيق / ApiController عمل = خلق"، formData)
      . ثم (وظيفة (الاستجابة) {
        console.log (الاستجابة).
        app.newUser = {اسم المستخدم: "" ، البريد الإلكتروني: "" ، phone: ""}؛
        إذا (response.data.error) {
          app.errorMessage = response.data.message؛
        }آخر{
          app.successMessage = response.data.message ؛
          app.getAllUsers ()؛
        }
      })؛
    }،
updateUser: وظيفة () {
      var formData = app.toFormData (app.clickedUser) ؛
      axios.post ( "HTTP: // المضيف المحلي / اسم التطبيق / ApiController عمل = التحديث"، formData)
      . ثم (وظيفة (الاستجابة) {
        console.log (الاستجابة).
        app.clickedUser = {}؛
        إذا (response.data.error) {
          app.errorMessage = response.data.message؛
        }آخر{
          app.successMessage = response.data.message ؛
          app.getAllUsers ()؛
        }
      })؛
    }،
    deleteUser: وظيفة () {
      var formData = app.toFormData (app.clickedUser) ؛
      axios.post ( "HTTP: // المضيف المحلي / اسم التطبيق / ApiController عمل = حذف"، formData)
      . ثم (وظيفة (الاستجابة) {
        app.clickedUser = {}؛
        إذا (response.data.error) {
          app.errorMessage = response.data.message؛
        }آخر{
          app.successMessage = response.data.message ؛
          app.getAllUsers ()؛
        }
      })؛
    }،
selectUser (المستخدم) {
      app.clickedUser = المستخدم ؛
    }،
    toFormData: function (obj) {
      var form_data = جديد FormData () ؛
      من أجل (var key in obj) {
        form_data.append (key، obj [key])؛
      }
      إرجاع form_data ؛
    }،
clearMessage: function () {
      app.errorMessage = ""؛
      app.successMessage = ""؛
    }
  }
})؛

الرمز أعلاه هو ما سوف يتفاعل مع تطبيق codefii myApp الموجود في دليل الخادم الخاص بنا.

ثم الشيء التالي هو ملف index.html الذي يحتوي على الكود التالي:



  <رئيس>
    
     استخدام vuejs مع codefii 
    
  
  
      
        

قائمة المستخدمين


        
                 
        

{{errorMessage}}

        

{{successMessage}}

                                  <ال> ID               <ال> اسم المستخدم               <ال> البريد الإلكتروني               <ال> موبايل               <ال> تحرير               <ال> حذف                                                                                                 
ceadesc.org © 2020
{{user.id}}              {{user.username}} ح              {{user.email}}              {{user.phone}}