Praktisks uzdevums: To-Do saraksts

Ievads

Šajā praktiskajā uzdevumā jums būs jāizveido tīmekļa vietne ar uzdevumu sarakstu. Jūs izmantosiet Python kopā ar Flask bibliotēku, kā arī HTML un CSS.

Sasniedzamie rezultāti

  • Izveidota Flask tīmekļa lietotne ar To-Do sarakstu.
  • Lietotne spēj attēlot uzdevumu sarakstu HTML lapā.
  • Iespējams pievienot jaunus uzdevumus, izmantojot HTML formu.
  • Iespējams dzēst uzdevumus, izmantojot dzēšanas saiti blakus katram ierakstam.
  • Pievienots vizuālais noformējums ar CSS failu.
  • Ieviesta datu validācija (nepieļauj tukšus uzdevumus un kļūdainus indeksa pieprasījumus).

1. Nepieciešamās programmas un rīki

Lai veiktu šo darbu, datorā ir jābūt instalētām šādām programmām:

  • Python
  • Visual Studio Code
  • Python paplašinājums

Lai pārbaudītu, vai viss ir instalēts datorā, varat izmantot skriptu check.bat.

Lai instalētu Python paplašinājumu, atverot Visual Studio Code:

2. Izveidojam pamata programmu

Sākumā izveidojiet sev ērtā vietā mapīti (piemēram todo-list), kurā atradīsies viss jūsu kods. Tālāk to nepieciešams atvērt, izmantojot Visual Studio Code.

Turpmāk visu šo darbu jūs veiksiet šajā mapē, visi faili un mapes būs jāizveido tajā.

Bibliotēku instalēšana

Tagad mums ir jāinstalē bibliotēka Flask, ko mēs izmantosim kopā ar Python šajā darbā.

Lai instalētu bibliotēku, mēs izmantosim termināli. Lai to atvērtu, nospiediet Terminal > New Terminal.

Tālāk terminālī ievadiet šādu komandu, kas instalēs Flask bibliotēku.

pip install Flask

Pēc tam palaidiet šo komandu, kas automātiski izveidos failu requirements.txt:

pip freeze > requirements.txt

requirements.txt faila piemērs:

Projektos, kuros izmanto Python, ir pieņemts saglabāt visu izmantoto bibliotēku versijas failā requirements.txt, lai citiem izstrādātājiem būtu vieglāk strādāt ar šo kodu.

Sākam izmantot Flask

Izveidojiet failu app.py un ievietojiet tajā šādu kodu:

from flask import Flask  # Importējam Flask

app = Flask(__name__)  # Izveidojam lietotni, tā ir kā pamats topošajai mājaslapai

@app.route("/")  # Norādām: ja lietotājs apmeklē mājaslapas sākumlapu (/), jāizpilda zemāk esošā funkcija
def index():
    return "<p>Hello, World!</p>"  # Nosūtām pārlūkprogrammai tekstu "Hello, World!"

if __name__ == '__main__':
    app.run(debug=True)  # Palaižam lietotni

Ierakstiet terminālī šādu komandu, lai palaistu savu programmu:

python app.py

Ja viss ir izdarīts pareizi, programma sāks darboties, un, atverot pārlūkprogrammā lapu http://127.0.0.1:5000, jums jāredz teksts “Hello World!”.

3. Pievienojam uzdevumu saraksta rādīšanu

Tagad mums ir jāpapildina programma tā, lai tā atgrieztu ne tikai tekstu, bet HTML veidni.

Izveidojiet mapi templates un tajā izveidojiet failu index.html.

Ievietojiet tajā failā šādu kodu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Šajā vietā pievienojiet birku title -->
</head>
<body>
    <!-- Šeit pievienojiet birku h1 -->
</body>
</html>

Pievienojiet head nodaļā birku title ar tekstu To-Do saraksts, kas tiks parādīts kā lapas virsraksts pārlūkprogrammas cilnē.

Sadaļā body pievienojiet birku h1 ar tekstu ToDo.

