Jika Anda terlibat dalam pengembangan frontend, maka Anda mungkin tahu mise-en-scene berikut: persyaratan proyek menyusut dengan cepat, manajemen Anda, atau pelanggan, atau keduanya, bersama-sama ingin melihat dengan mata mereka aplikasi yang berfungsi sekarang, bahkan dengan data palsu. Pada saat yang sama, mungkin ada kembali, tetapi itu adalah lapisan api interaksi dengan bagian depan yang hilang dari kata sama sekali.
Jadi, baru-baru ini saya menghadapi situasi seperti itu, dan saya mengembangkan ujung depan untuk sudut (orang-orang yang duduk di kursi menepuk dengan lambat, seseorang mengangguk penuh pengertian).
Sekarang saya akan mencobanya dengan serius. Di satu sisi, situasinya tidak biasa, dan banyak solusi dapat dipilih.
Beberapa solusi muncul di benak:
- Data tingkat komponen hardcode
- Data hardcode di tingkat layanan resolver, sematkan pada rute yang diperlukan
- Data hardcode di tingkat penyedia layanan data
- Siram api, dan, sesuai dengan kontrak yang disepakati, kembalikan data yang dikodekan dengan keras
Tetapi salah satu dari opsi-opsi ini tampaknya merupakan tongkat penyangga yang tidak ada habisnya, yang masing-masing memiliki kekurangan yang signifikan.
- Opsi pertama menghilang segera - solusi yang sama sekali tidak nyaman, saat proyek berkembang, semuanya harus ditulis ulang.
- Solusi ini dapat terjadi, tetapi sekali lagi, struktur proyek dan logika komponen akan ditulis ulang.
- Opsi yang memungkinkan, Anda bahkan dapat mengembalikan data rintisan secara tidak sinkron, mensimulasikan panggilan server, namun, seperti pada solusi sebelumnya untuk masalah ini, pencegat kami (jika ada, tetapi ada) akan tidak berfungsi, dan ternyata tiruan pekerjaan dengan dukungan menjadi tidak lengkap.
- Opsi terakhir tampaknya cukup dapat diterima, tanpa masalah yang dimiliki opsi sebelumnya, tetapi saya tidak ingin menulis hardcode di proyek backend hanya karena alasan higienis.
Akibatnya, opsi lain dipilih: untuk meningkatkan server web yang terpisah, yang akan mengembalikan data sesuai dengan rute dan kontrak, dan mengonfigurasi konfigurasi terpisah dari perakitan dan pelaksanaan sudut. Ternyata mudah untuk melakukan keduanya.
Untuk mengimplementasikan server tiruan,
express dipilih.
Mari kita mulai dengan itu.
Kami memilih tempat di mana kami ingin menulis kode untuk server msk, misalnya, di direktori server mock di sebelah proyek ng.
Selanjutnya, Anda perlu menginisialisasi proyek dan menambahkan paket dengan express.
npm init
npm install --save express
Selanjutnya, tambahkan kode yang akan mengembalikan data kepada kami. Kami membuat file index.js, kami mengambil kode dari tutorial pertama.
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"); });
Mulai server
node index.js
Periksa dengan tukang pos:
Semuanya super, server berfungsi. Sekarang mari kita mengkonfigurasi salah satu rute, seolah-olah kita meminta data dari api nyata. Katakanlah kita membutuhkan daftar semua buku, isi file books.json dengan buku
[ { "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" } ]
Dan perbarui file aplikasi:
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"); });
Dan periksa:
Bagus
Sekarang mari kita mulai dengan aplikasi bersudut.
Tambahkan konfigurasi yang menyimpan alamat ke belakang ke file environment / environment * .ts.
lingkungan.ts:
export const environment = { production: false, backend: 'http://localhost:5000/' }
environment.prod.ts
export const environment = { production: true, backend: 'http://localhost:5000/' }
Dalam mode normal, dan dalam mode prod dan mode pengembangan, kami akan mencari .net core api pada port 5000, seperti dijelaskan di atas. Selanjutnya, kami menjelaskan konfigurasi untuk kembali sementara
environment.mock.ts
export const environment = { production: false, backend: 'http://localhost:3000/' }
Di sini, seperti yang Anda lihat, kami mencari api di port 3000, di mana kami akan menjalankan express.
Sekarang kita membutuhkan pencegat yang akan mengarahkan panggilan ke belakang ke server yang benar, tergantung pada konfigurasi.
@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; } }
Masih mengkonfigurasi konfigurasi baru untuk merakit dan meluncurkan aplikasi untuk bekerja dengan server tiruan.
Untuk melakukan ini, kita perlu sedikit men-tweak angular.json.
Di bagian proyek Anda, arsitek / build / konfigurasi, tambahkan konfigurasi tiruan build baru, dan jelaskan penggantian file lingkungan untuk konfigurasi ini. Juga untuk mode servis, buat konfigurasi tiruan dan tentukan opsi build yang diinginkan
{ "$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" } } } }, /*****/ } } }
Itu saja, sekarang tetap menjalankan proyek dalam konfigurasi yang diinginkan
ng serve --configuration=mock
dan periksa di mana panggilan ke belakang terbang:
Semuanya bagus.
Bahkan, desain ini masih akan banyak membantu kita ketika kita memperketat integrasi dan pengujian e2e ke proyek. Saya akan mencoba menulis tentang ini dalam waktu dekat.