According to the intensity of feedback from our friends in the last two days, this class is going to add a function that is very sticky to users on the home page. Every hyperlink portal in the company!

Newcomers to companies are often confused when they can’t find the address of each platform/document. Old employees who work across departments often suffer from not being able to find the addresses connected to other departments. A lot of platforms such as functionality, if you don’t say, then the new people may not even know that the functionality platform exists, for this pain point. We think

Is there a simple place where we can all come in at a glance?

If not the best! In this way, we can make a page for everyone to use, and almost 90% of our colleagues will bookmark this page directly. And over time, the traffic on this page will be very high. We will promote who’s what platform/documentation /wiki/ graphite later. Can use this as an advertising space, quickly get exposure.

So you can follow me to do this function first, about 2 sections can be ~

The main content of this lesson is to train the display effect of the loop list so that we can proceed to the project list/interface list/use case list.

Ok, so when we design a new entity, do we not know where to start?

So let’s think about it in this way:

  1. Where is the data stored? We have a database, so we need to create a new class in Models.py as a database table

  2. Where is this stack of data at the front? We are displaying the C bit in home.html

  3. Where to add, delete, and review these data? Let’s go to admin background

  4. How is the data passed to the front end? Which function of home we go into at the back end retrieves this data from the database and returns it.

Okay, now that we’ve combed through, we know what we need to do. So the first step is to create a table.

Open the models. Py:

Create class DB_home_href as our home page hyperlinked portal table

Then run the two most commonly used synchronization/validation table structure commands:

Then don’t forget to register the table in admin.py so that we can add, delete, change and check it in the background.

Ok, now we need to go to the background function to find a way to return this data to the front end!

Get ready, we’re going to learn a new technique, a very, very clever one: how to get data back to the front end and return different data for different complex pages and situations. Here I’ve built a data dispenser that functions like a route controller for urls.py. Here is more important, we carefully consider, do not think through the first copy of the gourd gourd, skilled will naturally understand.

First open views.py and find the child function:

You can forget about this OID, this OID is gray, we’re not going to enable it yet, but don’t delete it, it’s going to be useful later.

Now let’s focus on eid. What is eid again? It’s actually the name of the HTML file that we’re going into. Let’s print:

Then the browser waits for the background to restart automatically, and refreshes the home page:

We now know that the user enters the home.html page. So we will return the corresponding data to it, namely all hyperlink portals:

Let’s create a new function called child_json() that takes the name of the page, looks it up in different databases, collates the data and returns it to child(), which then returns it to the front-end browser. This function has so many things to do later that it is necessary to make it a hierarchical presence, similar to the middle stage on the side of our development colleagues. Interacts with the database, collates the data, and returns it to the business layer function.

If eid is home.html, go to the database DB_home_href, take all the hyperlink portal data, and return it. The last common query code used by ORM is the class name.obJets.all (), which retrieves data in querySet format. But you can use it temporarily as a list. Later we will introduce how to skillfully use querySet data as needed. Format is similar to: [{” name “:…,” href “:…}, {” name” :…, “href” :…}, {” name “:…,” href “:…}]

All the elements in the list are dictionaries.

Now let’s think about a problem, and the data that we’re going to return to the front end is in a very strict format, and it can only be a dictionary. But what if the date we just pulled from the database is a list-like format?

Simply create a new dictionary, res, and use date as the value of one of the key-value pairs of res. Continue to modify as shown below:

Finally, we return res, which is a dictionary, and we can directly return the child function to the front end.

Add a third argument to the render() function in our child function, which is our res, and call child_json(eid) to get the res:

So let’s go to the browser, wait for the background to reboot, refresh the page and see if there are any errors.

(If it doesn’t restart, you can manually restart it.)

good I did not report any errors. If you have made a mistake, please check the error information to see if you missed something.

    

At this point we have completed a series of links that pass data to the front end. Then comes front-end development.

Let’s open home.html, but remember that our front-end data is in the hrefs variable:

In home.html, let’s get rid of all the welcome and joke boxes that get in the way. Give up the C bit for our big portal:

What I did was to simplify the welcome by creating a new div for the following teasers and buttons, and then placing the div properties 5px to the right and 5px from the bottom:

The effect is as follows:

Next we’ll create a new div that shows the hyperlink portal.

Consider a few features of div:

  1. Width and height:

The width will be about 70%. The height will be as high as there are portals.

2. Location:

In order to prevent us from being distracted by the left menu, we need to set the outer left margin in our position.

3. Display effect of internal copy

Since my background is dark, the text had better be light and bright to form contrast and make it easy to read.

    

Ok, the results we did according to the above requirements are as follows:

Text-align :left eliminates the effect of text-align:center in the outermost div.

The interior is also wrapped with a layer of strong, in order to make the text bold look more clear.

Results the following

Now let’s put the looped hyperlink in:

{% for i in hrefs %} …. {% endfor %} is our standard loop in HTML:

All internal variables must be wrapped in {{}}. For faithful substitution we must enclose the string in quotes, as in href.

Let’s see the effect:

It turns out there’s nothing because we don’t have the data. Now let’s go to the admin background and manually add some data:

Enter our db_home_hrefs table by clicking on the left menu – background:

Then click the Add button:

After entering the data, click Save and add another:

Just write something and add a few. So that we can debug the display:

Then we go back to refresh the home page, note that the operation of admin background does not need to wait for the restart of the service, is pure online modification of data. Refresh the home page directly to see the effect:

Okay, so now we have success. We can test it ourselves to see if the jump succeeds.

Ok, so that’s the end of this lecture, and next time we’re going to optimize the display of this hyperlink.