Պարզ նախագիծ՝ ձեր ծրագրավորման հմտությունները բարելավելու համար

Ուսուցումներից ազատվելու և մեր սեփական ծրագրաշարը գրելը սկսելու լավագույն միջոցներից մեկը պարզ նախագիծ ստեղծելն է՝ մեր ծրագրավորման հմտությունները սրելու և մեր սովորածը վերանայելու համար:

Այս հոդվածում մենք կստեղծենք մի փոքրիկ վեբ հավելված, որտեղ դուք կարող եք պահել ձեր նշումները:

Մեր դիմումի նշումների ցանկը բաղկացած կլինի երկու բանից՝ վերնագիր և նկարագրություն: Մեր արդյունքը վերջում սա կլինի.

Եկեք սուզվենք:

Սկսել

Պարզապես տեղադրեք՝

  • 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 հարցումները մշակելու ծածկագիրը այսպիսին է.

Ռեսուրսներ

Կոդ

Ծրագրի GitHub շտեմարան

Այլ ռեսուրսներ / թարմացումներ

Եզրակացություն

Հաջորդ հոդվածում մենք կսկսենք մեր ուսումնական ճամփորդությունը դեպի React գրադարան:

Մենք հաջողությամբ ստեղծել ենք նշումների հավելված CRUD-ի բոլոր գործառույթներով: Կոդը սկզբում կարող է բարդ թվալ. այնուամենայնիվ, սովորելը հնարավոր է միայն այն դեպքում, երբ դուք ինքներդ եք գրում կոդը: Դու կսովորես անելով, չտեսնելով:

Ես իսկապես հուսով եմ, որ դուք շատ բան եք սովորել վերը նշված ծածկագրից:

Մնալ տանը. Մնացեք ապահով: