ما الفرق بين توجيه الواجهة الأمامية وتوجيه الواجهة الخلفية؟

الفرق بين توجيه الواجهة الأمامية وتوجيه الواجهة الخلفية: 1. يتم تشغيل توجيه الواجهة الأمامية من خلال علامة الارتباط في "جهاز التوجيه التفاعلي"، ويتم تشغيل توجيه الواجهة الخلفية من خلال ajax 2. يتم توجيه الواجهة الأمامية يعتمد على مراقبة أحداث المتصفح، بينما يعتمد التوجيه الخلفي على بروتوكول اتصال http 3. يمكن أن يحقق توجيه الواجهة الأمامية عرضًا جزئيًا، بينما يمكن أن يعيد التوجيه الخلفي عرض الصفحة بأكملها.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.

ما الفرق بين توجيه الواجهة الأمامية وتوجيه الواجهة الخلفية؟

آلية التوجيه الخلفية

يعرف الطلاب الذين يعرفون الواجهة الخلفية أن توجيه الواجهة الخلفية يعني أن الواجهة الخلفية تسجل وظيفة توجيه الواجهة الخلفية في app.js، وتقوم الواجهة الأمامية بتشغيل وظيفة رد اتصال التوجيه المقابلة من خلال ajax (خذ Express كمثال)

الزناد: اياكس

الاستجابة: app.get('/جهاز التوجيه',رد الاتصال)

المبدأ: يعتمد على بروتوكول الاتصال http

//app.jsapp.get('/', (request, Response) => { Let ret = { "success": true، "code": 200، "message": ""، "data": []، } استجابة.إرسال (إعادة)})

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

أما بالنسبة لتوجيه الواجهة الأمامية (بالإشارة إلى جهاز التوجيه التفاعلي)، تسجل الواجهة الأمامية توجيه الواجهة الأمامية وتعيين المكونات في router.js، وتتسبب الواجهة الأمامية في عرض المكونات من خلال المسار المحدد بواسطة الرابط أو عن طريق إدخال المسار المقابل في المتصفح:

المشغل: علامة الارتباط في جهاز التوجيه التفاعلي

الاستجابة: قم بعرض المكون المقابل في علامة التوجيه

المبدأ: استنادًا إلى التجزئة في المتصفح (قبل React-Router v2)، والتاريخ (React-Router v4)

//index.jsclass ListContent Extends Component { buildor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> موضوع النشر </Link> </Button> </Row> }}//router.js<Router> <div> <Header/> <Switch> <Route path بالضبط ={index} /> < المسار الدقيق = "/topic" مكون = {topic} /> </Switch> </div></Router>

في router.js، سيكون مكون الرأس موجودًا دائمًا في الصفحة، بينما لن يتم عرض المكونات الموجودة في علامة Switch إلا بعد تشغيلها، ويمكن أن نفهم ببساطة أن المكونات غير المشغلة فارغة ولن يتم عرضها.

لذلك، يتم تشكيل العرض المحلي

// إذا تم تشغيل توجيه الواجهة الأمامية '/topic'، فلن يتم عرض مكون الفهرس <Router> <div> <Header/> <Switch> <Route بالضبط path="/" compon={null} /> < المسار الدقيق = " /topic" مكون = {topic} /> </Switch> </div></Router>

الفرق بين التوجيه الأمامي والتوجيه الخلفي

يعتمد توجيه الواجهة الأمامية على مراقبة أحداث المتصفح ولا يمر عبر بروتوكول اتصال http

يتم عرض توجيه الواجهة الأمامية جزئيًا، وتعيد الواجهة الخلفية عرض الصفحة بأكملها نسبيًا، وتعتبر تجربة توجيه الواجهة الأمامية أفضل.