2017.08.28
這篇文章中我們將說明在Django中如何使用Javascript，CSS、JQuery。
一個網頁除了後端資料庫外，我想另一個最重要的是網頁前端外觀的呈現，而網頁前端的工作則要利用Javascript，CSS、JQuery等語言去處理，因此這篇是很重要的參考文章。至於Javascript，CSS、JQuery等語言設計可能要另外參考資料了。
在 settings 中新增
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>
<script type="text/javascript">
function nothing() {
alert("查無任何資料,請重新查詢");
}
$( document ).ready(function() {
alert("Hello Jquery");
$("#msg").click(function(){
alert("Hello DIV");
});
});
</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 就可以在前端正常工作了。
留言列表
