[SKAN MŪZIKA]
DEIVIDS MEILANS: Labi, šis ir CS50, un šī jau ir devītā nedēļa, kas
ir mūsu priekšpēdējā.
Patiešām, šī patiešām ir pēdējā nedēļa, kurā jūs šajā nodarbībā
mācīsities programmēt.
Bet patiesi, šī nedēļa patiešām ir domāta kā pedagoģiskā kulminācija
visām šīm dažādajām valodām, kuras mēs esam aplūkojuši — visus šos
dažādos paņēmienus, visas šīs sintakses.
Tā, ka CS50 beigās tikai dažu nedēļu laikā jūs patiešām jūtat, ka
neapmeklējāt C nodarbības un Python, bet vispārīgāk jūs apmeklējāt
programmēšanas kursu.
Jo patiešām mēs jau zinām, ka apmēram puse no jums turpinās studēt
datorzinātnes, bet puse no jums to nedarīs.
Un patiešām visiem jūsu programmēšanas darbiem teorētiski būs pamats
tajā, ko mēs esam darījuši šo pēdējo nedēļu laikā.
Bet šeit tiešām būs atkarīgs no jums, vai iemācīties kādu jaunu
izdomātu valodu, kad tā iznāks, vai sekot kādai jaunai tendencei, kad
kāda valoda aptumšo tās, kuras mēs esam izmantojuši kā populārākas,
jo tās ir piemērotākas problēmām, kuras vēlaties atrisināt.
Un tāpēc šodien patiešām ir runa par tik daudzu pēdējo nedēļu
sintezēšanu, taču to darot tīmekļa programmēšanas kontekstā, kas gan
par labu, gan par sliktu mūsdienās ir ļoti modē gan mūsu
klēpjdatoros, gan tālruņos.
Un patiešām valodas, kuras apskatījām pēdējo nedēļu laikā, tiek
izmantotas ne tikai vietņu veidošanai, bet arī pilnvērtīgu
lietojumprogrammu, lietotņu veikalu un tamlīdzīgu lietu veidošanai.
Tātad šī patiešām būs šo pēdējo nedēļu kulminācija.
Patiešām, mēs pat runāsim par dažiem pazīstamiem jēdzieniem,
piemēram, iepirkumu groziem, kad atrodaties vietnē Amazon, un par šīm
lietām, ko sauc par sīkfailiem, kad apmeklējat vietnes.
Visas šīs tēmas arī tiks izmantotas, un jūs sapratīsit, ko tas viss
nozīmē no paša sākuma.
Tātad, kā mēs šeit nokļuvām?
Pagājušajā nedēļā mēs galvenokārt koncentrējāmies uz HTML un CSS, kas
nav programmēšanas valodas.
Tie ir tikai par estētiku, datu strukturēšanu, datu prezentēšanu un
tā tālāk.
Un mēs apkalpojām tīmekļa lapas, kuras mēs rakstījām, izmantojot šo
programmu HTTP server.
Šī ir tikai viena no šādām programmām — ir desmitiem, simtiem dažādu
tīmekļa serveru, kurus varat izmantot.
Tas ir ļoti vienkāršs, ko mēs iepriekš instalējām jūsu codespace VS
code, lai jūs varētu vienkārši rādīt tīmekļa lapas.
Tomēr arī pagājušās nedēļas beigās mēs piedāvājām JavaScript —
pilnvērtīgu programmēšanas valodu, kuru varat izmantot, lai uzlabotu
lietotāja pieredzi.
Lai padarītu lietas dinamiskākas un interaktīvākas, faktiski palaižot
kodu lietotāja pārlūkprogrammā — viņa Mac datorā, datorā, tālrunī —
pretstatā servera pusei, kurā līdz šim ir bijis raktīts viss mūsu
kods, C un Python.
Tātad jūs rakstāt kodu serverī, jūs rādāt kodu no servera, bet tagad,
izmantojot HTML, CSS un JavaScript, tas tiek izpildīts
pārlūkprogrammā.
Taču šodien mēs kļūsim par vienu pēdējo Python-- vai līdzīgu valodu
funkciju, ko varat arī izmantot serverī, lai automātiski, dinamiski
ģenerētu.
HTML, JavaScript, CSS, ko vēlaties, lai lietotājs saņemtu.
Jums nav jākodē viss, kā tas ir jādara, veidojot savu mājas lapu.
Nu, pieņemsim apsvērsim, kādi daži no celtniecības blokiem bija
pagājušajā nedēļā.
Tātad šeit ir URL paraugs, un šeit slīpsvītra ir noklusējuma lapa
jebkurā tīmekļa serverī.
Tas var būt index.html, tas var būt kaut kas cits, tā ir tikai
pieņemtā prakse.
Bet tas attiecas uz to, kas patiesībā ir noklusējuma iestatījums.
Protams, varat apmeklēt jebkurā pārlūkprogrammā, piemēram, URL, kas
beidzas ar file.html vai kaut ko citu punkts HTML-- , un tas burtiski
nozīmē, ka jūsu pārlūkprogramma vēlas, lai šis fails būtu šajā
serverī.
Vai, protams, mēs redzējām, ka tā var būt mape.
Un šīs mapes iekšpusē, iespējams, ir kāds noklusējuma faila
nosaukums, piemēram, index.html, vai arī varat būt precīzāks,
piemēram, folder/file.html, un vispārīgi mēs tos saucām par ceļiem.
Un patiešām ceļš ir tikai atrašanās vieta jūsu Mac datorā, datorā vai
serverī, kurā atrodas kāda informācija.
Bet šodien mēs to pārdēvēsim tikai, lai izmantotu citu izplatītu
terminoloģiju, taču tie patiesībā ir tikai sinonīmi.
Šodien mēs runāsim par tām pašām lietām kā maršrutiem, jo šodien mēs
galu galā aizstāsim HTTP serveri, kas tikai apkalpo statisku saturu,
ko jūs visi rakstāt ar savu tīmekļa serveri.
Tātad tagad jūs kontrolēsit, ko serveris dara, atbildot uz lietotāja
pieprasījumu, lai jūs varētu atbildēt interaktīvi un dinamiski.
Bet mēs joprojām redzēsim šādas metodes.
Tie bija mūsu tā sauktie HTTP parametri.
Tie ir viss, kas URL ir aiz jautājuma zīmes.
Un tas var būt atslēga = vērtība.
Piemērs bija, kāds?
Kad mēs spēlējāmies ar Google, kas bija atslēga un kāda bija vērtība,
ko es pirmo reizi izmēģināju?
Ir kāda atmiņas?
Es meklēju kaķus, un tāpēc atslēga, ko es atradu, bija cue, jo tieši
to Lerijs un Sergejs, kuri pirms gadiem izveidoja Google, nolēma, kā
nosaukumu piešķirt HTML tekstlodziņam, kurā ierakstāt savu vaicājumu.
Un, ja es ierakstu CAT kā cat, tā vērtība Google vietrādī URL nonāks
kā jautājuma zīme, cat = vērtība.
Un es minēju, ka bieži vien vēlaties nosūtīt divus dažādus ievades
datus serverim.
Un tāpēc es iesaku jums vienkārši sekot konjunkcijas zīmēm.
Un & atdala šos atslēgu - vērtību pārus.
Bet atkal šī ir tā pati sasodītā paradigma, kas iepriekš, un mēs to
esam redzējuši tik daudzas reizes, vai ne?
Atslēgu - vērtību pāri vārdnīcās Python valodā.
Mēs esam redzējuši HTML atribūtus un to vērtības.
Mēs esam redzējuši CSS rekvizītus un to vērtības.
Tas viss ir viens un tas pats, kaut ko sasaistīt ar kaut ko citu.
Lai gan šķiet, ka katrai valodai, katram cilvēkam ir sava dzimtā
valoda, tā patiešām ir viena un tā pati ideja.
Šo kaut kā saistīšanu ar kaut ko citu mēs turpināsim redzēt.
Un, lai būtu konkrēti, HTTP teksta rindiņas, kas atradās šajās
virtuālajās aploksnēs, tā teikt.
Ja es patiešām izvēlētos — mēģinot Google meklēt kaut ko līdzīgu
kaķiem, atcerieties, ka šis bija ziņojums, ko mana pārlūkprogramma
nosūtīja uz serveri, lai liktu Google meklēt nevis suņus, bet šajā
gadījumā kaķus.
Ko HTTP serveris ir darījis mūsu labā?
Nu, tas tikai ir rādijis HTML failus, CSS failus, varbūt dažus JS vai
JavaScript failus, taču tas ir ignorējis HTTP parametrus.
Tāpat kā HTTP serveris nepieņem lietotāja ievadi.
Kāpēc?
Nu ko tas ar to darīs?
Tā kā jūs jau uzrakstījāt HTML, jūs jau rakstījāt CSS, tāpat kā nav
jāpieņem nekādi lēmumi, kamēr mēs neieviesīsim serverī pareizu
programmēšanas valodu.
Un tāpēc mēs tagad atteiksimies no šīs vienkāršās HTTP servera
programmas un iepazīstināsim jūs ar jūsu serveri, kas veiks
parsēšanu, proti, šo atslēgu - vērtību pāru izvilkšanu, lai jums un
man nevajadzētu pēkšņi rakstīt Python kodu, kas analizē šīs lietas,
izdomā, kuras lapas pieprasīja atslēgu vērtību pārus.
To visu mēs joprojām saņemsim bez maksas, vienkārši izmantojot
pareizo sistēmu.
Un tāpēc šodien mēs atkārtoti apskatām Python, kuru tagad kaut kādā
veidā esam izmantojuši pēdējo nedēļu laikā.
Un patiešām tā ir sava veida līme, kas ļauj mums savienot daļas no
mūsu pašu loģikas.
Mēs to redzējām ar SQL, tagad mēs to redzēsim ar HTML, CSS un pat
JavaScript, ja vēlamies.
Un mēs šodien redzēsim arī citu valodu, ne programmēšanas valodu, ko
sauc par Jinja.
Un tā būs izplatīta paradigma reālajā pasaulē, kurā dažādas valodas,
dažādas bibliotēkas, dažādi ietvari bieži aizņemas viens no otra vai
izmanto tehnoloģijas, kuras kāds cits uzrakstījis, lai nebūtu
jāizgudro ritenis no jauna.
Tātad Flask ir tikai satvars.
Tā ir trešās puses bibliotēka, mūsdienās tā ir diezgan populāra,
salīdzinoši vienkārša, tāpēc mēs to izmantojam CS50.
Ja esat programmējis pirms CS50, Django ir vēl viens populārs satvars
vai bibliotēka Python telpā, taču tas ir nedaudz sarežģītāks.
Tāpēc mēs koncentrējamies uz Flask.
Un Jinja, mēs redzēsim, nav programmēšanas valoda.
Tā būs tikai zināma sintakse — par laimi pazīstama — ar figūriekavām,
kas ļauj izmantot vietturus mūsu faktiskajās tīmekļa lapās.
Tātad atkal jūs galu galā apspriedīsit, kur atrodas šo dažādo
tehnoloģiju līnijas, taču šīs nav interesantas idejas.
Interesantās idejas ir tās, kurām galvenā uzmanība tiks pievērsta
kodā.
Taču, sākot no šodienas, tā vietā, lai darbinātu HTTP serveri, lai
rādītu statisku vietni, mēs liksim jums sākt burtiski palaist Flask
space run termināļa logā, lai palaistu savu tīmekļa serveri, kas ir
ieviests Python, izmantojot šo Flask satvaru.
Tātad bootstrap bija bibliotēka, lai padarītu jūsu CSS un JavaScript
skaistākus un interaktīvākus.
Flask ir satvars vai bibliotēka, lai padarītu jūsu Python kodu vēl
patīkamāku lietošanai, jo jūs aizņematies iespējas no kāda cita.
Labi, kā mēs varam to darīt?
Ja vēlaties rakstīt savu tīmekļa lietojumprogrammu, savu amazon.com,
savu google.com programmā Python, izmantojot Flask, jums ir jābūt
failam ar nosaukumu app.py pēc vienošanās, kurā ir viss jūsu Python
kods.
Un pēc tam mape ar nosaukumu templates, kur atrodas visas jūsu
veidnes.
Un pagaidām jūsu veidnes ir tikai jūsu HTML faili.
Tātad, ja mēs tagad sāksim veidot interesantākas interaktīvas lietas,
piemēram, google.com vai amazon.com, mums ir jāspēj izpildīt kodu
serverī.
Un tā ir pieņemts.
Tas vairs nav obligāti indeksēts HTML, tās ir šīs divas lietas
augstākajā līmenī.
To sakot, mēs ātri redzēsim, ka pastāv dažas citas konvencijas.
Un manos tiešsaistes piemēros un devītajā problēmu kopā jūs redzēsiet
citu failu ar nosaukumu requirements.txt, kas ir tikai teksta fails,
kas ļauj uzskaitīt visas trešās puses bibliotēkas, kuras jūsu
lietojumprogramma varētu vēlēties izmantot.
Tas ir pieņemts, lai serveris varētu automātiski instalēt lietas jūsu
vietā, jums tas nav jādara manuāli.
Un tad statiskais būs tas, kur burtiski nonāk jūsu statiskais saturs.
Tātad, ja jums ir attēli savai tīmekļa lietojumprogrammai, ja jums ir
JavaScript faili, CSS faili, kas parasti ir statiski.
Tie ir tikai pieņēmumi, to visu var mainīt.
Bet tas ir veids, kā rīkoties.
Tāpēc mēs jūs iepazīstināsim ar noklusējuma iestatījumiem.
Labi, ko tas nozīmē?
Piemēram, kā es varētu ieviest savu tīmekļa lietojumprogrammu,
izmantojot Python, kas kaut kādā veidā izspļauj ziņojumu, piemēram,
hello, world?
Labi, izrādās, tikai šis.
Tagad mēs to atšķetināsim tikai pēc brīža, taču šis ir faila app.py
parauga saturs, kas acīmredzot izmanto kādu bibliotēku-- piemēram,
pazīstamu sintaksi no kaut kā, importē-- kaut ko citu.
Mēs to esam redzējuši iepriekš ar CSV failiem un citām bibliotēkām —
šī ir nedaudz jauna sintakse, bet pagaidām tā ir kopēšana -
ielīmēšana.
Šī noteikti ir jauna sintakse un dīvaina - ar @ zīmi.
Bet šodien mēs to redzēsim atkal un atkal.
Un sākotnēji tā ir tikai kopēšana un ielīmēšana, līdz jūs saprotat,
ko tas dara jūsu labā.
Bet šeit ir vismaz dažas pazīstamas lietas, piemēram, index.html
joprojām būs ar mums, taču tas, kad un kā to parādīt lietotājam, būs
atkarīgs no mums.
Tātad padarīsim to reālāku.
Ļaujiet man pāriet uz VS code šeit un ļaujiet man turpināt un
izveidot — kā būtu, ja mēs to darītu Hello — ļaujiet man veikt mkdir
Hello, lai izveidotu jaunu mapi ar nosaukumu Hello.
Un es ieiešu tajā ar CD, lai visus šos failus izolētu vienā
direktorijā, lai mums šodien būtu dažādas lietotnes un dažādas mapes.
Un tagad es izpildīšu kodu-- darīsim šādi patiesībā.
Izpildīsim mūsu mkdir templates.html — atvainojiet, ne templates.html.
Ļaujiet man pārdēvēt to par templates, izmantojot komandu MV.
Tam nav nekāda sakara ar tīmekļa programmēšanu, es pieļāvu drukas
kļūdas.
Tātad, ja es tagad ierakstu LS, man ir mape ar nosaukumu templates.
Labi, izveidosim failu ar nosaukumu index.html, kas būs ļoti
vienkāršs un diezgan lielā mērā kopēts un ielīmēts no pagājušās
nedēļas.
Ļaujiet man paslēpt savu termināļa logu un ļaujiet man ļoti ātri
izveidot vienkāršu Hello, world lapu, izmantojot savu HTML tagu.
Lang will = angļu, tad šajā iekšpusē man būs galvenes tags.
Iekšpusē man būs virsraksta tags, un es vienkārši nosaukšu to par
Hello.
Tad man būs pamatdaļa, un es teikšu tikai kaut ko vienkāršu,
piemēram, Hello, world.
Lai tas būtu piemērots mobilajām ierīcēm, atcerieties, ka mēs
pieskārāmies šiem metatagiem.
Tātad, ja jūs pēc nodarbības spēlējaties ar savu mobilo ierīci, nevis
klēpjdatoru, es izpildīšu name = atvērējpēdiņas, aizvērējpēdiņas
“viewport”;.
Viewport-- un tad content = un es to nekad neatceros, es burtiski to
lasu no špikera.
Sākotnējā skala = 1.
Platums = ierīces platums.
Un tie ir tikai šie maģiskie buramvārdi, kuri pārlūkprogrammai saka:
pielāgojiet lietas atbilstoši ierīces izmēram.
Tas nedaudz palielina fontu izmērus.
Labi, tā es būtu darījis pagājušajā nedēļā.
Un es būtu rādījis šo tīmekļa lapu, palaižot HTTP serveri tajā pašā
direktorijā, un es redzētu šo HTML.
Bet tagad sāksim nedaudz kontrolēt lietotāja pieredzi.
Un pagaidām tas būs neiespaidīgi.
Tas vienkārši vienmēr teiks Hello, world.
Taču pēc brīža otrā versija nedaudz dinamiskāk pateiks Hello, David
vai Hello, Carter.
No turienes mēs ātri pāriesim uz tikai interesantākām
lietojumprogrammām, kas beidzas ar tādām lietām kā sīkfaili,
iepirkumu ratiņi un tamlīdzīgi.
Tāpēc ļaujiet man atgriezties savā termināļa logā un, kā solīts,
ļaujiet man izveidot citu failu ar nosaukumu app.py.
Un šeit tagad man ir jāievieš tīmekļa serveris, kuru es izmantošu,
izmantojot šo Flask satvaru.
Pagaidām es tikai kopēšu - ielīmēšanu no tā, ko pirms brīža redzējām
slaidā, no Flask bibliotēkas, kuru esam iepriekš ieinstalējuši jūsu
vietā. Es importēšu funkciju, ko sauc par Flask, ar lielo burtu F.
Tā ir nianse, bet tas ir svarīgi.
Es arī importēšu dažas citas lietas — funkciju, ko sauc par render
template, un vēl vienu mainīgo, ko sauc par request.
Un vienīgais veids, kā es to zinu, ir tas, ka esmu to iepriekš
mācījis, izlasījis dokumentāciju un sekojis apmācībai.
Jūs to nezinātu, ja kāds jums neizstāstītu vai neizlasītu, kā to
izdarīt.
Bet tas nozīmē, ka šajā bibliotēkā ar nosaukumu Flask ir trīs
lietas — funkcija ar nosaukumu Flask, ar lielo F, funkcija, ko sauc
par render template, un tajā iebūvēts mainīgais — request.
Un tie būs visi elementi, kas man ir nepieciešami, lai ieviestu savu
tīmekļa serveri.
Flask, kad vēlaties izveidot tīmekļa lietotni Python valodā, ir
pieņemtsizveidot mainīgo, ko sauc par app, un pēc tam piešķirt tam
šīs Flask funkcijas atgriešanas vērtību — ar lielo F — un ievadīt
tajā __name__, kas ir dīvaini, bet mēs to esam redzējuši iepriekš.
Pirms dažām nedēļām kāds atceras, kad un kāpēc mēs pieminam __name__?
Jā?
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Jā, ja mēs vēlējāmies pārbaudīt, vai faila nosaukums
ir pats main, lai izvairītos no situācijas, kad, rakstot savu
bibliotēkas kodu, jūs nevēlaties, lai jūsu kods tiktu izpildīts
automātiski.
Jūs vēlaties potenciāli izpildīt main funkciju.
Un tas bija šīs problēmas risinājums.
Šodienas vajadzībām tas ir tikai veids, kā jūs to darāt, __name__
attiecas uz pašreizējo failu.
Un tāpēc šis ir tikai neliels triks, kas liek pārvērst šo failu par
Flask lietojumprogrammu.
Tas arī viss, un pagaidām ar šo rindiņu pietiek.
Labi, ko es gribu darīt pēc tam?
Tagad es esmu atbildīgs par tīmekļa serveri.
Man ir jāieraksta kods, kas, pamatojoties uz pārlūkprogrammas
pieprasījumu, nosaka, kādu failu vai failus es sūtīšu no servera uz
pārlūkprogrammu.
Pagājušajā nedēļā HTTP serveris to visu izdarīja mūsu vietā,
pamatojoties tikai uz faila nosaukumu.
Bet šodien es pārņemšu kontroli pār šo procesu.
Un veids, kā es to daru, ir šāds.
Es saku app.route ar dīvainā kārtā @ zīmi pirms tā.
Python tas ir pazīstams kā dekorators.
Un tā ir Python funkcija, nevis Flask, ko mēs vienkārši neieviesām
iepriekšējās nedēļās, taču tā ir īpaša — tas ir ērts triks, lai
paveiktu to, ko mēs gatavojamies darīt.
Route, kuru vēlos definēt, ir atvērējpēdiņas, aizvērējpēdiņas
“slash”, tas ir, šeit ir kods, kuru serverim jāizpilda ikreiz, kad
lietotājs apmeklē vietnes noklusējuma lapu - /slash.
Kādu kodu es vēlos, lai tie izpildītu?
Es vēlos, lai viņi izpildītu funkciju.
Tāpēc Python varu definēt funkciju.
Es tehniski varu saukt šo lietu jebkā, kā vēlos - x, y, vai z.
Taču, tā kā viņi piekļūst noklusējuma lapai, ko citādi sauc par
vietnes indeksu, es vienkārši saprātīgāk nosaukšu šo funkciju
indekss.
Bet tikai konvencija, jūs varat to saukt par visu, ko vēlaties, bet
x, y vai z, iespējams, ir slikta stilistiskā izvēle.
Šajā gadījumā nav nepieciešami argumenti.
Un vienīgais, ko šis kods — šī funkcija darīs, — pagaidām turpināsim
un liksim tam atgriezt Hello, world atvērējpēdiņas, aizvērējpēdiņas.
Un viss.
Tagad ļaujiet man ieiet savā termināļa logā, ļaujiet man iet uz
priekšu un palaist Flask tajā pašā direktorijā, kurā ir app.py, un
nospiest taustiņu Enter.
Es redzēšu kādu šifrētu izvadi, bet, kas ietvers manas koda vietas
URL, un, ja es atvēršu šo URL pēc tam, kad virzīšu kursoru virs tā,
es patiešām redzēšu Hello, world, kā jūs varētu cerēt.
Bet ļaujiet man izdarīt šādi.
Ļaujiet man turpināt un ar peles labo pogu noklikšķināt uz lapas un
noklikšķināt uz Skatīt lapas avotu. Ja iepriekš neesat to izdarījis,
tiek parādīts viss lapas HTML kods, lai cik skaists vai nekārtīgs tas
būtu.
Un tas arī viss, nav neviena HTML, ko es esmu izspļāvis, tikai
atvērējpēdiņas, aizvērējpēdiņas “Hello, world”.
Nu, ja es tiešām vēlos izspļaut pilnu tīmekļa lapu, kas šeit nav
nekas nozīmīgs, jo kuram gan rūps?
Jebkurā gadījumā tas ir tikai teksts.
Bet, ja es vēlos izspļaut visu failu, ļaujiet man izdarīt šādi.
Būtībā es vēlos atgriezt index.html saturu, kurā ir visi man vēlamie
tagi — mobilajām ierīcēm piemērotas lietas un tas viss.
Es nevaru vienkārši atgriezt index.html, bet es varu atgriezt šo.
Render template, atvērējpēdiņas, aizvērējpēdiņas, “index.html”.
Un saskaņā ar Flask dokumentāciju šī render template funkcija parasti
atradīs šo failu manā veidņu mapē.
Tas to atvērs un pēc tam visu izspļaus pārlūkprogrammā, lai es varētu
glabāt visu savu HTML vienuviet un visu savu Python kodu šajā vienā
vietā.
Tāpēc tagad, ja es atgriezīšos savā pārlūkprogrammā un atkārtoti
ielādēšu, es nedomāju, ka tiešām pamanīšu atšķirību, jo galu galā tas
ir viens un tas pats teksts.
Bet, ja es tagad skatos lapas avotu, ievērojiet, ka ir viss HTML, kas
tikko tika nosūtīts pārlūkprogrammai.
Tas ir tikai tāpēc, ka mums ir veidojošie bloki — puzles gabali, tā
teikt— ar kuriem tagad glabāt visu mūsu HTML vienuviet — un,
iespējams, CSS, JavaScript un tā tālāk, bet tad rādām ko gribam, lai
gan es tikai akli izvadu index.html.
Tātad, pirms mēs turpinām, uzdodiet visus jautājumus par to, kas, es
vēlreiz apgalvoju, ir kā mana manuālā versija par to, ko HTTP
serveris mūsu labā darīja automātiski pagājušajā nedēļā.
Bet šādi jūs to darāt pats.
Vai ir kādi jautājumi?
Labi, padarīsim to interesantāku, ko mēs nevarētu izdarīt tikai ar
HTTP serveri un HTML.
Kāpēc gan mums to nedarīt?
Ļaujiet man apmeklēt to pašu URL, un es došos uz Tuvināt.
Un jūsu URL atšķirsies no mana code space, taču šeit tas beigsies
līdzīgi.
Piemēram, es ievadīšu /?name=David.
Vai q=cats, vai name=Carter — jebkurš atslēgas - vērtību pāris, kuru
es vēlos. Es pievienošu aiz slīpsvītru un jautājuma zīmi, tādējādi
nodrošinot lietotāja ievadi serverī.
Lai gan lietotājam ļoti nedraudzīgā veidā.
Neviens parasti to nedarīs savā pārlūkprogrammā.
Enter — šeit nekas nemainās, ir tikai rakstīts Hello, world, bet vai
nebūtu jauki, ja būtu rakstīts Hello, David?
Vai līdzvērtīgi, ja es vēlreiz pietuvinātu šeit un nomainītu Deividu
uz Kārteru un nospiestu taustiņu Enter, vai nebūtu jauki, ja tā vietā
būtu rakstīts Hello, Carter?
Tāpēc mums tur ir vajadzīgs zināms dinamisms.
Un šeit tagad Python būs mūsu draugs.
Ja vēlos piekļūt HTTP parametriem, ko lietotājs ir norādījis,
izmantojot vietrādi URL — vai tas būtu q=cats vai name=David, es varu
izmantot šo īpašo mainīgo, ko jau pirms - iepriekš importēju.
Un es varu darīt šādi — ja ir HTTP parametrs ar nosaukumu name, kurā
es izsaukšu request.args.
Tad es iešu uz priekšu un izveidošu mainīgo ar nosaukumu name, un es
iestatīšu to vienādu ar request.args, kvadrātiekavas, name.
Citādi — ja šajā īpašajā mainīgajā, ko sauc par request.args, nav,
atvērējpēdiņas, aizvērējpēdiņas, atslēgas “name”, es tikai pieņemšu,
ka pēc noklusējuma lietotāja vārds ir world.
Kas te tagad notiek?
Izrādās, ka Flask nodrošina mums šo īpašo mainīgo, ko sauc par
request.args, un tajā ir visi atslēgu - vērtību pāri, kas varētu būt
ienākuši caur URL.
Tātad, ja jums būtu jāuzmin, kāda veida a-- vai kāds datu tips ir
request.args?
Tas ir tā nosaukums, un te tas ir kontekstā.
Devītā rinda varētu sniegt pavedienu.
Kāds datu tips varētu būt request.args programmā Python?
Jā.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Tas nebūs masīvs vai saraksts, jo tie vienmēr, katrā
valodā, ko esam redzējuši, ir skaitliski indeksēti.
Bet jūs esat tuvu.
Kāds cits?
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Tā ir vārdnīca.
Tātad vārdnīca sintaktiski ir līdzīga Python sarakstam, taču ciparu
indeksu, piemēram, 0 1 2, vietā varat burtiski izmantot virknes,
piemēram, atvērējpēdiņas, aizvērējpēdiņas, "name" .
Tagad tie ir mazliet baltie meli, tā ir vārdnīca.
Bet tā ir Flask īpašā vārdnīcas versija.
Bet sintakse, ar kuras palīdzību jūs varat tai piekļūt, ir tieši tāda
pati.
Un es patiesībā - tā ir drukas kļūda.
Es negribēju tur minēt names.
Es gribēju teikt vārdu vienskaitlī, bet citādi es domāju, ka kods ir
pareizs.
Tas astotajā rindā pārbaudīs, vai failā request.args ir atslēga ar
nosaukumu name, un, ja tā, tā iestatīs to vienādu ar šo vērtību.
Pretējā gadījumā tas būs pēc noklusējuma world.
Es to nedarīju apzināti.
Es pievienoju šo, if else, un nedarīju šādi, kāpēc?
Kāda kļūda var notikt, ja es vienkārši akli satveru vārdu?
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Tieši tā.
Ja URL beigās nebūtu nekā tāda, kas būtu formā - ?name=kāds, tad
vārda atslēgas nebūtu.
Un tas bija dažas nedēļas atpakaļ, taču tas radītu vienu no
kaitinošajām atslēgaskļūdām, kad saņemat izsekošanas rezultātus, jo
esat kļūdījies, jo izmantojāt neeksistējošu virkni.
Tāpēc es vienkārši proaktīvi cenšos izvairīties no šīs situācijas,
tāpat kā pirms pāris nedēļām.
Tāpēc, lai gan tas ir daudz runīgāks, tas ir tikai daudz
aizsargājošāks, lai es nejauši neiekļūtu vārdnīcā, kurā nav atslēgas.
Bet mēs redzēsim, kā mēs varam padarīt to īsāku, lai tas nebūtu
četras rindiņas garš, bet gan vienu.
Bet es domāju, ka tagad es varu izdarīt šādi.
Vai nebūtu jauki, ja tagad manā index.html failā — kurš atcerieties,
ir manā veidņu mapē — vai nebūtu jauki, ja es varētu, piemēram, šeit
izveidot ekvivalentu C formātā, piemēram persona S?
Vai Python, kaut kas līdzīgs šim vārdam.
Tas ir tuvu, un tas ir tikai tāpēc, ka daži dažādi cilvēki izgudro
dažādas valodas, izgudro dažādus satvarus.
Programmā Flask šī sintakse ir, lai faktiski darītu, ak, divas
figūriekavas un pēc tam mainīgā nosaukums tajās.
Kāpēc?
Iespējams, kāds ir izdomājis, kādas ir izredzes, ka normāls cilvēks
kādreiz izmantos divas figūriekavas, vienu vietā?
Tātad tas, iespējams, samazina iespējamību, ka cilvēki patiešām vēlas
izvadīt, burtiski, šādas figūriekavas.
Tātad pēc būtības tas ir līdzīgs Python f virknēm, pēc būtības ir
līdzīgs C personai S, pēc būtības tas ir līdzīgs SQL jautājuma zīmēm.
Tā pati ideja, nedaudz atšķirīga sintakse, un tā ir Jinja.
Tātad tas nav programmēšanas kods pats par sevi, tā ir tikai veidne.
Un patiešām tāpēc šo mapi sauc veidnes.
Tas ir kā uzmetums tam, ko es vēlos, lai tiktu izspļauts lietotājam,
taču man ir tādi vietturi kā šis mainīgais, ko es vēlos pievienot šai
vērtībai.
Bet ar to vien nepietiek.
Skatieties, kas notiek, ja es atgriežos citā pārlūkprogrammā un
atkārtoti ielādēšu lapu pēc tam, kad esmu mainījis lietas šeit.
Atkal ievadīsim name=David.
Enter--aiz Hello, komats nekas netiek izvadīts.
Tātad šķiet, ka vārda mainīgais vēl neeksistē.
Un tieši tāpēc, ja es skatos lapas avotu, jūs varat redzēt, kas tika
nosūtīts pārlūkprogrammai, kaut kas nav kārtībā ar manu vietturi.
Bet man ir tikai nedaudz jāprecizē, ko es gribu, kur nosūtīt.
Tātad izrādās, ka render template funkcijai nav nepieciešams tikai
viens arguments — tās veidnes nosaukums, kuru vēlaties izspļaut--,
bet pēc tam, izmantojot komatus, ir nepieciešami visi vietturi, kurus
vēlaties pievienot.
Piemēram, ja vēlaties, lai vietturis būtu šis-- burtiski, placeholder
šajās figūriekavās, varat norādīt kā otro render template argumentu -
arguments ar nosaukumu placeholder ir vienāds ar jebkuru vārdu.
Tātad vārds (name) ir mainīgais iepriekšējās rindiņās, paceholder ir
mana burtiskā viettura nosaukums figūriekavās, tāpēc tagad, ja es
atgriežos savā pārlūkprogrammā un atkārtoti ielādēju to ar joprojām
atvērējpēdiņas, aizvērējpēdiņas-- ar joprojām ?name=David manā URL,
tagad es tiešām redzu Hello, David.
Un, ja es šeit pietuvinu un ļaujiet man pārcelties uz šejieni.
Ļaujiet man ierakstīt Carter un nospiest Enter — tagad tā vietā es
redzu Hello, Carter.
Tagad ir nedaudz lieki vietturi saukt par “placeholder”, it īpaši, ja
vēlaties, lai tie būtu divi vai trīs.
Tātad jūs faktiski varat to saukt par visu, ko vēlaties.
Un es to nomainīšu atpakaļ uz name, kas ir nedaudz vienkāršāk.
Vienīgais dīvainais ir tas, ka tagad jūs redzēsit, ka rakstāt kodu
šādi.
Un tas ir pareizi, un tā ir norma, tas tikai izskatās dīvaini.
Taču vienība, kas atrodas pa kreisi no vienādības zīmes, ir
vietturis, ko izmantojat veidnē, labajā pusē var būt jebkura vēlamā
vērtība, tostarp mainīgais.
Tāpēc, lai gan es tos nosaucu tieši tāpat-- kas, jāatzīst, izskatās
muļķīgi--, cilvēki mēdz darīt tā.
Tikai tāpēc, ka tas ir vienkāršāk nekā cita vārda, piemēram,
vietturis, ieviešana.
Vai tagad ir jautājumi par šo?
Vai ir kādi jautājumi par šiem vietturiem?
Nē?
Labi, nedaudz saīssināsim to un paskatīsimies, vai mēs nevaram
panākt, lai viss būtu vēl dinamiskāks.
Ļaujiet man tagad piedāvāt izvades vietā-- tā vietā, lai izmantotu šo
nosacījumu, kas radīja ļoti vienkāršu ideju, ļoti detalizētu ar
četrām dažādām rindiņām, bet izrādās, ka ir vieglāks veids, kā to
izdarīt.
Jūs joprojām varat izveidot mainīgo ar nosaukumu name, un jūs varat
iestatīt to vienādu ar request.args, taču tā vietā, lai tikai akli
indeksētu šajā vārdnīcā, izrādās, ka request.args ir iekļauta
funkcija, ko sauc arī par GET.
Varat nodot tai argumentu, kas norāda, kādu vērtību vēlaties iegūt.
Un pēc noklusējuma, ja šajā vārdnīcā nav atslēgas name, šī funkcija
neradīs atslēgas kļūdu, tā vienkārši atgriezīs none, NONE, īpašo
mainīgo — īpašo Python vērtību.
Tādējādi tiek novērsta kļūda jūsu kodā, bet tiek apvienotas četras
rindiņas vienā.
Bet vēl jaukāk, ja lasāt dokumentāciju, funkcija GET var iegūt arī
konkrētu noklusējuma vērtību.
Tātad, ja nevēlaties, lai ekrānā none būtu redzams, piemēram, Hello,
tukšums vai... es domāju, arī tas būtu dīvaini.
Varat vienkārši ievadīt noklusējuma vērtību atbilstoši šīs funkcijas
dokumentācijai, piemēram, world.
Tagad mēs esam pārgājuši no četrām rindiņām uz tikai vienu.
Tātad, iespējams, tas ir labāk izstrādāts.
Un, ja es tagad atgriezīšos pārlūkprogrammā ar Carter iekš URL un
nospiežu pārlādēt, notiks tas pats, taču mēs pamanīsim šo.
Pieņemsim, ka es pilnībā atbrīvojos no name parametra un nospiežu
taustiņu Enter, tagad tas pāriet uz noklusējuma vērtību — world.
Tāpēc tas ir tikai nedaudz labāk izstrādāts, nekā to darot otrā veidā.
Labi, ja mēs uzlabosim lietas par vēl vienu pakāpi.
Un kā būtu, ja mēs ieviestu vairākus maršrutus?
Un patiesībā, iespējams, ieviešot formu.
Jo atkal neviens normāls cilvēks neapmeklēs URL un nepievienos
jautājuma zīmi un savu vārdu, pārlūkprogrammas nedarbojas tā.
Tā darbojas pārlūkprogrammas, bet ne, kā cilvēki mijiedarbojas ar
pārlūkprogrammām.
Jūs un es parasti tā vietā izmantojam formu.
Tagad lietas var kļūt nedaudz interesantākas, veidojot savu tīmekļa
lietojumprogrammu, jo varbūt mēs varētu darīt kaut ko līdzīgu šim.
Ļaujiet man aiziet un atkal tālināt.
Ļaujiet man atgriezties pie sava koda šeit, pārvietot to un tagad
koncentrēties uz failu index.html.
Šī viettura vietā mēs dotu sev tādu formu,ar kādu esam mazliet
spēlējušies pagātnē, neatkarīgi no tā, vai tas ir Google vai kaut kam
citam.
Un lietosim šo formu.
Un šīs formas iekšpusē būs ievade.
Un šīs ievades nosaukums būs, atvērējpēdiņas, aizvērējpēdiņas, “name”.
Tā arī tas ir mulsinoši.
Bet ievadei ir vārda atribūti, bet šis ir personas vārds.
Tāpēc es šeit saku name=name.
Tātad tikai nekārtīga semantikas pasaule.
Un ļaujiet man iet uz priekšu un padarīt to par tekstlodziņu pēc
noklusējuma.
Un tad ļaujiet man piešķirt sev pogu, kuras noklusējuma veids būs
iesniegt.
Un, piemēram, šīs pogas nosaukums būs sveicināt (greet).
Tātad, paskatīsimies, kas šeit notiek, bet ļaujiet man mainīt app.py,
lai tas būtu vienkāršāks.
Es tagad neievadu nevienu vietturi, un es pat no tā atbrīvošos.
Vienkāršības labad es tikai attīšu uz pirmo šīs versijas versiju.
Tagad mainīsim URL, lai atbrīvotos no Carterun manis.
Tāpēc mēs vienkārši dodamies uz un nospiežam taustiņu Enter, un tagad
mums atkal ir ļoti vienkārša forma.
Labi, tā nav īpaši lietotājam draudzīga, taču mēs varam veikt dažus
jaukus uzlabojumus.
Piemēram, mēs varam izslēgt automātisko pabeigšanu, it īpaši, ja es
vēlos rakstīt David un Carter manuāli un nevēlos, lai tas pabeidz
manu domu nodarbības laikā.
Mēs varam veikt automātisko fokusu, kas pēc noklusējuma liek kursoram
mirgot, kas ir jauki, jo tad cilvēkam ar to nav jānodarbojas.
Un tad mums pat var būt viettura atribūts.
Placeholder=name, lai tas būtu kā šīs lietas iebūvētās instrukcijas.
Un tagad, ja es atgriežos uz otru cilni, nekas vēl nav mainījies, jo
man ir vēlreiz jālejupielādē HTML, atkārtoti jāielādē — labi, tagad
tas ir nedaudz lietotājam draudzīgāks.
Uz tā ir rakstīts name gaiši pelēkā krāsā.
Kursors mirgo, un es esmu gatavs darboties.
Taču šī veidlapa vēl nav pievienota nekur, tāpēc darīsim šādi.
Pieņemsim, piemēram, ka šīs formas darbība nebūs līdzīga vietnei
google.com, ko mēs iepriekšējo reizi darījām ar kaķiem.
Tagad es būšu gan šīs vietnes priekšgals, gan aizmugure.
Priekšgals ir tas, ko cilvēks redz — tīmekļa lapa, grafika, formas.
Aizmugure ir tā, ko cilvēks parasti neredz — Python kods, SQL kods,
pats serveris.
Bet tagad es kontrolēju abas pieredzes puses, HTML un arī maršrutus.
Tāpēc vienkārši ierosināsim mums izdomāt savu maršrutu un tā vietā,
lai to nosauktu par /search, kā to dara Google, nosauksim to par
/greet.
Un ļaujiet man norādīt, ka metode, ko šī forma izmantos, kas tehniski
ir noklusējuma metode, būs get.
Un mulsinoši get ar mazajiem burtiem, lai gan pie aploksnes tēmas mēs
runājam par to praktiski, patiesībā tie ir lielie burti.
Atkal, kreisā roka nerunāja ar labo roku, kad šīs lietas tika
izlemtas.
Labi, tāpēc viss, ko esmu paveicis, ir izveidojis tīmekļa formu, kas
maršrutam ar nosaukumu /greet nosūtīs jebkuru tekstlodziņa vērtību.
Pēc noklusējuma, tā kā nav HTTP vai HTTPS, vai domēna nosaukuma,
/greet tiks pieņemts, ka tas nav google.com, bet gan mana servera
URL.
Tātad, vienalga kāds ir mans code space URL, tas būs netiešais
prefikss.
Šis /greet ir tikai maršruts.
Tātad tagad atgriezīsimies pie VS code app.py faila.
Kā man tagad to savienot kopā?
Es domāju, ka mums der izmantot index.html.
Ja index.html dzīves mērķis ir tikai izspļaut šo formu, mēs esam
pabeiguši darbu ar vienu no maniem maršrutiem.
Bet, ja es vēlos iegūt otru maršrutu — greet—, kas faktiski izvada
kādu sveicienu lietotājam, sagatavosim arī šo veidni.
Ļaujiet man turpināt un izcelt visu šo HTML.
Ļaujiet man atgriezties savā termināļa logā un savā Hello direktorijā
un pēc tam savā veidņu direktorijā.
Un ļaujiet man izveidot citu veidni ar nosaukumu greet.
HTML, kura dzīves mērķis būs nevis parādīt formu, bet gan sveikt
lietotāju ar Hello, tāds un tāds.
Tāpēc šajā failā es ielīmēšu visu to pašu HTML, bet es atbrīvošos no
formas un būtībā atgriezīšos pie mūsu iepriekšējās versijas — Hello,
komats-- un pēc tam izmantošu Jinja sintakses vārdu.
Tātad viena veidne-- index.html-- ir paredzēta formai.
Otrā veidne tagad ir paredzēta sveicienam - Hello, komats, tāds un
tāds.
Bet citādi šie faili, ievērojiet, ir gandrīz vienādi, izņemot vienam
ir forma, bet vienam ir tikai Hello.
Tagad pabeigsim to vietnē app.py.
Ļaujiet man iet uz leju pēc pāris tukšām rindiņām stilistiski,
ļaujiet man veikt app.route, atvērējpēdiņas,
aizvērējpēdiņas,”/greet”-- bet es varētu saukt šo maršrutu kā vien
vēlos.
Es tikai izmantoju loģisku darbības vārdu.
Tad definēsim citu funkciju.
Es varētu saukt funkciju jebkā, kā vēlos, X, Y vai Z.
Es to nosaukšu saprātīgāk par greet.
Nekādu argumentu.
Un tad tagad ir kods, kurā es vēlos renderēt veidni.
Tāpēc es ievadui - return, render, template, greet.
HTML.
Bet man ir jādara vēl viena lieta.
Ko vēl es vēlos darīt, ja vēlos, lai greet.html būtu piekļuve cilvēka
vārdam?
Atkārtojumam.
Es domāju, ka mēs to jau atrisinājām, bet es to izdzēsu.
Bet kas man ir jāpievieno?
Jā.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Jā, tāpēc man kaut kā bija jāiekļauj vietturis.
Tāpēc es to varu izdarīt vairākos dažādos veidos.
Šoreiz es to paturēšu nedaudz elegantāku.
Es vienkārši ievietošu tur savu vārda — argumentu — un iestatīšu to
vienādu ar request.args.GET, atvērējpēdiņas, aizvērējpēdiņas, “name”,
“world”.
Pirms tam es izmantoju atsevišķu mainīgo, bet es to izmantoju tikai
vienā vietā, tāpēc tas nav absolūti nepieciešams.
Tāpēc arī tas ir labi, bet, ja tas kļūst nedaudz par daudz,
ievērojiet, ka es varu arī izdarīt šādi.
Es varu izveidot faktisko mainīgo ar nosaukumu name, un tad es varu
nodot argumentu ar nosaukumu name ar vērtību, kas ir šis mainīgais.
Bet atkal kāda jēga šeit ir?
Tas bija kaut kā skaistāks vienā rindā.
Tātad tās ir tieši tās pašas lietas, es tikai cenšos šeit lietas
padarīt vēl kompaktākas.
Labi, kas tikko notika?
Ja es atgriezīšos savā formā, šī joprojām ir index.html.
Ja es to ielādēju, nekas nav mainījies.
Ja es ierakstu savu vārdu šajā formā-- ņemiet vērā vēlreiz, URL, kurā
pašlaik atrodos-- šis pārlūks Chrome slēpj lietas, tehniski/pēc
noklusējuma, lai gan mūsdienās daudzas pārlūkprogrammas vienkārši
slēpj nevajadzīgas rakstzīmes.
Bet skatieties, kas notiek tagad, ja es ritināšu šeit un
noklikšķināšu uz greet šajā jaunajā formā.
Pamanījāt?
Mans URL, mans maršruts ir mainīts uz /greet ?name=David.
Un lapas augšdaļā pa kreisi ir rakstīts: Hello, David.
Tātad tieši šādi darbojas vietne google.com, un tā mēs pēdējo reizi
ieviesām HTML.
Bet tā vietā, lai iesniegtu formu Google, izmantojot veidlapu, es to
iesniedzu sev, mans paša maršruts.
Tāpēc es ieviešu savu aizmuguri šai pašai priekšējai daļai.
Labi, vēl ir kādi jautājumi?
Protams, tas ir daudz mazāk interesants nekā Google, taču tagad mums
ir visi vadi savienoti.
Vai ir kādi jautājumi?
Nē?
Labi, ko mēs varam darīt, lai to padarītu vēl kompaktāku un ievērotu
dažas konvencijas?
Ļaujiet man ierosināt, ka šajā versijā mēs atrisinām vienu problēmu.
Un pat tad, ja jūs nekad iepriekš neesat darījis šādas darbības, es
uzdrošinos apgalvot, ka mums ir pietiekami daudz nedēļu CS50, kur, ja
es vēlreiz parādīšu index.html un vēlreiz greet.HTML, iespējams, kāds
uzskatīs, ka ir iespēja uzlabojumiem.
Kāpēc šī tīmekļa lietotne-- lai gan tā ir ļoti vienkārša-- šobrīd ir
neapšaubāmi slikti izstrādāta?
Un atbilde ir kaut kur šajās divās veidnēs — index.html un greet.HTML.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Jā, tās ir gandrīz vienādas, izņemot pamatsaturu.
Un tas nebija nekas liels, ir tikai divas lapas.
Tātad, ko es kopēju, ielīmēju vienreiz?
Bet iedomājieties tagad parastu vietni vai pat savas mājas lapas,
kurās ir trīs, četras vai vairāk lapas.
Es domāju, ka šobrīd jūs tikai kopējot un ielīmējat visu, godīgi
sakot, kā jūs, iespējams, darījāt savā mājaslapā.
Kāpēc?
Jo, ja jums ir tikai HTML, iespējams, CSS un pat JavaScript, viss, ko
varat darīt, ir kopēt ielīmēt, kopēt ielīmēt un vienkārši
pārliecināties, ka jums ir tāda pati struktūra.
Varbūt jums ir tas pats CSS fails, tas pats JavaScript fails, tās
pašas trešo pušu bibliotēkas, taču tas padara to ļoti, ļoti
kaitinošu, kā jūs, iespējams, jau sapratāt, vienkārši veikt izmaiņas,
kas ietekmē visu.
Tātad, vai nebūtu jauki ņemt vērā visu šo un visu šo un vienkārši
ļaut pamatdaļai mainīties?
Tātad arī šeit ir kaut kas tāds, ko mums ļauj darīt Flask un citi
līdzvērtīgi satvari.
Tas ļauj mums izveidot to, ko mēs parasti saucam par izkārtojumu.
Tāpēc es iešu uz priekšu un darīšu šādi.
Es pēdējo reizi kopēšu visu to pašu HTML.
Es ieiešu savā termināļa logā un pēc vienošanās izveidošu failu ar
nosaukumu layout.HTML.
Tas patiešām būs sava veida uzmetums.
Un layout.HTML es ielīmēšu visu to pašu kodu, bet es tagad izmantošu
kādu Jinja sintaksi, lai norādītu, ka es nevēlos šeit pievienot tikai
mainīgo, piemēram, name, lai faktiski pievienotu cita faila saturu.
Tā vietā, lai izmantotu tikai figūriekavas, divas pa kreisi un pa
labi, man ir jāizmanto nedaudz atšķirīga sintakse, lai teiktu, ka
šeit vēlos veselu HTML bloku no kāda cita faila.
Un veids, kā to izdarīt, lai gan sintakse ir nedaudz pārprotama, ir
izmantot atvērtas figūriekavas, procentu zīmi, bloku, pēc tam nākamo
vārdu varat saukt par visu, ko vēlaties.
Tam vienkārši ir jābūt īpaša veida vietturim faktiskajam failam,
nevis tikai mainīgajam.
Es to saukšu par ķermeni tikai tāpēc, ka esmu ķermenī - pamatdaļā.
Tāpēc es vēlos, lai vietturis būtu viss ķermenis.
Un tad ārpus šī jūs vienā vārdā sakāt, bez atstarpes-- gala bloks.
Tātad, godīgi sakot, tas izskatās stulbi.
Un kāpēc mums ir vēl neglītāka sintakse?
Atkal, tikai dažādi programmatūras izstrādātāji pasaulē katrs izvēlas
savu sintaksi savām bibliotēkām.
Tāpēc tās visas izskatās atšķirīgi, bet pēc būtības ir līdzīgas.
Un jūs vienkārši pierodat redzēt atšķirīgo sintaksi.
Tagad šis nav ne tuvu tik glīts kā mainīgo lielumu figūriekavas, taču
šādi es varu teikt, ka šeit pievienojiet visa faila saturu.
Un ko tas man tagad ļauj darīt?
Tagad varu atgriezties savā index.html failā, kas šobrīd joprojām
izskatās šādi, taču gandrīz viss ir kopēts un ielīmēts.
Vienīgās interesantās un atšķirīgās līnijas ir šīs četras līnijas
šeit, pamatdaļā.
Tāpēc tagad es varu to izcelt un izgriezt, pēc tam izcelt visu pārējo
un vienkārši izdzēst visu failu.
[? %extends"layout.html"% ?] Un tad
Noslēdzu savu domu ar % un aiztaisu figūriekavas.
Tātad šī sintakse, kā jūs varētu tikai secināt, tagad saka: lūdzu,
paplašiniet jebko, kas izskatās kā layout.HTML.
Tas ir sākotnējais uzmetums, no kura es vēlos izveidot šo tīmekļa
lapu.
Un tagad arī sintakse ir nedaudz dīvaina, bet līdzīga, vismaz no
iepriekšējiem.
Tagad varu teikt, ka bloks-- pamatdaļas bloks, kuru es vēlos, lai jūs
pievienotu šim izkārtojumam, būs viss starp šiem diviem tagiem, ko
mēs jau redzējām iepriekš.
Bet layout.HTML tie ir sava veida vietturi.
Vietnē index.html tas ir tas, ko es pievienošu arī citiem vietturiem.
Tāpēc es atvēlēšu sev papildu atstarpi.
Es ielīmēšu tur esošo HTML.
Ja es vēlos precizēt, kas notiek, es varu to izdarīt ar atkāpi, lai
gan tam nav funkcionālas ietekmes.
Bet tas tikai parāda, ka tāpat kā HTML varat atvērt Jinja tagu un
aizvērt to.
Bet šeit, Jinja, mums ir šis šeit-- hei, Python, šeit ir šīs lapas
pamatdaļa.
Hei Python, šeit beidzas šīs lapas pamatdaļa.
Un visas šīs lietas ir jāpievieno šim galvenajam vecāku izkārtojumam,
tāteikt.
Jāatzīst, ka tik ļoti neglīts, bet tagad vismaz lietas kļūst mazāk
liekas, jo es šeit darīšu tieši to pašu.
greet.HTML tas izskatās šādi.
Bet tagad es darīšu šādi — paplašina izkārtojumu.HTML arī, tāpat kā
iepriekš.
Pamatdaļa, kuru vēlos pievienot, būs viss, kas ietverts šajos šeit
esošajos tagos.
Un šī pamatdaļa vienkārši būs Hello, vārds figūriekavās, šādi..
Tātad atkal neglīti — sintakse ātri kļuva ļoti neglīta.
Bet tagad tiek tikai sekots šiem modeļiem.
Un mums ir divu veidu vietturi.
Divas figūriekavas mainīgajiem, un tagad šāda veida sintakse ar
procentu zīmēm un vienām figūriekavām faktisko failu saturam.
Un tagad šajā pasaulē vai mājaslapas pasaulē, ja jūs izmantotu Flask
un Python, lai izveidotu savu personīgo mājas lapu ar visām šīm
dažādajām lapām, jūs, iespējams, izveidotu vienu galveno izkārtojumu
ar visiem saviem skaistajiem logotipiem, krāsām un fontiem, kā arī
to, kā vēlaties, lai vietne izskatītos.
Un tad katra jūsu mazākā lapa tagad tiktu sadalīta tikai šajos
mazākajos fragmentos.
Un neatkarīgi no tā, vai tiek izmantota Python, Java, JavaScript vai
arī citas valodas, visām dažādajām programmēšanas valodām ir
populāras sistēmas, kas veic šādas darbības.
Ideja visiem ir vienāda.
Labi, paskatīsimies, vai tas darbojas.
Atgriezīsimies pārlūkprogrammā.
Ļaujiet man atgriezties savā /route.
Te ir tāda pati forma.
Ļaujiet man ierakstīt Davidun ierakstīt -- un noklikšķināt uz greet.
Un tiešām es redzu Hello, David, es redzu, ka pārlūkprogramma
automātiski pievienoja sveicienu vietrādim URL, kad es iesniedzu
formu, kam sekoja atslēgu - vērtību pāri.
Un, ja es skatos lapas avotu tāpat kā iepriekš, jūs redzēsit, ka jums
ir viss izkārtojums ar pievienotu Hello, David.
Tikmēr, ja es atgriezīšos formāun skatīšu šo lapas avotu, jūs
redzēsit tieši tādu pašu izkārtojumu, bet ar pievienotu formas tagu.
Un šeit jūs varat būt nedaudz mazāk izvēlīgs ar stilu.
Labi, jā, tas nav tehniski ievilkts pamatdaļas iekšpusē.
Bet tas bija attiecībā pret sākotnējo failu.
Tāpēc šajā spēles brīdī jums nav jāuztraucas par to, ka izvadītais
HTML izskatīsies ļoti skaists.
Jūs vēlaties, lai jūsu pirmkods, ko cilvēki redz, būtu skaists, nevis
pārlūkprogramma.
Tas nav stilistisks jautājums.
Labi, jautājumi par šīm iespējām Flask?
Vai problēmām, kuras mēs tikko esam atrisinājuši un kāpēc?
Jā.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Labi.
Tātad, ja attiecīgie faili atrodas dažādās mapēs-- piemēram, ja es
atgriežos savā index lapā, kurai ir forma, maršruti šeit ir pilnībā
atkarīgi no faila app.py satura.
Tīmekļa lietojumprogrammas ieviešanā vairs nav tāda mapes jēdziena.
Tie ir vispārīgāki maršruti.
Tomēr, un mēs to vēl neesam izdarījuši, varat ievietot savu statisko
saturu-- savus attēlus, video failus, CSS failus– mapē, ko sauc
static, un var būt apakšmapes, kurās tie atrodas.
Un tas ietekmētu to, ko izmantojat kā avota atribūtus attēliem vai
avota tagus videoklipiem, vai kādu no šīm lietām.
Un galu galā mēs to redzēsim mājās-- nākamajā uzdevumā.
Citi jautājumi par to, ko mēs tikko šeit esam paveikuši?
Jā.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Labs jautājums, kā es varu nodrošināt, ka tīmekļa
lietotne tiek startēta formā un pēc tam pāriet uz Hello lapu?
Tātad neatkarīgi no tā, kāds ir noklusējuma indeksa maršruts,
piemēram, nespecificētā slīpsvītra, tas tiks izvilkts, kad lietotājs
apmeklēs domēna nosaukumu, kurā tiek mitināta jūsu vietne.
Tātad, ja es atgriezīšos šeit pie app.py, jo mans /route ir
paredzēts, lai atgrieztu index.html, tieši tāpēc šī atbilde tika
atgriezta.
Labs jautājums.
Labi, tātad tālāk, tagad apsvērsim privātuma jautājumus.
Un mēs pieskarsimies arī šim jautājumam, kad nonāksim pie tādām
problēmām kā iepirkumu grozi un sīkfaili, ja es šeit pietuvināšu
URL — lai gan pats URL ir nedaudz garš, neglīts un neskaidrs-- bet
kad es ierakstu savu vārdu un nospiedžu greet, protams, mēs URL
redzam name=David.
Kādā ziņā tas varētu būt slikts dizains?
Vai arī kāda veida tīmekļa lietotnēs jūs, iespējams, nevēlaties, lai
vārds tiktu rādīts šādā URL?
Jo tas ir tas, ko dara Google, un to dara mana lietotne.
Jā.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Jā.
Tātad, ja es piesakoties ar lietotājvārdu un paroli, es varētu
iedomāties, ka tie tiek parādīti vietrādī URL aiz jautājuma zīmes,
kur lietotājvārds=malan un parole=12345, bet tad viss, kas maniem
ziņkārīgajiem brāļiem un māsām ir jādara - ir jāiet cauri manai
pārlūkprogrammas vēsturei un bum, tie ir tieši tur, lai viņi varētu
kopēt un ielīmēt.
Tāpēc tas nešķiet īpaši droši.
Vai arī, ja kāds iet jums garām kafejnīcā, viņš var vienkārši
apskatīt jūsu URL, ja tas ir atklāts pārlūkprogrammā un arī viņš to
redz.
Tāpēc GET ne vienmēr ir labākais darbības vārds, lai gan tas ir
noklusējuma formuiesniegšanas veids.
Parasti, ja jums ir kaut kas kaut nedaudz sensitīvs vai kaut kas
svarīgs— vai tā būtu parole, kredītkartes numurs, vai attēls vai
videoklips, ko augšupielādējat pakalpojumā Instagram vai YouTube, vai
jebkurā līdzīgā vietnē, piemēram, tā-- jūs nevēlaties, lai dati tiktu
iekļauti URL.
Un, par laimi, patiesībā ir vienkāršs veids, kā to novērst.
Es varu atvērt savu formu, kas pašlaik ir index.html, un varu
vienkārši mainīt metodi no GET uz post.
Šeit ar mazajiem burtiem, bet darbības vārds virtuālajā aploksnē, par
kuru mēs runājām pagājušajā nedēļā, pats par sevi būtu ar lielo Post.
Tagad diemžēl skatieties, kas šeit notiek.
Ļaujiet man pāriet uz savu sākotnējo formu, dodoties atpakaļ uz
/route--, un es atkārtoti ielādēju lapu, lai pārliecinātos, ka saņemu
pēdējo, jaunāko HTML.
Un tikai, lai apstiprinātu šeit-- jā, ja es skatos avotu, metode
tagad ir POST.
Ļaujiet man tagad ierakstīt David un noklikšķiniet uz greet.
Un iepriekš mēs redzējām Hello, David.
Bet tagad es saņemu metode nav atļauta.
Un tas ir nedaudz niansēti, taču cilnes nosaukumā ievērojiet, ka tā
ir 405 kļūda, kas, iespējams, nav pazīstama.
Gandrīz visi no mums ir redzējuši, ka 404 fails nav atrasts.
Izrādās, 405, kas ir nedaudz noslēpumaināka, ir metode.
HTTP darbības vārds nav atļauts.
Kāpēc?
Jo pēc noklusējuma mana app.py pašlaik atbalsta tikai GET pēc
noklusējuma.
Kā es varu atbalstīt POST?
Man tikai vajag mazliet vairāk sintakses.
Tāpēc ļaujiet man atgriezties pie VS Code šeit.
Ļaujiet man tagad doties uz app.py.
Un pēc formas maiņas man tikai jāinformē Flask, ka metode, kuru es
vēlos izmantot šajā lieliskajā maršrutā, nedrīkst būt noklusējuma,
kas ir tikai GET, es vēlos, lai tas izmanto šīs metodes.
Un tam ir vajadzīgs otrs arguments, ko sauc par methods, kura vērtība
ir saraksts, kura noklusējuma vērtība ir, atvērējpēdiņas,
aizvērējpēdiņas, “GET”.
Tātad tas ir noklusējuma iestatījums.
Tas nav veicis nekādas izmaiņas.
Bet, ja tā vietā vēlos atbalstīt POST, varu nepārprotami nodot
sarakstu ar vienu virkni-- tā vietā POST.
Un ko tas tagad nozīmē?
Pagājušajā nedēļā mēs par to nerunājām sīkāk, taču šajā virtuālajā
aploksnē parasti ir tāda rindiņa kā GET/search, queue=cats aiz
jautājuma zīmes.
Ja vēlaties paslēpt šāda veida informāciju privātuma labad vai tāpēc,
ka vēlaties augšupielādēt attēlu, kuru vienkārši nav jēgas ievietot
URL, būtībā stāsta daļa būtu tāda, ka dators skatās dziļāk iekšā
virtuālajā aploksnē.
Un viss, kas tiek iesniegts ar POST, atrodas zem HTTP galvenēm, tā
kā, dziļāk šajā aploksnē.
Tātad viņi joprojām ir tur.
Lietotāja pārlūkprogrammā tie vienkārši nav skaidri redzami
ziņkārīgām acīm.
Tātad, vienkārši veicot šīs izmaiņas HTML, liekot pārlūkprogrammai
iesniegt datus, izmantojot POST, un mainot app.py, lai norādītu
maršrutu, lai sagaidītu datus, izmantojot POST, tagad varu
atgriezties savā otrā cilnē.
Ļaujiet man atgriezties sākotnējā lapā.
Ļaujiet man atkārtoti ielādēt, lai man būtu jaunākais HTML.
Un patiešām, skatiet lapas avotu, tas joprojām ir — jā, tas joprojām
ir POST.
Bet tagad, kad es ierakstu DAVID un noklikšķinu uz greet tagad, tas
darbojas.
Bet, bet, bet ievērojiet privātuma ietekmi — es esmu greet maršrutā,
bet kur ir mans vārds?
Tā patiesībā tur nav.
Tas joprojām tika nosūtīts uz serveri, taču tas tagad nav iekļauts
jūsu automātiskajā pabeigšanā vai vēsturē privātuma labad.
Vai tagad ir jautājumi par POST?
Jā.
Nē?
Tikai paknosijās.
Labi, vai jūs, programmētājs, to redzat?
Ļaujiet man parādīt dažas citas Chrome funkcijas — Chrome un Safari,
kā arī citas pārlūkprogrammas.
Es turpinu skatīt lapas avotu, kas tikai parāda read only jūsu HTML
versiju.
Taču atcerieties, ka pagājušajā reizē es faktiski noklikšķināju ar
peles labo pogu un devos pārbaudīt vai apskatīju izstrādātāju rīkus.
Un tas parādīs daudz labāku izstrādātāja rīku versiju.
Un zem elementiem šeit jūs redzat visu.
Un tas ir jauki un skaisti izdrukāts, tas ir hierarhisks, tas sakļauj
lietas šajos noklikšķināmos trīsstūros, taču tas ir tieši tas pats.
Tas ir tikai interaktīvāks.
Bet ievērojiet, ko es varu darīt šodien, ja es šeit atveru cilni
Network un ļaujiet man nedaudz attālināt, ļaujiet man turpināt un
atkārtoti ielādēt formu šeit un vēlreiz ierakstīt David un
noklikšķināt uz greet.
Ņemiet vērā, ka tagad Chrome izstrādātāju rīku cilnē Network redzu
dažas lietas, kā mēs redzējām iepriekš.
Pirmkārt, es redzu, ka pieprasījuma metode ir POST.
Otrkārt, es redzu, ka serveris automātiski, man nerakstot nekādu
kodu, atgriež 200, kad viss ir veiksmīgi.
Bet es varu ritināt uz leju, uz leju, uz leju, uz leju, uz leju, un
jūs to redzēsit pēc visiem šiem sīkfailiem-- vairāk par tiem vēlāk.
Ja es noklikšķinu uz payload, otrā cilne blakus galvenēm, jūs kā
izstrādātājs varat redzēt, kas faktiski tika nosūtīts serverim.
Tik tiešām, šis.
Tas būs ļoti noderīgs, piemēram, veicot devīto problēmu kopu,
iespējams, jūsu gala projektus, ja vēlaties redzēt, kas nonāk no
pārlūkprogrammas uz serveri, jums ir pilnīga kontrole pār visu šo
informāciju.
Pat ja jūs izmantojat HTTPS, jo jūsu pārlūkprogramma un jūs,
izstrādātājs to visu noteikti var redzēt.
Tātad atkal, šie izstrādātāja rīki, lai gan ir daudz cilņu un pogu,
kas jums, visticamāk, drīz vairs nebūs vajadzīgas, daži no tiem,
piemēram, elements un network, un ar JavaScript konsoli būs ļoti
noderīgi, sākt iepazīties ar tiem .
Labi, vai jums ir jautājumi par šo POST ietekmi?
Vispār kaut kas?
Nē?
Labi, kā būtu ar vienu pēdējo Hello piemēru, kas sasaista dažas no
šīm lietām.
Tagad mēs cenšamies padarīt lietas vēl kompaktākas, tikai sagaidot
kaut ko līdzīgu 9. problēmu kopai vai patiešām sarežģītākām tīmekļa
lietotnēm, kur jums varētu būt nevis divi, bet 20 vai pat vairāk
dažādu maršrutu.
Varētu būt ideāli samazināt kopējo maršrutu skaitu.
Lai mēs nekļūtu pārāk pārslogoti.
Un es uzdrošinos apgalvot, ka šie divi maršruti ir tik īsi, varbūt es
varu tos apvienot vienā.
Un varbūt es varu paturēt lietotāju tajā pašā URL, bet tikai tāpēc,
lai sakārtotu lietas.
Tāpēc ļaujiet man ierosināt darīt šādi.
Ļaujiet man atbrīvoties no sava greet maršruta un ļaujiet man atvērt
savu formu index.html un ļaujiet man turpināt, un šīs formas darbība
joprojām ir slīpsvītra.
Es vēlos, lai forma būtu redzama pie slīpsvītras, vietnes indeksa.
Taču es arī vēlos, lai forma tiktu iesniegta pati par sevi kaut vai
tāpēc, ka nevēlos ieviest citu maršrutu, piemēram, greet, kas galu
galā patiešām būs pārliecinošs, lai jums nebūtu viens maršruts visam,
ko vēlaties darīt savā vietnē.
Tātad tehniski tas ir arī noklusējuma iestatījums, un, ja es izlaistu
darbību, notiktu tieši tas pats.
Bet ļaujiet man attīt atpakaļ un doties uz app.py, lai redzētu, kā
mēs varam to panākt.
Nu, ja es vēlos, lai mans vienīgais un tagad vienīgais maršruts
atbalstītu abas metodes, es varu pateikt metodes = un pēc tam
sarakstu ar GET un POST jebkurā secībā, bet es saglabāšu tos
alfabētiskā secībā šādi.
Tagad Python saka: Hei, šim maršrutam ir jāapstrādā gan GET, gan POST
pieprasījumi vienā un tajā pašā vietā.
Tagad pievērsīsimies šai funkcijai.
Es gribu teikt kaut ko līdzvērtīgu šim — ja GET, tad es vēlos
atgriezt formu.
Citādi, ja POST, es vēlos atgriezt greet.HTML render template ar
lietotāja vārdu.
Bet tas vēl nav pilnīgs kods, bet es domāju, ka varu to izdarīt.
Es iešu uz priekšu un saglabāšu tālāk norādīto.
Es teikšu, ja request.method = = GET, tad tiešām atgriezt index.html.
L if request.method = = POST, dodieties uz priekšu un atgrieziet
greet.HTML.
Tomēr ar to nepietiek, jo es joprojām vēlos nodot šo vietturi.
Tāpēc ļaujiet man vēlreiz pievienot name=request.args.GET,
atvērējpēdiņas, aizvērējpēdiņas, “name” un pēc tam world noklusējuma
vērtību.
Ko tas tagad dara manā labā?
Ļaujiet man atgriezties pie savas citas cilnes šeit.
Ļaujiet man aizvērt izstrādātāju rīkus, atgriezties pie formas šeit,
ļaujiet man atkārtoti ielādēt, lai pārliecinātos, ka man ir
jaunākais.
Ļaujiet man apskatīt lapas avotu, lai pārliecinātos, ka man ir
jaunākais — un jā, man ir jaunākais, jo joprojām ir rakstīts POST.
Bet tagad ir rakstīts slīpsvītra.
Un paskatīsimies, kas tagad notiks.
Ja es ierakstu savu vārdu David, kas iepriekš tika iesniegts,
izmantojot POST, tāpēc es neredzēju nevienu vārdu vai tā vērtību
vietrādī URL, taču es nokļuvu /greet.
Bet, ja darbība tagad ir slīpsvītra, es noklikšķinu uz greet,
ievērojiet, ka tā joprojām darbojas.
Es redzu, Hello, world, lai gan tas īsti nedarbojās.
Tāpēc mēs pēc brīža atgriezīsimies pie šī jautājuma.
Taču ievērojiet, ka URL beidzas ar slīpsvītru.
Un atkal Chrome slēpj slīpsvītru, jo tas ir viss, kas tur ir, bet tas
nebeidzas ar name=David šajā gadījumā vai name=world.
Tagad ievērojiet arī to-- ja es atkārtoti ielādēšu, es saņemšu šo
brīdinājumu.
Vai vēlaties apstiprināt formas atkārtotu iesniegšanu?
Lapa, kuru meklējat, izmantoja jūsu ievadīto informāciju.
Atgriežoties šajā lapā, visas jūsu veiktās darbības var tikt
atkārtotas.
Vai vēlaties turpināt?
Iespējams, esat to redzējis vietnēs, kuras patiešām apmeklējāt, kur
nospiedāt atkārtotu ielādi un tika parādīts uzaicinājums-- uzgaidiet,
vai vēlaties to darīt?
Iespējams, ka esat saņēmis aicinājumu atkārtoti ielādēt, jo kāpēc?
Viss, ko jūs tikko izdarījāt, bija POST, nevis GET.
Un pēc vienošanās, papildus POST tiek izmantota privātuma nolūkos,
lai paslēptu jūsu lietotājvārdu, paroli, kredītkartes numuru vai
tamlīdzīgi.
POST tiek izmantots ne tikai lielāku failu, piemēram, attēlu vai
video, augšupielādei, bet arī parasti tiek izmantots, lai veiktu
izmaiņas serverī, pievienotu kaut ko iepirkumu grozam vai pievienotu
kaut ko datubāzei.
Savukārt GET, kā norāda nosaukums, ir tikai informācijas iegūšana,
nevis informācijas ievietošana vai sūtīšana.
Tātad pārlūkam Chrome ir jābūt nedaudz uzmanīgam, jo, ja tikko
izrakstījāties no vietnes Amazon un pēc tam nospiežat atkārtotu
ielādi, jūs nevēlaties nejauši iegādāties to pašu grāmatu vēlreiz, tā
sakot, lai gan Amazon un smalkām vietnēm ir citi aizsardzības
līdzekļi arī, lai izvairītos no šīs problēmas.
Tomēr tagad šeit ir kļūda.
Tajā ir rakstīts Hello, world, nevis Hello, David, un patiesībā tas
būtu teikts pirms brīža, un es vienkārši nepārbaudīju kodu un
neatklāju jums tik daudz.
Vai arī, ja es to darīju, es pat nepamanīju, ka tajā ir rakstīts
Hello, world, nevis Hello, David.
Izrādās, ka request.args tiek izmantots tikai priekš GET.
Izmantojot GET, request.args ir vārdnīca, kurā ir visi jūsu
atslēgu-vērtību pāri.
Bet nedaudz mulsinoši, izmantojot POST ar Flask, jums jāiet uz
request.form.
Man nav ne jausmas, kāpēc tie nav acīmredzamāki pretstati, piemēram,
request.GET, request.form un - atvainojiet, request.GET un
request.POST būtu saprātīgi nosaukumi.
Tomēr šajā gadījumā mums ir request.args GET un request.form POST.
Labi, tomēr tas ir viegli labojams.
Ja es atgriezīšos šeit pie VS Code, mainīsim request.args uz
request.form.
Atgriezīsimies pie citas manas cilnes.
Ļaujiet man vienkārši pārlādēt, un jūs zināt, ko?
Es teikšu: Labi, turpiniet atkārtoti iesniegt to pašu veidlapu, jo
veidlapa bija pareiza, tas bija mans Python kods, kas bija kļūdains.
Nospiežot taustiņu Enter, tagad tiek piekļūts David OK.
Bet skatieties uz šo — vēlreiz, ja es nospiežu Reload, Command R vai
Control R, es saņemu to pašu brīdinājumu.
Vai tiešām vēlaties iesniegt formu?
Jā.
Ja es to daru manuāli, izmantojot atkārtotas ielādes ikonu, saņemu
tādu pašu brīdinājumu kā iepriekš.
Bet, ja es vēlos manuāli ierosināt GET pieprasījumu, tas strādā.
Nespiediet pārlādēt un nosūtiet to pašu pieprasījumu.
Tā vietā dodieties uz savu URL un vienkārši novietojiet kursoru tur
un nospiediet taustiņu Enter.
Un tagad ievērojiet, ka tas pats URL pēc noklusējuma ir GET.
Tāpēc ikreiz, kad jūs un es esam ierakstījuši URL pārlūkprogrammās,
GET vienmēr ir noklusējuma iestatījums.
Tikai tad, kad noklikšķināt uz pogas, ko programmētājs ir
konfigurējis, lai izmantotu POST, jūs patiešām pievienojat preces
iepirkumu grozam vai tamlīdzīgi.
Labi, mēs esam atpakaļ.
Un, ja es pats atgriežos pagātnē, es uzskatu, ka šī patiešām ir pirmā
tīmekļa lietojumprogramma, ko izveidoju 1997. gadā.
Tātad tajā laikā šis būtu bijis mans otrā kursa gads.
Es izmantoju CS50, es sekoju kursam ar nosaukumu CS51, kas ir cita
veida programmēšana.
Un tad es diezgan daudz iemācīju sev valodu, ko sauc par Perl, kas
mūsdienās ir nedaudz mazāk populāra.
Bet tā ir cita valoda, piemēram, Python, piemēram, Java, piemēram,
JavaScript, tāpat kā citas, ko var izmantot, lai izveidotu tīmekļa
lietojumprogrammas.
Un tīmeklis tajā laikā bija ļoti jauns, un process, kurā studenti,
mani klasesbiedri, varēja reģistrēties pirmā kursa iekšējai sporta
programmai — AKA frosh IM bija jāpaņem papīra lapa un jāuzraksta tajā
jūsu vārds un e-pasta adrese, un jāiet pa pagalmu uz Viglsvortu,
manuprāt, kur dzīvoja prokters.
Un jūs pabīdījāt papīra lapu zem durvīm, un tā mēs iesniedzām
veidlapas manā laikā.
Tāpēc šī bija iespēja pat 1997. gadā pārvietot lietas tiešsaistē.
Un vietne turpināja dzīvot līdz 2007. gadam.
Es to atradu tiešsaistē, un pēc tam tā kļuva par kaut ko citu.
Bet šī bija vietne, kurā cilvēki varēja reģistrēties sportam, un
cilvēki varēja reģistrēt dažādu spēļu rezultātus un, ko tik nē.
Un tāpēc zem pārsega es tajā laikā pat neko nezināju par datu bāzēm,
tie bija tikai CSV faili, kuros es glabāju datus.
Bet bija HTML formas.
Un tur bija ar Perl, tā laika valoda, veids, kā darīt tieši tādas
lietas, ko mēs tikko darījām jau ar Flask.
Un tāpēc es domāju, ka mēs ieviesīsim mazliet mazāk neglītu versiju.
Atkārtoti grafiskie foni bija Vogue 1997. gadā, kā jūs varat redzēt
šeit.
Bet tā bija tā laika estētika, ieskaitot tā saukto Blink tagu.
Tāpēc koncentrēsimies vismaz uz šīs vietnes funkcionalitāti, nevis
tik daudz estētiku, un noskaidrosim, vai mēs varam ieviest kaut ko no
santehnikas, lai faktiski atrisinātu reālo pasauli atspoguļojošu
problēmu.
Neatkarīgi no tā, vai tas ir pirmkursnieku iekšējais sporta veids vai
kaut kas cits tamlīdzīgs, kur iegūstat datus no lietotājiem un kaut
kā tos apstrādājat.
Tāpēc ļaujiet man pāriet uz VS Code.
Ļaujiet man izveidot jaunu direktoriju ar nosaukumu frosh IM, lai mēs
varētu saglabāt visu šo kodu savā direktorijā.
Ļaujiet man ieiet frosh IM ar CD .
Ļaujiet man aktīvi izveidot citu direktoriju, ko sauc par templates,
kurā mūsu veidnēm-- mūsu .HTML failiem — ir jādzīvo.
Un galu galā es iešu uz priekšu un minimāli izveidošu divus failus:
app.py un index.html.
Izveidosim pirmo no tiem, app.py dzīvos manā frosh IM direktorijā, un
es tikai gatavojos no jauna izveidot kaut ko ļoti vienkāršu, tāpat kā
iepriekš.
Tātad no flask ar mazajiem burtiem importējiet Flask ar lielo burtu,
rendertemplate un arī request.
Tātad tā pati pirmā rinda kā iepriekš.
Pēc tam ļaujiet man dot sev mainīgo, ko sauc par app, iestatīt to
vienādu ar Flask funkcijas izsaukšanu ar lielo F ar __name__, un pēc
tam ļaujiet man norādīt slīpsvītras maršrutu tāpat kā iepriekš ar
index funkciju.
Lai gan atkal es to varētu saukt par visu, ko vēlos.
Pagaidām atgriezīsim render template, atvērējpēdiņas, aizvērējpēdiņas
"index.html", it kā tāda pastāvētu.
Tātad šī nav tik ļoti tīmekļa lietojumprogramma, cik pašlaik tā ir
tikai HTTP servera izveide vienam failam.
Tagad citā cilnē izveidosim veidņu failu ar nosaukumu index.html.
Un es ietaupīšu dažus taustiņsitienus.
Ļaujiet man nokopēt, ielīmēt gandrīz visu iepriekšējo izkārtojumu.
Esmu jau iepriekš nomainījis nosaukumu uz frosh IM, nevis Hello, taču
šī būtībā ir tā pati veidne.
Tomēr pagaidām, tā kā es atrodos index.html, es vēl neizmantošu
paplašinājumus vai kādu no šīm smalkajām bloka lietām.
Es iešu uz priekšu un izveidošu salīdzinoši vienkāršu formu, ar kuru
toreiz mani klasesbiedri varēja reģistrēties iekšējiem sporta
veidiem.
Tātad, turpināsim šeit, un es ierosināšu mums darīt šādi.
Šajā lapā mums būs forma, kuras darbība būs maršruts ar nosaukumu
/register, lai gan es to varētu saukt jebkā, kā vēlos.
Tas būs nedaudz privāts, tāpēc es izmantošu POST, nevis GET, lai
cilvēki nejauši varbūt nereģistrētos divreiz, nospiežot pārlādēt bez
brīdinājuma.
Šajā formā dosim viņiem ievadi, kur automātiskā pabeigšana, kā
vienmēr, būs izslēgta demonstrācijas labad.
Automātiskais fokuss, lai kursors sākotnēji nonāktu tur.
Šī lauka nosaukums būs burtiski name, jo es gribu sava klasesbiedra
vārdu, ja viņi vēlas reģistrēties kādam sporta veidam.
Vietturis atkal būs, atvērējpēdiņas, aizvērējpēdiņas, "name", lai
viņi redzētu dažus pelēkus norādījumus.
Un šī lauka veids patiešām būs teksts tāpat kā iepriekš.
Un tad man ir jādod viņiem iespēja reģistrēties dažiem sporta veidiem.
Kāpēc gan mums nesaglabāt to vienkāršu, piemēram, savulaik
basketbols, futbols un frisbijs bija trīs no mūsu atbalstītajiem
sporta veidiem.
Un tāpēc ļaujiet man izdarīt šādi-- un jūs, iespējams, to iepriekš
neesat redzējuši, ja vien neesat paši darbojušies ar formām.
Bet es varu izveidot atlases izvēlni-- citādi sauktu par nolaižamo
izvēlni-- HTML valodā, kuras iekšpusē ir vairākas iespējas.
Un katra opcija parasti seko šai paradigmai-- opcijas vērtībai un pēc
tam faktiskajam tekstam, ko redz cilvēks.
Tātad šo iespēju vērtība būs-- kā būtu, ja mēs iekļautu basketbolu kā
pirmo.
Un es vēlos, lai cilvēks redzētu burtiski to pašu.
Lai gan tāpat kā ar saiti HTML, tie varētu būt atšķirīgi, taču es tos
paturēšu nemainīgus.
Vēl viena iespēja būs, teiksim, futbols.
Un... ak, ļaujiet man izlabot savas pēdiņas.
Un šis cilvēks redzēs tieši to pašu, lai gan tas varētu teikt kaut ko
citu.
Un, visbeidzot, vērtība būs, atvērējpēdiņas, aizvērējpēdiņas,
"ultimate Frisbee", un cilvēki tur redzēs to pašu-- ultimate Frisbee.
Labi, tāpēc, kā mēs drīz redzēsim, tiks izveidota tikai nolaižamā
izvēlne ar trim atsevišķām opcijām.
Ja es vēlos, lai skolēni to varētu iesniegt tagad, ļaujiet man dot
viņiem pogu, kuras veids ir submit.
Un šī poga būs kā vārdu reģistrs uz tās.
Tāpēc es domāju, ka viss ir diezgan labi.
Tas viss ir tikai HTML-- ne Python, ne Flask kā tāds, izņemot šīs
pašas veidnes renderēšanu.
Tāpēc ļaujiet man ieiet savā termināļa logā.
Ļaujiet man Flask palaist šajā direktorijā, jo tā vietā man ir
jāsniedz šī lietotne.
Es redzēšu neglītu izvadi, tostarp savu URL.
Un, ja virzīšu kursoru virs tā un pēc tam atvēršu šo URL, man tagad
vajadzētu redzēt interesantāku formu.
Tajā ir ne tikai lauks viņu vārdam, bet arī šī nolaižamā izvēlne ar
visiem trim sporta veidiem.
Tagad šī varbūt nav labākā lietotāja pieredze līdz šim, jo man šķiet,
ka es ietekmēju cilvēkus reģistrēties basketbolam, iespējams, tāpēc,
ka tas ir atzīmēts pēc noklusējuma.
Es domāju, ka daudzās formās mūsdienās ir tukšs formas vietturis.
Tātad tā ir tikai estētiska lieta, bet es to varu izdarīt.
Ļaujiet man atgriezties pie tās pašas formas un ļaujiet man parādīt
tikai tukšu opciju augšpusē, kuru es atspējošu.
Tātad jūs tehniski nevarat to atlasīt proaktīvi, bet es to izvēlēšos
pēc noklusējuma.
Un Sowe droši vien tos HTML atribūtus iepriekš nav redzējusi.
Bet, ja es vēlos šai nolaižamajai izvēlnei izveidot līdzvērtīgu
nosaukumu, es burtiski izveidošu atspējotu opciju, kas tiek
automātiski atlasīta ar nosaukumu Sport, lai jūs to nevarētu atlasīt
kā tādu, bet tā atrodas augšpusē.
Tātad, ja es tagad atgriezīšos savā otrā cilnē, ielādējiet vēlreiz--
tikai nedaudz skaistāk nekā iepriekš.
Un es nemudinu cilvēkus nejauši reģistrēties basketbolam vien.
Un, ja es noklikšķināšu uz šī, jūs redzēsit, ka sport ir pelēkots un
tāpēc nav manuāli atlasāms, taču es joprojām varu atlasīt jebkuru no
šiem pārējiem trim.
Labi, diemžēl, ja es ierakstu David un mēģinu reģistrēties, piemēram,
futbolam un noklikšķināt uz Register, es nonākšu pie /register.
Un tur nav ne jautājuma zīmes, ne vārda, ne sporta veida, tāpēc tas,
iespējams, patiešām ir POST, nevis GET-- tās ir uzvednes — bet nav
atrasts.
Ievērojiet, ka cilne šeit ļoti īsi saka: 404 nav atrasts.
Nu kāpēc tā?
Lai būtu skaidrs, kāpēc /register man iedeva 404?
Kāda te loģika?
Varbūt vienkārši pasakiet acīmredzamo, vai arī... Tā neeksistē, vai
ne?
Mēs vēl neesam izdarījuši šo soli, vai ne?
Tātad kaut kas tik vienkāršs.
Un tāpēc es īstenībā ievēroju šo punktu, jo, apgūstot daudzas šīs
konvencijas un šo to no šīs jaunās sintakses, godīgi sakot, jūs
vienkārši pieļausit muļķīgas kļūdas.
Kaut kas nedarbosies.
Bet atkal atgriezieties pie pirmajiem principiem.
Kāpēc tas nav atrasts?
Labi, reģistrā ir jābūt veidnei, ko var saukt par register.HTML.
Ak, es aizmirsu savu app.route.
Tādai vajadzētu būt domāšanai, mēģinot diagnosticēt šīs problēmas,
virzoties uz priekšu.
Labi, tāpēc ļaujiet man atvērt vietni app.py un piedāvāt otru
maršrutu.
Tātad app.route, atvērējpēdiņas, aizvērējpēdiņas, "/route".
Pēc tam ļaujiet man definēt funkciju, ko sauc par jebko, ko es vēlos,
bet es to nosaukšu — atvainojiet, nevis /route, /register.
Ļaujiet man izsaukt funkciju, lai būtu konsekvence, register.
Tātad-- bet es to varētu saukt par visu, ko vēlos.
Un pagaidām nedarīsim neko pārāk interesantu, atgriezīsim tikai
veidnes, ko sauc par success.HTML, renderēšanu.
Pagaidām izliksimies, ka reģistrācija ir veiksmīga neatkarīgi no tā,
kas jūs esat un ko jūs darāt.
Tagad man ir vajadzīga šī veidne, un šobrīd man ir tikai index.html.
Tāpēc ļaujiet man tagad īstenot savu labāko praksi.
Ļaujiet man to visu nokopēt.
Ļaujiet man-- atsevišķā termināļa logā, ļaujiet man ievadīt kodu--
ļaujiet man ieiet savā frosh IM direktorijā.
Un ļaujiet man izveidot jaunu veidni ar nosaukumu layout.HTML tāpat
kā iepriekš.
Ļaujiet man ielīmēt visu to pašu kodu.
Ļaujiet man izdzēst formu un vienkārši ievietot šo lielo vietturi,
tāpēc es lietoju tikai block body un pēc tam end block.
Tagad šī ir tikai tāda veida konvencija.
Visu pārējo es atstāšu to pašu.
Bet, ja es vēlētos to padarīt skaistāku, es varētu pievienot savu CSS
augšpusē.
Ja es vēlētos pievienot šo trako atkārtojošo fonu, es droši vien
varētu to darīt arī augšpusē.
Tāpēc es varu likt katrai lapai izskatīties tikpat neglītai kā manā
laikā, taču šodien mēs koncentrēsimies tikai uz tekstu.
Labi, pievienojiet tagad, kad man ir šī HTML izkārtojums, ļaujiet man
notīrīt index.html.
Man nevajag visu šo lieko.
Man nav vajadzīgas visas šīs atzīmes augšpusē.
Tā vietā atcerieties, es domāju, ka man vajag tikai pagarinājumus,
atvērējpēdiņas, aizvērējpēdiņas, "layout.HTML" ar atbilstošām zīmēm
un figūriekavām.
Tad man ir atbilstošs bloka korpuss, lai gan es varu saukt pamatdaļu
jebkā, kā vēlos.
Bet es pieturēšos pie savas agrākās prakses.
Un es šeit izdzēsīšu tagus, kas man vairs nav vajadzīgi.
Kāpēc?
Jo, ja es iedziļināšos layout.HTML, man jau ir visi mani atvērtie
tagi, visi mani aizvērtie tagi.
Vienīgais, ko es vēlos index.html, ir tas, kas ietilpst pamatdaļā.
Tātad noslēdziet bloku šeit.
Un, lai būtu pedantiski, ļaujiet man to visu izcelt.
Nospiediet Shift Tab, un tas noņems atkāpi, lai lietas sakārtotu.
Tikai, lai būtu kārtīgi.
Labi, ir labāk, lai gan tagad tas izskatās nedaudz neskaidri.
Bet tagad esmu ielicis pamatus trešās, ceturtās lapas izveidei, kurās
nav visas tās pašas kopēšanas - ielīmēšanas.
Labi, tagad atgriezīsimies vietnē app.py.
Success.HTML ir vieta, kur es pārtraucu.
Labi, ļaujiet man atvērt savu termināļa logu.
Ļaujiet man iekodēt veidni, ko sauc par success.HTML, kuras mērķis
dzīvē ir tikai teikt, ka esat reģistrēts.
Tikai tāpēc, lai mēs uz ekrāna redzētu kādu informatīvu ziņojumu.
Tāpēc šī daļa man joprojām ir jāpaplašina layout.HTML.
Tātad joprojām ir nedaudz kopēšanas - ielīmēšanas, kas ir nedaudz
neglīta, bet lai tā būtu.
Bloķējiet šīs veidnes pamatdaļu, un es tikai teikšu, ka esat
reģistrēts!
Labi, un tad pabeigt bloku.
Tik super vienkārši.
Tā ir tikai informatīva ziņa, ka skolēns ir reģistrēts.
Labi, atgriezīsimies pie sākotnējās formas, kas ir šī.
Ļaujiet man atkārtoti ielādēt, lai pārliecinātos, ka mans HTML ir
atkārtoti ielādēts.
Ierakstīt David, es atkal reģistrēšos futbolam, un noklikšķināšu uz
Register.
Un, ak, interesanti-- metode nav atļauta.
Tāpēc es vairs nesaņemu 404, es saņemu 405 vietnē /register.
Kāda šeit ir doma?
Ko es šoreiz salaidu dēlī?
405 ir progress.
Jā?
Aauditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Tātad tas nav-- vietturis, manuprāt, ir piemērots.
Tagad tas attiecas uz HTTP pamatā esošajām lietām.
Metode nebija atļauta-- nebija atļauta.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Sakiet vēlreiz?
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Tātad arī GET pret POST.
Tātad pēc noklusējuma visi šie Flask maršruti tikai pēc noklusējuma
pieņem GET, jo tas ir droši.
Tas neļauj nosūtīt informāciju serverim gluži tādā pašā veidā.
Bet, ja es tomēr vēlos atbalstīt POST, atcerieties, ka mēs mainām to
uz methods= un pēc tam sarakstu ar atvērējpēdiņas, aizvērējpēdiņas
"POST" .
Tāpēc man vienkārši jāiespējo atbalsts šai metodei, kas ir šis HTTP
darbības vārds.
Labi, atgriezīsimies pie formas.
Pārlādējiet tikai tāpēc, lai pārliecinātos, ka neesmu kļūdījies.
Ierakstu savu vārdu David, nolaižamajā izvēlnē atlasu futbolu,
noklikšķinu uz Register.
Un tagad es neatrodos tikai /register URL, tas apgalvo, ka esmu
patiešām reģistrēts.
Tagad es, protams, neesmu... es neesmu izdarījis neko interesantu.
Nav datubāzes, nav CSV faila, mēs pie tā tiksim pēc brīža.
Bet vismaz man tagad ir uzstādīta infrastruktūra, lai veiktu kaut ko
dinamisku, pamatojoties uz šo sporta veidu.
Labi, kā es varu tagad to uzlabot?
Kā būtu, ja mēs turpinātu un ieviestu-- saglabātu faktiskos
reģistrētos vārdnīcā datora atmiņā.
Tāpēc tā vietā, lai tikai apgalvotu, ka viņi ir reģistrēti, veiksim
atzīmi.
Un vienkāršākais veids, kā mēs to darījām pirms nedēļām Python, ir
vienkārši saglabāt lietas mainīgajā, atmiņā.
Piemēram, saraksts vai vārdnīca, kopa, jebkas tamlīdzīgs.
Labi, ļaujiet man atgriezties pie VS Code un app.py, un es domāju, ka
man šeit būs jāmaina reģistra maršruts, lai sniegtu kādu noderīgu
informāciju.
Bet pirms es reģistrēju lietotāju, padomāsim, kur es vēlos tos
ievietot.
Un tāpēc ļaujiet man ierosināt, kā mēs varētu darīt šādi.
Mana faila augšdaļā ļaujiet man deklarēt globālo mainīgo, ko sauc par
registrants, un iestatīt to vienādu ar tukšu vārdnīcu.
Tātad mēs to esam darījuši iepriekš, kad izmantojām vārdnīcas, lai
saglabātu atslēgu-vērtību pārus.
Un es ierosināšu saglabāt reģistrētos kā vārdnīcu, kāpēc?
Jo es to saglabāšu vienkāršu.
Tāpat kā vārds būs studenta vārds-- vai atvainojiet, atslēga būs
studenta vārds.
Un vērtība būs jebkurš no sporta veida, kuram viņi ir reģistrējušies.
Tātad, David un soccer, un Carter un basketball, un tāpēc, tā sakot,
divu kolonnu vārdnīcai ir sava jēga, kā mēs to bieži attēlojam uz
ekrāna.
Tātad, kā es varu izmantot šo vārdnīcu?
Ļaujiet man iet uz priekšu un darīt šādi.
Šeit, zem /register, ļaujiet man iet uz priekšu un sākotnēji darīt
šādi.
Kā būtu, ja mēs iegūtu lietotāja vārdu no request.form.GET un
iestatītu to vienādu arvārda vērtību.
Un es tagad neievadīšu noklusējuma vērtību, jo es nevēlos to saukt
par studentu pasauli vai kaut ko tamlīdzīgu.
Pagaidām es tikai pieņemu, ka tā tur ir.
Pēc tam izveidosim citu mainīgo, ko sauc par sport, un izpildīsim
request.form.GET, atvērējpēdiņas, aizvērējpēdiņas, "sport", lai
iegūtu šo studentu sporta veidu.
Un tad dosimies uz priekšu un darīsim šādi-- reģistrēto vārdnīcā
indeksēsim to, izmantojot studenta vārdu, un iestatīsim to vienādu ar
jebkuru sporta veidu.
Tāpēc es izmantoju šos mainīgos, lai uzturētu savu kodu sakārtotu, un
tagad es tajā vārdnīcā ievietoju atslēgas - vērtību pāri.
Labi, ko es tagad gribu darīt?
Un tāpēc es teikšu success.HTML, protams.
Dosimies uz priekšu un darīsim šādi.
Bet tagad es domāju, ka success.HTML to nozīmē.
Tāpēc ļaujiet man atgriezties pie formas-- pārlādēt.
Ļaujiet man ierakstīt David un soccer-- register.
Ļaujiet man atgriezties un pateikt Carter un basketball - register.
Labi.
Tagad paskatīsimies, ko es vēlos darīt tālāk.
Kā būtu, ja es ietu... ļaujiet man izvēlēties citu maršrutu un
paspēlēties šeit.
Tātad app.route, dosim sev vēl vienu trešo maršrutu, ko sauc par
registrants, kuru dzīves mērķis ir tikai parādīt man, kas ir visi šie
reģistrētie.
Gluži kā jūs varētu sagaidīt no šādas vietnes.
Un tad ļaujiet man definēt funkciju, ko sauc par registrants vai
jebko citu.
Un tad ļaujiet man atgriezt veidnes ar nosaukumu registerants.HTML
renderēšanas rezultātus.
Un ļaujiet man ieiet-- tas ir diezgan glīti.
Es varu ievadīt registrants=registrants.
Kas atkal izskatās dīvaini, bet ko es daru?
Es pieņemu, ka ievietoju vietturi, ko sauc par reģistrētajiem, kura
vērtība ir šī vārdnīca, kurā esmu apkopojis visas reģistrācijas.
Tik līdzīgs name vietturim iepriekš, taču tas ir nedaudz spēcīgāks,
jo tagad tā ir vesela vārdnīca, nevis tikai viena virkne.
Tāpēc es domāju, ka tagad būšu radošs.
Ļaujiet man ieiet manā veidņu mapē esošajās veidnēs un darīsim šādi.
Ieiesim manā termināļa logā, izveidosim citu veidni ar nosaukumu
registerants.HTML, kas faktiski veiks visu reģistrēto parādīšanu mūsu
vietā.
Tātad paplašinu layout.HTML, lai es varētu aizņemties visu to pašu
HTML, ko iepriekš.
Un definēsim bloka pamatdaļu tāpat kā iepriekš.
Un šajā beigu blokā es vēlos ievietot, nezinu, treknrakstā vai
sakārtotu visu reģistrētosarakstu.
Tātad, kā es varu to izdarīt?
Nu, izveidosim nesakārtotu sarakstu, UL.
Un šeit Jinja un Flask parasti kļūst interesanti.
Es gribu, lai būtu kaut kas līdzīgs šim-- li un tad studenta vārds,
un tad L — varbūt-- li, jā, tā.
Un tad varbūt sports?
Kaut kas līdzīgs šim?
Bet es neievadīju vārdu, es neievadīju sporta veidu, es ievadīju visu
reģistrēto vārdnīcu.
Tagad Python, ja mēs vienkārši kaut ko darītu melnbaltajā termināļa
logā un veiktu komandrindas programmu, jūs zināt, ka Python man,
iespējams, būtu sava veida for cilpa.
Jinja ļauj jums to izdarīt.
Tādējādi veidņu valodai ir ļoti viegli mehānismi vietturu, vienkāršu
cilpu, vienkāršu nosacījumu izpildei.
Tātad Python sintakse, un tā ir gandrīz identiska.
Tāpēc skatieties, ko es varu darīt.
Šajā nesakārtotajā sarakstā ļaujiet man nesākt manuāli izvadīt vienu
li, ļaujiet man izmantot šo sintaksi.
Tā pati Jinja sintakse, ko izmantoju blokam, tātad figūriekavās
procentu zīme.
Un es teikšu šo-- for name in registrants.
Tātad šī ir gluži kā Python sintakse iterācijas veikšanai vārdnīcā.
Un tagad tas izskatīsies stulbi, bet pretējs tam ir endfor.
Tātad HTML jūs izmantojat slīpsvītru.
Džindžā.
Jūs burtiski lietojat vārdu beigas, bez atstarpes un pēc tam
atslēgvārda nosaukumu.
Tātad endfor ir tas, kā jūs to aizverat.
Bet šeit veidņu veidošana kļūst ļoti forša.
Tagad jūs varat izpildīt li, un šeit es varu darīt kaut ko līdzīgu šī
studenta vārdam.
Un viss.
Es to tā atstāšu.
Un tas, ko es šeit daru, patiešām izmantoju veidni, tam, kam veidnes
ir paredzētas.
Man ir pamatelementi tam, kā es vēlos, lai izskatās šī izvade, taču,
pateicoties šai mazajai for cilpai šeit, pateicoties Jinja
sintaksei-- figūrikavām un procentu zīmei, es veikšu iterāciju katrai
vārdnīcai, izdrukājot vārdu, vārdu, vārdu, vārdu.
Un tāpēc, ja man tagad ir reģistrēti divi bērni, es apmeklēšu divus
li.
David un Carter attiecīgi.
Redzēsim, ļaujiet man atgriezties pie manas frosh IM cilnes šeit.
Un man vēl nav saites, tāpēc man tas ir jādara manuāli, kā to darītu
izstrādātājs.
Ļaujiet man doties uz /registrants, es attālināšu un nospiedīšu
taustiņu Enter.
Un jūs redzēsiet to, ko jūs, iespējams, redzēsit, pirmo reizi
kļūdoties šajā pasaulē.
Tātad, kur ir kļūdas ziņojums?
Diemžēl iekšējā servera kļūda nav tik noderīga.
Bet mēs sakām, ka redzat termināļa logu.
Tātad, ja es dodos uz termināļa logu, es tam neesmu pievērsis
uzmanību jau labu laiku.
Un patiesībā man ir atvērti divi termināļa logi, lai es joprojām
varētu izmantot komandas pēc uzvednes.
Bet, ja es atgriezīšos savā pirmajā termināļa logā, pie tā sauktā
bash šeit, jūs savā termināļa logā, izstrādājot tīmekļa
lietojumprogrammas, redzēsit visas kļūdas, kuras pieļāvāt pašā
terminālī.
Šis ir viens no tiem Python izsekošanas gadījumiem, kas ir saistīti
ar to, ka es šeit kļūdījos.
Tagad ļaujiet man iet uz priekšu šeit.
Un redzēsim-- tipa kļūda-- funkcija nav atkārtojama.
Beigu bloks-- nosaukuma funkcija nav atkārtojama.
Labi, kādu kļūdu es pieļāvu?
Tas notiek, ja es nesekoju savām piezīmēm un veicu izmaiņas uz ātro.
Tāpēc man ir šis mainīgais piektajā rindā, ko sauc par registrants,
un viss ar mazajiem burtiem.
Bet ko es tad darīju ātrumā šeit 22. rindā?
Es definēju funkciju, ko sauc par registrants.
Tātad iesācēju kļūda, man to nevajadzēja darīt.
Man nevar būt tāda paša nosaukuma mainīgais un funkcija, jo simboli
ir burtiski identiski.
Tāpēc, lai skaidri norādītu, ka šis mainīgais šeit patiesībā ir
globāls, mēs izmantosim savu konvenciju tāpat kā bieži vien C, kad
mums bija globāls mainīgais.
Mēs to visu izmantosim tikai tāpēc, lai tas izceltos kā nemainīga
vērtība.
Un tāpēc ko es darīšu, es ievadīšu REGISTRANTS ar visiem lielajiem
burtiem.
Tātad tas bija stulbi, nedomāju tur to sajaukt.
Taču šīs kļūdas iemesls, lai būtu skaidrs, ir tāds, ka nevar izmantot
funkciju, kuras nosaukums ir tāds pats kā mainīgajam.
Es varētu vienkārši mainīt mainīgā nosaukumu.
Es iešu uz priekšu un izmantošu to ar lielo burtu, lai patiešām
izceltos, ka tas patiesībā ir globāls mainīgais augšpusē.
Labi, tagad es atgriezīšos savā pārlūkprogrammā.
Ievadīsim David un soccer.
Labi, bet šeit būs vēl dažas kļūdas.
Tāpēc 17. rindā ļaujiet man mainīt šo mainīgo, lai tas tiktu rakstīts
ar lielo burtu, jo es patiešām vēlos ievietot atslēgu un vērtību šajā
no jauna nosauktajā mainīgajā kā reģistrētos ar lielajiem burtiem.
Ļaujiet man tagad atgriezties pie VS Code šeit.
Ļaujiet man atgriezties pie formas un sākt pievienot dažus datus no
jauna.
Ļaujiet man reģistrēt Deividu futbolam.
Noklikšķinot uz reģistrēties tūlīt.
Un mums vajadzētu redzēt, jūs esat reģistrēts.
Bet, cerams, tagad tas patiešām ir datora atmiņā.
Ļaujiet man atgriezties un reģistrēt Kārteru basketbolam.
Vēlreiz noklikšķinot uz reģistrēties.
Un, cerams, tas tagad ir reģistrēts.
Ja es tagad manuāli mainu savu maršrutu uz /registrants, kas ir šis
nesen pievienotais maršruts, ko es izveidoju, un nospiediet taustiņu
Enter, tagad es redzu — paldies Dievam.
Tagad es redzu nesakārtoto sarakstu, kurā ir viss, kas ir datora
atmiņā.
Tātad, kad es saku, ka esat reģistrēts, es to domāju tagad, jo
serveris joprojām darbojas.
Un datora atmiņā šajā reģistrēo globālajā mainīgajā ir atslēgu
vērtību pāru vārdnīca.
Protams, mēs šobrīd redzam tikai atslēgas.
Tāpēc varētu būt jauki redzēt arī vērtības.
Tāpēc ļaujiet man atgriezties pie VS code un iedziļināties reģistrēto
HTML.
Un es vienkārši izdarīšu kaut ko mazliet nekārtīgu.
Es tikai teikšu-- kā būtu-- lai padarītu to par teikumu, ir
reģistrēts.
Un tagad vēl viens vietturis, es teikšu registrants, kvadrātiekavas,
name.
Tātad, tāpat kā Python, ja reģistrētie ir vārdnīca, registrants,
kvadrātiekavas un atslēga, kurā vēlaties indeksēt, ir arī pilnīgi
derīga sintakse.
Tāpēc tagad ļaujiet man atgriezties pie /registrants, ļaujiet man
vēlreiz noklikšķināt uz ielādēt vēlreiz.
Tātad, kāpēc tas nedarbojas visiem?
Kāda ir kļūda, ko es pieļāvu iepriekš?
Ja Deivids nav reģistrēts nevienam un Kārters nav reģistrēts
nevienam, bet Deivids un Kārters ir vārdnīcā, tas ir labi.
Tātad daži dati ir tur.
Tātad, kāpēc sporta veidi nav saistīti?
Pirmā lieta, ko es burtiski tikko izdarīju jūsu visu priekšā, bija es
devos uz app.py un skatījos uz 17. rindiņu, domādams, kā es to
sabojāju?
Es lieku sportu kā atslēgas vērtību, kas ir studenta vārds.
Labi, pirms dažām sekundēm 17. līnija man šķita laba.
Tad es ar acīm skatos uz 16. rindu, un arī šis izskatījās labi.
Mana pirmā doma bija, vai es izmantoju request.args, nevis
request.form?
Jo tas būtu pieņēmis GET, nevis POST.
Bet nē, tas arī izskatās labi.
Tad mana pēdējā doma bija.
Ak Dievs, vai es nesabojāju HTML formu?
Tāpēc es atgriezos pie savas cilnes šeit.
Šeit es devos uz sākotnējo formu, pēc tam skatos lapas avotu.
Un tas jums var nebūt tik acīmredzams, ja nekad iepriekš neesat
redzējis izvēlni Atlasīt — kas šeit šķietami trūkst, kas varētu
izskaidrot manu kļūdu?
Jā.
Auditorija: Vārds ir forma.
DEIVIDS MEILANS: Jā, es nenosaucu šo formas lauku, atvērējpēdiņas,
aizvērējpēdiņas, "sport".
Godīgi sakot, jūs iepriekš neesat redzējuši, ka es to daru kā
atlasīto izvēlni, un tā atšķiras no šīs ievades.
Ja jums ir ievades tags, jūs burtiski sakāt name= vienlaga, kas ir uz
ievades taga.
Izrādās... Es nezinu, kāpēc es to izlaidu agrāk.
Es droši vien gribēju atgriezties pie tā-- atlases tagam var būt arī
vārda parametrs.
Tātad, ja es atgriezīšos pie vārda parametra šeit un atgriezīšos un
pievienošu vārda parametru, ļaujiet man pāriet uz šo veidni, kas ir
index.html.
Ļaujiet man pievienot nosaukums = atvērējpēdiņas, aizvērējpēdiņas,
"sport" ir rakstīts ar mazajiem burtiem, kas atšķiras no vizuālās
estētikas šim pagaidu atspējotajam variantam, kas ir paredzēts, lai
padarītu lietas skaistākas cilvēkiem.
Tagad ļaujiet man iet uz priekšu šeit un vispirms es ieiešu savā
termināļa logā un faktiski nospiedīšu Control C, lai pilnībā apturētu
serveri, jo es vēlos izmest atmiņas saturu un tāpēc atbrīvoties no
tās vārdnīcas, kurā bija Deivids un Kārters un tām vērtībām, kas nav
vērtības.
Tātad tas ir veids, kā es iztīru datora atmiņu.
Es atkārtošu Flask run.
Es saņemu to pašu URL kā iepriekš.
Tāpēc es virzīšu kursoru virs tā un atvēršu jauno cilni.
Un, lai pārliecinātos, es apskatīšu lapas avotu.
Un šeit es tagad redzu, labi, tagad formai ir gan vārds, gan sporta
veids.
Labi, tagad es tiešām sakrustošu pirkstus, jo es ceru, ka tagad tas
darbosies.
Deivids atkal reģistrēsies futbolam.
Reģistrēties-- saka, kaesam reģistrēti.
Es atgriezīšos un darīšu to vēlreiz Kārtera un basketbola labā.
Reģistrēties-- mums joprojām nav saites, tāpēc es manuāli pāriešu uz
URL un mainīšu /register uz registrants tāpat kā iepriekš.
Tāliniet un nospiediet taustiņu Enter.
Un paldies Dievam.
Tagad es patiešām esmu pareizi reģistrējies šim nolūkam.
Tātad-- paldies.
Kas tas ir, piemēram, 20 gadus vēlāk es joprojām cīnos, lai ieviestu
šo vietni?
Labi, tagad mums ir pirmo reizi Python un tīmekļa saturs, tagad mums
ir piemērota tīmekļa lietojumprogramma.
Un tas tikai neatbalso Sveiki, Deivid, Sveiki, Kārter-- tas tagad
varētu noderēt ikvienam no jums.
Un pašlaik tas tiek pasniegts privāti, taču, ja es padarītu šo URL
publisku, es varētu to ievietot tīmeklī tagad un ļaut reģistrēties
ikvienam pasaulē.
Bet šeit ir dažas problēmas.
Ir iespējami daži drošības trūkumi.
Un, piemēram, ļaujiet man atgriezties pie tīmekļa veidlapas šeit.
Un ļaujiet man atvērt pārbaudes cilni-- izstrādātāja rīkus-- un
atgādināt jums, ka ikviens interneta lietotājs, ne tikai jūs,
izstrādātājs, bet arī pretinieks var redzēt visu jūsu HTML, skatīt
visu jūsu CSS, skatīt visu jūsu JavaScript.
Bet vēl svarīgāk ir tas, ka pārlūkprogrammā tas viss ir klienta pusē,
tāpēc burtiski nekas tehniski neliedz viņiem mainīt HTML vai vismaz
tā kopiju.
Un es to izdarīju pagājušajā nedēļā ar Jeilu.
Es mainīju viņu vietni.
Bet nē, es nomainīju savu viņu vietnes kopiju.
Bet, kad iesaistās formas, jūs, iespējams, tagad patiešām esat
ļaunprātīgs.
Jo, lai gan šajā nolaižamajā izvēlnē ir tikai basketbols, futbols un
frisbijs, pieņemsim, ka es patiešām vēlos reģistrēties — kā būtu ar,
pieņemsim, — nosauciet savu iecienītāko sporta veidu.
Auditorija: Volejbols.
DEIVIDS MEILANS: Volejbols.
Mēs ļoti vēlamies reģistrēties volejbolam, bet šī vietne man neļaus.
[NESAKLAUSĀMS] ultimate frisbijs.
Mainīsim šo pret volejbolu.
Un mainīsim to uz volejbolu-- Enter.
Es tagad slēgšu inspektoru.
Un kā prasīts, tagad atbalstām volejbolu formā.
Tagad tas nav mainīts serverī, godīgi sakot, bet padomājiet par to,
kā darbojas HTTP.
Kad es to aizpildīšu ar vārdu, paskatīsimies, Bernija vārds-- arī
Bernijs ļoti vēlas reģistrēties volejbolam.
Pašlaik mans kods tikai uzticēsies tam, ka pieprasījuma formā ir tas,
kas bija pašā sākotnējā formā, neatkarīgi no tā, vai cilvēks to
faktiski ir mainījis.
Tātad, ja es patiešām iesniedzu šo veidlapu un noklikšķinu uz
Reģistrēties Bernie un volejbolam, lai gan tas nav viens no
atbalstītajiem pieejamajiem sporta veidiem, ja tagad dodos uz
reģistrētajiem, mana vietne tomēr ir uzticas, ka Bernijs un,
iespējams, jūs esat reģistrēti volejbolam.
Tātad, kāda ir šī ietekme?
Tas noteikti ir noticis pagātnē, kad patiešām slikti ieviestas
vietnes ļauj norādīt preces cenu, piemēram, iepirkumu grozā.
Viņi vienkārši paļaujas, ka, noklikšķinot uz Iesniegt vai pievienojot
grozam, cena tiek pievienota aizmugures serverim.
Ja nepārbaudāt cenu un nepārliecināties, tāpat kā datubāzē, uzgaidiet
minūti, šī cena ir derīga.
Vai pagaidiet, tie sporta veidi ir derīgi.
Kurš zina, ko cilvēki gatavojas darīt ar jūsu vietni?
Un ir tik vienkārši attiecīgi uzlauzt vietni.
Tagad mēs to varam ļoti viegli salabot, izmantojot kādu sestās
nedēļas stila Python.
Mums tiešām šeit ir tikai nedaudz jāpamato loģika.
Un tāpēc ļaujiet man ierosināt šo.
Ļaujiet man doties uz app.py šeit.
Un pašā augšpusē ļaujiet man arī izveidot globālu mainīgo, ko sauc
par sports ar visiem lielajiem burtiem.
Un es to noteikšu vienādu ar kvadrātiekavās to sporta veidu sarakstu,
kurus es patiešām vēlos atbalstīt.
Tāpēc es likšu šeit basketbolu, es šeit ielikšu futbolu, un... Es
atvainojos, volejbols oficiāli nav.
Es šeit ievietošu ultimate frisbiju.
Tāpēc man ir šis globālais atbalstīto sporta veidu saraksts.
Tagad padomājiet par to, kā es pirms kāda laika izveidoju šo formu.
Es tikko iekodēju šos sporta veidus šeit.
Nu man tas nav jādara, tā vietā es varu izmantot savu oficiālo sporta
veidu sarakstu.
Ļaujiet man ritināt uz leju līdz savai index.HTML renderēšanas
veidnei šeit.
Ļaujiet man teikt, ka sporta veidi, kurus es vēlos atbalstīt, ir šie.
Tātad, izmantojot to pašu viettura triku, kā iepriekš, bet tagad es
saku veidnei, kādus sporta veidus mēs pašlaik atbalstām.
Tagad, ja es atgriezīšos indeksā.HTML, man nekas no tā nav jādara
manuāli.
Ļaujiet man atbrīvoties no visām trim šīm opcijām, kuras manuāli
ievadīju iepriekš, ļaujiet man izmantot savu jauno triku ar Jinja
sintaksi un teikt for sports in sports.
Tad ļaujiet man proaktīvi pateikt beigas, lai tikai pabeigtu šo domu.
option value=value=[? sports?]..
Un tad, lai arī cilvēks redzētu tos pašus vārdus, es šeit teikšu
sport out.
Tāpēc esmu pilnībā mainījis to, kas tika kodēts-- manuāli ievadīts--
uz kaut ko, kas tagad ir pilnīgi dinamisks.
Tāpēc tagad tas neļaus kādam, piemēram, man, nomainīt HTML, taču
skatieties šo.
Formas darbība, atgriežoties atpakaļ, joprojām ir tāda pati kā
iepriekš.
Tāpēc estētiski tas izskatās vienādi.
Bet ziniet ko?
Kāpēc, lai mēs tagad nebūtu gudri.
Un pārietu uz app.py un /register maršrutu, un kāpēc gan, lai mēs
nepateiktu šādi.
Ja-- kā būtu ar sportu nevis sportā, tad atgriezīsim render templates
failos.HTML.
Tagad šī veidne vēl nepastāv.
Tāpēc ļaujiet man ātri padarīt to ļoti ātru.
Es nokopēšu šo kodu no iepriekšējā.
Ļaujiet man izveidot koda failu failā fail.HTML.
Es tikai ielīmēšu šo šeit.
Tātad mums ir ļoti vienkāršs kļūdas ziņojums, un es teikšu, ka jūs
neesat reģistrēts.
To mēs saprotam ar neveiksmi.
Un tagad vietnē app.py apsveriet, kādu loģiku esmu pievienojis.
[? Pitoniski, ?] ja sports nav
sportā, nu tad jūs mani uzlauzāt.
Tāpat kā jūs mēģinājāt ievadīt volejbolu vai kādu citu sporta veidu
request.formā.
Tāpēc es tikai teikšu, nav kļūmju, neļaujot jums reģistrēties.
Un es to varu darīt arī nedaudz izteiktāk.
Kāpēc, lai es arī neteiktu šādi.
Ja tas nav vārds, tad, ja nosaukums ir tukšs, atgriezīsim render
template, kurā norādīts fails.HTML.
Citiem vārdiem sakot, ja jūs man nenorādījāt vārdu, atstājāt to
tukšu, tas man nav noderīgi, vadot sporta programmu.
Uzskatīsim arī to par kļūmi.
Tātad, ja es tagad atgriezīšos šajā cilnē, es pārlādēšu, lai
pārliecinātos, ka man ir jaunākā klienta puse, ļaujiet man būt
slinkam un vienkārši noklikšķināt uz Reģistrēties.
Enter.
Jūs neesat reģistrēts, jo es tam nedevu īstu vārdu.
Labi, atgriezīsimies.
Kā būtu, ja es tagad rakstītu Deivids, bet nē, es negrasos izvēlēties
sporta veidu.
Es tikai vēlos reģistrēties pats.
Nē, tas nedarbojās.
Tagad ļaujiet man iet uz priekšu un izvēlēties futbolu.
Tas, manuprāt, darbojas.
Ļaujiet man atgriezties tagad un izmēģināt šo hakeru triku, kurā es
atveru nolaižamo izvēlni, es dodos uz izvēlni Atlasīt.
Es, tāpat kā iepriekš, nomainīšu ultimate frisbiju pret volejbolu, un
šo es nomainīšu pret volejbolu.
Ļaujiet man aizvērt cilni tūlīt.
Šķiet, ka tas ir pieejams tagad, bet, kad šoreiz noklikšķinu uz
Reģistrēties, tiek parādīts, ka neesat reģistrējies.
Un tas ir daudz labāk, nekā paļauties uz citām metodēm, kuras jūs
varētu redzēt vai esat redzējis tiešsaistē saistībā ar HTML, jo
pastāv arī šis triks.
Ļaujiet man atgriezties pie ekrāna šeit.
Ļaujiet man atgriezties pie index.html, un jūs, iespējams, esat
redzējuši tiešsaistē vai arī jūs, iespējams, redzēsit tiešsaistē, ka
ir arī citi atribūti, kurus varat izmantot, piemēram, obligāts.
Jūs varat burtiski pateikt pārlūkprogrammai, uh-uh, šis lauks ir
obligāts.
Jūs nevarat atstāt to tukšu.
Ja es tagad atgriezīšos pārlūkprogrammā, ielādēšu vēlreiz, un es
atkal pieņemšu, ka esmu slinks, un es neierakstīšu nevienu vārdu un
nenoklikšķināšu uz Reģistrēties — tas ir jauki.
Tagad pārlūkprogramma man ir nedaudz noderīgāka, sakot nē, nē, nē.
Tas ir nepieciešams.
Jums tas ir jāaizpilda.
Bet atkal, ja jūs zināt, ko jūs darāt.
Labi, es nepiekrītu jūsu prasībai prasot man vārdu.
Ļaujiet man ieiet šeit.
Ļaujiet man pāriet uz šo tagu, ļaujiet man izdzēst nepieciešamo
atribūtu, un tagad es izslīdēju.
Bet es neslīdēju cauri serverim.
Un tāpēc šeit ir atšķirība un svarīga atšķirība, un tik daudzi
cilvēki reālajā pasaulē joprojām tur kļūdās.
Pastāv klienta puses validācija, piemēram, pārbaudot, vai dati ir
tādi, kā jūs gaidāt klienta pusē, pārlūkprogrammā.
Un ir servera puses validācija.
Un, lai gan klienta puses validācija, šī obligātā atribūta
pievienošana padara lietas lietotājam draudzīgākus, vai ne?
It kā tas bija diezgan mazs uznirstošais logs.
Tas man saka, ka tas ir nepieciešams.
Tas vienkārši izskatās labāk nekā iepriekšējā versija.
Tas nav uzticams.
Jūs nevarat uzticēties nevienai lietotāja ievadītajai informācijai,
jo aptuveni stundas laikā CS50 viņi var iemācīties izslēgt visus šos
aizsardzības līdzekļus.
Tātad, pat ja jums patīk labāka lietotāja saskarne klienta pusē, jums
vienmēr ir jāveic servera puses validācija.
Lietotājiem nevajadzētu uzticēties.
Un, tiklīdz jebkura jūsu izveidotā lietotne vai vietne kļūst
populāra, diemžēl jums ir jārisina arī visas sāncensības iespējas.
[NESAKLAUSĀMS] vai kaut kas tamlīdzīgs?
DEIVIDS MEILANS: Labs jautājums.
Vai pretinieks varētu piekļūt sensitīvām lietām, piemēram, app.py?
Teorētiski nē.
Ja pati Flask ir kļūdaina, tad droši, varbūt.
Ja klēpjdatorā savā serverī izmantojat citu programmatūru, tas
noteikti ir iespējams.
Tomēr, ja jūsu serveris ir pareizi konfigurēts, teorētiski tam
nevajadzētu varēt piekļūt.
To sakot, mēs drīz redzēsim, vai arī jūs, veicot gala projektu, ja
veicat kaut ko tīmeklī, jūs nekad nevēlēsities rakstīt lietotājvārdus
un paroles savā faktiskajā kodā.
Varat tos ievietot tā sauktajos vides mainīgajos.
Tātad datora atmiņā, bet ne savā kodā, ja jūs vai kāds sabojājas,
joprojām ir veidi, kā aizsargāties pret šādām iespējām, lai arī cik
mazas tās būtu.
Jā.
AUDITORIJA: [NEdzirdams] pārliecinoties
volejbols netika reģistrēts.
DEIVIDS MALANS: Labs jautājums.
Un tas atgriežas pie pirmajiem principiem, tāpat kā C un Python,
tiklīdz jūs atgriežaties no funkcijas, tas arī viss.
Nekas zem šīs koda rindas netiek izpildīts.
Un tā, lai rezumētu jautājumu, lai gan es atgriežu šo fail.HTML
veidni, kā es varu pārliecināties, ka mēs joprojām nejauši
neiekļaujam volejbolu šajā globālajā vārdnīcā?
Tas ir tāpēc, ka, piemēram, ja jūs man nenosaucat vārdu, 22. rindā
šobrīd es atgriežu kļūmes veidni, un viss.
23., 24., 25., 26., 27. rindas nekad netiek izpildītas.
Jo īpaši 26 nekad neizpilda, un tieši tur es būtu saglabājis vārdu.
Līdzīgi, ja mēs iegūstam nederīgu sporta veidu, kas ir tukšs vai nav
iekļauts sākotnējā autoritatīvā sarakstā, mēs atgriežam fail.HTML kā
veidni 25. rindiņā.
Mēs nekad netiekam līdz 26. rindai.
Tāpēc atliek tikai atgriezties un ko tas nozīmē arī Python.
Labs jautājums.
Vai arī citi jautājumi?
Nē?
Labi, kā būtu, ja mēs šeit veiktu vēl vienu uzlabojumu.
Jo kāda varētu būt problēma ar visu glabāšanu šajā globālajā vārdnīcā?
Beidzot tas viss darbojas, bet kāpēc globālā vārdnīca, iespējams, nav
tā vieta, kur uzglabāt frosh IM reģistrācijas datus?
Kādas ir šī sekas?
Auditorija: var palēnināt visu procesu.
DEIVIDS MEILANS: Labi, tas var palēnināt visu procesu.
Bet patiesībā-- RAM patiesībā ir laba.
Atmiņa patiesībā parasti ir laba lieta.
Tāpēc tā šeit nebūs problēma.
Tomēr kāpēc es nevēlos saglabāt šos datus šajā mainīgajā?
Varbūt jūs varat secināt, kā es kaut ko laboju agrāk.
Jā, aizmugurē.
Mērķauditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Jā, tas izpaužas-- tas ir-- atmiņa tiek dzēsta.
Atkritumi savākti, tā teikt, tiklīdz Flask pārstāj darboties.
Tātad, ja jūs nospiežat Control C, jūs uzreiz esat zaudējis visus
savus pirmkursniekus, kas reģistrējušies sportam.
Droši vien tā nav laba lieta.
Es to izdarīju apzināti pirms brīža un nospiedu Control C, jo vēlējos
notīrīt vārdnīcu, taču ticot, ka serveris nekad neavārēs un kods
vienmēr darbosies un strāva nekad nepazudīs, tas nav pareizais veids,
lai izveidotu jebkāda veida tīmekļa lietojumprogrammu ar pastāvīgiem
datiem.
Tāpēc mēs, iespējams, vēlamies atkārtoti ieviest CSV failus, un mēs
esam spēlējušies ar tiem C un Python.
Varētu pilnībā izmantot CSV, taču tagad mūsu rīcībā ir arī SQL.
Un ļaujiet man ierosināt to darīt SQL.
Un šim nolūkam ļaujiet man atvērt programmas versiju, kuru es
uzrakstīju iepriekš.
Tāpēc ļaujiet man iet uz priekšu un aizvērt šīs veidnes, kas
izskatīsies ļoti līdzīgas, taču nedaudz atšķiras no tām, kuras es
rakstīju iepriekš.
Un ļaujiet man doties uz priekšu un atvērt šodienas-- ļaujiet man
ieiet devītajā avotā, ļaujiet man ieiet frosh IM-- kā būtu ar to,
ceturto versiju, tehniski, tiešsaistes versijas.
Un ļaujiet man turpināt un atvērt app.py šādi.
Tātad šeit ir jau izveidota versija, kas tikai nedaudz atšķiras.
Pašā augšpusē es importēju CS50 SQL bibliotēku, kuru, iespējams,
atceraties, kad mēs izmantojām pirms pāris nedēļām, lai uzrakstītu
Python, kas sazinās ar SQL datu bāzi.
Un šis šķiet piemērots brīdis, lai šo ideju atgrieztu.
Šeit, astotajā rindā, es izveidoju DB mainīgo, kas atver failu ar
nosaukumu frosh IMs.db, izmantojot iepriekš redzēto sintaksi.
Es izveidoju šo frosh IMsdb failu pirms nodarbības, lai mums būtu
dažas kolonnas, kurās glabāt vārdus, sporta veidus un tamlīdzīgi.
Lūk, tas pats globālais masīvs, globālais saraksts, ko sauc par
sportu, un redzēsim, kas notiek zemāk.
Ja es ritinu uz leju līdz index, tas ir tāds pats kā iepriekš, kā mēs
kopā rakstījām ātrumā.
Uz brīdi izlaidīsim atreģistrēšanos un pāriesim pie reģistrēšanās.
Tātad šis ir nedaudz atšķirīgi, bet paskatīsimies, ko esmu paveicis.
Man šeit ir daži komentāri, jo es to uzrakstīju iepriekš.
Un es domāju, ka šī loģika ir gandrīz tāda pati, lai gan es to
saīsināju.
Un es uzdodu divus jautājumus uzreiz, izmantojot 38. rindu, šeit ir
atslēgvārds or.
Vienkārši sakot, ja nav vārda vai sporta veids nav sporta sadaļā, to
mēs tagad sauksim par kļūmi.
Bet tagad interesanti ir tas, ka 42. rindā es izmantoju CS50 SQL
bibliotēku, lai izpildītu īstu SQL.
Un es ievietošu tabulā, ko sauc par reģistrētajiem, divas kolonnas —
vārds un sporta veids.
Kādi vārdi un sporta veidi?
Nu šīs divas vērtības ar vietturiem, pievienojam vārdu un sporta
veidu.
Ievērojiet, ka izmantoju jautājuma zīmes.
Tas ir absolūti nepieciešams, lai mēs nesaņemtu kādu no šiem SQL
injekcijas uzbrukumiem, jo arī tas varētu būt iespējams, ja kāds
veidlapā ierakstīs dažus bīstamus vārdus vai atslēgvārdus, piemēram,
dzēšana(delete), vienpēdiņas vai semikolu.
Šeit es ļauju bibliotēkai veikt datu dezinfekciju.
Un tad šis ir triks, ko mēs vēl neesam redzējuši, un tas patiešām
sāks saistīt lietas.
Es varu arī izmantot novirzīšanas funkciju programmā Flask, kuras
rezultātā, tā teikt, atkal tiek veikts safetyschool.org triks, pēc
kura lietotājs ir reģistrējies, ja es vēlos viņiem tagad automātiski
parādīt visus, kas ir reģistrēti vietnē /registrants, man nav manuāli
jāgaida, ka viņi mainīs URL, kā es to darīju pēdējās minūtēs.
Es varu vienkārši novirzīt tos uz jebkuru vietu savā lietotnē.
Vai arī es varētu tos novirzīt uz jebkuru URL internetā, izmantojot
šo funkcijas izsaukšanu.
Un tas ir tikai jauks veids, kā nosūtīt tos uz citu maršrutu, ja
vēlaties, lai viņi redzētu, šajā gadījumā, reģistrētos.
Tāpēc ļaujiet man izdarīt šādi.
Tajā pašā direktorijā ļaujiet man palielināt termināļa loga izmēru.
Ļaujiet man veikt SQLite trīs no frosh IMs.db un ļaujiet man
ierakstīt .schema.
Un jūs patiešām varat redzēt, ka šeit ir ietvertas divas rindas,
kurās katram reģistrētajam ir ID — kuram automātiski tiks piešķirts
1, 2, 3, augšpusē-- vārds, kas nav nulles teksts, un sporta veids,
kas arī ir tas pats.
Un primārā atslēga būs tikai šis unikālais identifikators.
To, kuru es sagatavoju iepriekš.
Bet, ja es izvēlos zvaigznīti no registrants, semikols, pašlaik
neviens nav reģistrēts nevienam sporta veidam.
Bet tagad mēģināsim to palaist.
Ļaujiet man turpināt un aizvērt savu veco versiju, kuru mēs rakstījām
kopā.
Un es aizvēršu šo cilni.
Ļaujiet man palaist Flask šajā ceturtajā versijā.
Labi, es redzēšu līdzīgu rezultātu.
Es tagad atvēršu URL.
Un jūs redzēsiet, ka iepriekš esmu veicis dažas izmaiņas.
Tā vietā, lai izmantotu atlases izvēlni, es izmantoju tā sauktās
radio pogas, kas ir atsauce uz vecajām radio pogām, kas toreiz bija
savstarpēji izslēdzošas automašīnās.
Un mēs redzēsim, kā to izdarīt.
Bet tā ir tikai alternatīva izvēlētajai izvēlnei.
Un es iešu uz priekšu un ierakstīšu šeit savu vārdu vēlreiz.
Tāpēc es ievadīšu Deividu, es spēlēšu futbolu, atlasot šo radiopogu,
un es noklikšķināšu uz Reģistrēties tūlīt.
Un ievērojiet, kas notika.
Tas ir nedaudz neglīts formatējums, bet tas tāds bija pirms 20 gadiem.
Šeit es tagad maršrutā /registrants nesakārtota saraksta vietā
izmantoju vienkāršu HTML tabulu.
Tāpēc es jums parādīšu, kā tas izskatās pēc brīža.
Un es jums parādīšu šo reģistrācijas atcelšanas pogu, kas ir
nevajadzīgi liela.
Man ir arī funkcionalitāte, drīz redzēsim, kā var atreģistrēt kādu
arī no sporta veida.
Tātad varat izņemiet savu vārdu strīdīgās situācijās.
Nu, ļaujiet man atgriezties pie sava termināļa loga.
Un es noklikšķināšu uz pluss zīmes, lai piešķirtu sev otru termināli,
lai varētu atgriezties pie devītā avota frosh IM četri.
Es gatavojos izpildīt SQLite no frosh IMs.db.
Es tagad izvēlēšos zvaigznīti no reģistrētajiem, un tagad jūs
redzēsit, ka Deivids patiešām ir reģistrēts futbolam.
Un patiesībā, ja es aizveru programmu Flask ar Control C un palaižu
to vēlreiz, nekas liels, jo arī šī nākamā Flask versija izmantos datu
bāzi.
Tāpēc es neatlaidīgi glabāju datus programmā SQLite, bet patiesībā es
tos iegūstu, izmantojot savu Python kodu programmā Flask.
Labi, ievietosim šeit vēl vienu personu, lai mēs varētu izdzēst arī
vienu no mums.
Kārters basketbolā, reģistrēt, un tagad mēs te redzam mūs abus.
Labi, paskatīsimies, kā mums tas izdevās.
Atgriezīsimies pie VS Code, ļaujiet man samazināt termināļa logu.
Ļaujiet man iedziļināties - patiesībā ieejam veidņu direktorijā un,
piemēram, apskatīsim, piemēram, index.html.
Tātad iepriekš mēs izmantojām nolaižamo izvēlni.
Izrādās, radiopogās tiek izmantots ievades tags, taču tā vietā, lai
ievadītu veidu type=text, piemēram, cilvēka vārdam, jums ir
type=radio.
Un, kamēr katrai radiopogai ir viens un tas pats vārds, viens un tas
pats vārds, tas padara tās viena otru izslēdzošas.
Tātad, atzīmējot vienu radiopogu, pārējās tiek izslēgtas, jo tām ir
vienāds nosaukums.
Vērtība, ko vēlos piešķirt katrai no šīm radio pogām, ir tikai sporta
vietturis.
Tas ir tas, ko cilvēks redz ekrānā.
Tātad tas ir gandrīz tāds pats kā izvēlne Select, tikai izskatās
estētiski savādāk.
Bet tur ir mana tā pati poga.
Tā ir visa atšķirība, ko es tur izdarīju.
Un es pievienoju virsraksta tagu H1, lai pateiktu reģistrēties, lai
būtu skaidrs, kas tas ir.
Bet apskatīsim citu failu.
Šis tagad ir, kā būtu ar maršrutu /registrants.
Tātad, ja es tagad šeit atveru registrants.HTML, tas ir daudz
detalizētāks nekā mans nesakārtotais saraksts.
Bet tas ir tikai sava veida garlaicīgs HTML.
Šeit ir mans tabulas tags, tabulas galva, tabulas rinda, tabulas
virsraksts.
Tas padara lietas treknrakstā kā tabulas pirmo rindu.
Vārds, sports ir manas divas kolonnas.
Man ir trešā tukša kolonna, lai es varētu ievietot šo pogu, kā mēs
drīz atkal redzēsim.
T body apzīmē tabulas pamatdaļu.
Šeit ir tas pats cilpas triks, lai es varētu katram reģistrētājam
izvadīt veselu tabulas rindu.
Un tur ir šī dīvainā forma, bet mēs pie tā atgriezīsimies.
Bet tur ir reģistrētā vārds, tur ir reģistrētā sports.
Bet ievērojiet šeit nedaudz atšķirīgo sintaksi.
Atcerieties, ka CS50 izvēlnes-- CS50 izpildes funkcija, kad tā
atgriež jums vārdnīcu sarakstu, pēc tam varat piekļūt atsevišķām
kolonnām, izmantojot šos taustiņus.
Tātad ejam uz /registrants maršrutu.
Ļaujiet man atgriezties pie app.py, ritiniet šeit uz leju, un tas
patiesībā ir ļoti vienkārši.
Šeit man ir maršruts /registrants, kas vispirms izpilda atlasīto
zvaigznīti no reģistrētajiem.
Tātad tikai vecas SQL lietas.
Dodiet man katru no reģistrēto tabulas, ļaujiet man renderēt veidni
ar nosaukumu registerants.HTML un vienkārši nododiet šo vārdnīcu
sarakstu.
Un mēs to vēl neesam izdarījuši, bet, ja atgriezīsities pie
registerants.HTML, kā jūs atkārtojat katru šajā sarakstā iekļauto
vārdnīcu?
Nu sintakse ir paredzēta tikai reģistrētajam un reģistrētajiem.
Tas sadala šo vārdnīcu sarakstā pa vienam, tāpat kā Python.
Tātad registrant.name un registrant.sport ir tikai vēl viena sintakse
kvadrātiekavās.
Tā ir tikai nedaudz tīrāka un nedaudz kodolīgāka, nekā, kad visur ir
pēdiņas un kvadrātiekavas.
Un tad pārējais ir tikai HTML.
Kas notiek tagad, ja es vēlos... Kārters ir izslēgts no basketbola
komandas, tā teikt.
Tātad, kā mēs to darām?
Nu, mēs vēlamies noklikšķināt uz šīs pogas, atreģistrēties, blakus
Kārtera vārdam.
Bet kā tas darbojas?
Un tagad padomājiet par jebkuru jūsu apmeklēto vietni, kurā ir kaut
kas līdzīgs iepirkumu grozam, kurā varat izņemt preces no groza vai
atjaunināt daudzumus, vai pievienot vairāk daudzumu iepirkumu grozam
vietnē Amazon vai jebkur citur.
Paskatīsimies uz HTML, ko mana lietotne ir izspļāvusi.
Apskatīsim to šeit, un mēs redzēsim sekojošo-- mēs redzēsim, ka mums
šeit ir HTML, kas sasniedza lietotāju, ne tikai pirmajā kolonnā ir
Deivids, futbols un otrajā, ievērojiet, ka mani registrants.HTML
forma arī izvada nelielu tīmekļa formu.
Tā ir neglīta, bet man pagaidām rūp tikai tās funkcionalitāte.
Un ievērojiet, ko es šeit daru.
Katrs reģistrētais šajā datubāzē saņem savu reģistrācijas atcelšanas
pogu.
Un šai veidlapai ir poga, kas saka atreģistrēties.
Bet ievērojiet, kas vēl ir katrai no šīm formām.
Nav teksta lodziņa, nav nolaižamās izvēlnes, nav radio pogu.
Šeit drīzāk ir paslēpts ievades lauks.
Tātad ar HTML var izveidot formu, kas iesniegs informāciju, taču jums
nav jādod lietotājam iespēja mainīt šo informāciju.
Ja vēlaties, varat vienkārši iet uz priekšu un nemanāmi ievietot to
formā.
Palēpts dizainā.
Un tas, kas notiks, ir, ja es noklikšķināšu uz pogas atreģistrēties
blakus Kārteram, viņa primārā atslēga ir divi.
Manējā tā vietā ir viens.
Tātad, kas notiks, ja es noklikšķināšu uz viņa reģistrācijas
atcelšanas pogas?
Tas iesniedz veidlapu ar ID parametru, kura vērtība ir divi, un
iesniedz to reģistrācijas atcelšanas maršrutā.
Tātad, ko tas nozīmē?
Nu, ja es dodos uz VS Code un es dodos uz app.py, apskatīsim
atcelšanas sakni, kuru es izlaidu.
Tātad, ja piekļūstat reģistrācijas atcelšanas maršrutam, izmantojot
POST, šis kods tiek izsaukts.
Es paņemu no request.form ID, kas tika iesniegts slēptā veidā.
Ja patiešām ir ID, tas ir, tas nav tukšs, tas nav nulle, tas ir
faktisks skaitlis, piemēram, 1, 2, 3 vai vairāk, es veicu dzēšanu no
reģistrētajiem, kur ID = šī vērtība ar jautājuma zīmes vietturi.
Un tad es novirzu lietotāju atpakaļ uz reģistrētajiem.
Tagad, ja es atgriezīšos pie šīs veidlapas šeit, es noklikšķināšu uz
atreģistrēties, mēs redzēsim to darbībā.
Tagad Kārters vairs nav.
Un patiesībā, ja es atgriežos pie sava termināļa logu šeit, es atveru
SQLite trīs no frosh IMs.db un atkārtoti palaižu atlasīto zvaigznīti
no reģistrētajiem, Kārtera vairs nav.
Tātad, atkal izmantojot ļoti vienkāršas HTML formas, jūs varat iegūt
pogas, saites un citus līdzīgus lietotāja saskarnes mehānismus, lai
veiktu serverī nepieciešamās darbības.
Bet šeit pastāv briesmas.
Tagad tas tiešām ir domāts-- šis piemērs ir administratīva vietne,
kāda tā bija pirms aptuveni 20 gadiem, tikai mūsu iekšējiem
darbiniekiem.
Tehniski tas ir bīstami, ko es arī tikko izdarīju.
Pat ja Kārtera ID ir divi un paslēpts, un mans ir viens un paslēpts,
ko tas varētu ļaut pretiniekam darīt, ja viņam būtu administratora
piekļuve tai pašai vietnei?
Kādas domas?
Jā.
Auditorija: Vai viņi varētu mainīt vērtību un pēc tam atreģistrēties?
DEIVIDS MEILANS: Jā.
Viņi varētu mainīt šī slēptā atribūta vērtību, atverot Chrome
izstrādātāja rīkus, mainot numuru HTML.
Viņi varētu dzēst ikvienu, atreģistrēt ikvienu, ko vēlas no datu
bāzes.
Tagad šajā gadījumā es apgalvoju, ka tas ir labi, jo tas ir paredzēts
tikai mums darbiniekiem, kuri tolaik nodarbojās ar sportu.
Bet tas tiešām ir risks.
Tātad, vai nebūtu jauki, ja mēs varētu nodrošināt, ka tikai tie
lietotāji, kuriem ir tiesības, drīkst veikt noteiktas darbības?
Es domāju, ka, lai izmantotu šo iespēju, mums būs jāievieš kaut kas
vairāk.
Un tāpēc šeit, protams, ir iespēja īsi parunāt par to, ko jūs un es
darām visas dienas garumā katru dienu.
Mēs piesakāmies vienā vai vairākās vietnēs vai lietotnēs vai vismaz
līdz brīdim, kad esat automātiski izrakstījies un jums tas ir jādara
vēlreiz.
Piemēram, šeit ir Gmail ekrānuzņēmums.
Ievadot lietotājvārdu, ievadiet savu paroli, iespējams, savu divu
faktoru kodu, kas tiek nosūtīts īsziņā vai nosūtīts uz jūsu tālruni,
un pēc tam esat pieteicies.
Un par laimi, atkarībā no vietnes, jūs nesaņemat aicinājumu vēlreiz
pieteikties, parasti vairākas stundas, dienas vai nedēļas.
Tāpat kā Gmail, jūs esat pieteicies ilgu laiku.
Drošības nolūkos jūsu banka, iespējams, jūs izrakstīs apmēram stundas
laikā.
Tātad tas ir pilnībā konfigurējams serverī.
Bet kā Gmail zina, kā Google to zina, pat ja jūs atkal un atkal un
atkal pārbaudāt dažādus e-pastus, kā viņi zina, ka joprojām esat tā
pati persona, kas pieteicās?
Izrādās, ka, izmantojot tos pašus veidošanas blokus, ko šodien — HTTP
un HTML un citus-- jūs faktiski varat īstenot pieteikšanās funkcijas
jēdzienu, veicot līdzvērtīgu darbību ar kaut ko, ko sauc par
sīkfailiem.
Būtībā tas, kas notiek, kad pirmo reizi veiksmīgi piesakāties vietnē
ar savu lietotājvārdu un paroli, jūsu datorā tiek ievietots sīkfails,
tā sakot.
Un metaforiski tas ir līdzīgi kā paņemt rokas zīmogu, un jūsu roka
tagad tiek apzīmogota — šajā gadījumā smaidošā sejiņa — tā, ka katru
otro reizi, kad noklikšķināt uz saites tajā pašā vietnē — google.com,
gmail.com, neatkarīgi no tā, jūs to nezināt, jūsu pārlūkprogramma
pastāvīgi parāda šo rokas zīmogu.
Tāpat kā ieiet klubā, atrakciju parkā vai kaut kā tamlīdzīgi, kur
viņi nevēlas vēlreiz pārbaudīt jūsu ID.
Viņi nevēlas vēlreiz pārbaudīt jūsu biļeti, viņi vienkārši vēlas ātri
redzēt to pašu rokas zīmogu.
Un tā ir viena no lietām, ko pārlūkprogramma vienmēr dara jūsu labā,
kad esat pieteicies.
Visi sīkfaili, kas ir ievietoti, tā sakot, jūsu Mac datorā,
personālajā datorā vai tālrunī, tiek pastāvīgi parādīti vietnē katru
reizi, kad noklikšķināt uz saites vai veicat citu pieprasījumu šai
vietnei.
Un mehāniski, kā tas darbojas, ne tikai metaforiski ar tinti, būtībā
notiek šādi.
Šeit ir HTTP pieprasījuma piemērs, piemēram, Gmail.
Un, piemēram, pieņemsim, ka esat pieteicies.
Parasti, sākot no pagājušās nedēļas mēs teicām, ka atgriešanās no
servera būs vēl viena virtuāla aploksne, kurā būs 200 OK ziņojumi un
pēc tam faktiskā tīmekļa lapa vai kaķa attēls, vai vienalga kas tas
varētu būt.
Taču Google var arī, ja viņi ir pārliecinājušies, ka esat pareizi
ievadījis lietotājvārdu un paroli, viņi var rīkoties tāpat, kā
apzīmogot jūsu roku.
Un veids, kā viņi to dara, no servera uz jūsu pārlūkprogrammu nosūta
papildu teksta rindiņu šajā virtuālajā aploksnē, burtiski izmantojot
citu HTTP galveni.
Ne satura tips-- tas vienkārši norāda, kāds saturs ir atgriezies--
tie burtiski nosūta HTTP galveni, ko sauc par set-cookie.
Un tad viņi iestata atslēgas-vērtību pāri jūsu Mac vai PC datorā.
Šis ir smaidošās sejiņas zīmoga tehniskais ekvivalents.
Un tas, kam ir paredzēts jūsu dators — jo jūsu datoram un interneta
pārlūkprogrammai ir paredzēts ieviest HTTP — ikreiz, kad pakalpojumā
Gmail noklikšķināt uz citas saites vai noklikšķināt uz cita pasta vai
tamlīdzīgi, jūsu pārlūkprogramma jums nezinot parāda to rokas zīmogu.
Un tas, kā tas tehniski tiek darīts, ir norādīts aploksnē, ko tas
nosūta Google no jūsu pārlūkprogrammas, tas nesūta set-cookie, bet
tikai nosūta sīkfailu: un tieši tas pats.
Kamēr Google ir gudrs un tam ir datubāze vai kaut kas no visām
sesijas vērtībām, sesija ir tehniskais termins informācijas
uzturēšanai HTTP tīklā.
Kamēr uzņēmumam Google ir liela datu bāze, kas zina, ka mana sīkfaila
vērtība ir 1, 2, 3 un jūsu sīkfaila vērtība ir 4, 5, 6, viņi no šī
virtuālā rokas zīmoga var secināt, kura e-pasta ziņojumi tiem būtu
jāparāda.
Manu vai tavu vai tamlīdzīgi.
Tātad tas ir tikai virspusēji .
Bet, ja es patiešām vēlos, lai tikai Kārters varētu atcelt
reģistrāciju, man tikai jāpārliecinās, ka es viņu kaut kā pieteicu —
lietotājvārds, parole, tas viss.
Es apzīmogoju viņa roku, vai tiešām, uzliku sīkfailu viņa datorā.
Un tikai tad, ja viņa sīkfails atbilst lietotāja ID, kuru viņš mēģina
atcelt, viņam ir jāļauj to darīt.
Tātad tas viss ir pilnīgi iespējams.
Un patiešām tehniskais termins šim ir sesija.
Un tas, ko mēs domājām, ka darīsim šodien atlikušajā laikā, parādīsim
dažus piemērus tam, kā mūsdienās tiek ieviestas dažas vispazīstamākās
tīmekļa funkcionalitātes, no kurām dažas izmantosit savā devītajā
problēmu kopā, kas pati par sevi būs tīmekļa lietotne vai, iespējams,
pat savā pēdējā projektā.
Tāpēc ļaujiet man iet uz priekšu un darīt šādi.
Ļaujiet man aizvērt iepriekšējās cilnes un visu, kas ir frosh IM, un
pāriesim pie kāda pieteikšanās jēdziena ieviešanas.
Tāpēc pēc brīža es pārslēgšos šeit uz VS Code, un tas, ko es darīšu,
patiešām ir manā devītā avota direktorijā, es došos uz pieteikšanās
direktoriju.
Un, ja es šeit ierakstīšu ls, jūs redzēsit app.py, prasības.txt, kas
attiecas tikai uz bibliotēkām, kuras vēlos automātiski instalēt, kā
arī mapi veidnes.
Es turpināšu apturēt iepriekšējo serveri un aizvērt termināļa logu,
un es atvēršu šo app.py versiju.
Tātad šeit ir dažas jaunas rindas.
Un mēs jums sniegsim šīs rindas devītajai problēmu kopai, taču šeit
ir dažas no pazīstamajām lietām, tostarp šī jaunā novirzīšanas
funkcija, ko tikko izmantojām.
Un man ir arī sesijas mainīgais, kas nāk arī ar Flask.
Flask atkal patīkami ir tas, ka tas nodarbojas ar visu šo sīkfailu
saturu jūsu vietā.
Tas iestata sīkfailus.
Tas pārbauda sīkfailus.
Un tas, ko Flask sniedz jūsu labā, ir tas, ka jūs iegūstat mainīgā,
ko sauc par sesiju, abstrakciju, lai viss, ko ievietojat sesijas
mainīgajā, kas pati par sevi ir vārdnīca, būs tur atkal un atkal un
atkal, kad tas pats lietotājs atgriezīsies.
Sesija ir veids, kā jūs ieviešat sakāmvārdu iepirkumu grozu.
Ja es esmu pieteicies Amazon, jūs esat pieteicies Amazon, Amazon
zina, kurš no mums ir kurš, izmantojot šo sīkfailu.
Un Amazon, ja viņi izmanto Flask, nodrošina programmētājam vārdnīcu,
ko sauc par sesiju.
Un Flask nodrošina, ka tad, kad Kārters apmeklē vietni, kods izmanto
viņa sesijas objektu.
Kad es apmeklēju vietni, tā izmanto manu sesijas objektu.
Bet tas viss tiek īstenots ar tiem pašiem sīkfailiem.
Tas ir tāds pats kā iepriekš.
Šīs rindas ir jaunas, un tās būs redzamas devītajā problēmu kopā.
Tādā veidā mēs iespējojam sesijas tīmekļa lietojumprogrammā.
Un es tikai pamāšu detaļām.
Ir dažādi veidi, kā ieviest sesijas, neatkarīgi no tā, vai izmantojat
sīkfailus serverī, sīkfailus pārlūkprogrammā vai citas lietas.
Tie tikai nodrošina, ka mēs saglabājam sesijas informāciju iepirkumu
grozā pašā serverī.
Tagad šeit lejā, iesim uz priekšu un darīsim šādi.
Ejam uz priekšu un palaižam Flask.
Palaižam, lai es varētu redzēt, ko šī lietotne dara.
Ja es to izdarīšu un apmeklēšu URL, kas tiek izvadīts, šeit tiks
parādīta ļoti vienkārša tīmekļa lapa.
Un, ja es ierakstīšu, piemēram, savu vārdu — es nepūlēšos ar paroli —
un noklikšķināšu uz Pieteikties, jūs redzēsit, ka esat pieteicies kā
Deivids.
Un tagad es varu atteikties.
Tāpēc es iešu uz priekšu un noklikšķināšu uz Iziet.
Un tagad šķiet, ka tas zina, ka neesmu atkal pieteicies.
Es varu pieteikties kā Kārters, jo es netraucēju ieviest paroles
vienkāršības labad, taču tagad vietne zina, ka esmu pieteicies kā
Kārters.
Vēl labāk, ja es atkārtoti ielādēju, ielādēju, ielādēju atkārtoti vai
vēlreiz noklikšķinu uz šīs pogas un vēlreiz ievēroju, ka tas joprojām
zina, ka esmu Kārters, līdz brīdim, kad es izrakstīšos.
Labi, kā tas darbojas?
Atgriezīsimies šeit pie VS Code un ļaujiet man ritināt uz leju,
pirmkārt, līdz šim maršrutam.
Šī ir ļoti izplatīta paradigma, saskaņā ar kuru es pārbaudu indeksa
maršrutu.
Ja sesijā nav vārda, novirziet lietotāju uz /login.
Tagad ko tas nozīmē?
Nu, ļaujiet man atgriezties pie VS Code šeit.
Ļaujiet man doties uz /route.
Tātad atkal jūsu URL būs atšķirīgs, bet es vienkārši pāriešu uz
slīpsvītru un nospiedīšu taustiņu Enter.
Ņemiet vērā, ka mani automātiski novirzīja uz pieteikšanos.
Un tik daudzas vietnes to dara.
Ja apmeklējat vietni un neesat pieteicies, jūs ļoti bieži tiekat
novirzīts uz /login vai /account, vai kaut ko līdzīgu, kur tiek
parādīts uzaicinājums.
Kods, kā to izdarīt, ir tieši šeit.
Ja sesijā nav vārda, ja iepirkumu grozā nav vārda, tā teikt,
dodieties uz priekšu un atgrieziet lietotāju, lai pieteiktos šajā
maršrutā.
Pretējā gadījumā, netieši, ja viņi ir pieteikušies, parādiet tiem
index.html.
Tātad, atšķetināsim šo.
Ļaujiet man atvērt VS Code otru termināļa logu.
Ļaujiet man iedziļināties 9. avotā un tajā pašā pieteikšanās
demonstrācijā, un ļaujiet man atvērt veidni ar nosaukumu index.html.
Un šeit tas viss ir.
Ir zināms izkārtojums, bet kuram šobrīd tas interesē, tā ir tikai
vispārīga HTML tekstveidne.
Šeit ir pamatdaļas bloks.
Man ir šis.
Un arī šī ir Jinja figūriekavu un zīmes dēļ.
Procentu zīme, ja sesijā ir vārds-- tā ir tikai Python sintakse-- tad
sakiet šo teikumu.
Jūs esat pieteicies kā-- neatkarīgi no vārda, kas atrodas sesijā,
iepirkumu grozā, tā teikt.
Un tad man vienkārši ir šī HTML saite lietotāja izrakstīšanai.
Citādi, ja sesijā nav vārda, loģiski, vienkārši sakiet, ka neesat
pieteicies.
Un tā vietā dodiet viņiem manuālu saiti, lai pieteiktos.
Tas ir viss, ko dara šī konkrētā veidne, bet kā darbojas /login?
Ieiesim šajā citā veidnē, login.HTML kodā, uz kuru esmu novirzīts.
Super vienkārši.
Šī ir tikai kopēšana - ielīmēšana no HTML iepriekš.
Man ir pieteikšanās forma, kurā būs darbība /login, privātuma labad
tā tiek iesniegta tikai ar POST, un pārējā daļa ir tikai vienkārša
forma.
Un es izmantoju type=submit, nevis button=type=submit, taču arī šeit
ir tāda pati ideja.
Un, ja es atgriezīšos vietnē app.py, redzēsim, kā darbojas
pieteikšanās.
Labi.
Tas ir daudz uzreiz, taču tie ir salīdzinoši vienkārši vienas un tās
pašas idejas atkārtojumi.
Tātad, ja lietotājs apmeklē /login, izmantojot GET vai POST,
izsauciet šo funkciju login.
Ja lietotājs ir iesniedzis, izmantojot POST, un mēs esam redzējuši šo
metodi iepriekš, turpiniet un dariet to 23. rindā.
Saglabājiet šajā īpašajā sesijas mainīgajā, kas tiek piegādāts kopā
ar Flask, vārda atslēga un saglabājiet tajā paša lietotāja vārdu.
Tātad, atvērējpēdiņas, aizvērējpēdiņas, "name" būs vērtība Deivids
vai Kārters vai tamlīdzīgi.
Tiklīdz to izdarīsit, novirziet lietotāju atpakaļ uz slīpsvītru, lai
viņš atkal redzētu sākumlapu.
Un šādi darbojas arī Amazon un visas šīs citas vietnes.
Pretējā gadījumā, ja viņi apmeklē šo lapu netieši, izmantojot GET,
un, lai gan es neteicu = = GET jebkur, tas to nozīmē, jo, ja jūs
varat nokļūt tikai ar GET vai POST, un mēs jau apstrādājām POST,
loģiski, ka atliek tikai GET.
Tad vienkārši parādiet viņiem pieteikšanās ekrānu.
Bet ir pusducis veidu, kā mēs varam izteikt šo pašu loģiku.
Un tad, lai izietu, tas ir diezgan vienkārši.
Ja lietotājs noklikšķina uz šīs iziešanas saites un nonāk pie
/logout, šajā maršrutā, vienkārši mainiet šīs atslēgas vērtību
sesijā, lai tā nebūtu.
Faktiski nē, Kārters ir prom.
Deivids ir prom.
Neviens nav pieteicies.
Tas ir viss, kas nepieciešams, lai faktiski īstenotu pieteikšanos un
izrakstīšanos no vietnes.
Plus paroles lieta, kurai, iespējams, vajadzētu būt saistītai ar datu
bāzi, bet pa vienai lietai vienlaikus.
Un tiešām, sesija līdzinās iepirkumu groza koda versijai, proti, ja
es apmeklēju to pašu kodu, es saņemu savu sesijas objektu.
Ja Kārters apmeklē vietni, viņš iegūst savu sesijas objektu.
Un veids, kā Flask palīdz mums saprast, viņi ievieto vienu sīkfailu
manā datorā, citu sīkfailu savā datorā un izmanto tos, lai
nodrošinātu, ka īstā sesija tiek parādīta īstajam lietotājam.
Vai jums ir jautājumi par šo sesijas jēdzienu?
Nē?
Labi, kā būtu ar pāris pēdējiem piemēriem, lai to visu apkopotu.
Ļaujiet man atgriezties pie VS Code šeit.
Ļaujiet man pamest iepriekšējo Flask versiju.
Ieiesim devītajā avotā un veikalā, kas ir atsevišķa lietotne.
Un sāksim, vienkārši palaižot Flask, lai redzētu, ko tas dara.
Virziet kursoru virs URL un atveriet to citā cilnē.
Un arī šis ir diezgan neglīti.
Ļaujiet man pietuvināt.
Bet tas ir ļoti vienkāršs grāmatu veikals.
Tāpat kā agrīnā vietnes amazon.com versija, par katru no šīm septiņām
grāmatām, no kurām katra, šķiet, ir — varbūt šī ir H1, šī ir H2, H2,
H2, H2.
Un tad zem katras ir poga.
Tagad izmantosim to kā iespēju, lai secinātu, kā tas darbojas, tāpat
kā jebkurai vietnei.
Ļaujiet man iet uz priekšu un apskatīt lapas avotu-- un jūs varat to
darīt jebkurai tīmekļa vietnei internetā.
Mēģināsim izdomāt, kā šī grāmatnīca pievieno lietas grozam.
Šeit ir H1 tags.
Neinteresanti.
H2, H2, H2.
Tātad sulīgā daļa ir šajās formās.
Katrai no šīm veidlapām ir darbība /cart, tāpēc tas ir maršruts, kas
pēc brīža būs interesants.
Un tas izmanto POST privātuma labad.
Katrai no šīm formām, piemēram, Kārtera reģistrācijas atcelšanas
funkcijai, ir ID atribūts-- vizuāli paslēpts ID parametrs, kura
vērtība ir 1, 2, vai 3.
Tātad, tā kā unikālie grāmatu svītrkodi, tā teikt.
Bet mūsu gadījumā ļoti mazi skaitļi.
Un tad katrai no šīm citām grāmatām ir identiska forma, izņemot šo
vērtību šeit.
Tagad šajā gadījumā tas nav nekas liels, ka lietotājs varētu tehniski
uzlauzt šīs grāmatnīcas amazon.com HTML un mainīt ID, jo, ak, kas ir
ļaunākais, ko viņš darīs?
Pirks vairāk grāmatu, pievienojot iepirkumu grozam vairāk ID?
Tā nav problēma.
Šeit nav cenu, ir tikai grāmatu unikālās idejas.
Tātad, lai gan atreģistrācija, iespējams, bija satraucoša, jo jūs
maināt serveri, es domāju, ka tas ir labi, jo lietotājs var tikai
sliktākajā gadījumā iegādāties vairāk grāmatu, nekā tas būtu
iespējams, izmantojot pogas.
Tātad, kā tas tagad darbojas?
Nu, iedziļināsimies VS Code vēlreiz šeit.
Ļaujiet man dot sev vēl vienu termināļa logu.
Un avotā nine/store ļaujiet man atvērt app.py, kur ir visa loģika.
Tāpēc es ātri pāršķiršu lielāko daļu šī, jo mēs to esam redzējuši
iepriekš.
Šis imports ir gandrīz tāds pats kā iepriekš.
Šī rindiņa ir tāda pati.
Šī rinda ir gandrīz tāda pati, taču datubāze tagad tiek saukta
store.db, nevis frosh IMs.db.
Šis ir standarta kods tikai sesiju iespējošanai, šim iepirkumu groza
konceptam.
Un tāpēc redzēsim, kā darbojas indekss.
Kā tas ir, ka es redzu visas septiņas grāmatas vienlaikus?
Šajā index funkcijā es izmantoju 19. rindu, izvēlieties zvaigznīti no
grāmatām, lai visas grāmatas iegūtu no datu bāzes.
Un tad es atveidoju veidni, ko sauc par bookstore HTML, kas tiek
izmantota kā vietturis visām šīm grāmatām.
Labi, uz mirkli mēģināsim atšķetināt šo.
Ļaujiet man atvērt books.HTML savā veidņu direktorijā.
Un šeit atkal, lai gan šodien tas ir jauns, tas, iespējams, kļūst
arvien pazīstamāks sintaktiski.
Šeit ir H1.
Šeit ir mana cilpa.
Šeit ir H2, kas šajā ciklā izvadīs pašreizējās grāmatas nosaukumu.
Šeit ir forma.
Šeit ir šīs grāmatas ID, kas tiks izvadīts formā.
Tāpēc es manuāli neierakstīju septiņas garas formas, es tikai
ievadīju vienu šajā veidnē, lai tā tiktu ģenerēta automātiski.
Burtiski, ko darītu tāda vietne kā Amazon, lai vienlaikus parādītu 10
grāmatas vai 10 vai vairāk meklēšanas rezultātus.
Nu labi, ejam uz /cart, kurš bija tas sulīgais.
Un šis ir garāks, bet paskatīsimies, vai varam to saprast.
Ja lietotājs iesniedz, izmantojot GET vai POST /cart, mēs vispirms
darām šādi.
Un tas ir vienkārši nepieciešams, un dažas tekstveidnes ir
pārrakstītas.
Mēs izmantosim sesijas objektu, lai saglabātu mainīgo, ko sauc par
cart, kas šajā gadījumā būs saraksts.
Tātad sesija atkal ir tikai vārdnīca.
Jūs varat ievietot tajā visu, ko vēlaties.
Iepriekš likām studentu vārdus un sporta veidus.
Tagad tas, ko es gribu darīt, ir-- atvainojiet, iepriekš tajā
ievietojām studenta vārdu, lietotāja vārdu.
Tagad es faktiski uzglabāšu groza atslēgu, kuras vērtība ir saraksts.
Kāpēc?
Jo es vēlos šajā sarakstā apkopot arvien vairāk grāmatu.
Labi, tas tikai nodrošina, ka man ir vismaz tukšs iepirkumu grozs jau
pirmajā reizē, kad lietotājs dara šādi.
Ja viņi apmeklē šo formu, izmantojot POST, iegūsim viņu publicētās
grāmatas ID.
Ja tas nav tukšs, ja ir cipars, piemēram, 1, 2 vai 3, ieejam
iepirkumu grozā-- kas ir saraksts šajā rindā-- un vienkārši
pievienosim šo ID.
Tātad šajā iepirkumu grozā esošo grāmatu sarakstā būs 1, 2, 4, 6 —
neatkarīgi no tā, kuras grāmatas jūs faktiski pērkat.
Un tad lietotājs tiek novirzīts uz grozu.
Ko darīt, ja lietotājs šeit nokļuva, izmantojot GET, nevis POST?
Nu šis ir salīdzinoši vienkārši.
Ja jūs tikko apmeklējat /cart, mēs atlasām zvaigznīti no grāmatām,
kurās ir ID-- labi, tātad tas ir interesanti-- šis saraksts.
Un šī ir sintakse, kuru jūs, iespējams, iepriekš neesat redzējuši.
Bet, ja lasāt CS50 bibliotēkas dokumentāciju, ja atlasāt kaut ko un
izmantojat jautājuma zīmes vietturi, bet pats vietturis ir saraksts,
mēs izvadīsim ar komatu atdalītu vērtību sarakstu tāpat kā jūs
izmantotu varbūt septitajā uzdevumu kopā, lai veiktu SQL vaicājumus
pats.
Tātad tas tikai nozīmē, ka parādiet man tikai tās grāmatas, kas ir
manā iepirkumu grozā.
Ne Kārtera, ne kāda cita, ne visā datubāzē, tikai parādiet man
iepirkumu grozā esošās grāmatas un pēc tam atveidojiet tās kā tādas.
Tātad mēs redzējām tikai, kā izskatās katalogs šeit /books.
Iesim uz priekšu un pievienosim manam grozam varbūt pirmo grāmatu.
Un tagad pie /cart redzu tikai to pirmo grāmatu, kuras ID ir viens.
Ļaujiet man tagad atgriezties šeit esošajā grāmatnīcā, ritināt līdz
varbūt septītajai grāmatai un pievienot to manam grozam.
Un tagad es to redzu arī šeit.
Tikmēr visa šī informācija tiek glabāta manā sesijā.
Kad es atkal un atkal ielādēju šo grozu, es redzu tikai savus divas,
jo mēs manā sesijā pārbaudām tikai sarakstu.
Un Flask, atkal pārliecinieties, ka mana sesija atšķiras no jūsu
sesijas, atšķiras arī no Kārtera sesijas.
Bet jūs ierakstāt kodu vienreiz, un tas darbojas tūkstošiem,
miljoniem cilvēku paralēli.
Vai ir kādi jautājumi par šo?
Jā, aizmugurē.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Atvainojiet, runājiet mazliet skaļāk.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Atkārtojumam.
Tātad lietotājiem nekad nebūs vienādas sesijas vērtības.
Teorētiski sīkfails, kas tiek iestādīts, ne visiem izskatās kā
smaidoša sejiņa.
Katrs no mums saņem lielu, nejaušu skaitli, kas mums ir piešķirts.
Tātad tas būtu tā, it kā katrs no mums iegūtu pilnīgi unikālu rokas
zīmogu, ko neviens cits nevar redzēt.
Iemesls, kāpēc neviens cits to nevar redzēt, ir tāpēc, ka, ja vietne
izmanto HTTP, katru reizi, kad tiek parādīts šis rokas zīmogs,
ikreiz, kad šis sīkfails tiek sūtīts uz priekšu un atpakaļ, tas viss
tiek arī šifrēts.
Tātad katrs no mums var-- pat ja mums nejaušības dēļ ir vienāds
saturs, jo mums patīk vienas un tās pašas grāmatas, tās būs atsevišķi
sīkfaili, atsevišķa atmiņa, atsevišķas sesijas.
Aiz jums.
Jā.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Tiešām labs jautājums.
Kad sesija beidzas?
Pilnīgi konfigurējams.
Parasti tas beidzas, kad aizverat cilni vai aizverat pārlūkprogrammu.
Vai arī varat konfigurēt sīkfailus, lai tie būtu noturīgi vienu
dienu, nedēļu vai ilgāk.
Piemēram, kad jūs piesakāties pakalpojumā Gmail, viņi, iespējams,
ievieto jūsu datorā sīkfailu uz nedēļu, mēnesi, gadu, kaut kā tā, jo
tas būtu kaitinoši un, iespējams, novirzītu jūs uz programmu Outlook
vai kaut ko citu, ja jums būtu jāturpina pieteikties savā kontā.
Savukārt jūsu bankas konts faktiski sagaida, kamēr jūs vienkārši
aizverat cilni.
Un tad jūsu finansiālās drošības labad viņi vienkārši automātiski
izdzēš sesiju daudz ātrāk.
Bet pilnīgi konfigurējams.
Pēc noklusējuma, kad es to izmantoju, tie parasti tiek izmesti, kad
pati pārlūkprogramma tiek aizvērta.
Un arī šeit ir vēl viens iemesls, lai izstrādātu vietnes, izmantojot
inkognito režīmu, jo, ja vēlaties vienkārši izmest visus savus
sīkfailus, aizveriet inkognito loga režīmu.
Atveriet jaunu, un tagad jūs sākat no nulles.
Jums nav manuāli jādzēš visi sīkfaili, kas var jūs izrakstīt no
vietnēm, kas jums patiešām ir svarīgas.
Jā.
Auditorija: [NESAKAUSĀMS]
DEIVIDS MEILANS: Labs jautājums.
Vai, izmantojot sesijas, ja kāds ļaunprātīgi maina šādu formu
vērtību, tas var ietekmēt citus cilvēkus?
Teorētiski nē, jo sliktākais, ko varat darīt, ir pievienot savam
iepirkumu grozam grāmatas, kuras jūs tur nevēlaties.
Tātad tajā brīdī, pat ja tas atrodas serverī, tas neietekmē jūs vai
Kārteru vai kādu citu, ja vien nenotiek kaut kas globālāks, piemēram,
reģistrēšanās sportam vai grāmatu noņemšana no Amazon datu bāzes.
Tas būtu problemātiski.
Taču šajā gadījumā mēs noņemam lietas tikai no manas sesijas, ko man
sniedz vietne.
Labi, šodienas pēdējā tēma ir šī lieta, kas mūsdienās ir it kā visur,
šīs lietas, ko sauc par API vai lietojumprogrammu saskarnēm.
Un tas patiesībā ir ļoti vispārīgs termins.
Tā kā jebkura funkcija, ko izmantojāt programmā C, Scratch, Python un
SQL, visas ir API.
Ir standarta veids, kā savienot šīs funkcijas.
Tām visiem ir vārdi.
Tām dažreiz ir atgriezes vērtības.
Tām dažreiz ir argumenti.
Un API ir tikai veids, kā jūs izmantojat funkciju.
Vai vispārīgi runājot, API tikai norāda, kā jūs mijiedarbojaties ar
kādu pakalpojumu.
Un tāpēc mūsdienās ir daudz tīmekļa pakalpojumu, ko varat izmantot,
lai iegūtu datus, piemēram, laikapstākļus vai pašreizējo laiku, vai,
piemēram, Amazon grāmatu datubāzi, visiem var būt API, bieži vien
tīmeklī, kas ļauj izmantojot vietrāžus URL vai kādu citu tehnoloģiju
iegūt datus no kāda cita, it kā tā būtu funkcija, uz kuru izsaucat
attālināti.
Bet HTTP ļoti bieži ir mehānisms, ko izmanto, lai faktiski iegūtu
datus no serveriem.
Un veids, kā dati var atgriezties, var būt šādi.
Ļaujiet man pabeigt ar vienu pēdējo piemēru, izmantojot dažas no mūsu
pazīstamajām izrādēm no iepriekšējām nedēļām.
Ļaujiet man iet uz priekšu un aizvērt veco Flask versiju, atgriezties
devītajā avotā un iedziļināties - kā būtu ar piemēru, ko sauc par
šoviem.
Un šī pirmā versija, nulle, es tikai gatavojos iet uz priekšu un
palaist ar Flask run.
Es virzīšu kursoru virs sava URL un atvēršu to šeit.
Un jūs tagad redzēsit, ka man ir ļoti vienkārša forma, kā mēs to
darām arī šodien.
Es šajā meklēšanas lodziņā ierakstīšu O-F-F-I-C-E, office un
noklikšķināšu uz Search.
Tagad jūs redzēsit, ka es nokļuvu URL, kas beidzas ar
/search?q=office.
Tātad šī ir kā mana mazā google.com versija, taču es to ieviesu pats.
Un jebkuru TV pārraides nosaukumu, kas izdots pāris nedēļas iepriekš
un kas atbilst OFFICE, es to izspļauju nesakārtotā sarakstā.
Kā tas darbojas?
Jūs varat iedomāties, pat ja jūs, iespējams, nevarēsit to
uzprogrammēt tik drīz no galvas — ļaujiet man ieiet 9. avotā.
Ļaujiet man pāriet uz show nulle un atvērt app.py.
Un šajā failā jūs redzēsiet, ka es paņemu failu show.db, kas ir kā
vienkāršāka versija tai pirms pāris nedēļām.
Lūk, kāpēc es redzu tīmekļa formu.
Mans pirmais maršruts, mans indekss ir ļoti vienkāršs.
Tas vienkārši izspļauj šo formu.
Un mans meklēšanas maršruts, to var uzskatīt par google.com, ir tikai
kādas četras koda rindiņas.
Tātad, ja lietotājs nosūta datus uz /search, tiek izsaukta šī
funkcija, ko sauc par meklēšanu.
Es deklarēju mainīgo, ko sauc par shows, es izpildu SQL komandu, kas
ir select, zvaigznīte, from, shows, where title like, jautājuma zīme.
Un sintakse šeit ir nedaudz traka, bet es vēlos pievienot lietotāja
ievadīto procentu zīmi priekša un pievienot tai arī procentu zīmi
aizmugurē, liekot starp šīm divām vērtībām faktisko ievadi, kāpēc?
Ko tas nozīmē SQL, ja jums ir procentu zīme pa kreisi un pa labi?
Šodien nav nekāda sakara ar Jinju.
Auditorija: [NESAKLAUSĀMS]
DEIVIDS MEILANS: Jā, tā ir pielāgojošā kārts.
Tātad tas nozīmē, ka kreisajā pusē jāatbilst nullei vai vairāk
rakstzīmēm vai labajā pusē jāsakrīt ar nulli vai vairāk rakstzīmēm.
Jums ir jāveic savienošana kā otrais šīs funkcijas arguments.
Jūs nevarat darīt kaut ko gudru, piemēram, ievietot to šeit ap
jautājuma zīmi, jautājuma zīme ir vietturis, kurā pievienojat šīs
vērtības.
Bet tas tikai nozīmē, hey SQL, parādiet man visus nosaukumus, kuros
kaut kur ir OFFICE.
Tas man atgriež vārdnīcu sarakstu.
Es to nododu kā vietturi mainīgajam, ko sauc par shows, un, ja
skatāmies uz search.HTML, apskatīsim to.
Manā veidņu direktorijā ir kaut kas tāds, ko sauc par search.HTML.
Ļoti vienkārši, es domāju, ka tā ir google.com meklēšanas rezultātu
būtība.
Es izmantoju nesakārtotu sarakstu, lai lietas būtu vienkāršas, taču
es integrēju katru šovu šovu sarakstā, kas tika atgriezts, un izvadu
li ar katra šova nosaukumu.
Un viss.
Tagad Google ir zilas saites, nelieli priekšskatījumi un cits teksts,
apmēram pirmais teikums no katras lapas.
Bet tāda ir doma.
Tas pēc būtības ir ļoti līdzīgs tam, ko google.com/search dara.
Tagad, kā tas darbojas, šeit vēl nav iesaistīts neviens app.py.
Tas ir tikai ļoti vienkāršs HTTP.
Es iesniedzu formu, dodos uz citu maršrutu un saņemu atpakaļ
rezultātus.
Bet pārbaudiet šo versiju.
Ļaujiet man aizvērt šīs cilnes šeit un atvērt savu pirmo termināļa
logu.
Ļaujiet man ieiet shows no šodienas devītā avota direktorija un
šoreiz palaist Flask run.
Ļaujiet man virzīt kursoru virs šī URL un atvērt to šeit.
Un tagad vairs nav pogas Iesniegt.
Tagad es gatavojos izveidot lietotāja saskarni, kas izmanto
paņēmienu, ko sauc par AJAX-- asinhronajam, JavaScript un XML, kas ir
nedaudz novecojis termins, jo mēs vairs neizmantojam kaut ko, ko sauc
par XML.
Bet AJAX ir paņēmiens, ar kuru jums vairs nav jāiesniedz formas, lai
iegūtu vairāk datu no servera.
Varat izmantot JavaScript kā pagājušajā nedēļā, saklausot darbību,
piemēram, taustiņu nospiešanu uz leju vai augšu, un, tiklīdz dzirdat
šādu darbību, varat slepeni JavaScript kodā nosūtīt serverim
pieprasījumu atgūt vairāk datu, un pēc tam pievienot to datora atmiņā
esošajam Dom-- kokam.
Un tas nodrošina vienkāršāku pieredzi, piemēram, automātisko
pabeigšanu jebkurā vietnē.
Tāpēc tagad ļaujiet man mēģināt rakstīt O-- mēs veicām automātisko
pabeigšanu ļoti ātri.
F-F-I-C-E.
Un jūs redzēsiet ikreiz, kad ievadei pievienošu citus taustiņus, es
veicu vēl vienu meklēšanu, vēl vienu meklēšanu, vēl vienu meklēšanu,
un dati mainās.
Tagad, kā tas darbojas?
Ļaujiet man atgriezties pie VS Code šeit.
Un manā otrā termināļa logā ļaujiet man atvērt app.py.
Un vietnē app.py jūs redzēsit, ka zemāk joprojām ir meklēšanas
maršruts, kas atgriež meklēšanas veidni, taču skatieties šo.
Ļaujiet man iedziļināties templates/search.HTML un pamanīt šeit, ka
mēs patiešām atkal un atkal un atkal saņemam nesakārtotu šovu
sarakstu.
Un šis HTML, kas atgriežas-- ļaujiet man doties šeit.
Ļaujiet man atvērt savu termināli-- ak, atvainojiet.
Šī ir nepareizā versija.
Atvainojiet, es atrados nepareizajā mapē.
Labosim šo.
Pirmajā programmā app.py kods ir gandrīz tāds pats.
Meklējot šeit-- labi, es to nedaudz mainīšu.
Ļaujiet man parādīt šo meklēšanas versiju.
Ja es atveru app.py, šeit ir mans meklēšanas maršruts.
Es saņemu mainīgo ar nosaukumu q, piešķirot tam vērtību iegūtu no
request.args no lietotāja, piemēram, q=office.
Un tad es pārbaudu, vai lietotājs tiešām kaut ko ierakstīja izpildē
šo SQL vaicājumu.
Atlasiet zvaigznīti no shows, kuru nosaukums ir tāds, izmantojot to
pašu.
Un šoreiz, lai lietas būtu efektīvas, es ierobežoju kopējo rezultātu
līdz 50, nevis bezgalīgu skaitu.
Citādi, ja lietotājs neko neieraksta, lai šeit būtu īpaši droši, es
iestatu showsvienāds ar tukšs saraksts.
Tātad, ja neko neierakstiet, nav ko rādīt.
Un neatkarīgi no tā, es renderēju šo veidni ar nosaukumu search.HTML.
Nu, paskatīsimies uz to.
Ja es atveru templates/search.HTML, šoreiz nav izkārtojuma.
Šim layout.HTML nav pārmantojuma, es burtiski ģenerēju tikai veselu
kaudzi li fragmentu.
Kāpēc?
Nu, paskatīsimies, kas notiek pārlūkprogrammā.
Un tas ir API sākums.
Ja es vēlētos padarīt pieejamu šo API-- šo lietojumprogrammu
saskarni-- es varētu pateikt pasaulei, ka, ja vēlaties manā datubāzē
meklēt TV šovus, dodieties uz URL, tādu, tādu, /search?q=office vai
kaķis, suns vai jebkas cits.
Un tas, ko es jums atgriezīšu, ir šis.
Ievadiet-- es jums iedošu veselu virkni li tagu, kas gandrīz izskatās
vienādi.
Bet ļaujiet man apskatīt lapas avotu.
Tikai vai es jums atdošu HTML fragmentu.
Es nedodu jums HTML tagu, pamatdaļas tagu, virsraksta tagu vai
galvenes tagu.
Es jums nedošu tīmekļa lapu.
Es dodu jums HTML fragmentu, ar kuru tagad varat darīt visu, ko
vēlaties, tostarp ievietot to savā nesakārtotajā sarakstā.
Tāpēc ievērojiet, kas notiek šajā lietotnē.
Ja es atgriezīšos šeit pie VS Code, ļaujiet man atvērt savu indeksa
veidni šeit, un jūs redzēsit JavaScript maģiju.
Tātad, ko es daru šeit esošajā JavaScript, manā formā, kurā bija
tikai tekstlodziņš un nebija pogas?
Šeit esošajā skripta tagā es izveidoju mainīgo, ko sauc par ievadi.
Un es izmantoju šo funkciju, ko sauc par vaicājumu atlasītāju, kas
man vienkārši parāda atsauci uz veidlapas ievades tekstlodziņu.
Tātad es varu redzēt, ko cilvēks ierakstīja.
Šodien tas ir nedaudz savādāk, taču es izmantoju
input.addEventListener, kas ir veids, kā JavaScript, tāpat kā
programmā Scratch, klausīties, vai kaut kas notiek, piemēram, tiek
noklikšķināts uz zaļā karoga.
Bet šajā gadījumā saklausīt darbību, kas ietver ievadi.
Tas ir tāpat kā rakstīt uz tastatūras, izmantojot kopēšanu -
ielīmēšanu, manuālu ievadi vai jebko citu.
Tad vienmēr, kad tas notiek, izsauciet šo funkciju.
Un async nozīmē Asinhrons.
Šis ir profesionāls termins, kas nozīmē, ka šīs funkcijas izpildei
var būt nepieciešama sekundes daļa, varbūt pat sekunde vai divas.
Tātad tas to darīs aizkulisēs, fonā, tā sakot.
Un ko tas darīs?
Tas izsauks JavaScript funkciju, ko tagad atbalsta visas
pārlūkprogrammas, un tā ir funkcija, kas izmanto HTTP, lai iegūtu
vairāk datu no servera.
Tas ienesīs datus no maršruta ar nosaukumu /search?q= un lietotāja
ievadīto vērtību.
Tāpēc es tikai manuāli izveidoju savu mini URL un saku JavaScript,
atnesiet man šo HTML.
Kad tas atgriezīsies, izmantojot šo teksta rindiņu, ko šeit sauc par
response.teksts, un ļaujiet man pamāt ar roku, gaidot.
Gaidīšana nozīmē, ka tas var neatgriezties uzreiz.
Gaidīsim atbildi un, kad tā tiks saņemta, izpildīsim šo kodu.
Es to darīšu.
Es meklēšu dokumentā, visā tīmekļa lapā, lai atrastu šo UL tagu, kas
ir kaut kur šajā lapā, ko mēs redzēsim pēc brīža.
Mainiet tā iekšējo HTML, lai tas būtu visu šo atbilstošo šovu li, li,
li fragments.
Un kur tas viss paliek?
Ja mēs ritināsim šeit, jūs pamanīsit, ka augšpusē ir mans parastais
HTML.
Head tag, body tag un tas viss.
Tur ir tekstlodziņš, par kuru mēs jau runājām.
Iesniegšanai nav pogas, jo tas viss notiek automātiski.
Bet pēc noklusējuma ir šis tukšais UL, kam pēc noklusējuma nav nekā,
līdz mēs sākam lietot šo API.
Un pēdējais žests šeit ir šis.
Tas ir neglīts, nekārtīgs veids, kā iegūt datus no servera, lai
vienkārši atgūtu HTML fragmentu.
Piemēram, ja es neizmantoju HTML?
Es vēlos saglabāt šīs TV pārraides PDF failā vai kādā citā tīmekļa
tagā, tabulā vai tamlīdzīgi.
Nav īsti jēgas, ja serveris pieņem, ka es vēlos, lai tagi apņem katru
no maniem datiem.
Labāk būtu atgūt vispārīgāku formātu.
Un šo formātu mūsdienās gandrīz vienmēr sauc par šo, mūsu pēdējo
saīsinājumu — JSON, JavaScript objektu notācija.
Un ļaujiet man izdarīt šādi.
Ļaujiet man aizvērt šīs divas cilnes un atvērt savu termināļa logu un
atcelt iepriekšējo Flask versiju, kas darbojās.
Ļaujiet man aizvērt šo versiju un apskatīt mūsu galīgo versiju, kas
tiek saukta par shows two un palaist Flask.
Es virzīšu kursoru virs šī URL un atvēršu to pārlūkprogrammā.
Un es iešu manuāli apmeklēt, pēc pietuvināšanas, ievadīsim vēlreiz
/search?q=office Enter.
Un šādi izskatās JSON.
No pirmā acu uzmetiena tas nešķiet kā uzlabojums.
Izskatās traki, ka tas ir tikai šis lielais teksta blāķis.
Bet te ir tikai pietiekami daudz teksta, lai dators varētu to droši
apstrādāt.
Ņemiet vērā, ka šeit ir kvadrātiekavas.
Un, ja es ritinātu līdz apakšai, tur lejā būtu slēgtas kvadrātiekavas.
Šīs kvadrātiekavas iekšpusē ir figūriekavas, pēc tam ID, kols un pēc
tam skaitlis.
Pēc tam virsraksts, citāts bez pēdiņām, kols un virsraksts.
Un tad slēgtās figūriekavas.
Tātad tas, ko redzat JavaScript objektu notācijā, ir ļoti standarta
īpaši populārs formāts, kas ir tikai teksts, kurā joprojām tiek
izmantotas kvadrātiekavas sarakstiem jeb masīviem.
Tajā joprojām tiek izmantotas vārdnīcas, atslēgu-vērtību pāri.
Tātad šeit redzamais ir milzīgs saraksts — līdz pat 50 —, manuprāt,
šovi, kas radušies no šīs API, un katrai no tiem ir vārdnīca, ja
vēlaties, atslēgu-vērtību pāru objekts.
Kādas atslēgas un vērtības?
ID atslēga un nosaukuma atslēga, katrai no kurām ir attiecīga vērtība.
Un tie ir tie paši IMDb dati, no kuriem dažus jūs varētu atcerēties
vizuāli.
Tas ir tikai ļoti neapstrādāts, datoram draudzīgs veids, kā atgriezt
veselu virkni datu, kas mums, cilvēkiem, nav jāredz.
Bet es varu izmantot šos datus, atgriežoties VS kodā.
Ļaujiet man atvērt citu termināļa logu un pāriet uz avota nine/shows2.
Un šeit, ļaujiet man iet uz priekšu un atklāt, kā būtu ar veidnēm
index.html, kas iepriekš izmantoja tikai šo iekšējo HTML triku.
Un tas neatstās pozitīvu iespaidu — jūs nebūsiet apmierināts ar šo
sintaksi.
Bet ļaujiet man vismaz paskaidrot, ko mēs darām.
Izrādās, ka JSON ir tikai labāks veids kopumā, vispārīgāks,
daudzfunkcionālāks, no lietotāja neatkarīgs un valodas neatkarīgs
veids, kā atgriezt datus no servera, jo tas ir tikai teksts.
Tāpēc nav svarīgi, vai izmantojat Python, C, C++, JavaScript, vai
Ruby, vai PHP, vai ko citu.
Visas šīs valodas var apstrādāt JSON informāciju.
Un patiešām šeit ir daži JavaScript, kas tieši to dara.
Tas pats kods ir sākotnēji.
Es deklarēju mainīgo, ko sauc par ievadi, kas dod man piekļuvi
lietotāja tekstlodziņam.
Es klausos ievadi, piemēram, taustiņu nospiešanu uz augšu un uz leju.
Un, kad tas notiek, es izsaucu šo anonīmo funkciju.
Es ienesu datus no servera, izmantojot tieši tādu pašu kodu kā
iepriekš.
Search?q=office vai jebko citu.
Un tad tas ir tikai tagad jauns kods, ko es izmantoju, lai pārveidotu
šos JSON datus savā HTML formātā, neatkarīgi no tā, vai tas ir
nesakārtots saraksts vai sakārtots saraksts, tabula vai jebkas cits.
Ko es daru?
Man ir mainīgais ar nosaukumu HTML inicializēts ar neko.
Tāpēc sākotnēji man nav HTML.
Pēc tam es atkārtoju katru ID šajos šovos.
Tāpēc es integrēju katru no IMDb unikālajiem identifikatoriem pa
vienam.
Un tad es ieeju šovā tā ID atrašanās vietā un paņemu tā nosaukumu.
Un tas ir-- aizmirstiet to uz mirkli.
Pēc tam es ņemu šo HTML mainīgo, savienoju vai pievienoju tam savu li
tagu, kā arī virsrakstu un aizvērto li tagu.
Un es to izlaižu, jo tas kļuva biedējoši diezgan ātri, taču izrādās,
ka, ja dažos TV šovos tiešām ir leņķiekavas, tas var pilnībā sabojāt
manu HTML.
Tātad izrādās, ka jūs varētu ļoti īsi atcerēties, ka pagājušajā
nedēļā mums bija autortiesību simbols, izmantojot HTML elementu,
izmantojot &; un numura zīmi un 169 semikolu-- izrādās, ka ir arī
citas šādas noslēpumainas rakstzīmju secības, kas attēlo citādi
bīstamas vai nedrukājamas rakstzīmes.
Līdzīgi kā šis, kas var maldināt datoru, domājot, ka tas atrodas
atzīmes sākumā, un simbolu &, kas līdzīgi var likt datoram domāt, ka
tas ir elements, kas tas nav.
Bet īsi sakot, par laimi, ir bibliotēkas, kas lielāko daļu no tā dara
jūsu vietā.
Mūsu vajadzībām, tagad, kad jūs saprotat mazliet HTTP, tagad, kad jūs
saprotat mazliet HTML, CSS un JavaScript, kuriem visiem ir savas
lomas, varat tos izmantot, lai sāktu veidot savas tīmekļa
lietojumprogrammas, tāpat kā 9. problēmu kopas gadījumā, savienojot
visas šīs valodas un veidojot pilnvērtīgas tīmekļa
lietojumprogrammas, mobilās lietojumprogrammas vai jebko citu.
Un tam, manuprāt, mēs esam gatavi.
Un pirmajā šeit augšā var būt arī šie sīkfaili.
Tiksimies nākamreiz mūsu pēdējā CS50 lekcijā.
[SKAN MŪZIKA]