مقدمة
مستوى JavaScript الخاص بي هو متوسط. حسنًا ، إنه متوسط تمامًا. لذلك ، من الصعب حقًا على أحدث تقنية إطار أمامي ، لكن الواقع يجعلني أواجه الأمر. لذلك ، التعلم هو السبيل الوحيد للخروج.
لقد قارنت N إطارات الواجهة الأمامية عموديًا وأخيراً اخترت Vue. لماذا؟ الأسباب كما يلي:
1.Agular غير معروف ، 1.x لديه منحنى تعليمي عال ويبدو أنه تم التخلي عنه ، في حين أن 2 لم يتم إطلاقها رسميًا.
2. رد الفعل قوي جدا ، ولكن ليس لديه اتصال.
3. Vue بسيط ، وبدء البدء ، يكون أكثر ملاءمة لتفكيري ومستولي.
4. Vue لديه وثائق صينية ، وأبدو أكثر راحة.
منذ أن قررت أن أتعلم Vue ، فإن أفضل طريقة للتعلم هي التدريب. رأيت بطريق الخطأ أن هناك واجهة برمجة تطبيقات عامة لمنتدى Cnodejs.org ، وهو مريح للغاية. لذلك قررت استخدام واجهة برمجة التطبيقات العامة هذه لكتابة عرض تجريبي.
مقدمة واجهة
هذه هي الواجهة التي توفرها علنًا بواسطة Cnodejs.org. بالطبع ، ليس فقط بالنسبة لنا لاستخدامها في الواجهة الأمامية. يمكن استخدامه في مختلف البرامج. عنوان الواجهة هو http://cnodejs.org/api. من خلال هذه الصفحة ، يتم تقديم المحتوى ذي الصلة بالتفصيل.
تكتمل الواجهات التي توفرها ، مما يعني أنه يمكننا إنشاء منتدى مثلها من خلال هذه الواجهات.
خطة المشروع
1. قم بعمل صفحة قائمة يمكنها قراءة محتوى قائمة CNODEJS.
2. قم بعمل صفحة تفاصيل ، انقر فوق الرابط الموجود في صفحة القائمة ، وأدخل صفحة التفاصيل.
3. استخدم تقنية SSI لتحقيق إعادة استخدام رمز HTML. ابحث عن SSI+SHTML للتعرف على المحتوى ذي الصلة.
4. رمز CSS مسبق باستخدام SASS.
دليل الملف
├index.shtml صفحة قائمة التقديم
├content.shtml صفحة تفاصيل التقديم
├inc ملف مجزأ
│ ├bar.html رمز الشريط الجانبي
│ ├ footer.html جزء حقوق الطبع والنشر من الكود
│ ├head.html منطقة رأس المكالمات JS ورموز أخرى
│ └Header.html الصفحة شعار رأس ورمز التنقل
file file Resource Resource
├Image
├JS
│ ├common دليل الرمز الخاص بي
│ │ ├common.js التنفيذ العام JS
│ └ method.js طريقة مخصصة JS
│ ├jquery دليل رمز مصدر jQuery
│ plugins أدلة مكونات إضافية أخرى
│ └ └laypage page paging pagin pagin
│ └ Vue Vue Directory
└style
├style.Scss Sass Source File
├style.css ملف CSS المترجم
├base
└SCSS
قم بتنزيل ملف المصدر https://github.com/fengcms/vue-cnodejsorgtest
ابدأ في كتابة رمز
أولاً ، اتبع تصميم دليل الملف أعلاه وابدأ في كتابة الملفات فيه. الدقة هي دليل الموارد. يمكنك إلقاء نظرة عليها أو معرفة ما هو عليه.
في الواقع ، النقطة الرئيسية هي ملفات index.shtml و content.shtml.
قم بإعداد ملف HTML للصفحة الرئيسية
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8" <title> العنوان </title> <link rel = "stylesheet" href = "res/style/style.css"> </head> <Header> <H1> fungleo </a> </h1> <lav> <ul> <li> قائمة الملاحة </li> </ul> </vic> </header> <section> <section> <ul> <li> <i> <img src = "#avatar url url"> <span> اسم المستخدم </i span> </i> </time arim العنوان </a> </li></ul> <viv> </viv> </section> <side> <h3> تعليمات في هذه الصفحة </h3> ... </side> </s.
كما ذكر أعلاه ، إنها الصفحة الثابتة التي كتبتها أولاً. بالتزامن مع CSS الخاص بي ، يظهر التأثير في الشكل أدناه:
يرجى الحصول على الرمز الكامل من جيثب
قدم ملفات JS مثل Vue & jQuery
<script src = "res/js/jquery/jquery -2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <script src = "res/js/common.js"> </script
احصل على بيانات من الواجهة
بادئ ذي بدء ، بغض النظر عن ماذا ، يتعين علينا الحصول على البيانات من الواجهة قبل أن نتمكن من الاستمرار في القيام بذلك. نستخدم jQuery لاستخدام طريقة Ajax لاستمرار البيانات.
الرمز التالي:
$ (function () {$ .ajax ({type: 'get' ، url: "http://cnodejs.org/api/v1/topics" ، datatype: 'json' ، success: function (data) {if (data.success) {console.log (data) {allert (json) دالة (البيانات) {Alert (json.stringify (data)) ؛الرمز كما هو مذكور أعلاه. دعونا نلقي نظرة على وحدة التحكم في المتصفح وشاشة الشاشة كما يلي:
كما هو موضح في الشكل أعلاه ، حصلنا على البيانات بنجاح.
تحليل البيانات
كما هو موضح في الشكل أعلاه ، تحتوي البيانات على المحتوى التالي
1. المؤلف
1. عنوان URL المؤلف الرمزي
2. اسم المستخدم
2. معرف المؤلف
3. بعد المحتوى
4
5. هل هو الجوهر
6
7. آخر وقت الرد
8. عدد الردود
9.Atribter
10
11. سواء كان ذلك
12. تصفح الإحصاءات
واجهة البيانات على النحو الوارد أعلاه. بالطبع ، إذا كنت منتدى وظيفي كامل ، فإن هذه البيانات مفيدة. في مشروعي ، لا يستخدم الكثير منهم. دعونا نلقي نظرة على ما أحتاجه.
<li> <i> <img src = "#avatar url"> <span> اسم المستخدم </span> </i> <time> تم نشره منذ 5 أيام </time>
كما هو موضح في الكود أعلاه ، يتضمن ما نحتاج إلى حلقة
1. عنوان URL المؤلف الرمزي
2. اسم المستخدم
3
4
5
لا توجد مشكلة ، تتوفر جميع المحتوى والواجهات التي نحتاجها.
تغليف رمز ajax
على الرغم من أن رمز Ajax ليس طويلًا ، إلا أنني ما زلت أشعر بعدم الارتياح. لذلك ، أستخدم الكود التالي لتغليفه
. التنبيه (json.stringify (البيانات)) ؛
كما ذكر أعلاه ، عند الحاجة ، نحتاج فقط إلى استخدام وظيفة getJson (url ، func).
الرمز المغطى المرجعي
$ (function () {var url = "http://cnodejs.org/api/v1/topics" ؛ getjson (url ، function (data) {console.log (data) ؛}) ؛}) ؛بعد تعديله مثل هذا ، دعونا نلقي نظرة ونرى ما إذا كان بإمكاننا طباعة البيانات التي نحتاجها؟ كما هو مبين في الشكل أدناه:
بدون أي مشاكل ، ما زلنا نحصل على البيانات. نحن نغلف وظيفة رد الاتصال وتغييرها إلى الكود التالي
$ (function () {var url = "http://cnodejs.org/api/v1/topicsحسنًا ، إذا لم يكن هناك خطأ ، يمكن بالتأكيد طباعة بيانات الواجهة. بعد هذه العملية ، سيكون رمزنا موجزًا للغاية وزيادة القراءة بشكل كبير. ما نحتاج إلى القيام به بعد ذلك هو القيام بذلك في وظيفة pushdom (البيانات).
رمز تقديم VUE
أولاً ، نحتاج إلى استخدام طريقة VUE لكتابة البيانات التي نريد إدراجها في الصفحة.
جزء رمز HTML
<li v-for = "info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <time> {{info.create_at}}} }} "> {{info.title}} </a> </li> 1نقاط المعرفة VUE
بيانات حلقات http://vuejs.org.cn/api/#v-for
جزء رمز JS
الدالة pushdom (البيانات) {var vm = new vue ({el: '.list' ، البيانات: Data}) ؛}لنلقي نظرة على التأثير:
حسنًا ، متحمس جدًا. في بضعة أسطر من التعليمات البرمجية ، قدمنا القائمة بنجاح مع VUE.
ملخص
1.Ajax هو مفتاح الحصول على البيانات
2. بمجرد أن تفهم القليل من محتوى Vue ، يمكنك البدء.
3. عند إنشاء مشروع ، يجب أن تكون الكود والملفات واضحة وواضحة.
زائدة
موقع VUE الرسمي
cnodejs تفاصيل API
قم بتنزيل الكود المصدري لهذه السلسلة من البرامج التعليمية
الفصل الأول من برنامج Vuejs العملي ، بناء الأساسيات وتقديم القائمة
Vuejs التعليمي العملي الفصل 2 ، إصلاح الأخطاء وتجميل الوقت
Vuejs البرنامج التعليمي الفصل 3 ، باستخدام المكون الإضافي للتخطيط لتحقيق ترقيم الصفحات
هذا المقال كتب في الأصل من قبل Fungleo
عنوان الإصدار الأول: http://blog.csdn.net/fungleo/article/details/51649074
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.