1 00:00:00,950 --> 00:00:04,120 ‫Kursleiter: Nachdem wir nun die Grundlagen von PUG verstanden 2 00:00:04,120 --> 00:00:06,620 ‫haben, ist es an der Zeit, einige 3 00:00:06,620 --> 00:00:10,160 ‫Umgestaltungen vorzunehmen und unseren Code besser in die NVC-Architektur einzupassen. 4 00:00:10,160 --> 00:00:12,490 ‫Und damit wir danach endlich mit dem 5 00:00:12,490 --> 00:00:14,603 ‫Aufbau der Website selbst beginnen können. 6 00:00:16,140 --> 00:00:18,790 ‫Und genau wie wir es mit unseren Ressourcen getan 7 00:00:18,790 --> 00:00:20,680 ‫haben, werde ich auch einen 8 00:00:20,680 --> 00:00:23,030 ‫Router und einen Controller für die Ansichten erstellen. 9 00:00:23,030 --> 00:00:26,210 ‫Im Grunde also eine Datei, in der ich alle Routen ablegen 10 00:00:26,210 --> 00:00:29,123 ‫kann, die wir zum Erstellen unserer dynamischen Website benötigen. 11 00:00:31,520 --> 00:00:34,340 ‫Nennen wir dies die 12 00:00:35,980 --> 00:00:37,610 ‫Ansichtsrouten. 13 00:00:37,610 --> 00:00:38,443 ‫Okay. 14 00:00:40,650 --> 00:00:43,423 ‫Und fangen wir damit an, Express zu verlangen. 15 00:00:50,630 --> 00:00:51,463 ‫Okay. 16 00:00:51,463 --> 00:00:52,960 ‫Dies wird also 17 00:00:52,960 --> 00:00:55,023 ‫genauso funktionieren wie die anderen Router. 18 00:00:56,270 --> 00:00:57,790 ‫Erstellen Sie also 19 00:01:01,260 --> 00:01:02,533 ‫einen Router-Express-Punkt. 20 00:01:03,538 --> 00:01:07,083 ‫Ein Router und am Ende exportieren wir ihn. 21 00:01:16,220 --> 00:01:19,460 ‫Lassen Sie uns diese Routen 22 00:01:21,300 --> 00:01:25,710 ‫jetzt tatsächlich hierher holen und in die Routendatei kopieren. 23 00:01:25,710 --> 00:01:29,210 ‫Hier ist es jetzt natürlich keine App mehr, sondern Router. 24 00:01:29,210 --> 00:01:30,553 ‫Also lass uns das ersetzen. 25 00:01:32,910 --> 00:01:33,800 ‫In Ordung. 26 00:01:33,800 --> 00:01:35,990 ‫Und das ist eigentlich in Ordnung. 27 00:01:35,990 --> 00:01:39,610 ‫In den anderen Routen haben wir also d dot route 28 00:01:39,610 --> 00:01:42,130 ‫verwendet, wo wir dann die Route 29 00:01:42,130 --> 00:01:45,720 ‫selbst angegeben haben, und danach haben wir get, post, 30 00:01:45,720 --> 00:01:48,900 ‫patch oder delete verwendet, also all diese http-Methoden. 31 00:01:48,900 --> 00:01:51,320 ‫Aber in diesem Fall ist das 32 00:01:51,320 --> 00:01:54,810 ‫nicht nötig, weil wir immer nur get verwenden werden. 33 00:01:54,810 --> 00:01:57,200 ‫Und so ist es gut so. 34 00:01:57,200 --> 00:01:59,620 ‫Als nächstes müssen wir diesen Router tatsächlich 35 00:01:59,620 --> 00:02:01,423 ‫in unsere Anwendung einbinden. 36 00:02:02,780 --> 00:02:06,830 ‫Also hier in der App, und so wie zuvor, 37 00:02:06,830 --> 00:02:09,573 ‫beginnen wir damit, sie zu verlangen. 38 00:02:13,280 --> 00:02:14,803 ‫Also Router ansehen. 39 00:02:16,690 --> 00:02:18,438 ‫Und jetzt lasst es 40 00:02:18,438 --> 00:02:20,938 ‫uns tatsächlich montieren, hier direkt hinter dem ersten. 41 00:02:22,719 --> 00:02:25,822 ‫Also Router anzeigen, aber der Unterschied 42 00:02:25,822 --> 00:02:30,822 ‫besteht darin, dass dieser tatsächlich direkt auf der Routen-URL gemountet ist. 43 00:02:31,280 --> 00:02:34,350 ‫Okay, wenn eine URL so aussieht, wird 44 00:02:34,350 --> 00:02:37,110 ‫sie direkt in den View-Router geleitet. 45 00:02:37,110 --> 00:02:38,650 ‫Und ich bin mir nicht sicher, ob das geht. 46 00:02:38,650 --> 00:02:41,770 ‫Vielleicht müssen wir es hier am Ende einfügen. 47 00:02:41,770 --> 00:02:43,723 ‫Aber mal sehen, sobald wir das testen. 48 00:02:44,770 --> 00:02:46,010 ‫Okay. 49 00:02:46,010 --> 00:02:49,600 ‫Lassen Sie uns nun als letzten Schritt diese 50 00:02:49,600 --> 00:02:53,540 ‫Funktionen wie zuvor tatsächlich hier in einen Controller exportieren. 51 00:02:53,540 --> 00:02:56,640 ‫Lassen Sie uns also wie zuvor 52 00:02:56,640 --> 00:02:58,623 ‫einen Views-Controller erstellen. 53 00:03:03,720 --> 00:03:05,310 ‫In Ordung. 54 00:03:05,310 --> 00:03:07,543 ‫Und das ist kopiert und so. 55 00:03:09,610 --> 00:03:14,303 ‫Dieses hier wird also die Übersicht erhalten. 56 00:03:17,000 --> 00:03:19,800 ‫Also export dot 57 00:03:22,240 --> 00:03:26,210 ‫get Overview gleich dieser Funktion, okay. 58 00:03:26,210 --> 00:03:27,410 ‫Zumindest vorerst. 59 00:03:27,410 --> 00:03:29,230 ‫Natürlich werden wir all dies 60 00:03:29,230 --> 00:03:31,890 ‫hier durch den echten Controller ersetzt, der 61 00:03:31,890 --> 00:03:35,220 ‫die Daten für die Übersicht erhält und diese 62 00:03:35,220 --> 00:03:37,030 ‫Daten dann rendert. 63 00:03:37,030 --> 00:03:39,410 ‫Okay, aber im Moment haben wir 64 00:03:39,410 --> 00:03:42,963 ‫nur diese sehr einfache Controller-Funktion, um zu sehen, ob alles funktioniert. 65 00:03:44,290 --> 00:03:46,300 ‫In Ordnung, also lass uns jetzt diesen 66 00:03:46,300 --> 00:03:48,273 ‫Controller hier hinzufügen und importieren. 67 00:04:00,570 --> 00:04:04,223 ‫Also Controller und dann Views Controller. 68 00:04:05,100 --> 00:04:09,230 ‫Okay, und hier haben wir 69 00:04:10,090 --> 00:04:14,320 ‫Ansichten Controller Dot Übersicht, in Ordnung. 70 00:04:14,320 --> 00:04:15,913 ‫Und jetzt hier das gleiche. 71 00:04:19,610 --> 00:04:22,543 ‫Punkt-Tour exportieren. 72 00:04:26,056 --> 00:04:26,889 ‫Okay. 73 00:04:35,010 --> 00:04:38,100 ‫Und dieser hier war eigentlich nur ein Test. 74 00:04:38,100 --> 00:04:40,220 ‫Also loswerden. 75 00:04:40,220 --> 00:04:44,150 ‫Und nun endlich wollen wir eigentlich keine Route namens 76 00:04:44,150 --> 00:04:45,950 ‫Übersicht, sondern die 77 00:04:45,950 --> 00:04:49,040 ‫Übersicht gleich beim Öffnen der Seite anzeigen. 78 00:04:49,040 --> 00:04:52,380 ‫Okay, so wie wir es hier haben. 79 00:04:52,380 --> 00:04:55,920 ‫Dies ist also die Routenseite und wann immer dies 80 00:04:55,920 --> 00:04:58,570 ‫angefordert wird, wird diese Übersichtsseite bedient. 81 00:04:58,570 --> 00:05:02,343 ‫Okay, und genau das wollen wir in unserer Bewerbung. 82 00:05:03,950 --> 00:05:08,290 ‫Okay, also lass es uns testen. 83 00:05:08,290 --> 00:05:11,083 ‫Und so sollte diese hier nun die Übersichtsseite sein. 84 00:05:12,700 --> 00:05:16,230 ‫Und in der Tat ist es, okay. 85 00:05:16,230 --> 00:05:18,930 ‫Und jetzt hier, lasst uns auch dieses neu laden, 86 00:05:18,930 --> 00:05:21,420 ‫nur um zu sehen, ob alles noch funktioniert. 87 00:05:21,420 --> 00:05:24,400 ‫Und das tut es, großartig. 88 00:05:24,400 --> 00:05:28,723 ‫Und natürlich könnten wir auch weiterhin auf unsere API zugreifen. 89 00:05:30,640 --> 00:05:33,403 ‫Sagen wir API, V1, 90 00:05:34,290 --> 00:05:35,293 ‫Slash-Touren. 91 00:05:36,289 --> 00:05:38,860 ‫Und das sollte uns dann alle unsere Touren geben 92 00:05:38,860 --> 00:05:40,963 ‫und dass wir für diesen Endpunkt zurückkehren. 93 00:05:41,832 --> 00:05:42,665 ‫Okay. 94 00:05:44,010 --> 00:05:45,690 ‫Fantastisch, damit sind 95 00:05:45,690 --> 00:05:48,070 ‫wir eigentlich bereit, diese Übersichtsseite 96 00:05:48,070 --> 00:05:50,450 ‫im nächsten Vortrag wirklich aufzubauen. 97 00:05:50,450 --> 00:05:52,183 ‫Ich kann es kaum erwarten, dich dort zu sehen.