Django城市資訊查詢功能的實現步驟

2022-07-01 22:01:01

前言

基於 Pythgo的 Django 框架，程式設計實現一個 WEB 程式，為使用者提供城市資訊查詢功能。使用者可輸入一個城市名，輸出其所在省份名稱和郵編等資訊。例如，輸入“桂林市”，輸出“廣西壯族自治區”和“541000”等城市相關資訊。

資料準備階段

版本推薦

本教學的django為4.0.3，python版本為3.10.4，推薦使用，如果不是這些版本的，django，python會出現錯誤！

專案實現階段

Django 工程的建立

在桌面上新建立一個django資料夾，在vscode的終端開啟此資料夾，在終端中建立工程專案，如：

 django-admin startproject GongCheng

可以看到左側資源管理器左側出現了GongCheng

並在終端執行manager.py檔案：

DesktopdjangoGongCheng> python manage.py runserver

為專案新增兩個App，一個作為主頁，一個作為省份查詢：

PS C:Users使用者DesktopdjangoGongCheng> python manage.py startapp homeApp
PS C:Users使用者DesktopdjangoGongCheng> python manage.py startapp aboutApp

新增完成後面，對應左邊資源管理器：

在專案目錄下，建立static檔案，在此不便多述，上檔案連結連結：點選這裡下載

路由的設定及存取

在專案路由下的settings.pu檔案中的INSTALLED_APPS[ ]輸入兩個app的名稱：

渲染介面

完成上面的設定後面，開啟homeApp資料夾的views.py，使其通過程式碼返回頁面，程式碼入下：

from django.shortcuts import render
from django.shortcuts import HttpResponse
 
 
# Create your views here.
def home(request):
    return render(request, 'home.html')

然後在homeApp下建立templates資料夾，在該資料夾中建立home.html:

並且在html中輸入以下程式碼，使檔案與static檔案進行連線，獲取css，js樣式：

注：有一些人的Django的版本是2.2.4的，小編的Django版本是最新版本的，所以2.2.4版本的同學，需要在HTML的{% load static %}上改為{% load staticfiles %}

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首頁</title>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
 
<body>
 
</body>
 
</html>

設定網站根存取路徑，在專案根目錄找到urls.py找到urlpatterns欄位，然後新增首頁路由:

from django.contrib import admin#已經有了
from django.urls import path#已經有了
from homeApp.views import home
from django.conf.urls import include
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='home'),
    path('aboutApp/',include('aboutApp.urls')),
]

在aboutApp的目錄下建立urls.py,再在aboutAppurls.py裡面新增

from django.urls import path
from . import views
 
 
app_name = 'aboutApp'
 
urlpatterns = [
         path('about/',views.about,name='about'),
]

使app_name擁有名稱。

開啟aboutAppviews.py，輸入以下程式碼：

from django.shortcuts import render
from django.shortcuts import HttpResponse
 
def about(request):
    html='<html><body>聽我說謝謝你</body></html>'
    return HttpResponse(html)

然後在終端輸入：python manage.py runserver 執行程式，開啟出來的連結

主頁效果：

aboutApp頁面效果:

最後,在根目錄的setting.py的INSTALLED_APPS[ ]上方的ALLOWED_HOSTS = [ ]新增 ‘*’ ：

ALLOWED_HOSTS = ['*',]

新增富文字模型

富文字的安裝：需要手動安裝下載包，下載網址：https://github.com/twz915/DjangoUeditor3/ 然後安裝，終端用cd定義到DjangoUeditor3-master,然後輸入以下命令即可完成安裝：

python manage.py install

需要將DjangoUeditor3-master專案中的DjangoUeditor資料夾加入到當前GongCheng專案根目錄中：

在專案根目錄下新增DjangoUeditor

新增好檔案後，在專案路由下的settings.pu檔案中的INSTALLED_APPS[ ]新增DjangoUeditor

在專案根目錄找到urls.py找到urlpatterns欄位，然後新增富文字路由:

path('ueditor/',include('DjangoUeditor.urls')),

在此，完成了富文字的設定

建立城市與省份模型

開啟aboutApp的models.py檔案，在該檔案中新增省份模型（Province）

from django.db import models
from DjangoUeditor.models import UEditorField 
from django.utils import timezone
 
class Province(models.Model):
    name = models.CharField(max_length=10,verbose_name='省份')
    capital= models.CharField(max_length=8, verbose_name='首府')
    concise=UEditorField(u'省份簡介',default='',width=800,height=300,)
    class Meta:
            verbose_name ='資料'
            verbose_name_plural ='資料'
    def __str__(self):
        return self.name
 
 
 
class City(models.Model):
    province = models.ForeignKey(Province,related_name='city',verbose_name='省份',on_delete=models.CASCADE)
    name = models.CharField(max_length=10,verbose_name="城市")
    mail = models.IntegerField(null=False,verbose_name='郵政編碼')
    concise=UEditorField(u'城市簡介',default='',width=800,height=300)
    class Meta:
        verbose_name ='城市資料'
        verbose_name_plural ='城市資料'

然後在根目錄的setting.py新增以下程式碼：

import os
 
STATICFILES_DIRS = (
   os.path.join(BASE_DIR, "static"),
)
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media/')

然後在終端輸入：python manage.py makemigrations

回車會看到模型已經建立

繼續在終端輸入;python manage.py migrate

回車：

模型就在後端了。接下來我們註冊超級管理員使用者，就可以在後臺管理系統看到模型了。

後臺管理系統

因為django自己會建立後臺管理系統，所以我們只需要在註冊建立管理員使用者賬號：

python manage.py createsuperuser

回車後出現了頁面，按照以下輸入即可：Username(管理員的賬號，自己隨意取)

通過 http://127.0.0.1:8000/admin/ 進入頁面，如果打不開，請在終端輸入python manage.py runserver 執行程式

我們通過賬號密碼進入後臺管理系統後，我們是看不到模型的，我們需要在aboutApp中的admin.py檔案，編輯以下程式碼：

from django.contrib import admin
from .models import *
class Cityline(admin.StackedInline):
    
    model = City
    extra = 1     
    
class ProvinceAdmin(admin.ModelAdmin):
    inlines = [Cityline,]
admin.site.register(Province, ProvinceAdmin)
admin.site.site_header='地市資料'
admin.site.site_title='地市資料'

重新整理後臺介面，我們可以看到模型已經出來了：