Build a JavaScript Front End for a Flask API – Real Python

Seize the Again-Finish Code

This tutorial builds upon the ultimate code of the third part of the Flask REST API sequence. In the event you’re inquisitive about constructing the again finish your self first, then it’s a good suggestion to begin with the first part of the sequence and work your manner via.

Earlier than persevering with with this tutorial, make sure that to seize the supply code by clicking the hyperlink under:

Even in case you’ve adopted the Flask REST API tutorial sequence up so far, please evaluate your code with the code that you simply downloaded above. That manner, you’ll be able to work via this tutorial with out making particular person changes for any personalized code in your earlier challenge.

Earlier than you proceed with the tutorial, confirm that your folder construction appears to be like like this:

./
│
├── templates/
│   └── dwelling.html
│
├── app.py
├── init_database.py
├── config.py
├── fashions.py
├── notes.py
├── individuals.py
└── swagger.yml

When you’ve bought the Flask REST API folder construction in place, you’ll be able to learn on to create the database.

Set up the Necessities

Earlier than you proceed working in your Flask challenge, it’s a good suggestion to create and activate a virtual environment. That manner, you’re putting in challenge dependencies not system-wide however solely in your challenge’s digital surroundings.

Choose your working system under and use your platform-specific command to arrange a digital surroundings:

PS> python -m venv venv
PS> .venvScriptsactivate
(venv) PS>

$ python -m venv venv
$ supply venv/bin/activate
(venv) $

With the above instructions, you create and activate a digital surroundings named venv through the use of Python’s built-in venv module. The parenthesized (venv) in entrance of the immediate signifies that you simply’ve efficiently activated the digital surroundings.

Subsequent, it’s worthwhile to set up the necessities that the challenge wants.
For this, you’ll be able to both use the requirements.txt file from the supply code that you simply downloaded above, or copy the contents from the collapsible part under:

attrs==22.1.0
certifi==2022.9.24
charset-normalizer==2.1.1
click on==8.1.3
clickclick==20.10.2
connexion==2.14.1
Flask==2.2.2
flask-marshmallow==0.14.0
Flask-SQLAlchemy==3.0.2
idna==3.4
inflection==0.5.1
itsdangerous==2.1.2
Jinja2==3.1.2
jsonschema==4.16.0
MarkupSafe==2.1.1
marshmallow==3.18.0
marshmallow-sqlalchemy==0.28.1
packaging==21.3
pyparsing==3.0.9
pyrsistent==0.19.1
PyYAML==6.0
requests==2.28.1
six==1.16.0
SQLAlchemy==1.4.42
swagger-ui-bundle==0.0.9
urllib3==1.26.12
Werkzeug==2.2.2

Be sure that your digital surroundings remains to be activated.
Then, set up the challenge’s dependencies with the command under:

(venv) $ python -m pip set up -r necessities.txt

Now your improvement surroundings is ready to work with the Flask challenge.
Nonetheless, earlier than you verify the Flask app, it’s worthwhile to deal with the database.

Create the Database

Within the supply code that you simply downloaded above, you additionally discover a file named init_database.py.
The init_database.py file incorporates code to create and populate the database with instance information.

Run the code under to get your database prepared to be used with the online software:

(venv) $ python init_database.py
Created new database

Operating init_database.py will create a brand new database named individuals.db in your challenge’s root listing. If you have already got a database with this title, you then’ll obtain the output “Up to date present database” as a substitute of “Created new database”. Each messages point out that the script ran efficiently.

As soon as your challenge incorporates a working database, you’ll be able to proceed to verify in case your Flask challenge works.

Test Your Flask Venture

Now you’ll be able to confirm that your Flask software is operating with out errors. Execute the next command within the listing containing the app.py file:

Once you run this software, an online server will begin on port 8000. In the event you open a browser and navigate to http://localhost:8000, then it’s best to see an inventory of individuals with their notes displayed:

Excellent, your app is operating flawlessly! Granted, it appears to be like a bit old-school. However that’s why you’re following this tutorial. Earlier than you begin to fashion your entrance finish, take a look on the again finish first.

Discover Your API

Your Flask challenge comes with an robotically created Swagger UI documentation. The documentation lets you discover your API and mess around with the API’s endpoints.

Go to your Swagger UI at http://localhost:8000/api/ui and examine the present state of your API:

At first look, every thing appears advantageous—except you attempt to add one other fairy to the database:

Apparently, you’ll be able to’t have two individuals with the identical final title in your database. Once you strive including “Sugar Plum Fairy” to the record of individuals, you get an error as a result of there’s already an individual with “Fairy” as a final title. That’s a major shortcoming price fixing!

Examine the Venture Construction

Earlier than you get to work, take a look at some recordsdata of your challenge. You might have app.py, which begins your Flask app, and init_database.py, which you’ll be able to run to re-create individuals.db. Moreover these, there are six different recordsdata in your Flask challenge:

When you’ve got a have a look at fashions.py, then you might discover a major distinction in how Particular person and Be aware are outlined:

 1# fashions.py
 2
 3# ...
 4
 5class Be aware(db.Mannequin):
 6    __tablename__ = "word"
 7    id = db.Column(db.Integer, primary_key=True)
 8    person_id = db.Column(db.Integer, db.ForeignKey("individual.id"))
 9    content material = db.Column(db.String, nullable=False)
10    timestamp = db.Column(
11        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
12    )
13
14# ...
15
16class Particular person(db.Mannequin):
17    __tablename__ = "individual"
18    id = db.Column(db.Integer, primary_key=True)
19    lname = db.Column(db.String(32), distinctive=True)
20    fname = db.Column(db.String(32))
21    timestamp = db.Column(
22        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
23    )
24
25    notes = db.relationship(
26        Be aware,
27        backref="individual",
28        cascade="all, delete, delete-orphan",
29        single_parent=True,
30        order_by="desc(Be aware.timestamp)",
31    )
32
33# ...

A Be aware object incorporates an ID, some content material, a timestamp, and a connection to an individual.

Every Particular person object has an ID, a primary title, a final title, a timestamp, and a relationship to the notes which are linked to them.

What appears to be like a bit uncommon is that the final title of an individual should be distinctive since you set lname in line 19 to distinctive=True. Which means you’ll be able to’t have two individuals with the identical final title in your database. Not best!

Subsequent, take a look at individuals.py:

# individuals.py

# ...

def create(individual):
    lname = individual.get("lname")
    existing_person = Particular person.question.filter(Particular person.lname == lname).one_or_none()

    if existing_person is None:
        new_person = person_schema.load(individual, session=db.session)
        db.session.add(new_person)
        db.session.commit()
        return person_schema.dump(new_person), 201
    else:
        abort(406, f"Particular person with final title lname already exists")

# ...

The create() perform checks for the final title of the individual object. It’ll solely create a brand new individual if there’s no different individual with the identical final title within the database already.

The opposite capabilities in individuals.py include lname as a parameter:

# individuals.py

# ...

def read_one(lname):
    # ...

def replace(lname, individual):
    # ...

def delete(lname):
    # ...

Utilizing lname to search out individuals within the database works as a result of lname is the distinctive identifier for an individual. That’s in tune with the present state of the Particular person mannequin. Nonetheless, this code structure prevents you from having a Sugar Plum Fairy together with the Tooth Fairy in your database.

Repair Your Mannequin