Failā app.py nomainiet rindu ar Flask importu, lai tiktu importēta arī funkcija render_template:

from flask import Flask, render_template

Tagad nomainiet rindu funkcijas index iekšienē uz šādu:

    return render_template("index.html")

Funkcija render_template vajadzīga, lai ieliktu datus HTML veidnē un atgrieztu gatavu tīmekļa lapu lietotājam.

Ja atkal palaist programmu un atvērt lapu, var redzēt lapu ar tekstu un cilnes nosaukumu:

Tagad mums ir jāpievieno uzdevumu saraksts. Pašlaik vienkārši izveidosim sarakstu, kurā jau būs ierakstīti uzdevumi.

Pēc Flask bibliotēkas importēšanas failā app.py pievienojiet uzdevumu sarakstu tasks:

tasks = [
    "test task 1",
    "test task 2",
    "test task 3"
]

Mainiet rindu ar funkciju render_template, nododot tai šo uzdevumu sarakstu:

return render_template("index.html", tasks=tasks)

Tagad failā index.html pēc h1 birkas pievienojiet uzdevumu saraksta parādīšanu, ko mēs nodevām funkcijai:

<ul>
    {% for task in tasks %}
    <li>
        {{ task }}
    </li>
    {% endfor %}
</ul>

Šeit mēs izmantojam iespējas, ko mums sniedz Flask veidnes, cikls for un datu ievietošana veidnē. Parastajā HTML tas nedarbosies. Sīkāku informāciju par veidnēm varat lasīt Flask dokumentācijā.

Rezultātā mūsu lapa tagad izskatās šādi:

4. Uzdevumu pievienošana sarakstam

Mums būs nepieciešams objekts request, pievienojiet to importam faila sākumā, tāpat kā jau pievienojāt funkciju render_template.

Tagad mums ir jāpievieno funkcija, kas būs atbildīga par uzdevumu pievienošanu sarakstam.

Ievietojiet šādas rindas pēc funkcijas index:

# Funkcija add_task tiks izsaukta, kad lietotājs nosūta POST pieprasījumu uz /add
@app.route("/add", methods=["POST"])
def add_task():
    # Izņemam uzdevumu no formas, ko lietotājs nosūtīja
    task = request.form.get("task")
    return task

Šajā gadījumā mēs izmantosim veidlapas, lai pievienotu uzdevumu.

HTML formas ļauj veikt pieprasījumus, ar kuriem var nosūtīt dažādu informāciju.

Šajā gadījumā mēs ar veidlapas palīdzību nosūtīsim uzdevumu, kuru vēlamies pievienot sarakstam.

Kods augstāk pieņem pieprasījumu, izņem uzdevumu no formas un atgriež to, bet pagaidām nepievieno to sarakstam.

Tagad ir jāpievieno forma HTML, ievietojot to pēc h1 virsraksta:

<form method="POST" action="/add">
    <input type="text" name="task" placeholder="Add a new task">
    <button type="submit">Add</button>
</form>

Šī forma nosūta uzdevumu, kas tiks ievadīts ievades laukā, uz adresi /add.

Tagad, atverot lapu, redzēsim formu ar ievades laukumu, kurā var ievadīt uzdevumu, un, nospiežot pogu Add, redzēsim ievadītā uzdevuma tekstu.

Tagad atgriezīsimies pie funkcijas add_task. Tā ir jāmaina tā, lai tā pievienotu uzdevumu sarakstam un atgrieztu mūs uz galveno lapu.

Lai atgrieztos galvenajā lapā (/), var izmantot funkciju redirect (pirms tam tā ir jāimportē).

Pāradresācijas piemērs uz lapu /cats:

return redirect("/cats")

Svarīgi, ka jebkurā Python funkcijā var būt tikai 1 return, jo tas nozīmē, ka funkcija kaut ko atgriež un līdz ar to pilnībā pabeidz savu darbu.

