橡皮擦，一個(gè)逗趣的互聯(lián)網(wǎng)高級(jí)網(wǎng)蟲灾梦。新的系列峡钓，讓我們一起進(jìn)入 Django 世界妓笙。
二十、微型 CSDN 之博客添加導(dǎo)航功能實(shí)現(xiàn)-靜態(tài)頁面
上篇博客我們實(shí)現(xiàn)了微型 CSDN 博客的初始化能岩，學(xué)習(xí)本篇博客寞宫，你將初步接觸在 Django 中拆分組件，并且能更加清晰的掌握 Django 的 MVT 模式捧灰。
在項(xiàng)目根目錄（本項(xiàng)目根目錄為 my_csdn淆九，該目錄下存在一個(gè)同名的 my_csdn 文件）創(chuàng)建一個(gè) navbar 應(yīng)用，同步需要注冊(cè)在 settings.py 中毛俏。
還有為了后續(xù)實(shí)現(xiàn)組件化開發(fā)炭庙，還需要調(diào)整一下項(xiàng)目結(jié)構(gòu)，具體步驟如下煌寇。
- 創(chuàng)建新應(yīng)用：
通過命令python manage.py startapp navbar焕蹄。 - 在
settings.py中注冊(cè)應(yīng)用：INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'csdn', 'navbar' ] - 將之前博客中的
templates文件夾移動(dòng)到my_csdn項(xiàng)目根目錄，與csdn阀溶，navbar目錄同級(jí)別腻脏。
20210502204156393[1].png
20.1 導(dǎo)航菜單路由與視圖設(shè)置
接下來就遵循常見代碼處理方式，實(shí)現(xiàn)導(dǎo)航菜單添加頁面银锻。
在 templates 文件中新增加應(yīng)用同名目錄 navbar永品，用于存在菜單相關(guān)頁面（稍后補(bǔ)充）。
下面要展示的是在 Django 中經(jīng)常做的操作击纬，也是能成功預(yù)覽到頁面的必備操作鼎姐。
- 添加路由，修改
urls.py文件更振； - 修改
views.py炕桨，添加頁面渲染邏輯； - 添加對(duì)應(yīng)的模板文件肯腕，本節(jié)博客將在
models.py文件增加NavItem類献宫。
路由修改
先修改應(yīng)用文件下的 urls.py 文件，再修改項(xiàng)目同名目錄中的 urls.py 文件实撒。
拿 navbar 應(yīng)用進(jìn)行舉例姊途，代碼如下：
navbar/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('add/', views.NavItemCreateView.as_view(), name='navbar-add'),
# path('list/', views.NavItemListView.as_view(), name='navbar-list'),
# path('<int:pk>/update', views.NavItemUpdateView.as_view(), name='navbar-update'),
# path('<int:pk>/delete', views.NavItemDeleteView.as_view(), name='navbar-delete')
]
上述代碼使用到了 views.py 模塊中的 NavItemCreateView 方法（稍后進(jìn)行補(bǔ)充）。
my_csdn/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('navbar/', include("navbar.urls")),
path('', include('csdn.urls'))
]
每次新增應(yīng)用之后知态，都要在該文件進(jìn)行路由注冊(cè)粮彤。此時(shí)路由設(shè)置基本完成璧疗，下面就要修改 views.py 文件告私，實(shí)現(xiàn) NavItemCreateView 方法咨油。
navbar/views.py
from django.views.generic import CreateView
from .models import NavItem
from django.urls import reverse, reverse_lazy
# Create your views here.
class NavItemCreateView(CreateView):
model = NavItem
fields = ["title", "order", "url"]
template_name_suffix = '_add'
success_url = reverse_lazy("navbar-list")
def get_context_data(self, **kwargs):
context = super(NavItemCreateView, self).get_context_data(**kwargs)
return context
在 views.py 中囚巴，NavItemCreateView 繼承了 CreateView 類原在，繼承過來的常見屬性如下：
-
model：需要?jiǎng)?chuàng)建對(duì)象的模型友扰； -
fields：表單中提交的字段名稱； -
template_name：指定了添加表對(duì)象的模板庶柿； -
template_name_suffix：模板文件后綴名村怪； -
success_url：提交成功跳轉(zhuǎn)頁面；
我們?cè)O(shè)置了 template_name_suffix 為 _add浮庐，所以在 templates/navbar 文件夾下甚负，對(duì)新增導(dǎo)航菜單模板不能隨意設(shè)置，必須為 navitem_add.html审残，格式為 模型名_后綴.html梭域，默認(rèn)值為 _form。
對(duì)于 get_context_data 方法搅轿，沒有做太多的變化病涨，直接重寫返回?cái)?shù)據(jù)即可。
上述代碼中還用到了 models.py 文件中的 NavItem 類璧坟，該類就是導(dǎo)航菜單的模型類既穆，為了后續(xù)內(nèi)容的編寫，先對(duì)其進(jìn)行編寫雀鹃。
20.2 視圖模型設(shè)置
navbar/models.py
from django.db import models
# Create your models here.
class NavItem(models.Model):
title = models.CharField(verbose_name="菜單", max_length=10, default="菜單頁")
url = models.CharField(verbose_name="鏈接", blank=True, max_length=100, null=True)
order = models.SmallIntegerField(verbose_name="順序", default=0)
create_time = models.DateTimeField(verbose_name="創(chuàng)建時(shí)間", auto_now_add=True)
class Meta:
verbose_name_plural = verbose_name = "導(dǎo)航欄"
ordering = ["order", "-create_time"]
def __str__(self):
return self.title
除了之前博客涉及的內(nèi)容以外幻工，只有一個(gè)內(nèi)部類 Meta 是一個(gè)新的知識(shí)點(diǎn)，它用于定義一些 Django 模型類的行為特性黎茎，該類內(nèi)部可用的屬性如下囊颅。
-
verbose_name、verbose_name_plural：模型類定義中文名工三，后面的是復(fù)數(shù)格式迁酸； -
app_lable：模型在INSTALLED_APPS中的應(yīng)用程序外部定義； -
ordering：按照哪個(gè)字段排序俭正； -
abstract：定義一個(gè)模型是否為抽象類奸鬓。
還有更多的屬性，不做展開掸读，后續(xù)項(xiàng)目用到的時(shí)候再進(jìn)行補(bǔ)充串远。上述代碼用到了設(shè)置模型名稱，設(shè)置排序儿惫，其中 -create_time 在字段前面增加符號(hào) -澡罚，表示降序。
20.3 模板打通
補(bǔ)充模板頁面
準(zhǔn)備工作已經(jīng)完成肾请，最后一步就是實(shí)際頁面內(nèi)容了留搔，在 templates/navbar 目錄中新建 navitem_add.html 文件，代碼內(nèi)容如下：
{% extends 'csdn/backend/backend_common.html' %}
{% block option-title %}導(dǎo)航菜單添加{%endblock%}
{% block content%}
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">標(biāo)題：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" placeholder="請(qǐng)輸入標(biāo)題">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label">鏈接</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="url" placeholder="請(qǐng)輸入鏈接">
</div>
</div>
<div class="form-group">
<label for="order" class="col-sm-2 control-label">順序</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="order" placeholder="請(qǐng)輸入順序">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">添加</button>
</div>
</div>
</form>
</div>
{% endblock %}
對(duì)于 html 部分代碼铛铁，不做過多的解釋隔显，大家可以隨時(shí)從 bootstrap 官方拷貝內(nèi)容却妨，進(jìn)行修改。
運(yùn)行項(xiàng)目括眠，打開 http://127.0.0.1:8000/navbar/add/彪标，得到如下界面，本節(jié)博客涉及的內(nèi)容全部完成掷豺。
該功能為后臺(tái)添加功能捞烟，非前臺(tái)頁面，故界面可以粗糙一些当船，以實(shí)現(xiàn)功能為準(zhǔn)题画。
20.4 本篇博客小節(jié)
本篇博客在學(xué)習(xí)的時(shí)候，重點(diǎn)學(xué)習(xí)如果打通模型德频，視圖婴程，模板這三者之間的關(guān)系，以及掌握項(xiàng)目框架（簡單看成目錄）之間的關(guān)系抱婉。
以上內(nèi)容掌握之后档叔，后續(xù)的學(xué)習(xí)成本才會(huì)降低，否則會(huì)不停的打轉(zhuǎn)蒸绩。
本文章屬于《滾雪球?qū)W Python 第三輪》中的一篇衙四，歡迎繼續(xù)關(guān)注。
今天是持續(xù)寫作的第 <font color="red">145</font> / 200 天患亿〈福可以點(diǎn)贊、評(píng)論步藕、收藏啦惦界。
0.0 繼續(xù)閱讀
- 國內(nèi)，首套咙冗，成體系沾歪，技術(shù)博客寫作專欄發(fā)布啦
- 學(xué)弟學(xué)妹：大佬們，別勸了雾消，學(xué)不動(dòng)了灾搏，學(xué)不動(dòng)了
- 自己動(dòng)手寫個(gè)微型 CSDN 吧，還能實(shí)現(xiàn)網(wǎng)頁版 Blink立润，No.1
本文長尾關(guān)鍵詞狂窑，提供給機(jī)器使用，閱讀請(qǐng)忽略
django api django redis django bootstrap
topview django flask django cms
django3 pycharm django django開源