The fashions.py file defines the design of your database. To permit a number of entries with the identical final title, it’s worthwhile to take away the distinctive constraint from Particular person and set the nullable property to False:

 1# fashions.py
 2
 3# ...
 4
 5class Particular person(db.Mannequin):
 6    __tablename__ = "individual"
 7    id = db.Column(db.Integer, primary_key=True)
 8    lname = db.Column(db.String(32), nullable=False) # Take away: distinctive=True
 9    fname = db.Column(db.String(32))
10    timestamp = db.Column(
11        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
12    )
13
14    notes = db.relationship(
15        Be aware,
16        backref="individual",
17        cascade="all, delete, delete-orphan",
18        single_parent=True,
19        order_by="desc(Be aware.timestamp)",
20    )
21
22# ...

With out the distinctive constraint of lname entries, you enable the database to retailer individuals with the identical final title. By including nullable=False as a property to lname, you state that every individual should have a final title. In the event you didn’t set the nullable property to False, then it’d be attainable to retailer individuals with none final names.

To replicate the change within the database, cease your Flask improvement server with Ctrl+C and run init_database.py afterward:

(venv) $ python init_database.py
Up to date present database

When init_database.py finds a database named individuals.db, then the script backs up its contents and re-creates the database with the principles that you simply outline in fashions.py. Right here, you create a brand new database the place lname doesn’t include a distinctive constraint anymore after which populate the database with the prevailing information once more.

Now that your database can retailer individuals with the identical final title, jump over to the following part to make the required adjustments in your Flask capabilities that work together with the database.

Regulate Your Flask Capabilities

Though your database now accepts equivalent final names, some capabilities in individuals.py nonetheless abort the method if the final title isn’t distinctive. Additionally, since you nonetheless want a singular identifier for every individual, it’s worthwhile to provide you with a substitute for utilizing the final title.

In the event you have a look at notes.py, you then’ll see that each one the CRUD capabilities besides create are working with note_id. You’ll regulate individuals.py to work with an individual’s ID to learn, replace, and delete database entries accordingly.

Listed below are the adjustments that you simply’ll carry out on these capabilities:

• Rename the lname parameter to person_id
• Regulate the queries for an present individual
• Adapt the abort messages

Open individuals.py and begin implementing the adjustments.
You possibly can preserve individuals.py open and deal with the adjustments perform by perform.

Begin by updating create():

# individuals.py

# ...

def create(individual):
    new_person = person_schema.load(individual, session=db.session)
    db.session.add(new_person)
    db.session.commit()
    return person_schema.dump(new_person), 201

# ...

Now that the ID of an individual is the one attribute that should be distinctive, so there’s no must verify for any present individuals anymore.
You possibly can take the content material of the conditional if block and use it because the perform physique of create().

Previously, you wanted to guarantee that there was no individual with the identical final title.
However now, your database will guarantee that the ID of an individual is exclusive.
Subsequently, you don’t must verify for uniqueness in your code.

Subsequent, deal with the read_one() perform:

# individuals.py

# ...

def read_one(person_id):
    individual = Particular person.question.get(person_id)

    if individual is not None:
        return person_schema.dump(individual)
    else:
        abort(404, f"Particular person with ID person_id not discovered")

# ...

In read_one() you will need to replace the perform’s parameter to person_id and regulate the question for individual accordingly.
Additionally, it’s worthwhile to replace the error message when no individual is discovered with the ID.

The adjustments in replace() look related:

# individuals.py

# ...

def replace(person_id, individual):
    existing_person = Particular person.question.get(person_id)

    if existing_person:
        update_person = person_schema.load(individual, session=db.session)
        existing_person.fname = update_person.fname
        db.session.merge(existing_person)
        db.session.commit()
        return person_schema.dump(existing_person), 201
    else:
        abort(404, f"Particular person with ID person_id not discovered")

# ...

Once more, you regulate the parameter, the question to search for an present individual, and the error message.
Do the identical for delete():

# individuals.py

# ...
def delete(person_id):
    existing_person = Particular person.question.get(person_id)

    if existing_person:
        db.session.delete(existing_person)
        db.session.commit()
        return make_response(f"person_id efficiently deleted", 200)
    else:
        abort(404, f"Particular person with ID person_id not discovered")

Don’t overlook to additionally regulate the string you move into make_response() to make use of person_id as a substitute of lname.

The adjustments in create(), read_one(), replace(), and delete() had been very related.
For replace(), you’ll be able to take the adjustments one step even additional.

When you’ve got a have a look at replace() in individuals.py, then you’ll be able to see that you simply at present solely replace the primary title. Previously, fname was the one attribute of an individual that you simply had been allowed to vary. The final title was the distinctive identifier for an individual, and due to this fact you weren’t allowed to vary it.

Now that you simply work with person_id, you’ll be able to enable updating lname in replace() of individuals.py:

# individuals.py

# ...

def replace(person_id, individual):
    existing_person = Particular person.question.get(person_id)

    if existing_person:
        update_person = person_schema.load(individual, session=db.session)
        existing_person.fname = update_person.fname
        existing_person.lname = update_person.lname
        db.session.merge(existing_person)
        db.session.commit()
        return person_schema.dump(existing_person), 201
    else:
        abort(404, f"Particular person with ID person_id not discovered")

# ...

Now you’ll be able to replace the primary and the final title of an individual. So if the Easter Bunny desires to go by Easter Rabbit, that’s allowed.

With the adjustments in fashions.py, your database, and individuals.py in place, go on and have a look at your API documentation. For this, begin your Flask improvement server with the python app.py command and go to http://localhost:8000/api/ui.

You possibly can create individuals with the identical final title. That’s excellent news! Nonetheless, the documentation exhibits you that there’s nonetheless some work to do:

Though your Flask capabilities in individuals.py work with people_id, evidently the API hasn’t heard the information but. The API documentation nonetheless exhibits that it expects lname for the endpoints as a part of the request parameters.

Replace API Endpoints

Earlier than you dive again into your back-end code, take a look on the present Folks-API endpoints first:

The URL paths for the learn, replace and delete actions require lname as a request parameter. To alter lname to person_id, it’s worthwhile to regulate your API specification.

You’ll find the specification of your API within the swagger.yml file. First, take a look at the place you utilize lname for the time being:

 1# swagger.yml
 2
 3# ...
 4elements:
 5  schemas:
 6    Particular person:
 7      sort: "object"
 8      required:
 9        - lname
10      properties:
11        fname:
12          sort: "string"
13        lname:
14          sort: "string"
15  parameters:
16    lname:
17      title: "lname"
18      description: "Final title of the individual to get"
19      in: path
20      required: True
21      schema:
22        sort: "string"
23    # ...
24
25paths:
26  # ...
27  /individuals/lname:
28    get:
29      operationId: "individuals.read_one"
30      tags:
31        - Folks
32      abstract: "Learn one individual"
33      parameters:
34        - $ref: "#/elements/parameters/lname"
35      responses:
36        "200":
37          description: "Efficiently learn individual"
38    put:
39      tags:
40        - Folks
41      operationId: "individuals.replace"
42      abstract: "Replace a individual"
43      parameters:
44        - $ref: "#/elements/parameters/lname"
45      responses:
46        "200":
47          description: "Efficiently up to date individual"
48      requestBody:
49        content material:
50          software/json:
51            schema:
52              x-body-name: "individual"
53              $ref: "#/elements/schemas/Particular person"
54    delete:
55      tags:
56        - Folks
57      operationId: "individuals.delete"
58      abstract: "Delete a individual"
59      parameters:
60        - $ref: "#/elements/parameters/lname"
61      responses:
62        "204":
63          description: "Efficiently deleted individual"
64  # ...

