用django寫了一個網站，在信息技術課上學生學習python用的，現在把整個過程寫成教程展現出來。先看幾個截圖：

python編程練習

代碼編譯界面

知識測試界面

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

一、配置網站開發環境

為了本教程，全新配置了開發環境，整個網站復刻了一遍。

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

過程如下，有省略：

開發環境配置

開發環境配置續

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

打算在主應用中加views.py和models.py，把網站的首頁、登錄功能放入views中，把網站的所有數據庫模型放在models中，供其它應用調用。

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

網站目錄結構

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

二、實現Hello World:

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

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

vsCode開發網站

在模塊almond文件中新建views.py文件，在其中寫一個視圖函數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), // 系統自動產生，后臺管理的，請要是庫的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的終端啟動服務（系統終端中也可以）:

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


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

網站啟動命令

三、初步理解MTV模式

django 作為python網站開發的框架，使用了MTV模式，如下圖（來自互聯網）

MTV模式

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

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

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

//almond/settings.py
INSTALLED_APPS = [ //注冊應用，實際是讓項目能找到 對應的文件夾
......
'almond', //注冊主應用，因為在其他應用中 調用 主應用中 視圖和模型
//其他書籍和教程都沒這么用，我嘗試了是可以的
'webcoding', //注冊 在線編程應用，后續還要添加更多的應用
]
#模板文件夾
TEMPLATES = [{
......
// 模板文件夾 almond/templates
'DIRS': [ BASE_DIR/'templates' ], //BASE_DIR是項目文件夾的絕對路徑。
......
} ]
ALLOWED_HOSTS = [ '*' ] //指定IP地址，可以從其他機器訪問，'*'是任意的意 思，您的計算機可能在不同場合的ip不一樣，'*'就可以了。
//語言和時區
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
//創建并配置 靜態文件夾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}}


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

網站運行效果

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。