用django寫了一個網(wǎng)站，在信息技術(shù)課上學生學習python用的，現(xiàn)在把整個過程寫成教程展現(xiàn)出來。先看幾個截圖：

python編程練習

代碼編譯界面

知識測試界面

這個網(wǎng)站是ubuntu21.10，anaconda3下用VScode來完成的，編程判題采用了QingdaoU/JudgeServerAPI，網(wǎng)站試題來自卓帆、百日沖刺和科教版高中信息技術(shù)教材上的一些內(nèi)容，在此表示感謝！

一、配置網(wǎng)站開發(fā)環(huán)境

為了本教程，全新配置了開發(fā)環(huán)境，整個網(wǎng)站復刻了一遍。

1. 在 /home/下創(chuàng)建lichee文件夾，歸屬用戶名wuxc
2. 用conda 創(chuàng)建python虛擬環(huán)境，名為lichee-django，指定python版本
3. 激活虛擬環(huán)境lichee-django，pip或conda安裝django
4. 使用pip list或conda list可以查看已經(jīng)安裝的python庫
5. 在/home/lichee下用django-admin創(chuàng)建django網(wǎng)站項目，項目名稱名和文件夾名都是almond
6. 在項目/home/lichee/almond/下新增應用django-admin startapp webcoding
7. 用tree終端命令查看目錄結(jié)構(gòu)和文件列表

過程如下，有省略：

開發(fā)環(huán)境配置

開發(fā)環(huán)境配置續(xù)

項目文件夾almond下有一個同名子文件夾，我們稱為主應用，內(nèi)有全局參數(shù)設(shè)置文件settings.py,全局路由文件urls.py,還有網(wǎng)關(guān)接口文件可以選擇其一asgi.py或wsgi.py; 項目目錄下的manage.py文件是整個項目的入口，在配置文件中有一行：WSGI_APPLICATION = 'almond.wsgi.application'指定了使用wsgi。

打算在主應用中加views.py和models.py，把網(wǎng)站的首頁、登錄功能放入views中，把網(wǎng)站的所有數(shù)據(jù)庫模型放在models中，供其它應用調(diào)用。

應用(app)是django管理代碼的一種方式，它對應一個文件夾，用以管理整個項目的功能分類和MTV模式實現(xiàn)。使用 django-admin startapp 命令，創(chuàng)建應用(app)webcoding，在應用webcoding中實現(xiàn)在線的代碼編輯器功能，代碼執(zhí)行由后端的JudgeServer來編譯執(zhí)行，結(jié)果返回到前端。這個網(wǎng)站是提供統(tǒng)一的python編程環(huán)境和高中信息技術(shù)學業(yè)水平考試復習之用的。主應用almond和應用webcoding的目錄結(jié)構(gòu)如下：

網(wǎng)站目錄結(jié)構(gòu)

lichee[?la??t?i?]荔枝、almond [?ɑ?m?nd] 杏仁，這里選用的水果名作為目錄名稱，是因為短簡易記。almond 因首字母是a，在vscode中主應用almond顯示在最前面，便于使用。

二、實現(xiàn)Hello World:

vscode 打開 項目文件夾/home/lichee/almond,以下敘述都以項目文件夾為當前目錄，

點擊左下角更換 python解釋器，選擇 虛擬環(huán)境lichee-django，重啟vscode生效:

vsCode開發(fā)網(wǎng)站

在模塊almond文件中新建views.py文件，在其中寫一個視圖函數(shù)defalut,并在urls.py文件中導入這個視圖，添加兩行路由地址：

// almond/views.py
from django.shortcuts import render, HttpResponse
def default(request):
return HttpResponse("Hello world!!!") //把字符串作為回應返回到瀏覽器
// almond/urls.py
from django.urls import path, re_path
// 導入視圖模塊
import almond.views as tv
urlpatterns = [
path('admin/', admin.site.urls), // 系統(tǒng)自動產(chǎn)生，后臺管理的，請要是庫的CRUD
// 添加兩行路由地址
re_path(r'^#39;, tv.default, name='top'), // http://127.0.0.1:8000 訪問
path('index/', tv.default, name='index'), // http://127.0.0.1:8000/index 訪問
]


在vscode的終端啟動服務（系統(tǒng)終端中也可以）:

conda activate lichee-django
cd /home/lichee/almond
python manage.py runserver


在瀏覽器中可以打開helloworld網(wǎng)頁了。視圖可以一個函數(shù)，也可以是一個類的方法，效果如下：

網(wǎng)站啟動命令

三、初步理解MTV模式

django 作為python網(wǎng)站開發(fā)的框架，使用了MTV模式，如下圖（來自互聯(lián)網(wǎng)）

MTV模式

剛才是通過 HttpResponse('string')返回前端的，現(xiàn)在改進一下，創(chuàng)建一個模板文件index.html,在視圖中rend()函數(shù)渲染好返回前端，這是體現(xiàn)MTV模式前后端代碼分離的基本行為。

在項目目錄中創(chuàng)建模板文件夾templates，在其中新建文件index.html。

在主應用中修改settings.py幾個地方：

//almond/settings.py
INSTALLED_APPS = [ //注冊應用，實際是讓項目能找到 對應的文件夾
......
'almond', //注冊主應用，因為在其他應用中 調(diào)用 主應用中 視圖和模型
//其他書籍和教程都沒這么用，我嘗試了是可以的
'webcoding', //注冊 在線編程應用，后續(xù)還要添加更多的應用
]
#模板文件夾
TEMPLATES = [{
......
// 模板文件夾 almond/templates
'DIRS': [ BASE_DIR/'templates' ], //BASE_DIR是項目文件夾的絕對路徑。
......
} ]
ALLOWED_HOSTS = [ '*' ] //指定IP地址，可以從其他機器訪問，'*'是任意的意 思，您的計算機可能在不同場合的ip不一樣，'*'就可以了。
//語言和時區(qū)
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
//創(chuàng)建并配置 靜態(tài)文件夾almond/statics，存放 css js img media等資源文件。
STATIC_URL = '/static/' //這個在html 或 瀏覽器中使用，名稱可自定義
STATICFILES_DIRS = [ BASE_DIR/'statics' ] //這個是實際位置


接下來，修改almond/views.py, templages/index.html 兩個文件:

// almond/views.py
from django.shortcuts import render, HttpResponse
class MainView():
def default(request):
myname = "wuxiaochun 吳曉春"
return render(request, 'index.html', {'name':myname})






Hello world !!!


I am {{name}}


指定端口運行，效果如下：

網(wǎng)站運行效果

在視圖文件almond/views.py中把變量以字典的形式通過render()函數(shù)渲染給了模板文件templates/index.html，在index.html通過模板語法{{變量名}}的形式來顯示。

render函數(shù)中第三個參數(shù)也可以用 locals() 來代替。

在上面MTV模式圖中還有一個Model稱為模型，它是連接讀寫數(shù)據(jù)庫的中介，后續(xù)介紹。第一講就到這里，不足之處請指正。

總結(jié)

以上是生活随笔為你收集整理的创建Django网站项目如何在电脑上建网站的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。