Keep in mind that you set the nullable property to False within the mannequin for an individual? Line 9 displays that and might due to this fact keep the identical. Additionally, you continue to wish to preserve the lname property within the Particular person object in line 13.

Apart from that, you’ll be able to exchange all remaining occurrences of lname with person_id.
Hold your swagger.yml file open and begin by altering the lname parameter in elements:

 1# swagger.yml
 2
 3# ...
 4elements:
 5  schemas:
 6    Particular person:
 7      sort: "object"
 8      required:
 9        - lname # Do not change
10      properties:
11        fname:
12          sort: "string"
13        lname: # Do not change
14          sort: "string"
15  parameters:
16    person_id:
17      title: "person_id"
18      description: "ID of the individual to get"
19      in: path
20      required: True
21      schema:
22        sort: "string"
23    # ...
24# ...

Then, replace the /individuals/ endpoint to incorporate the references to the parameter elements:

 1# swagger.yml
 2
 3# ...
 4paths:
 5  # ...
 6  /individuals/person_id:
 7    get:
 8      operationId: "individuals.read_one"
 9      tags:
10        - Folks
11      abstract: "Learn one individual"
12      parameters:
13        - $ref: "#/elements/parameters/person_id"
14      responses:
15        "200":
16          description: "Efficiently learn individual"
17    put:
18      tags:
19        - Folks
20      operationId: "individuals.replace"
21      abstract: "Replace a individual"
22      parameters:
23        - $ref: "#/elements/parameters/person_id"
24      responses:
25        "200":
26          description: "Efficiently up to date individual"
27      requestBody:
28        content material:
29          software/json:
30            schema:
31              x-body-name: "individual"
32              $ref: "#/elements/schemas/Particular person"
33    delete:
34      tags:
35        - Folks
36      operationId: "individuals.delete"
37      abstract: "Delete a individual"
38      parameters:
39        - $ref: "#/elements/parameters/person_id"
40      responses:
41        "204":
42          description: "Efficiently deleted individual"
43  # ...

Good work! Now your API specification works with person_id as a substitute of lname.
Nonetheless, preserve swagger.yml open for a second.
There’s one other element that it’s worthwhile to handle.

Forestall a Sort Error

There’s one other replace that it’s worthwhile to carry out on swagger.yml. It might not be apparent at this second, however in case you return and verify the sort of the person_id parameter in your up to date lname, you then’ll get a touch. Though IDs are generally number types, you saved it as "string". And that’s truly a good suggestion for 2 causes:

1. You received’t carry out any math operations on an ID. Subsequently, it doesn’t have to be an integer.
2. Your kind fields will arrive as strings in your JavaScript code. Retaining them as strings saves you a conversion step.

In the event you specified sort as "integer", you then’d run right into a sort error when your API receives a string as a substitute of the anticipated integer. It saves you some headache to forestall this error by adjusting your API specification up entrance.

Right here, you make the change on the again finish within the API specification.
There are two situations the place an ID has an integer sort in your swagger.yml file, which it’s worthwhile to regulate. The primary one is the note_id parameter, which you repair under:

# swagger.yml

# ...
elements:
  # ...
  parameters:
    person_id:
      title: "person_id"
      description: "ID of the individual to get"
      in: path
      required: True
      schema:
        sort: "string"
    note_id:
      title: "note_id"
      description: "ID of the word"
      in: path
      required: True
      schema:
        sort: "string"
  # ...

When you’ve modified the kind of the note_id parameter to "string", scroll all the way down to the submit path on your notes:

# swagger.yml

# ...
paths:
  # ...
  /notes:
    submit:
      operationId: "notes.create"
      tags:
        - Notes
      abstract: "Create a word related with a individual"
      requestBody:
          description: "Be aware to create"
          required: True
          content material:
            software/json:
              schema:
                x-body-name: "word"
                sort: "object"
                properties:
                  person_id:
                    sort: "string"
                  content material:
                    sort: "string"
    # ...

After you modified the sort of person_id within the schema of your POST request content material from "integer" to "string", head over to your Swagger UI API documentation at http://localhost:8000/api/ui and verify how your API works.
As a substitute of displaying lname, the documentation ought to now present person_id on your API endpoints.

Which means you’ve accomplished all the required fixes within the again finish. Now it’s time to proceed the full-stack expertise and get some work executed on the entrance finish.

Nest Your HTML Templates

On this part, you’ll prolong your dwelling.html template with a element so as to see debugging info. For this, you’ll leverage the configuration object that Flask masses into your templates. With the config variable, you’ll be able to entry your Flask configuration, equivalent to debug info.

# app.py

# ...

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000, debug=True)

Open templates/dwelling.html and add a conditional assertion on the finish of <physique> to verify in case your app is operating in DEBUG mode:

<!-- templates/dwelling.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
</head>
<physique>
    <!-- .... -->

    % if config['DEBUG'] %
        <pre>
            <code>
                 config 
            </code>
        </pre>

        <fashion>
            pre 
                white-space: pre-wrap;
            
        </fashion>
    % endif %
</physique>
</html>

Moreover displaying config, you’re additionally including your first CSS styling. With white-space: pre-wrap, you’re enabling your browser to wrap the code as a substitute of simply displaying one lengthy line of code.

Once you run your app in debug mode, you then’ll see the contents of config on the backside of your private home web page. Go to http://localhost:8000 and test it out:

Exhibiting debug info on the entrance finish will be helpful for getting a look on the information that your browser is working with.

Admittedly, the debug space fulfills one more function.
By working with this phase of your web site, you’ll get a really feel for the front-end creation workflow that you simply’ll carry out later.
One key attribute for this workflow is to modularize logical items of your challenge’s supply code.

As a substitute of getting one huge file with HTML, CSS, and JavaScript code, you’ll create singular modules that you may hyperlink.
That manner, a file has one function that you may spot via its filename, so you’ll be able to reference it wherever you want it in different recordsdata.

Following this logic, the code to indicate debug content material deserves its personal file.
Go on and create a brand new template named _debug.html in your templates/ listing:

<!-- templates/_debug.html -->

<div class="debug-card">
    <kind class="debug-form">
        <enter sort="textual content" title="endpoint" worth="/api/individuals" />
        <button data-action="learn">Get Information</button>
        <button data-action="clear">Clear</button>
    </kind>
    <pre>
        <code> config </code>
    </pre>
</div>

<fashion>
    pre 
        white-space: pre-wrap;
    
</fashion>

This code exhibits HTML components and HTML attributes that you will have seen earlier than.
You’ll use them a number of occasions when constructing your single-page net software, so it’s worthwhile to have a better have a look at them.

These are the numerous HTML components from the code above:

• <div> wraps content material items that belong collectively.
• <form> creates a kind that incorporates interactive controls for submitting information.
• <input> shops the values of a kind.
• <button> creates a button aspect, which you’ll hyperlink up with occasions.

You’re additionally utilizing HTML attributes, which offer contextual info to the HTML components:

• class classifies components for programmatical CSS styling.
• type defines the kind of an enter area.
• name identifies the enter area for higher back-end entry.
• value holds the content material of an enter area.
• data-action is a custom attribute to point the supposed motion to your software.

HTML attributes with the information prefix are customized HTML attributes that you simply outline your self. Utilizing information attributes permits you to retailer arbitrary info on the HTML. Additionally, information attributes are helpful when deciding on HTML components in your JavaScript code. You’ll use information attributes quite a bit within the following sections to retailer key info on the entrance finish.

