This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Previously on

The first article in this series: Quickly create a Django project, and the Python environment will have you covered

The second article in this series: Power Users in Django and creating your own app turns out to be easy!

In the previous section, we created the admin account and the Blog app, gave a basic introduction to the related files, completed the creation of the Article model, and the backstage administration registration, and manually added two blogs.

In this section, we’ll start creating views and front-end templates for the blog and display the list of blogs on the front page

Second, operation blog view and front-end template creation

2.1 Setting the blog home page View

First, we open the blog/views.py file and add the following code, mainly to create a home page view. ListView and DetailView are general views, which are designed to display data. We don’t need to write some data query operations by ourselves. Easy for us to use.

from django.shortcuts import render
from django.views.generic import ListView, DetailView
from blog.models import Article

# Create your views here.
class HomeView(ListView) :
    Specify the view operation model
    model = Article
    You'll need to create a templates folder in the myblog directory to store the previous templates
    # and create a home.html in the template folder as the front page of our blog
    template_name = 'home.html'
Copy the code

As shown in the code above, we need to create a templates folder (DIRS was previously set in templates in settings.py) under myblog (the topmost project directory) to hold the previous template and create a home.html inside it as the front page of our blog.Let’s just write a simple sentence in home.htmlHello Blog~Later we will change to display the home page instead of the content.

2.2 Configuring View Routing

With that done, Djangos MVT framework is pretty much complete. Is it possible to visit http://127.0.0.1:8000/ and see Hello Blog~ instead of the default Django home page?

Obviously not, because we haven’t configured the route (URL) for this app, so let’s create a new urls.py file in the blog directory and add a route to our HomeView.

from django.urls import path
from blog import views

urlpatterns = [
    The first parameter is the route address
    The second argument is the view function, which can be called directly from views with as_view
    The third parameter: route name
    path(' ', views.HomeView.as_view(), name='home'),]Copy the code

In addition to routing here, we also need to route the blog subroutes in the main program myblog/urls.py so that the access routes will work layer by layer.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    The first parameter is the routing address
    # second argument: include Adds the blog subapplication route
    path(' ', include('blog.urls')),]Copy the code

2.3 Perfect display of Hello World

Now that we’re done configuring the route, we run the program and access it directlyhttp://127.0.0.1:8000/, will be displayedhome.htmlThe content,

This completes the basic configuration of the Django framework’s MVT+ routing, as well as the process for developing other sub-applications:

2. V-write view function, which mainly realizes the back-end function and maps the data to the front end. 3Copy the code

Three, create template, configure the home page blog list display

We’ve already implemented a Django MVT framework from scratch. Of course, our T front end template is pretty rudimentary and doesn’t show what we want, so in this section, we’ll focus on modifying the front end template.

Again, we just run the project. Strictly speaking, there is no need to shut down the Django project unless it stops automatically because of a code error.

Go to home.html in Templates and change the original code simply:

<title>My cousin's blog</title>
<h1>This is my blog, how to display the list of articles?</h1>
Copy the code

If you refresh the page, you’ll find that the page title and display content are all over,Of course, this is a simple change, but if you don’t have any front-end basics, I recommend learning about front-end technology first.

Let’s make the front page display our list of blogs:

<title>My cousin's blog</title>
<h1>Blog list</h1>

<ul>
{% for article in object_list %}
    <li>
        {{article.title}} - {{article.author}}</br>
        {{article.summary}}
    </li>
{% endfor %}
</ul>
Copy the code

First,

represents the page title, h1-H6 represents the content title (level 1- level 6), then

    is the unordered list element, where one or more elements, and

  • is the list item element.

{% for article in object_list %} {% endfor %} is js code, remember the format, can be controlled logically.

Object_list is a query set of Django objects through ListView, that is, a list of all article objects retrieved.

This way, we can simply display the basic information of all our blogs on the page

See you next time. I’m a cat lover and a tech lover. If you find this article helpful, please like, comment and follow me!