Django 筆記(五)-Django遇見Javascript和JQuery @ 史坦利Stanley程式Maker的部落格

2017.08.28

這篇文章中我們將說明在Django中如何使用Javascript，CSS、JQuery。
一個網頁除了後端資料庫外，我想另一個最重要的是網頁前端外觀的呈現，而網頁前端的工作則要利用Javascript，CSS、JQuery等語言去處理，因此這篇是很重要的參考文章。至於Javascript，CSS、JQuery等語言設計可能要另外參考資料了。

在 settings 中新增

# Add these new lines
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

(1)在專案目錄下新增一個staic 資料夾，與目錄須要配合上面的路徑設定，我們是要將js檔案放在os.path.join(BASE_DIR, 'static')
所以放在與 /tempates 同層次的目錄，這部份的設定是否有錯可參考http server的status 返回值是否顯示200或304，如顥示200或304表示路徑及檔案己成功找到並載入，如出現404則表示建錯目錄或找不到檔案。
(2)使用JavaScript不需要另外載入程式庫只要宣告就可以使用。
(3)JQuery程式庫可用二種方式載入，一種為檔案方式，一種為URL方式。
(4)檔案形式可於https://jquery.com/download/my 下載，下載.js 檔,min.js或壓縮檔皆可以。下載後放在/static資料夾。
(5)URL方式請檔案內設定URL路徑即可。

我們以之前的list.htm為例，在網頁內容內新增

{% load staticfiles %}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
    <head>
     <title>Django/jQuery AJAX</title>
      <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
      <script src="{% static "jquery-3.2.1.js" %}"></script>
      <script src="{% static "jquery-ui-1.12.1.zip" %}"></script>
      <! ------- must care the path --------------------------------------------!>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>

    </head>
    <body>資料表內容<br>
     {% for item in datas %}
      <tr>
        <td>{{ item.song_name }}</td>
        <td>{{ item.songer }}</td>
      </tr><br>
     {% endfor %}
     <input type ="button" value="submit" onClick="nothing()"></input> <br>
     <div id='msg' style="text-align:center;font-size:20px;">
       I am DIV, please click me <br>
     </div>
</html>

如此Javascript 及JQuery 就可以在前端正常工作了。

回Django Web 程式設計主目錄