Be aware that this HTML file doesn’t include an <html> tag. That’s okay as a result of _debug.html is a template partial, which implies that you don’t intend to make use of _debug.html by itself.

Template partials exist to be included into different templates and solely include a fraction of the entire HTML code.
You could prefix a template’s title with an underscore (_) to point that the content material is supposed to be included. It is a frequent conference to maintain your templates organized.

To indicate the HTML code of _debug.html in your app, embrace it to attach it with dwelling.html:

<!-- templates/dwelling.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
</head>
<physique>
    <!-- .... -->

    % if config['DEBUG'] %
        <!-- Take away div and magnificence blocks -->
        % embrace "_debug.html" %
    % endif %
</physique>
</html>

Substitute the physique of your conditional assertion with a Jinja include tag that references _debug.html.

Go to http://localhost:8000 once more, and take a look on the linked templates:

The content material of the debug space appears to be like very related. That is smart, as your Flask merges dwelling.html with _debug.html earlier than the browser serves the web site. The one distinction is the buttons that you simply added to _debug.html.

Once you click on the buttons, the web page reloads. This is because of some default HTML kind conduct. Other than this, there’s no motion linked to the buttons. For this, you’ll use JavaScript.

Sprinkle in Some JavaScript

With JavaScript, you may make Flask web sites extra interactive. For instance, you’ll be able to ship API requests with the push of a button.

Improve your _debug.html template to clear the <code> aspect while you click on the button with the data-action='clear' attribute:

<!-- templates/_debug.html -->

<!-- ... -->

<script>
class DebugForm 
  constructor() 
    this.debugCard = doc.querySelector(".debug-card");
    this.kind = this.debugCard.querySelector(".debug-form");
    this.clearButton = this.kind.querySelector("button[data-action='clear']");
    this.clearButton.addEventListener(
      "click on",
      this.handleClearClick.bind(this)
    );
  

  handleClearClick(occasion) 
    occasion.preventDefault();
    let code = this.debugCard.querySelector("code");
    code.innerText = "";
  


new DebugForm();
</script>

With a <script> aspect, you’ll be able to add JavaScript instantly into your Flask template recordsdata. Right here, you’re including performance to your kind inside the .debug-card aspect.

The JavaScript code inside this <script> aspect demonstrates the sample that you simply’ll use for the JavaScript on this challenge. Specifically, you have got a JavaScript class that acts as a controller for the corresponding HTML aspect. On this instance, the DebugForm class controls the debug <div> aspect.

You’ll sometimes be utilizing class constructors to pick out the goal HTML components with the .querySelector() method of the Document international object. You’ll even be establishing any event listeners that you could be want.

You’ll word the decision to .bind() when referencing the occasion handler handleClearClick() within the .addEventListener() technique. This permits the occasion handler to name the this key phrase as if it had been an occasion of the DebugForm. Binding permits the handler to have entry to all of the properties outlined within the constructor, like this.debugCard.

If you wish to be taught extra about JavaScript’s this key phrase, then try the scope of this section of Python vs JavaScript for Pythonistas.

The results of the code above is that each time you press the Clear button, you set off the .onHandleClick() technique of DebugForm.

Clicking Clear removes the config information from the <code> aspect. However the Get Information button isn’t linked to any occasion handlers but.

Replace _debug.html to set off an API request when clicking the button with the data-action='get' attribute:

 1<!-- templates/_debug.html -->
 2
 3<!-- ... -->
 4
 5<script>
 6class DebugForm 
 7  constructor() 
 8    this.debugCard = doc.querySelector(".debug-card");
 9    this.kind = this.debugCard.querySelector(".debug-form");
10    this.clearButton = this.kind.querySelector("button[data-action='clear']");
11    this.clearButton.addEventListener(
12      "click on",
13      this.handleClearClick.bind(this)
14    );
15    this.sendButton = this.kind.querySelector("button[data-action='read']");
16    this.sendButton.addEventListener("click on", this.handleSendClick.bind(this));
17  
18
19  handleClearClick(occasion) 
20    occasion.preventDefault();
21    let code = this.debugCard.querySelector("code");
22    code.innerText = "";
23  
24
25  handleSendClick(occasion) 
26    occasion.preventDefault();
27    const enter = doc.querySelector(".debug-card enter");
28    const endpoint = enter.worth;
29    getData(endpoint, this.showResponse);
30  
31
32  showResponse(information) 
33    const debugCard = doc.querySelector(".debug-card");
34    let code = debugCard.querySelector("code");
35    code.innerText = information;
36  
37
38
39new DebugForm();
40</script>

The .handleSendClick() technique that you simply’re connecting to the sendButton occasion calls a perform in line 29 that doesn’t exist but. You’ll create the getData() perform in a second. Earlier than you do, have a look at .showResponse() on line 32.

You’ll use .showResponse() as a callback perform that’s executed as soon as getData() runs efficiently. As a substitute of clearing the content material of your <code> aspect such as you do in .handleClearClick(), you’re displaying the info that .showResponse() receives.

Go on and add getData() proper earlier than DebugForm:

 1<!-- templates/_debug.html -->
 2
 3<!-- ... -->
 4
 5<script>
 6perform getData(endpoint, callback) 
 7  const request = new XMLHttpRequest();
 8  request.onreadystatechange = () => 
 9    if (request.readyState === 4) 
10      callback(request.response);
11    
12  ;
13  request.open("GET", endpoint);
14  request.ship();
15
16
17class DebugForm 
18    // ...
19
20</script>
21
22<!-- ... -->

With getData(), you’re introducing the primary Ajax perform to your Flask challenge. Ajax stands for Asynchronous JavaScript and XML. It completely describes what you’re doing in getData():

• Line 6 defines the getData() perform with the parameters endpoint and callback.
• Line 7 creates a brand new XMLHttpRequest object that you simply use to make requests.
• Line 8 binds the .onreadystatechange() occasion to request. It triggers while you change .readyState() by sending the request in line 14.
• Line 9 checks for the worth 4 of .readyState. The worth 4 signifies the DONE state.
• Line 10 calls the supplied callback perform with request.response when the request operation is full.
• Line 13 initializes your request with a GET HTTP motion and the supplied endpoint URL.
• Line 14 sends the request and triggers .onreadystatechange() when executed.

In brief, this perform makes a GET HTTP request together with your API while you name getData(), as you do in DebugForm.onSendClick().

Now that you simply’ve linked your Flask debug kind with some JavaScript occasions, jump over to http://localhost:8000 and take a look at it out:

Superior! You need to use the enter area of your debug kind to request information out of your database.

Granted, you have already got this performance in your Swagger UI API documentation at http://localhost:8000/api/ui. However you’ve geared up your self with the constructing blocks to evolve your entrance finish right into a full-fledged single-page software.

Over the following few sections, you’ll proceed to spend your time within the entrance finish. Subsequently, it is smart to make it a horny place to be. Learn on and introduce some fashion to your single-page net software.

Model Your Entrance Finish

You fashion your web sites with Cascading Model Sheets, in brief CSS. You already added a little bit of CSS in _debug.html to wrap the textual content. That was advantageous for the minimal styling of your debug kind. However for extra in depth styling adjustments, it is smart to have a central place to retailer your styling declarations.

In Flask initiatives, you generally use a static/ folder for native exterior sources. Inside static/, it helps to create a subfolder for every sort of useful resource. Consequently, you save CSS recordsdata inside your static/ listing inside a css/ subdirectory.

