Պարզ նախագիծ՝ ձեր ծրագրավորման հմտությունները բարելավելու համար
Ուսուցումներից ազատվելու և մեր սեփական ծրագրաշարը գրելը սկսելու լավագույն միջոցներից մեկը պարզ նախագիծ ստեղծելն է՝ մեր ծրագրավորման հմտությունները սրելու և մեր սովորածը վերանայելու համար:
Այս հոդվածում մենք կստեղծենք մի փոքրիկ վեբ հավելված, որտեղ դուք կարող եք պահել ձեր նշումները:
Մեր դիմումի նշումների ցանկը բաղկացած կլինի երկու բանից՝ վերնագիր և նկարագրություն: Մեր արդյունքը վերջում սա կլինի.
Եկեք սուզվենք:
Սկսել
Պարզապես տեղադրեք՝
express
մոդուլ՝ երթուղիների մշակման համարmongoose
մոդուլ տվյալների բազայի ինտեգրման համարbody-parser
՝ կարգավորելու, թե ինչպես են մշակվելու մեր մուտքային տվյալները- Եվ, վերջապես,
pug
-ը որպես մեր դիտման շարժիչ, որը կգործի որպես մեր առջևի վերջ
npm install express npm install mongoose npm install body-parser npm install pug
Այժմ ներդնենք տվյալների բազա մեր հավելվածի համար:
Տվյալների բազայի ստեղծում
database.js
Մեզ անհրաժեշտ է պահեստավորման համակարգ մեր գրառումների համար, որպեսզի դրանք հնարավոր լինի պահպանել նույնիսկ ծրագրի ավարտից հետո: Մշտական պահեստ ավելացնելու համար մենք կօգտագործենք տվյալների բազաները:
Մենք կօգտագործենք database.js
ֆայլը՝ տվյալների շտեմարանին միանալու, հավաքածու ստեղծելու և մեր հավաքածուն Notes
անվանելու համար:
Ստեղծեք database.js
անունով ֆայլ և գրեք հետևյալ կոդը.
Line 1
: Ներմուծեքmongoose
գրադարանըLine 2
. ասեք Mongoose-ին միանալ մերnotepadDB
տվյալների բազային: Եթե որևէ սխալ է տեղի ունենում, ապա դրանք պետք է դուրս գրվեն:
Այժմ մենք պետք է ստեղծենք սխեմա մեր նշումների համար: database.js
-ում ավելացրեք հետևյալ ծածկագիրը.
Մենք ստեղծեցինք սխեմա մեր նշումների համար, NotesSchema
: Ինչպես հուշում է կոդը, այս սխեման օգտագործող փաստաթուղթը կունենա երկու դաշտ.
title
տիպի դաշտString
description
տիպի դաշտString
Այժմ ստեղծենք Notes
անունով հավաքածու, որը կօգտագործի NotesSchema
-ը:
Վերջապես, database.js
-ում գրեք կոդի այս բլոկը.
- Տող 3. Օգտագործեք
module.exports
մերNotes
մոդելի վրա, որպեսզի կարողանանք օգտագործել այս հավաքածուն մեր կոդում:
Ի վերջո, database.js
-ը պետք է այսպիսի տեսք ունենա.
Այժմ անցնենք հավելվածի երկրորդ մասին՝ update-router.js
:
Միջին ծրագիր փաստաթղթերի թարմացման համար
update-router.js
Այս ֆայլը կմշակի երթուղիները, երբ օգտվողը նավարկի դեպի այն դիրեկտորիաները, որոնք սկսվում են updatepage
-ով: Ինչպես ցույց է տալիս ուղին, այստեղ օգտվողը կթարմացնի իր համապատասխան նշումները:
Այս ֆայլը կկատարի հետևյալը
- Օգտագործեք
express.Router()
միջին ծրագիր՝id
տվյալներըupdatepage
ևupdatepage:/__id
ուղիներին ուղարկելու համար - Այս
__id
դաշտը կպահանջվի, որպեսզի տվյալների բազան կարողանա ընտրել նշված ID-ով նշումը, որն անհրաժեշտ կլինի թարմացման նպատակով:
Եկեք նախ ստեղծենք express.Router()
-ի օրինակ և ստեղծենք ժամանակավոր փոփոխական՝ id
՝ ID-ն տարբեր երթուղիներում պահելու համար:
update-router.js
-ում գրեք հետևյալ ծածկագիրը.
- Տող 1. Ստեղծեք Էքսպրես երթուղիչի օրինակ:
Քանի որ այս ֆայլը միջին ծրագիր է, մենք կարող ենք հատկություններ ավելացնել request
օբյեկտին:
Եկեք GET
հարցում կատարենք /:__id
-ով ավարտվող երթուղուն և այնուհետև նշանակենք req.id
հատկությունը երթուղու __id
պարամետրին.
Հաջորդը, update-router.js
-ում, գրեք հետևյալ ծածկագիրը.
- Տող 1. կարգավորել
GET
հարցումը/:_id
ճանապարհին: - Տող 2.
id
փոփոխականին վերագրվել էreq.id
հատկությունը: Այլ կերպ ասած, URL-ում__id
պարամետրն այժմ պահվում է այսid
փոփոխականում:
Նկատի ունեցեք, որ id
ժամանակավոր փոփոխականը նույնպես վերագրվել է նույն արժեքին: Մենք դա արել ենք, քանի որ req.id
հատկությունը կայուն չի լինի տարբեր ուղիներում:
Հաջորդը, update-router.js
-ում, գրեք հետևյալ ծածկագիրը.
- Տող 1. Այժմ կատարեք
POST
հարցում դեպի/
վերջացող երթուղին: - Տող 3. Օգտագործեք
next
ֆունկցիան՝ հաջորդ հարցումը շարունակելու համար:
Այժմ, req.id
հատկությունը կայուն է և՛ updatepage/
_ի, և՛ updatepage/:__id
_ի համար:
Վերջապես, օգտագործեք module.exports
Router
օբյեկտը արտահանելու համար, որպեսզի այն օգտագործվի այլ ֆայլերում:
Ի վերջո, update-router.js
-ը կունենա հետևյալ տեսքը.
Հիմնական JavaScript ֆայլը
main.js
Այս ֆայլը՝ main.js
, կկարգավորի հետևյալը.
- Մեր երթուղին
- CRUD-ի բոլոր գործողությունները
- Հաճախորդի կողմից ուղարկված մուտքային տվյալների մշակում
- Տվյալների ուղարկում առջևի ծայրին
HTML ֆայլեր
Մեր ճակատային մասի համար մենք կստեղծենք հետևյալ ֆայլերը.
notes-add
: Մեր նշումները ավելացնելու համար: Սա կլինի մեր գլխավոր էջը:view
: Մեր ստեղծված գրառումները դիտելու համարupdatepage
: Մեր ընտրած նշումը թարմացնելու համար
Գրադարանների ներմուծում
Ենթադրելով, որ բոլոր մոդուլները տեղադրվել են, եկեք օգտագործենք require
՝ ձեր կոդի մեջ դրանց գործառույթներն օգտագործելու համար և օգտագործենք Notes
հավաքածուն, որը մենք հենց նոր արտահանեցինք:
main.js
-ում գրեք հետևյալ ծածկագիրը.
Կազմաձևում և միջին ծրագիր
Այժմ մենք պետք է կարգավորենք Express-ի դիտման շարժիչը և օգտագործենք Middleware տվյալների մշակումը կարգավորելու համար: main.js
-ում գրեք հետևյալ ծածկագիրը.
- Տող 1-2. Սահմանեք առջևի մասի դիտման շարժիչը
pug
, այնուհետև նշեք, թե որ պանակում կպահվեն մերpug
ֆայլերը: Այս դեպքում ֆայլերը կպահվենviews
թղթապանակում: - Տող 4. Օգտագործեք
body-parser
մոդուլը՝ մուտքային տվյալները վերլուծելու համար:urlencoded()
մեթոդը նշանակում է, որ մոդուլը կվերլուծի այն տվյալները, որոնք ստացվելու են պարզ HTML ձևից: - Տող 6.Օգտագործեք
updateRouter
միջնակարգ ծրագրակազմը երթուղավորումը կարգավորելու համար, երբ օգտվողը նավարկվում է դեպի այն դիրեկտորիաները, որոնք սկսվում են/updatepage
-ով: - 7-10 տող. տեսնելու այն դիրեկտորիաները, որտեղ օգտատերը նավարկվել է, և թե ինչպիսի HTTP հարցում է կատարվել (օրինակ՝
GET
,POST
և այլն) մեր սերվերի տերմինալում:
Գրառումների ստեղծում
Ամեն անգամ, երբ օգտատերը նավարկում է մեր գլխավոր էջ, նա կատարում է GET
հարցում: Այսպիսով, եթե օգտատերը նավարկվում է դեպի գլխավոր էջ, մենք ցանկանում ենք վերարտադրել pug
ֆայլը, որը կոչվում է notes-add.pug
:
main.js
-ում գրեք հետևյալ ծածկագիրը.
- Տող 1. Կառավարեք GET հարցումը
/notes-add
գրացուցակում: - Տող 2. Ներկայացրեք
notes-add.pug
ֆայլը:
Այս էջը բաղկացած կլինի պարզ HTML ձևից:
notes-add.pug
-ին, երբ ձևը ներկայացվում է, կատարվում է POST
հարցում:
Այս POST
հարցումը կատարելու համար գրեք հետևյալ ծածկագիրը main.js
-ում.
- Տող 5-6. Նշեք դաշտերը համապատասխան
req.body
հատկություններին, որոնք կվերադարձվեն ձևի միջոցով - Տող 8-10. Փաստաթուղթը պահեք տվյալների բազայում և դուրս բերեք փաստաթուղթը
- Տող 12. Գործողությունները կատարելուց հետո վերահղեք
/index
, որը կդիտի մեր փաստաթղթերը
Ի վերջո, main.js
-ը պետք է այսպիսի տեսք ունենա.
Այժմ դա արված է, մենք պարզապես պետք է ստեղծենք ֆայլ, որը կոչվում է notes-add.pug
: Սա կլինի մեր ճակատային մասը: notes-add.pug
-ի կոդը հետևյալն է.
Սա պարզապես պարզ HTML ձև է: Երբ submit
կոճակը սեղմվում է, կատարվում է POST
հարցում /notes-add
ճանապարհի համար:
Փորձեք գործարկել կոդը՝ մուտքագրելով.
node main
Գնացեք localhost:3000/notes-add
: Մուտքագրեք որևէ բան ձևի մեջ և սեղմեք Enter: Հաջորդ էջում կարող եք սխալի հանդիպել: Այնուամենայնիվ, տերմինալի պատուհանում ելքը կարող է լինել հետևյալը.
Այժմ, երբ մենք ավելացրել ենք մեր նշումները, մենք ցանկանում ենք իրականում կարդալ դրանք բոլորը:
Գտնել/կարդալ մեր գրառումները
Ինչպես նշվեց վերևում, /index
ճանապարհը կօգնի մեզ դիտել մեր նշումները: Եթե հաճախորդը տվյալներ է ստանում միայն այս ճանապարհից, ինչպիսի՞ HTTP հարցում պետք է կարգավորենք:
Հարցման տեսակը, որը մենք կկարգավորենք այս անգամ, կլինի GET
հարցում, քանի որ մենք միայն տվյալներ ենք ստանում:
main.js
-ում գրեք հետևյալ ծածկագիրը.
- Տող 1. կարգավորել
GET
հարցումը/index
ճանապարհին: - Տող 2-6. Մենք հարցում ենք կատարում մեր տվյալների բազայում: Քանի որ
query
պարամետրը դատարկ է, այն նշանակում է, որ մենք ցանկանում ենք, որ տվյալների բազայում առկա լինեն բոլոր փաստաթղթերը: - Տող 4. Տպեք հարցմանը համապատասխանող փաստաթղթերը
Այժմ այս կոդը գործարկելու համար անցեք localhost:3000/index
: Վահանակում ելքը կարող է լինել հետևյալը.
Այս ճանապարհի ճակատային վերջը կառուցելու համար մենք պետք է այն ներկայացնենք view.pug
անունով ֆայլում:
view.pug
-ի կոդը հետևյալն է.
Ի վերջո, մենք այժմ պետք է փոփոխենք մեր GET
հարցումը: main.js
-ում գրեք հետևյալ ծածկագիրը.
- Տող 1. Կառավարեք
/index
GET հարցումը: - Տող 2. Մանգուստին ասեք ցուցակագրել
Notes
հավաքածուում առկա բոլոր փաստաթղթերը: - Տող 7. Արտացուցեք
view.pug
ֆայլը և ուղարկեք վերադարձված փաստաթղթերը առջևի ծայրին (view.pug
), որպեսզի այն կարողանա ցուցադրել:
Այժմ գնացեք localhost:3000/index
: Արդյունքը.
Հաճախորդը ցանկանում է հեռացնել նշումը: Այժմ կիրառենք ջնջման գործառույթը:
Նշումների ջնջում
Նայեք view.pug
ֆայլին: Ահա թե ինչ կարող ենք անել.
- Ամեն անգամ, երբ օգտատերը սեղմում է ջնջման կոճակը, օգտվողը վերահղվում է դեպի
/delete
ուղի, որտեղ որպես պարամետր ուղարկվում է փաստաթղթիid
-ը: - Մենք կարող ենք օգտագործել այս
id
դաշտը՝ փաստաթուղթը նույնականացնելու և այնուհետև ջնջելու համար
Եկեք կատարենք GET
հարցումը /delete
ճանապարհին.
Line 1
. կարգավորելGET
հարցումը դեպի/delete/:_id
ճանապարհ:- Տող 2. Կատարեք հարցում՝ պարամետրում
id
ով փաստաթուղթ գտնելու համար: Երբ այս փաստաթուղթը գտնվի: Հեռացրեք այնNotes
հավաքածուից: - Տող 6. Վերահղեք օգտվողին դեպի
/index
ուղին, որը թույլ կտա նրան դիտել իր բոլոր փաստաթղթերը, երբ գործողությունն ավարտվի:
Գնացեք localhost:3000/index
, այնուհետև սեղմեք ջնջել կոճակը:
Ուշադրություն դարձրեք, որ մենք ունեինք մեկ փաստաթուղթ տվյալների բազայում: Երբ սա ջնջվում է, ոչ մի փաստաթուղթ չի մնում:
Սա տերմինալի ելքն է.
Այժմ հաճախորդը ջնջելու փոխարեն ցանկանում է ուղղել իր տառասխալը գրառման մեջ։ Այժմ կիրառենք խմբագրումը մեր հավելվածում:
Մեր նշումների թարմացում/խմբագրում
view.pug
ֆայլի ներսում՝
- Ուշադրություն դարձրեք, երբ օգտատերը սեղմում է թարմացման կոճակը, հավելվածը օգտատիրոջը վերահղում է
/updatepage
գրացուցակ՝ պարամետրում՝id
:
Ահա թե ինչ կարող ենք անել.
- Կատարեք
GET
հարցումը/updatepage
գրացուցակին և ստացեքid
դաշտը, որն առկա է պարամետրում: - Գտեք փաստաթուղթը տրված
id
-ով և ուղարկեք առանձին էջ՝updatepage.pug
թարմացման նպատակով:
main.js
-ում գրեք հետևյալ ծածկագիրը.
- Տող 1. կարգավորեք
GET
հարցումը դեպի/updatepage/:_id
ճանապարհը: - Տող 3. կատարեք հարցում՝ համապատասխան
id
նշումով ստանալու համար: - Տող 6. Ուղարկեք այս վերադարձված փաստաթուղթը
updatepage.pug
ֆայլին
Հիշեք, որ մենք main.js
ֆայլի սկզբում ստեղծել ենք միջին ծրագիր, որը req.id
հատկությունը վերագրելու է id
պարամետրին URL-ում:
Գնացեք localhost:3000/index
և սեղմեք թարմացման կոճակը:
updatepage.pug
-ի կոդը այսպիսին է.
- 4 և 6 տողեր. Սահմանեք համապատասխան մուտքերի արժեքը
title
ևdescription
Ներկայացնել կոճակը օգտատիրոջը կվերահղորդի դեպի /updatepage
, և այն նաև կկատարի POST
հարցում:
Եկեք կարգավորենք POST
հարցումը.
- Տող 1. կարգավորեք
POST
հարցումը դեպի/updatepage
URL: - Տող 3-7.Կատարեք հարցում՝ կոնկրետ
id
փաստաթուղթը գտնելու համար: Թարմացրեք համապատասխանաբարtitle
ևdescription
դաշտերը: - Տող 11. Վերահղում դեպի
/index
գրացուցակ
Այժմ սեղմեք «Թարմացնել» կոճակը, և այն կցուցադրի updatepage
: Կոդի ելքը այսպիսին է.
Ի վերջո, և՛ POST
, և՛ GET
հարցումները մշակելու ծածկագիրը այսպիսին է.
Ռեսուրսներ
Կոդ
Այլ ռեսուրսներ / թարմացումներ
- Ուղևորություն էքսպրեսով
- Middleware in Express
- Օգտագործեք Express-ը որպես վեբ սերվեր
- Օգտագործեք Mongoose-ը Node.js-ի հետ
Եզրակացություն
Հաջորդ հոդվածում մենք կսկսենք մեր ուսումնական ճամփորդությունը դեպի React գրադարան:
Մենք հաջողությամբ ստեղծել ենք նշումների հավելված CRUD-ի բոլոր գործառույթներով: Կոդը սկզբում կարող է բարդ թվալ. այնուամենայնիվ, սովորելը հնարավոր է միայն այն դեպքում, երբ դուք ինքներդ եք գրում կոդը: Դու կսովորես անելով, չտեսնելով:
Ես իսկապես հուսով եմ, որ դուք շատ բան եք սովորել վերը նշված ծածկագրից:
Մնալ տանը. Մնացեք ապահով: