إذا كنت منخرطًا في تطوير الواجهة الأمامية ، فمن المحتمل أن تكون mise-en-scene التالية مألوفة بالنسبة لك: الشروط في المشروع تتقلص بسرعة ، أو إدارتك ، أو العميل ، أو كلاهما ، تريد معا أن ترى بأعينهم تطبيق العمل في الوقت الحالي ، حتى مع وجود بيانات مزيفة. في الوقت نفسه ، قد يكون هناك ظهر ، ولكن طبقة التفاعل api مع الجبهة هي المفقودة من الكلمة على الإطلاق.
لذلك ، واجهت مؤخرًا مثل هذا الموقف ، وأنا أقوم بتطوير واجهة للزاوية (الأشخاص الذين يجلسون على الكراسي يجلسون برفاهية ، ويومئ أحدهم برأسه بطريقة مفهومة).
الآن سأحاول ذلك بجدية. من ناحية ، فإن الوضع ليس شائعًا ، ويمكن اختيار العديد من الحلول.
عدة حلول تتبادر إلى الذهن:
- Hardcode مستوى مكون البيانات
- بيانات Hardcode على مستوى خدمات محلل البيانات ، قم بتثبيتها على الطرق الضرورية
- بيانات Hardcode على مستوى موفر خدمة البيانات
- تدفق api ، ووفقًا للعقود المتفق عليها ، يُرجع البيانات المضغوطة
ولكن يبدو أن أيًا من هذه الخيارات هو عكاز لا ينضب ، وكان لكل منها عيوب كبيرة.
- اختفى الخيار الأول فورًا - وهو حل غير مستخدَم على الإطلاق غير مريح ، مع تطور المشروع ، يجب إعادة كتابة كل شيء.
- يمكن أن يحدث هذا الحل ، ولكن مرة أخرى ، سيتم إعادة كتابة بنية المشروع ومنطق المكونات.
- أحد الخيارات المحتملة ، يمكنك حتى إعادة بيانات كعب الروتين بشكل غير متزامن ، مع محاكاة مكالمة الخادم ، ومع ذلك ، كما هو الحال في الحلول السابقة للمشكلة ، فإن أدوات الاعتراض لدينا (إذا كانت موجودة ، ولكنها موجودة) ستكون عاطلة ، واتضح أن تقليد العمل مع دعم يصبح غير مكتمل.
- بدا الخيار الأخير مقبولًا تمامًا ، خالٍ من المشكلات التي واجهتها الخيارات السابقة ، لكنني لا أريد أن أكتب hardode في مشروع الواجهة الخلفية ببساطة لأسباب صحية.
نتيجة لذلك ، تم اختيار خيار آخر: رفع خادم ويب منفصل ، والذي سيعود البيانات وفقًا للطرق والعقود ، وتكوين تكوين منفصل للتجميع وتنفيذ الزاوي. اتضح أنه من السهل القيام بالأمرين معا.
لتنفيذ خادم وهمية ، تم اختيار
اكسبريس .
لنبدأ به.
نختار المكان الذي نريد أن نكتب فيه رمزًا لخادم msk ، على سبيل المثال ، في دليل خادم الصور المجاور لمشروع ng.
بعد ذلك ، تحتاج إلى تهيئة المشروع وإضافة الحزمة مع صريح.
npm init
npm install --save express
بعد ذلك ، أضف رمزًا سيعيد البيانات إلينا. نقوم بإنشاء ملف index.js ، ونأخذ الكود من البرنامج التعليمي الأول.
const express = require("express"); const app = express(); app.get("/url", (req, res, next) => { res.json(["Tony", "Lisa", "Michael", "Ginger", "Food"]); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
بدء الخادم
node index.js
تحقق مع ساعي البريد:
كل شيء رائع ، الخادم يعمل. الآن ، دعونا نقوم بتكوين أحد المسارات ، كما لو أننا نطلب بيانات من api حقيقي. لنفترض أننا بحاجة إلى قائمة بجميع الكتب ، املأ ملف books.json بالكتب
[ { "rn": 0, "id": "0", "name": "Jungle", "type": 0, "wells": 10042, "default": false, "hidden": false, "author": "Admin" }, { "rn": 1, "id": "1", "name": "Main", "type": 1, "wells": 156, "default": true, "hidden": false, "author": "User" } ]
وتحديث ملف التطبيق:
const express = require("express"); const app = express(); app.get("/api/book/", (req, res, next) => { const books = require('./books'); res.json(books); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
وتحقق:
ممتاز.
الآن لنبدأ مع التطبيق الزاوي.
أضف التكوين الذي يخزن العنوان إلى الخلف إلى ملفات البيئات / البيئة * .ts.
environment.ts:
export const environment = { production: false, backend: 'http://localhost:5000/' }
environment.prod.ts
export const environment = { production: true, backend: 'http://localhost:5000/' }
في الوضع العادي ، وفي prod وفي وضع التطوير ، سوف نبحث عن .net core api على المنفذ 5000 ، كما هو موضح أعلاه. بعد ذلك ، نصف التكوين للظهر المؤقت
environment.mock.ts
export const environment = { production: false, backend: 'http://localhost:3000/' }
هنا ، كما ترون ، نحن نبحث عن api على المنفذ 3000 ، حيث سنقوم بالتشغيل السريع.
نحتاج الآن إلى أداة اعتراض ستوجه المكالمات إلى الخلف إلى الخادم الصحيح ، اعتمادًا على التكوين.
@Injectable() export class RequestInterceptor implements HttpInterceptor { baseUrl: string; constructor() { this.baseUrl = environment.backend; } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(this.modifyRequest(req)); } private modifyRequest = (req: HttpRequest<any>): HttpRequest<any> => { if (req.url.startsWith('api/')) { const url = this.baseUrl; req = req.clone({ url: url + req.url }); } return req; } }
يبقى تكوين التكوين الجديد لتجميع وتشغيل التطبيق للعمل مع خادم وهمية.
للقيام بذلك ، نحن بحاجة إلى قرص angular.json قليلا.
في قسم مشروعك ، يقوم المعماري / build / configurations ، بإضافة تكوين بناء وهمية جديد ، ووصف استبدال ملفات البيئة لهذا التكوين. أيضًا بالنسبة لوضع العرض ، قم بإنشاء تكوين وهمي وحدد خيار الإنشاء المرغوب
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "your-project": { /*****/ "architect": { "build": { /*****/ "configurations": { "production": { /*****/ }, "mock": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.mock.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project:build" }, "configurations": { "production": { "browserTarget": "your-project:build:production" }, "mock": { "browserTarget": "your-project:build:mock" } } } }, /*****/ } } }
هذا كل شيء ، والآن يبقى لتشغيل المشروع في التكوين المطلوب
ng serve --configuration=mock
وتحقق من مكالمات العودة إلى الخارج:
كل شيء رائع.
في الواقع ، سيظل هذا التصميم يساعدنا كثيرًا عندما نقوم بتشديد التكامل واختبارات e2e للمشروع. سأحاول أن أكتب عن هذا في المستقبل القريب.