Create fashion.css and add the CSS declarations under:

/* static/css/fashion.css */

:root 
    --bg-color: white;
    --main-color: coral;
    --secondary-color: lavenderblush;


* 
    box-sizing: border-box;


physique 
    coloration: var(--main-color);
    font-size: 1.3em;
    font-family: sans-serif;
    show: grid;
    justify-content: heart;


h2 
    margin: 0;
    padding-bottom: 0.3em;


hr 
    border: 1px strong var(--main-color);
    border-bottom: none;


label 
    show: block;


label span 
    min-width: 9ch;
    show: inline-block;


enter 
    border: 1px strong var(--main-color);
    coloration: inherit;
    padding: 0.3em;


.hidden 
    show: none;


.enhancing 
    background-color: var(--secondary-color) !necessary;


button,
.button 
    background-color: var(--main-color);
    border: 1px strong var(--main-color);
    coloration: var(--bg-color);
    cursor: pointer;
    font-size: 0.6em;
    font-weight: daring;
    margin: 0.3em 0;
    padding: 0.3em 1.3em;
    text-transform: uppercase;
    min-width: 23ch;


button:hover 
    background-color: var(--bg-color);
    coloration: var(--main-color);


.button 
    background-color: clear;
    coloration: var(--main-color);
    cursor: pointer;


.button:hover 
    background-color: var(--main-color);
    coloration: var(--bg-color);

With the CSS declarations above, you’re centering the content material and altering the colours and fonts of your single-page net software. You’re additionally adjusting the look of your enter fields, buttons, and button-like components to make them extra recognizable.

You’ll use the CSS class .hidden later to cover components with JavaScript. With .button, you’ll remodel textual content components to look extra like clickable buttons.

Subsequent, regulate dwelling.html to load fashion.css:

<!-- dwelling.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/fashion.css') ">
</head>

<!-- ... -->

With Flask’s url_for() template tag, you’re creating the total URL to fashion.css below the hood.

Navigate to http://localhost:8000 to get a primary impression:

What a distinction! Your property web page is beginning to seem like a correct single-page net software. Along with your debug kind, you’ve already bought a consumer interface (UI) aspect that communicates together with your REST API.

Within the subsequent part, you’ll restructure your Flask challenge’s JavaScript code a bit. These adjustments will make it extra handy to enhance your web site additional within the upcoming sections.

Create Your First Exterior JavaScript File

Just like the dwelling.html file, which you import different templates into, you’ll be able to create a JavaScript dwelling file. This file is often named index.js. It’ll be the hub for another JavaScript recordsdata that you simply create on your Flask challenge.

As you realized earlier than, you utilize a static/ folder for native exterior sources. In parallel to the css/ folder, create a js/ folder inside static/ to retailer your Flask challenge’s JavaScript recordsdata. Then, create a file named index.js:

// static/js/index.js

import  DebugForm  from "./debug.js";

perform foremost() 
  if (doc.querySelector(".debug-card")) 
    const debug = new DebugForm();
    debug.showResponse("");
  


foremost();

The construction of index.js is corresponding to a Python script. You might have an import statement originally of the file, the place you reference one other module. In JavaScript, this import is named an import declaration. Under the import declaration, you create a foremost() perform that you simply name on the backside of your script.

The one time you’ll see a debug kind in your web page is while you’re operating your Flask app in debug mode.
Consequentially, you’re conditionally instantiating DebugForm provided that there’s a .debug-card aspect on the web page inside foremost().
In any other case, there’s no must have the debug performance current.

At present, DebugForm remains to be hard-coded into _debug.html. To make the code in index.js work, transfer the JavaScript code from _debug.html right into a JavaScript file.
Begin by eradicating the JavaScript code and the script tags in _debug.html:

<!-- templates/_debug.html -->

<div class="debug-card">
    <kind class="debug-form">
        <enter sort="textual content" title="endpoint" worth="/api/individuals" />
        <button data-action="learn">Get Information</button>
        <button data-action="clear">Clear</button>
    </kind>
    <pre>
        <code></code>
    </pre>
</div>

<fashion>
    pre 
        white-space: pre-wrap;
    
</fashion>

<!-- Take away the script block -->

The JavaScript code that you simply faraway from _debug.html contained getData() and DebugForm. At present, your debug kind is the one place in your single-page software the place you make a request to the REST API. You could already anticipate making requests elsewhere, too. So, it is smart to place the logic of constructing requests into its personal file.

Distribute Some JavaScript Logic

Now that _debug.html doesn’t include any JavaScript code anymore, it’s worthwhile to re-create the JavaScript code in different recordsdata. To match their respective functions, you’ll title them request.js and debug.js.

Begin by creating a brand new JavaScript file named request.js contained in the js/ folder of your Flask challenge and paste the getData() perform into it:

 1// static/js/request.js
 2
 3export perform getData(endpoint, callback) 
 4  const request = new XMLHttpRequest();
 5  request.onreadystatechange = () => 
 6    if (request.readyState === 4) 
 7      callback(request.response);
 8    
 9  ;
10  request.open("GET", endpoint);
11  request.ship();
12

Be aware that you simply customise the code in line 3 by prepending the getData() perform definition with an export declaration. You employ export declarations to make values obtainable in different JavaScript modules. You possibly can consider them because the counterpart to import declarations in different JavaScript recordsdata.

Because of the export declaration for getData(), you’ll be able to import the perform in different JavaScript recordsdata. For instance, you’ll do that in a file containing your debug kind’s JavaScript logic.

Create a brand new file named debug.js within the js/ folder:

 1// static/js/debug.js
 2
 3import  getData  from "./request.js";
 4
 5export class DebugForm 
 6  constructor() 
 7    this.debugCard = doc.querySelector(".debug-card");
 8    this.kind = this.debugCard.querySelector(".debug-form");
 9    this.clearButton = this.kind.querySelector("button[data-action='clear']");
10    this.clearButton.addEventListener(
11      "click on",
12      this.handleClearClick.bind(this)
13    );
14    this.sendButton = this.kind.querySelector("button[data-action='read']");
15    this.sendButton.addEventListener("click on", this.handleSendClick.bind(this));
16  
17
18  handleClearClick(occasion) 
19    occasion.preventDefault();
20    let code = this.debugCard.querySelector("code");
21    code.innerText = "";
22  
23
24  handleSendClick(occasion) 
25    occasion.preventDefault();
26    const enter = doc.querySelector(".debug-card enter");
27    const endpoint = enter.worth;
28    getData(endpoint, this.showResponse);
29  
30
31  showResponse(information) 
32    const debugCard = doc.querySelector(".debug-card");
33    let code = debugCard.querySelector("code");
34    code.innerText = information;
35  
36
37
38// Do not embrace new DebugForm();

In line 3, you’re importing getData() from request.js. After the import it, getData() is obtainable the identical manner as earlier than. Subsequently, you don’t must make any changes in line 28.

Like earlier than, you utilize an export declaration in line 5 to make DebugForm importable in different recordsdata. You import DebugForm in index.js, the place you additionally instantiate DebugForm(). That’s why you don’t embrace new DebugForm(); in line 38.

Once you eliminated the JavaScript code from _debug.html, you disconnected your JavaScript logic out of your HTML recordsdata. Within the subsequent part, you’ll reconnect them once more.

Join JavaScript With HTML

In the event you visited http://localhost:8000 now, you’d discover that the JavaScript performance in your Flask app is gone. To load the exterior JavaScript recordsdata into the HTML, you import them in a manner that’s just like the way you imported your exterior CSS file.

