接于上一篇,这一篇主要记录如何链接mysql数据库以及从数据库中调用数据信息到页面,同时包含百度地图api的一些使用。
其中包括模块,echert图表绘制数据调用,百度地图数据信息调用以及一些单机效果,页面数据调用等。
1.页面数据调用:
首先要建数据库,我们用的是mysql,所以要改写setting.py中DATABASE模块,(django默认是sqllit)
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'bikeData', #数据库名'USER': 'root','PASSWORD': 'helloworld','HOST': '127.0.0.1','PORT': '3306',}
}
然后链接并创建数据库,通过modos.py映射sql语句创建数据库(以user创建为例)
- 每个模型是
django.db.models.Model
的一个Python子类。 - 该模型的每个属性都代表一个数据库字段。
- 有了这一切,Django给你自动生成数据库的访问API;
from django.db import models
from django.contrib import admin
# Create your models here.#用户信息
class User(models.Model):username = models.CharField(max_length=50)password = models.CharField(max_length=50)
这里出现出现的CharField, DateField, TextField都是Django用于储存数据字段的Filed子类。你或许需要看一下官方文档(https://docs.djangoproject.com/en/1.11/ref/models/fields/)里的说明。
先在modos窗创建相应的类,然后在到manage.py所在的目录中(cmd)打开dos操作窗口执行以下操作
python manage.py makemigrations (数据库名) (本机是python36 manage.py makemigrations,因为多版本的原因需要区分)
python manage.py migrate (数据库名)
当然,反着来也可以,我们可以根据数据库中的表反向创建modos文件,如下:
Django引入外部数据库还是比较方便的,首先在setting里面设置你要连接的数据库类型和连接名称,地址之类,和创建新项目的时候一致
运行下面代码可以自动生成models模型文件
python manage.py inspectdb
这样就可以在命令行看到数据库的模型文件了
把模型文件导入到app中
创建一个app
django-admin.py startapp app
python manage.py inspectdb > app/models.py
ok模型文件已经生成好了。下面的工作就和之前一样了
注意,如果你在数据自己的数据表你也可以自己手动创建modos,
django重数据库中取出的数据的基本操作查文档(values(),get(),all())等,注意它们的返回格式以及参数。valuse()的返回可以当做list处理。
用于页面传输和展示的数据建议以键值对的形式,json或者dict的形式,便于在页面上按需要调用。同时在python、以及js中对字典的读取是,dict['XXX'],而在html中对传过来的数据的读取是dict.xxx。
如果在html中想要在外部链接的js中使用后台传过的数据可以现在<head>中创建以及js对象,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中就能直接调用了(调用map_data)
var datas = MyChartVar['map_data'];
具体要什么就要按dict的模式调用什么。
2.百度地图api通过数据库添加点位并点击效果
// 编写自定义函数,创建标注function addMarker(point){var marker = new BMap.Marker(point);map.addOverlay(marker);}var datas = MyChartVar['map_data']; //将后台数据转接过来var points = [];for (var i = 0; i<datas.length; i++){var point = new BMap.Point(datas[i]['lng'],datas[i]['lat']); //遍历并创建地图点addMarker(point); //先将点位展示point.id = datas[i]['stationid']; //分别将有需要的信息存储,便于调用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来存储带信息的点,这样不用在单机事件的时候循环遍历点来取出相应的信息。pointCollection.addEventListener('click', function (e) {
// alert('单击点的坐标为:' + e.point.lng + ',' + e.point.lat); // 监听点击事件var opts = {width: 100, // 信息窗口宽度height: 130, // 信息窗口高度title: "站点信息", // 信息窗口标题enableMessage: true,//设置允许信息窗发送短息enableAutoPan: true};var infowindow = new BMap.InfoWindow(e.point.name + ':' + e.point.id+'</br>'+'所属片区:'+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); //是弹出每次出现在相应点上});map.addOverlay(pointCollection)