網站建立過程（二）

時間 2019-11-22

原文原文鏈接

上一篇說到把環境都搭建起來了，接下來就要作實際的東西了吧~~因爲本網站在畢業設計中一個很主要的功能是信息的展現。對於讀出來的離散的溫度是數據固然是用曲線圖的方式比較好了。因而今天主要講解用django從數據庫裏面把數據讀出來而後顯示到圖表上。javascript

零、接着配置djangocss

對於django來講，全部的js css 網頁用到的image 等都是靜態文件。須要存放在一塊兒，也須要配置他們的位置。html

添加一個static文件夾，專門放置這些文件。文件結構就長下面這樣。java

而後在工程文件夾下面的setting.py裏面配置上這幾句話，也就是static文件夾的位置。若是這裏配置錯了，就會出現js css什麼的 404 的錯誤python

1、數據庫狀況mysql

新加了一個model，一個是浮點數的數據一個是時間值。自動存儲系統當前時間 auto_now_add 和 auto_add（好像是這樣寫）有區別，auto_now_add 存儲目前的時間以後還能夠改寫。save之後從新賦值，在save一下就能夠了。jquery

新建數據庫之後執行如下 python manage.py syncdb 就能夠同步數據庫。有時候它會提示你用另外兩個命令，就再用另外兩個運行一遍就能夠了。運行完之後數據庫長這樣。sql

django會本身加一個字段 id 自增。數據庫

2、寫 view.py文件django

想要使用新增的model 首先要引用他。而後用create 和save 新建一個對象。（這裏我圖方便，沒刷新一個頁面就插入一條數據）

用all 來獲取全部的記錄。django的數據庫操做還有不少，這裏暫時很少說了。

而後聲明兩個數組，將數據和時間分別存放(用append 方法)

最後在將這兩個變量傳到html裏面就能夠用{{。。。}}這種方式獲取。

3、在html裏面顯示

在html裏面顯示圖表我用的是highcharts 插件，只用js就能夠畫一個圖表出來，並且還有打印，導出的功能，很是美觀又方便。有一箇中文網站在這裏，裏面能夠下載還有教程，可以在線編譯看效果，很是不錯。

http://www.hcharts.cn/

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <title>Highcharts Example</title>
 6 
 7         <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
 8         <style type="text/css">
 9 ${demo.css}
10         </style>
11         <script type="text/javascript">
12 $(function () {
13     var times = [];
14     {% for s in time %}
15     times.push('{{s|date:"Y-m-d H:i:s"}}')
16     {% endfor %}
17     //var sss = ['123','222','333','444','555'];
18     $('#container').highcharts({
19         title: {
20             text: 'Monthly Average Temperature',
21             x: -20 //center
22         },
23         subtitle: {
24             text: 'Source: WorldClimate.com',
25             x: -20
26         },
27         xAxis: {
28              min:0,
29              max:30,
30              categories:times,
31              
32         },
33         scrollbar: {
34                enabled: true
35              },
36         yAxis: {
37             title: {
38                 text: 'Temperature (°C)'
39             },
40             plotLines: [{
41                 value: 0,
42                 width: 1,
43                 color: '#808080'
44             }]
45         },
46         tooltip: {
47             valueSuffix: '°C'
48         },
49         legend: {
50             layout: 'vertical',
51             align: 'right',
52             verticalAlign: 'middle',
53             borderWidth: 0
54         },
55         series: [{
56             name: 'Berlin',
57             data: {{data}}
58         }, {
59             name: 'London',
60             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
61         }]
62     });
63 });
64         </script>
65     </head>
66     <body>
67 <script src="../../static/js/highstock.js"></script>
68 <script src="../../static/js/highcharts.js"></script>
69 <script src="../../static/js/modules/exporting.js"></script>
70 
71 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
72 
73 
74     </body>
75 </html>

View Code

全部的代碼在上面。下面吧具體的再重點說說

首先是引用本地的js文件，以這樣相對路徑的方式就能夠引用了。咦？？不過這樣看起來好像和環境配置static文件沒有關係哈。到底不配置setting能不能這樣引用我也沒有試過，這樣能用就用吧。

而後就是顯示圖片了。highcharts 的使用方法就是先開一個div 而後寫一個js函數就能夠了，具體看教程吧。

這裏重點說一下怎麼使用views 傳來的從數據庫讀出來的數據。這裏有時間和數據，時間是橫軸，時間對應的數據點就是數據嘛（在最後的結果裏應該是溫度什麼的）

首先在函數裏面聲明一個數組用來存放時間。{% for s in time %}是django裏面for循環的寫法，裏面的time就是view裏面傳過來的。最後要用{% endfor %}來結束。

{{s|date:"Y-m-d H:i:s"}}則是將日期轉化爲具體格式。django的輸出格式有不少種固定方法。搜索django 過濾器你能獲得更多。。。

千萬不要忘了在{{s|date:"Y-m-d H:i:s"}}左右加上單引號啊！！否則就不能以字符串的形式存到字符串數組裏，後面就不能用了。

而後就設置圖標的x軸的categories屬性就行了。這樣也就達到效果啦，可是若是數據特別多一個屏幕顯示不全怎麼辦呢。。這時候就要再包含一個j ssrc="../../static/js/highstock.js"而後把xAxis的max和min加上 scrollbar加上就能夠啦~

最後runserver 的結果長這樣

右上角的打印和右下角的水印鏈接也是能夠去掉的，可是我按照網上的方法，改了他的js包卻沒反應，也不知道爲何。。。。

好了，本次博客到此結束

tip：

處理時間的時候，highcharts 有專門的時間軸，可是我沒有用到，一個是不會用一個是目前仍是實驗狀態嘛，能從數據庫讀出來再顯示就達到目的了。

從數據庫裏面讀書時間而後再在js裏面轉換成字符數按數組的緣由是，若是在view裏面直接轉換成字符串數組，傳到頁面這邊，就不是字符串數組了，由於分割每個字符轉的單引號沒有轉義，而後就顯示不到頁面上。我也沒想到讀出來的date直接用引號包起來就是字符串，也太好用了吧。如今愈來愈以爲c語言真的好難用啊。。。js的數組能夠至關於隊列啊棧啊來用，簡直方便

另外，還有一個地方，就是mysql數據庫的時間比實際時間少八個小時，這個是由於數據庫的時區問題，不過讀到頁面上又是東八區咯，我也以爲amazing~