Open dwelling.html and add a reference to index.js proper earlier than the closing </head> tag:

<!-- dwelling.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/fashion.css') ">
    <script
        src=" url_for('static', filename='js/index.js') "
        sort="module"
    ></script>
</head>

<!-- ... -->

To load exterior JavaScript recordsdata, you utilize the <script> tag. Inside it, you reference index.js with a Flask url_for() template tag, similar to you probably did for the CSS file. That manner, you dynamically create the total URL to index.js.

Jump over to http://localhost:8000 and verify in case your debug kind works once more:

Excellent, your debug kind works like a attraction! You possibly can enter API endpoints into the shape area and make API requests by pushing the Get Information button. Which means you’ve efficiently linked your exterior JavaScript recordsdata together with your Flask templates.

Adjusting JavaScript code on your debug kind gave you a primary impression of how one can dynamically load content material into your entrance finish. Within the subsequent sections, you’ll use this data to create individuals from inside the consolation of your entrance finish.

The HTML

Once you’re interacting together with your again finish, you’re sending types in an HTTP request and getting some information again as a response. As a substitute of including these types to dwelling.html instantly, you’ll create template partials for this function and embrace them.

Earlier than you create your new templates, regulate dwelling.html to know the context of those included templates:

 1<!-- templates/dwelling.html -->
 2
 3<!DOCTYPE html>
 4<html lang="en">
 5<head>
 6    <meta charset="UTF-8">
 7    <title>RP Flask REST API</title>
 8    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/fashion.css') ">
 9    <script
10        src=" url_for('static', filename='js/index.js') "
11        sort="module"
12    ></script>
13</head>
14<physique>
15    <h1>
16        Howdy, Folks!
17    </h1>
18    <!-- Substitute individual in individuals for loop with this content material -->
19    <div class="person-create-card">
20        % embrace "_person_create_form.html" %
21    </div>
22    <div class="people-list">
23        % for individual in individuals %
24             % embrace "_person_content.html" %
25        % endfor %
26    </div>
27
28    % if config['DEBUG'] %
29        % embrace "_debug.html" %
30    % endif %
31</physique>
32</html>

You embrace _person_create_form.html in line 20. You’ll use this manner to create new individuals, because the title suggests. You present this manner as soon as after your Howdy, Folks! headline inside a <div> containing a person-create-card class attribute. This class attribute will come in useful to handle the <kind> aspect within the JavaScript code later.

The opposite included template is _person_content.html. You reference the template partial in line 24 inside your individuals loop. The HTML code inside _person_content.html will present up for each individual within the record. The template can be able to inheriting the actual individual object for each loop step.

Now that you recognize the place the template partials are positioned, go on and create them. Begin with _person_create_form.html:

<!-- templates/_person_create_form.html -->

<kind>
    <label>
        <span>First Title</span>
        <enter title="fname" sort="textual content" worth="" />
    </label>
    <label>
        <span>Final Title</span>
        <enter title="lname" sort="textual content" worth="" />
    </label>
    <button data-action="create">✨ Create Particular person</button>
</kind>

The shape within the code above might look just like the one you created in _debug.html since you’re following the identical sample. Within the HTML, you create a kind that incorporates the info fields you want. Later, you’ll use Ajax to ship the info over.

There’s one factor that’s completely different from the shape in _debug.html, although. Your enter fields include labels this time, so you recognize what information the sector expects.

The button incorporates a create worth for the data-action attribute. This lets you handle the button instantly inside your JavaScript code later.

Subsequent, create _person_content.html:

<!-- templates/_person_content.html -->

<div class="person-card" data-person-id=" individual.id ">
    <div class="person-content">
        <h2>
            <span data-person-fname=" individual.fname "> individual.fname </span>
            <span data-person-lname=" individual.lname "> individual.lname </span>
        </h2>
    </div>
</div>

For now, solely present the primary and the final title of an individual and no notes. Eradicating the notes will make it extra comfy so that you can confirm that the code works. No worries, you’ll add the notes later once more!

Inside <h2>, you present an individual’s title similar to you probably did earlier than, while you displayed the individuals information in dwelling.html. In _person_content.html, you’re additional enhancing the markup round <h2>.

You employ information attributes to attach your HTML components to the info that your API expects. You may title the attributes virtually any manner you want. However naming them data-person-id, data-person-fname, and data-person-lname makes the connection apparent and helps you together with your JavaScript code later. Moreover, you’ll be able to goal and magnificence the weather in CSS with the HTML class attributes.

The CSS

Now that you’ve got up to date your HTML markup, it’s time to deal with the CSS. You’ll use the HTML class attributes to provide your HTML components particular styling.

Earlier than you progress on so as to add some CSS, examine how your web site appears to be like proper now:

As anticipated, you’ll be able to spot the shape on the high of the web page, and also you don’t present the notes. Your new kind aspect doesn’t look unstyled. That’s a great indicator that your present CSS code is strong. Nonetheless, there’s at all times room for enchancment.

Create a brand new CSS file in static/css/ named individuals.css. This file will include all of your people-specific kinds:

/* static/css/individuals.css */

.person-create-card 
    margin-right: 1em;


.person-create-card 
    background-color: var(--secondary-color);
    padding: 1em;


.person-create-card enter 
    width: 100%;


.people-list 
    margin-bottom: 1.3em;


.person-card 
    border-left: 0.3em strong var(--main-color);
    padding: 0.3em 1em;
    margin: 1em 0;

To load individuals.css, you must add a reference to individuals.css to the <head> aspect in dwelling.html proper under your hyperlink to fashion.css:

<!-- templates/dwelling.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/fashion.css') ">
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/individuals.css') ">
    <script
        src=" url_for('static', filename='js/index.js') "
        sort="module"
    ></script>
</head>

<!-- ... --->

Once you load individuals.css after the primary CSS file, then you’ll be able to work with the CSS variables that you simply outlined in fashion.css. To see if the kinds work, open http://localhost:8000 and take a look:

Candy! The shape space is now distinguishable from the record of your individuals, and every individual’s record aspect bought a bit extra space.

Subsequent, you’ll add some performance to the creation kind.

The JavaScript

In your debug kind, you make GET requests with the getData() perform in request.js. In different phrases, you’re solely triggering a response from a particular API endpoint. To create a brand new individual, you will need to ship information together with your Ajax request. Generally you do that with POST requests.

So as to additionally ship a POST request to the API, open request.js and add one other Ajax perform to it:

 1// static/js/request.js
 2
 3// ...
 4
 5export perform sendForm(kind, motion, endpoint, callback) 
 6  const formData = new FormData(kind);
 7  const dataJSON = JSON.stringify(Object.fromEntries(formData));
 8
 9  const request = new XMLHttpRequest();
10  request.onreadystatechange = () => 
11    if (request.readyState === 4) 
12      callback(request.response, kind);
13    
14  ;
15  request.open(motion, endpoint);
16  request.setRequestHeader("Content material-Sort", "software/json");
17  request.ship(dataJSON);
18

Once you evaluate sendForm() with getData(), which you outlined within the Sprinkle in Some JavaScript part, then you’ll be able to spot 4 variations:

1. Moreover endpoint and callback, sendForm() accepts the parameters kind and motion in line 5.
2. In traces 6 and seven, you create a JSON object by serializing your kind information.
3. You set the request’s content material sort to JSON in line 16.
4. In line 17, you hand over dataJSON to request.ship().

