django的web开发笔记1(智能诊断系统数据概览记录)
接于上一篇,這一篇主要記錄如何鏈接mysql數(shù)據(jù)庫(kù)以及從數(shù)據(jù)庫(kù)中調(diào)用數(shù)據(jù)信息到頁(yè)面,同時(shí)包含百度地圖api的一些使用。
其中包括模塊,echert圖表繪制數(shù)據(jù)調(diào)用,百度地圖數(shù)據(jù)信息調(diào)用以及一些單機(jī)效果,頁(yè)面數(shù)據(jù)調(diào)用等。
1.頁(yè)面數(shù)據(jù)調(diào)用:
首先要建數(shù)據(jù)庫(kù),我們用的是mysql,所以要改寫setting.py中DATABASE模塊,(django默認(rèn)是sqllit)
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'bikeData', #數(shù)據(jù)庫(kù)名'USER': 'root','PASSWORD': 'helloworld','HOST': '127.0.0.1','PORT': '3306',} }然后鏈接并創(chuàng)建數(shù)據(jù)庫(kù),通過modos.py映射sql語句創(chuàng)建數(shù)據(jù)庫(kù)(以u(píng)ser創(chuàng)建為例)
- 每個(gè)模型是?django.db.models.Model?的一個(gè)Python子類。
- 該模型的每個(gè)屬性都代表一個(gè)數(shù)據(jù)庫(kù)字段。
- 有了這一切,Django給你自動(dòng)生成數(shù)據(jù)庫(kù)的訪問API;
這里出現(xiàn)出現(xiàn)的CharField, DateField, TextField都是Django用于儲(chǔ)存數(shù)據(jù)字段的Filed子類。你或許需要看一下官方文檔(https://docs.djangoproject.com/en/1.11/ref/models/fields/)里的說明。
先在modos窗創(chuàng)建相應(yīng)的類,然后在到manage.py所在的目錄中(cmd)打開dos操作窗口執(zhí)行以下操作
python manage.py makemigrations?(數(shù)據(jù)庫(kù)名) (本機(jī)是python36 manage.py makemigrations,因?yàn)槎喟姹镜脑蛐枰獏^(qū)分)
python manage.py?migrate (數(shù)據(jù)庫(kù)名)
?
當(dāng)然,反著來也可以,我們可以根據(jù)數(shù)據(jù)庫(kù)中的表反向創(chuàng)建modos文件,如下:
Django引入外部數(shù)據(jù)庫(kù)還是比較方便的,首先在setting里面設(shè)置你要連接的數(shù)據(jù)庫(kù)類型和連接名稱,地址之類,和創(chuàng)建新項(xiàng)目的時(shí)候一致?
運(yùn)行下面代碼可以自動(dòng)生成models模型文件?
python manage.py inspectdb?
這樣就可以在命令行看到數(shù)據(jù)庫(kù)的模型文件了
把模型文件導(dǎo)入到app中?
創(chuàng)建一個(gè)app?
django-admin.py startapp app?
python manage.py inspectdb > app/models.py?
ok模型文件已經(jīng)生成好了。下面的工作就和之前一樣了
注意,如果你在數(shù)據(jù)自己的數(shù)據(jù)表你也可以自己手動(dòng)創(chuàng)建modos,
django重?cái)?shù)據(jù)庫(kù)中取出的數(shù)據(jù)的基本操作查文檔(values(),get(),all())等,注意它們的返回格式以及參數(shù)。valuse()的返回可以當(dāng)做list處理。
用于頁(yè)面?zhèn)鬏敽驼故镜臄?shù)據(jù)建議以鍵值對(duì)的形式,json或者dict的形式,便于在頁(yè)面上按需要調(diào)用。同時(shí)在python、以及js中對(duì)字典的讀取是,dict['XXX'],而在html中對(duì)傳過來的數(shù)據(jù)的讀取是dict.xxx。
如果在html中想要在外部鏈接的js中使用后臺(tái)傳過的數(shù)據(jù)可以現(xiàn)在<head>中創(chuàng)建以及js對(duì)象,eg:
<head> <script type="text/javascript">var MyChartVar = {chart1_data1:{{ chart1.data1|safe }},chart1_data2:{{ chart1.data2|safe }},chart2_data1:{{ chart2.data1|safe }},chart2_data2:{{ chart2.data2|safe }},chart2_data3:{{ chart2.data3|safe }},map_data:{{ mapdate.data|safe }},}</script> </head><script type="text/javascript" scr="js/mm.js" ></script>這樣mm.js中就能直接調(diào)用了(調(diào)用map_data)
var datas = MyChartVar['map_data'];具體要什么就要按dict的模式調(diào)用什么。
?
2.百度地圖api通過數(shù)據(jù)庫(kù)添加點(diǎn)位并點(diǎn)擊效果
// 編寫自定義函數(shù),創(chuàng)建標(biāo)注function addMarker(point){var marker = new BMap.Marker(point);map.addOverlay(marker);}var datas = MyChartVar['map_data']; //將后臺(tái)數(shù)據(jù)轉(zhuǎn)接過來var points = [];for (var i = 0; i<datas.length; i++){var point = new BMap.Point(datas[i]['lng'],datas[i]['lat']); //遍歷并創(chuàng)建地圖點(diǎn)addMarker(point); //先將點(diǎn)位展示point.id = datas[i]['stationid']; //分別將有需要的信息存儲(chǔ),便于調(diào)用point.name = datas[i]['stationname'];point.lng = datas[i]['lng'];point.lat = datas[i]['lat'];point.zonename = datas[i]['zonename'];point.bikecount = datas[i]['bikecount'];point.max = datas[i]['max'];points.push(point);};var pointCollection = new BMap.PointCollection(points); //用pointcollection來存儲(chǔ)帶信息的點(diǎn),這樣不用在單機(jī)事件的時(shí)候循環(huán)遍歷點(diǎn)來取出相應(yīng)的信息。pointCollection.addEventListener('click', function (e) { // alert('單擊點(diǎn)的坐標(biāo)為:' + e.point.lng + ',' + e.point.lat); // 監(jiān)聽點(diǎn)擊事件var opts = {width: 100, // 信息窗口寬度height: 130, // 信息窗口高度title: "站點(diǎn)信息", // 信息窗口標(biāo)題enableMessage: true,//設(shè)置允許信息窗發(fā)送短息enableAutoPan: true};var infowindow = new BMap.InfoWindow(e.point.name + ':' + e.point.id+'</br>'+'所屬片區(qū):'+e.point.zonename+'</br>'+'最大容量:'+e.point.max+'</br>'+'可借車輛:'+e.point.bikecount, opts);var positions = new BMap.Point(e.point.lng,e.point.lat); //彈窗的定位map.openInfoWindow(infowindow, positions); //是彈出每次出現(xiàn)在相應(yīng)點(diǎn)上});map.addOverlay(pointCollection)?
總結(jié)
以上是生活随笔為你收集整理的django的web开发笔记1(智能诊断系统数据概览记录)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue 组件属性监听_vuejs组件内的
- 下一篇: 魅族15系统是android,魅族15系