--- tags: 自學筆記系列 --- # dijango架設方式 (必須複製Hackmd的原始碼) ## 初始化設定 1.確定python版本後，在vscode的terminal中打上 :::info pip install django ::: 2.在vscode的terminal中將目前的操作路徑移至想要的資料夾中，接著打上 :::info django-admin startproject potrip ::: (目的是在此資料夾下建立專案 potrip是自訂名稱) 接著在manage.py所在的資料夾中打上 :::info python manage.py startapp quotes ::: (目的是創建views.py等檔案) 接著在與manage.py同個資料夾下創建一名稱為templates的資料夾 4.在settings.py中的開頭打上 :::info import os ::: 並在settings.py中的TEMPLATES中的'DIRS'後打上: :::info os.path.join(BASE_DIR, 'templates') ::: (目的是為了讓程式能定位templates資料夾) ## 創建首頁 4.在urls.py的開頭打上 :::info from quotes import views ::: 並在urls.py中的urlpatterns打上 :::info path("", views.home), ::: (目的是透過urls.py連結views.py中的home函式，並設定home函式為首頁) 5.在views.py中打上 :::info def home(request): return render(request, 'index.html', {}) ::: (定義home函式，要求其回傳index.html網頁，即首頁，.html名字可更改) 6.在tempalates資料夾中創建index.html檔案，即為首頁的html ## 使用\<a>連結至其他網頁 1.將html的\<a>元素改成這種形式 :::info \<a href="{% url '自訂name' %}"> 例如: \<a class="nav-link" href="{% url 'about' %}"> (內文的\\為跳脫字元) ::: 2.在urls.py中新增path :::info path("此網站在顯示時相對於localhost的位置", views.py對應的函式,name='自訂name'), 例如: path("about", views.about,name='about'), ::: 3.在views.py中新增對應的函式 :::info def 與urls.py對應的函式名(request): return render(request, '想要顯示的html檔案', {}) 例如: def about(request): return render(request, 'about.html', {}) ::: ## 使用POST送出表單資料 1.在Html中的form元素給定以下屬性 :::info <form action="{% url '後端對應的url' %}" method="post"> 例如: <form action="{% url 'home' %}" method="post"> ::: 接著在form元素涵蓋的區域中打上 :::info {% csrf_token %} (非常重要，不然會因為隱私問題跳錯) ::: 並在form元素涵蓋的區域中的input元素使用name來決定對應的資料應該傳到哪裡 :::info 例如: <input class="form-control" id="inputEmail" placeholder="name@example.com" name="UserAccount"/> ::: 2.在urls.py中的urlpatterns設定相對應的url與連結views.py中的函式 :::info path("與前端對應的url", views.對應的views.py函式,name="用name屬性來連結html與urls.py"), 例如: path("home", views.home,name="home"), ::: 3.在views.py中撰寫對應的函式，並使用.POST的方法取得資料，[]中放前端對應的name :::info 例如: def home(request): account=request.POST['UserAccount'] passward=request.POST['UserPassword'] ::: ## 使用說明 1.每次要使用時，用vscode開啟對應的資料夾(自己建的資料夾下的第一層potrip) 2.在vscode中的terminal中打上 :::info python manage.py runserver ::: 啟動伺服器，網址在terminal中 打上ctrl+C結束伺服器 3.有更新資料庫時，在terminal中打上 :::info python manage.py migrate ::: (目的是更新資料庫) ## Debug紀錄 1.無法在Django環境下引用CSS和Js等等，參考 https://codeantenna.com/a/jWdiXNiSQm https://blog.csdn.net/weixin_41529093/article/details/115655557 簡單來說就是把CSS,Js等東西的檔案丟到static資料夾中，在html中引用時，格式如下 :::info {% static '檔案路徑' %} 例如: {% static 'css/styles.css' %} ::: 記得要在html中的<head>中加上 :::info {%load static %} ::: 2.更新以canva嵌入的javascript網頁後，要按ctrl+F5刷新網頁 3.從Django後端傳參數至Html的javascript中，可以這麼做 (1)在views.py中搞定要回傳的參數 (2)將參數用return的方式回傳，想傳回多個參數則以逗號隔開 :::info return render(request, 'home.html', {'在html中的參數名':在views.py中的參數名}) 例如: def home(request): score=50 return render(request, 'home.html', {'score':score}) ::: (3)在html中用<script>嵌入javascript程式碼，注意須寫在引用該段程式碼的位置的下方 (4)在javascript中使用 :::info var 在javascript的變數名={{在html中的變數名}}; 例如: var Score={{score}}; 此處的Score即為所求 ::: (5)若傳的參數為陣列，則views.py的程式碼需改成這樣: :::info return render(request, 'home.html', {'在html中的參數名':json.dumps(在views.py中的參數名)}) 例如: def home(request): score_Data=[10,20,30,40,50,60] return render(request, 'home.html', {'score_Data':json.dumps(score_Data)}) ::: 嵌入的Js程式碼改成這樣: :::info var 在javascript的變數名={{在html中的變數名\|safe}}; 例如: var Score_Data={{score_Data\|safe}}; 此處的Score即為所求 (內文的\\為跳脫字元) ::: (6)若發現從bootstrap引用的程式碼中的javascript無法順利執行(ex:導覽列無法順利切換) ->檢查是否加入jquery標頭檔 ->檢查是否加入對應版本的JS標頭檔 額外補充:在同一區域的不同文字切換似乎跟tab頁籤切換有關