With sendForm(), your challenge incorporates a versatile Ajax perform that may work with any endpoints that settle for JSON information.

Create a brand new file named individuals.js to construct the controller courses for the people-related components. These courses will handle the individuals lists and the creation kind, in addition to dispatching requests to your REST API:

 1// static/js/individuals.js
 2
 3import  sendForm  from "./request.js";
 4
 5export class Folks 
 6  constructor() 
 7    this.allPeopleCards = doc.querySelectorAll(".person-card");
 8    this.activateCreateForm();
 9  
10
11  activateCreateForm() 
12    const peopleForm = doc.querySelector(".person-create-card kind");
13    new CreatePersonForm(peopleForm);
14  
15
16
17class CreatePersonForm 
18  constructor(el) 
19    this.kind = el;
20    this.createButton = el.querySelector("button[data-action='create']");
21    this.createButton.addEventListener(
22      "click on",
23      this.handleCreateClick.bind(this)
24    );
25  
26
27  handleCreateClick(occasion) 
28    occasion.preventDefault();
29    sendForm(this.kind, "POST", "/api/individuals", this.addPersonToList);
30    this.kind.reset();
31  
32
33  addPersonToList(rawData) 
34    const information = JSON.parse(rawData);
35
36    const personCard = doc.querySelector(".person-card").cloneNode(true);
37    const personContent = personCard.querySelector(".person-content");
38
39    const personFirstName = personContent.querySelector("[data-person-fname]");
40    personFirstName.textContent = information.fname;
41    personFirstName.setAttribute("data-person-fname", information.fname);
42
43    const personLastName = personContent.querySelector("[data-person-lname]");
44    personLastName.textContent = information.lname;
45    personLastName.setAttribute("data-person-lname", information.lname);
46
47    personCard.setAttribute("data-person-id", information.id);
48    doc.querySelector(".people-list").appendChild(personCard);
49  
50

In individuals.js, you’re working with the courses Folks and CreatePersonForm. You’ll prolong Folks later. For now, its solely function is to activate the creation kind. You achieve this by calling .activateCreateForm() in line 8.

In .activateCreateForm(), you’re on the lookout for the shape inside .person-create-card and setting it to peopleForm in line 12. In line 13, you’re instantiating CreatePersonForm with peopleForm as an argument.

In CreatePersonForm, you’re connecting createButton to handleCreateClick(). Once you click on the button, you then make a POST request to the API in line 29.

After the API request is finished, you clear the shape enter fields with .reset() in line 30.

The callback perform of sendForm() in line 29 is .addPersonToList(), which you outline in line 33. When .addPersonToList() executes, you clone the primary .person-card as a personCard template and add the brand new individual’s information. In line 48, you add personCard to your record of individuals.

To make use of individuals.js, you will need to add it to index.js and instantiate Folks:

// static/js/index.js

import  Folks  from "./individuals.js";
import  DebugForm  from "./debug.js";

perform foremost() 
  new Folks();
  if (doc.querySelector(".debug-card")) 
    const debug = new DebugForm();
    debug.showResponse("");
  


foremost();

The index.js file is the hub for all of your JavaScript recordsdata within the Flask challenge. By importing Folks from individuals.js and instantiating it inside foremost(), you’ve executed all of the work to attach your web site with the performance to create a brand new individual.

Open http://localhost:8000 and check out your new performance:

Superior, now you can add a brand new individual to your database from inside the consolation of your entrance finish. Once you click on the Create Particular person button, you name the REST API. With the info you get again, you’re including a brand new individual card to the record of individuals.

Nonetheless, the notes on your persons are lacking. Within the subsequent part, you’ll observe the same path to indicate the notes within the entrance finish.

The HTML

On this part, you’ll create two new template partials. The primary template incorporates a kind to create new notes. The second template will show the content material of a word.

Earlier than you create the brand new templates, begin by extending _person_content.html:

 1<!-- templates/_person_content.html -->
 2
 3<div class="person-card" data-person-id=" individual.id ">
 4    <div class="person-content">
 5        <h2>
 6            <span data-person-fname=" individual.fname "> individual.fname </span>
 7            <span data-person-lname=" individual.lname "> individual.lname </span>
 8        </h2>
 9    </div>
10    <ul class="note-list">
11        <li class="note-create-card">
12            % embrace "_note_create_form.html" %
13        </li>
14        % for word in individual.notes %
15            % embrace "_note_content.html" %
16        % endfor %
17    </ul>
18</div>

In line 10, you add the <ul> aspect that’ll include your notes. The primary merchandise of the notes record is the shape to create new notes. You’ll outline the shape in _note_create_form.html, which you embrace in line 12.

In line 14, you loop via all of the notes that an individual incorporates. For every word, you embrace the _note_content.html template partial in line 15.

Subsequent, create _note_create_form.html in your templates/ listing:

 1<!-- templates/_note_create_form.html -->
 2
 3<kind>
 4    <enter title="person_id" sort="hidden" worth=" individual.id " />
 5    <label>
 6        <span>Be aware</span>
 7        <enter title="content material" sort="textual content" worth="" />
 8    </label>
 9    <button data-action="create">✨ Create Be aware</button>
10</kind>

Because you’re together with _note_create_form.html in _person_content.html, you’ll be able to work with the individual object in line 4.

The ID of an individual is necessary for connecting the word to the fitting individual within the database. That’s why you want it within the kind. However you don’t must see this info within the entrance finish. That’s why you set the enter sort to "hidden".

Apart from that, the shape appears to be like just like the shape that you simply use to create individuals. You might have an enter area that shops the info that you simply’ll ship over to the API with the push of a button.

Subsequent, create the _note_content.html template:

<!-- templates/_note_content.html -->

<li class="note-card" data-note-id=" word.id ">
    <div class="note-content"> word.content material </div>
</li>

With each templates completed, try http://localhost:8000 to see the notes:

Each templates inherit the info from the father or mother template and render below every individual. Nonetheless, you’ll be able to enhance the fashion of the notes a bit.

The CSS

For the time being, the shape to create notes appears to be like misplaced between an individual’s title and the record of notes. Identical to you probably did with individuals.css, create a separate CSS file named notes.css in static/css/:

/* static/css/notes.css */

.note-create-card 
    background-color: var(--secondary-color);
    padding: 1em;


.note-create-card enter 
    width: 100%;


.note-list 
    list-style: none;
    padding-left: 0;


.note-card 
    background-color: blanchedalmond;
    padding: 1em;
    margin: 0.6em 0;


.note-content 
    padding: 0.3em 0;

After you create the CSS file, it’s worthwhile to reference it in dwelling.html:

<!-- templates/dwelling.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/fashion.css') ">
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/individuals.css') ">
    <hyperlink rel="stylesheet" href=" url_for('static', filename='css/notes.css') ">
    <script
        src=" url_for('static', filename='js/index.js') "
        sort="module"
    ></script>
</head>

<!-- ... --->

With the up to date kinds in place and the reference in dwelling.html, jump over to the browser and open http://localhost:8000:

Your notes look good! The shape to create new notes is visually distinguishable from the prevailing notes. Learn on to boost your handsome notes show with some JavaScript performance.

The JavaScript

Identical to you probably did for individuals, it is smart to create a brand new JavaScript file in your Flask challenge to include the performance for dealing with your notes.
Title it notes.js and retailer it with the content material under in static/js/:

 1// static/js/notes.js
 2
 3import  sendForm  from "./request.js";
 4
 5export class Notes 
 6  constructor() 
 7    this.allNoteLists = doc.querySelectorAll(".note-list");
 8    this.allNotes = doc.querySelectorAll(".note-card");
 9    this.activateAllCreateForms();