Papildiniet funkcijas add_task kodu tā, lai tas pievienotu uzdevumu no veidlapas tasks sarakstam un pēc tam pāradresētu lietotāju uz galveno lapu (/).

Raksts par sarakstiem Python valodā

Kad to izdarīsiet, varat mainīt kodu, lai sākotnēji saraksts tasks būtu tukšs un lietotājs pats tajā pievienotu uzdevumus:

tasks = []

5. Uzdevumu dzēšana

Pievienojiet šādu kodu failam app.py:

@app.route("/delete/<int:task_index>")
def delete(task_index):
    return f"Task index: {task_index}"

Šeit mēs izveidojam funkciju, kas būs atbildīga par uzdevumu dzēšanu no saraksta.

Šī funkcija darbosies, pārejot uz adresi /delete/0, /delete/1 utt., kur pēdējais skaitlis ir uzdevuma indekss uzdevumu sarakstā tasks.

Python sarakstos indeksācija sākas no 0. Tas nozīmē, ka pirmajam saraksta elementam ir indekss 0, otrajam - 1 utt.

Šajā posmā funkcija vienkārši atgriež indeksu, kas tiks norādīts lapas adresē. Jūs varat to pārbaudīt pats, atverot, piemēram, lapu http://127.0.0.1:5000/delete/0.

Papildiniet kodu tā, lai funkcija dzēstu elementu ar saņemto indeksu (task_index) un pēc tam atkal pāradresētu uz galveno lapu (/).

Pārbaudiet savu kodu, pievienojot uzdevumu sarakstam, un pēc tam atkārtoti dodieties uz adresi, lai to dzēstu.

Tagad HTML kodā katrai uzdevumam ir jāpievieno saite dzēšanai. Pievienojiet šādu kodu elementa li iekšpusē blakus {{ task }}:

<a href="/delete/{{ loop.index0 }}">Delete</a>

Tas pievienos katram uzdevumam saiti, kas ļaus dzēst šo uzdevumu.

6. Vizuālais noformējums

Lai padarītu vietni vizuāli patīkamāku, izmanto CSS. Tagad mēs to pievienosim arī mūsu lapai.

Izveidojiet mapi static, lejupielādējiet failu style.css, izmantojot zemāk esošo saiti, un ievietojiet to izveidotajā mapē.

Fails style.css

Šajā failā ar CSS palīdzību ir aprakstīts, kā dažādiem elementiem jāizskatās lapā. Šī uzdevuma ietvaros mēs neiedziļināsimies šajā tēmā.

Ja interesē: raksts par CSS.

Tagad mums ir nepieciešams šo failu pievienot HTML kodā. Pievienojiet birkā head šādu rindu:

<link rel="stylesheet" href="/static/style.css">

Ja viss ir izdarīts pareizi, lapas izskats mainīsies uz patīkamāku.

7. Datu validēšana

Pašlaik dati, kurus mēs saņemam, netiek pārbaudīti. Piemēram, ja mēģinām pāriet uz adresi, kas satur nepareizu indeksu (piemēram, http://127.0.0.1:5000/delete/1000), mums rodas kļūda.

Lai to novērstu, jāpievieno datu validāciju, izmantojot if.

Patstāvīgi padariet tā, lai uzdevums tiktu dzēsts no saraksta tikai tad, ja uzdevuma indekss ir lielāks vai vienāds ar 0 un mazāks par uzdevumu saraksta garumu.

Padoms: if iekšienē jābūt aptuveni šādam nosacījumam:

0 <= task_index and task_index < len(tasks)

Vēl viena problēma ir saistīta ar to, ka, ja uzdevuma tekstā nekas nav rakstīts, pēc pogas Add nospiešanas sarakstā parādās tukšs uzdevums.

Arī patstāvīgi izlabojiet to, lai uzdevums tiktu pievienots sarakstam tikai tad, ja tas nav tukšs.

Darba nodošana

Darbs jāiesniedz .zip formātā, iepakojot sākumā izveidoto mapi (piemēram, todo-list) arhīvā.