10  
11
12  activateAllCreateForms() 
13    this.allNoteLists.forEach((noteList) => 
14      const personCard = noteList.closest(".person-card");
15      const personID = personCard.getAttribute("data-person-id");
16      new NoteCreateForm(noteList, personID);
17    );
18  
19
20
21export class NoteCreateForm 
22  constructor(noteList, personID) 
23    this.noteList = noteList;
24    this.personID = personID;
25    this.kind = this.noteList.querySelector(".note-create-card kind");
26    this.createButton = this.kind.querySelector(
27      "button[data-action='create']"
28    );
29    this.createButton.addEventListener(
30      "click on",
31      this.handleCreateClick.bind(this)
32    );
33    this.connectPerson();
34  
35
36  connectPerson() 
37    let fieldPersonID = this.kind.querySelector("enter[name='person_id']");
38    fieldPersonID.setAttribute("worth", this.personID);
39  
40
41  handleCreateClick(occasion) 
42    occasion.preventDefault();
43    sendForm(this.kind, "POST", "/api/notes", this.addNoteToList);
44    this.kind.reset();
45  
46
47  addNoteToList(rawData) 
48    const information = JSON.parse(rawData);
49    const noteList = doc
50      .querySelector("[data-person-id= '" + data.person_id + "']")
51      .querySelector(".note-list");
52    const newNoteCard = doc.querySelector(".note-card").cloneNode(true);
53    newNoteCard.querySelector(".note-content").textContent = information.content material;
54    newNoteCard.setAttribute("data-note-id", information.id);
55    noteList.insertBefore(newNoteCard, noteList.youngsters[1]);
56  
57

The construction of notes.js is just like individuals.js. Once more, you’re working with two courses:

1. Notes
2. NoteCreateForm

The aim of Notes is to activate the creation kind. You achieve this by calling .activateAllCreateForms() in line 9.

In .activateAllCreateForms(), you’re looping via all of the word lists. For every word record that you simply discover, you’re deciding on the .person-card aspect that the word record is in and getting the corresponding personID.

In line 16, you’re instantiating NoteCreateForm with noteList and personID as arguments.

In NoteCreateForm, you’re connecting createButton to .handleCreateClick() in line 31. In line 33, you name .connectPerson() to guarantee that the ID of the creation kind matches the focused individual.

Once you click on the Create button, you then make a POST request to the API in line 43. If the API request is finished, you then clear the shape enter fields with .reset() in line 44.

The callback perform of sendForm() in line 43 is .addNoteToList(), which you outline in line 47. When .addNoteToList() executes, then you choose the primary .note-card of your doc in line 52. That is the word card of one other individual. That’s why it’s worthwhile to regulate its contents and attributes after cloning it in traces 53 and 54.

Lastly, you add noteCard to noteList in line 55. Nonetheless, you don’t append it to the tip of the record, as you probably did with personCard in personList. As a substitute, you’re utilizing .youngsters[1] so as to add noteCard at index 1. That’s proper after the word creation kind, which is on the first place, index 0, of your noteList.

Earlier than you’ll be able to verify if creating notes now works, you will need to add notes.js to index.js:

// static/js/index.js

import  Folks  from "./individuals.js";
import  Notes  from "./notes.js";
import  DebugForm  from "./debug.js";

perform foremost() 
  new Folks();
  new Notes();
  if (doc.querySelector(".debug-card")) 
    const debug = new DebugForm();
    debug.showResponse("");
  


foremost();

You add the hyperlink to notes.js proper after the hyperlink to the individuals.js file. As soon as the adjustments are in place, try how your single-page net software works:

Improbable, now you can create individuals and notes!
Earlier than you learn on, mess around together with your entrance finish a bit extra. Exhibiting the notes of individuals unveiled a bug that your code incorporates. Can you notice it?

The Bug

You could have added a brand new individual efficiently while you weren’t displaying the notes but. At that time, every thing regarded advantageous. However now that you simply’re additionally displaying the notes, you’ve unveiled an attention-grabbing bug. Go to http://localhost:8000, create a brand new individual, and see what occurs:

When creating a brand new individual, you’re at present copying the notes from an present individual with it. As a substitute, you need an empty word record.
To repair this bug, head over to individuals.js and regulate .addPersonToList():

 1// static/js/individuals.js
 2
 3import  sendForm  from "./request.js";
 4import  NoteCreateForm  from "./notes.js";
 5
 6// ...
 7
 8class CreatePersonForm 
 9
10  //...
11
12  addPersonToList(rawData) 
13    const information = JSON.parse(rawData);
14
15    const personCard = doc.querySelector(".person-card").cloneNode(true);
16    const personContent = personCard.querySelector(".person-content");
17
18    const personFirstName = personContent.querySelector("[data-person-fname]");
19    personFirstName.textContent = information.fname;
20    personFirstName.setAttribute("data-person-fname", information.fname);
21
22    const personLastName = personContent.querySelector("[data-person-lname]");
23    personLastName.textContent = information.lname;
24    personLastName.setAttribute("data-person-lname", information.lname);
25
26    personCard.setAttribute("data-person-id", information.id);
27    personCard
28      .querySelectorAll(".note-card")
29      .forEach((noteCard) => noteCard.take away());
30    new NoteCreateForm(personCard.querySelector(".note-list"), information.id);
31    doc.querySelector(".people-list").appendChild(personCard);
32  
33

Once you create a brand new individual, you copy the info of an present individual in line 12. To keep away from copying the prevailing notes together with the individual, you delete them in traces 27 to 29.

Lastly, you’re instantiating a brand new NoteCreateForm in line 30, which you import in line 4. That manner, you make sure that the note-creation kind connects to the fitting individual.

Go to http://localhost:8000 to see if every thing works as anticipated:

What a aid! Once you create a brand new individual, there aren’t any notes that belong to a different individual. As a substitute, now you can create new notes for the brand new individual with out issues.

Now that the bug is out of the best way, you’ll be able to give attention to including options to your single-page net software. You begin with the HTML so as to add edit controls to an individual.

The HTML

To edit an individual, it’s worthwhile to have a management aspect for every individual. Earlier than you create the HTML for the management aspect, open the prevailing _person_content.html file and create a reference to your new file:

<!-- templates/_person_content.html -->

<div class="person-card" data-person-id=" individual.id ">
    % embrace "_person_control.html" %
    <div class="person-content">
        <!-- ... -->
    </div>
    <ul class="note-list">
        <!-- ... -->
    </ul>
</div>

You wish to present the controls to edit an individual inside of every individual’s card. Like earlier than, you’re referencing one other partial. This nesting sample allows you to separate issues. This devoted file is called _person_control.html. Go on and create it with the content material under:

<!-- templates/_person_control.html -->

<div class="person-control-card">
    <a class="button toggle-control">✍️ Edit</a>
    <div class="person-control hidden">
        <kind class="person-form">
            <enter title="id" sort="hidden" worth="" />
            <label>
                <span>First Title</span>
                <enter title="fname" sort="textual content" worth="" />
            </label>
            <label>
                <span>Final Title</span>
                <enter title="lname" sort="textual content" worth="" />
            </label>

            <button data-action="replace">💫 Replace Particular person</button>
            <hr />
            <button data-action="cancel">👈 Cancel</button>
            <button data-action="delete">❌ Delete Particular person</button>
        </kind>
    </div>
</div>