Django：实现一个简易的数据面板
参考：http://141.164.39.111:8000/~~~~
【实现效果图如上，内容及数据纯属虚构，使用django（数据+接口+图表echarts+页面ajax）】
数据面板能够反映出业务变化，并有助于决策层发出业务调整与决策，那么该如何搭建一个数据面板呢？本文暂忽略掉前期的很多准备工作比如：任务产生背景，确定数据指标，采集数据等。以便文中呈现的内容都与数据和图表有关，我个人理解的实现一个数据面板的主要思路有以下几点。
1.实现思路
- 需求背景
- 确定数据指标（本文跳过）
- 采集数据（本文跳过）
- 展示数据（文本重点）
2.搭建一个django项目*
- 安装django
windows操作系统下使用pip安装
pip install Django
- 创建django项目
django-admin startproject helloworld
$ cd HelloWorld/ $ tree . |-- helloworld #项目的容器 | |-- __init__.py #一个空文件，告诉 Python 该目录是一个 Python 包 | |-- asgi.py #一个 ASGI 兼容的 Web 服务器的入口，以便运行你的项目 | |-- settings.py #该 Django 项目的设置/配置 | |-- urls.py #该Django项目的URL声明,对应输入网址的后面路径 | `-- wsgi.py #一个 WSGI 兼容的 Web 服务器的入口，以便运行你的项目 `-- manage.py #一个实用的命令行工具，可让你以各种方式与该 Django 项目进行交互
- 创建一个应用
python manage.py startapp dashboard
- 启动项目
python manage.py runserver 8000
3.创建一个html页面*
- 修改配置文件
# HelloWorld/HelloWorld/settings.py 文件代码：
...
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], # 修改位置
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
...
# 关联js,css
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static') # BASE_DIR 当前项目的路径
]
...
- 在helloworld目录下（你的项目目录）创建一个templates和static目录
templates和static两个目录主要存放页面相关的数据，一般来说templates存放html，static存放js、css、图片等，
与settings配置一一对应哈
- 在templates目录下新建一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>菜就要多学习</h1>
</body>
</html>
- 配置一个路径（告诉电脑，我该怎么找到你（index.html)）
# 1.在你的项目也就是helloworld目录下（与settings同级），找到urls.py文件
## HelloWorld/HelloWorld/urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('dashboard.urls')), # 新增一行，这一行中的''代表当前无路径，include('dashboard.urls'))代表进入dashboard应用的urls，dashboard是前面创建的app应用，你会发现dashboard目录下并没有urls，所以需要手动在该目录新建一个urls.py
]
## HelloWorld/dashboard/urls.py 添加如下内容
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'), # 这一行中的''代表当前无路径（前面的urls配置也是''，最后拼接起来其实就是127.0.0.1:8000/）；views是视图，对应本目录下的views.py文件，views.index就是告诉django我要找什么内容（找index.html);name表示起一个别名
]
## HelloWorld/dashboard/views.py # 声明index.html的位置所在，内容如下：
from django.shortcuts import render, HttpRespons
def index(request):
return render(request, 'index.html') # 约定俗成的写法, 其中'index.html'声明index.html文件所在的位置，然后django默认地会去templates目录下找
经过前面这几步步骤，我们创建了一个index.html文件(templates目录下)，告诉django该如何找到index.html（urls.py文件)，并且告诉django，index.html具体在哪（views.py声明），当然不要忘记了很关键的一步settings.py配置，它指引着views.py寻找index.html的具体方位点。
简单地总结：如何告诉django呈现一个什么样的内容呢？
- 创建内容（index.html)
- 把内容移动到django可以到达的目的地（settings.py配置）
- 设定好一个目地（创建templates和static目录）
- 指定路线，告诉django该怎么走（urls.py配置）
- 到达目的，找到它，把它呈现出来（views.py)
到此，如果运行runserver没有报异常错误，那么刷新页面将会变成index.html的页面
4.美观html页面
前面我们已经创建好了static目录，static目录一般存放图片、js、css、font等等，所以在美观html前，把相关的js、css文件放在该目录下，结构如下：
修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- href接上static目录 -->
<link rel="stylesheet" href="/static/css/bootstrap5.0.css">
<link rel="stylesheet" href="/static/css/display.css">
<script type="text/javascript" src="/static/js/bootstrap5.0.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/static/css/components.css">
<style type="text/css">
body {
<!-- 修改背景图 -->
background: url('/static/img/blur-bg.jpg') no-repeat center center fixed;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="margin-top:15px;">
<div class="col-md-6">
<div class="panel">
<div id="chart1" style="height:300px;"></div>
</div>
</div>
</div>
</div>
</body>
<script>
var pie_data = {
'title': '线上反馈问题类别',
'data': [
{ value: 1, name: '体验类' },
{ value: 2, name: 'BUG类' },
{ value: 5, name: '需求类' },
]
}
var build_pie = function (id_, chart) {
// 基于准备好的dom，初始化echarts实例
option = {
title: {
text: chart.title,
textStyle: {
fontWeight: 'normal', //标题颜色
color: 'white'
},
x: "left"
},
tooltip: {
trigger: 'item',
formatter:function (parms){
var str = parms.marker+""+ parms.data.name+"</br>"+
"问题个数："+ parms.data.value+ "个" +"</br>"+
"占比："+ parms.percent+"%"+"</br>"
return str ;
},
},
legend: {
orient : 'vertical',
x : 'right',
top: '5%',
textStyle: {
color:'white',
fontSize:16
},
},
series: [
{
name: '问题类别',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
// 修改字体颜色的代码begin
itemStyle: {
normal: {
label: {
textStyle: {
color:'#CCC',
fontSize: 12,
fontWeight:'bolder'
}
},
labelLine : {
lineStyle:{
color:'#CCC'
}
}
}
},
// 修改字体颜色的代码end
data: chart.data
}
]
};
echarts.init(document.getElementById(id_)).setOption(option);
}
build_pie(id_ = 'chart1', chart = pie_data);
</script>
</html>
5.规范接口，通过接口传递参数
一般地，在确定数据指标后，接下来需要做数据规范，数据规范由前后端共同讨论制定下来，采集数据由数据分析师来，也就是常说的取数，按照事先确定好的数据指标写好SQL语句，再进一步做数据处理，最后以接口方式传递相关的数据，交由前端页面去展示。
在本案例中，为了简单见效快，前期采集数据的工作暂时跳过，案例中的数据将构建假数据。
- 再次修改views.py文件，代码如下：
# helloworld/dashboard/views.py
from django.shortcuts import render,HttpResponse
import json
# 新增一个api方法
def api(request):
"""
虚构的假数据，最后以HttpResponse方法返回
"""
result = {
'title': '里程碑需求缺陷分布(当周)',
'data': [
{'value': 2, 'name': '功能错误'},
{'value': 2, 'name': '代码错误'},
{'value': 10, 'name': '用户界面'},
{'value': 3, 'name': '建议'},
{'value': 1, 'name': '需求变动'},
],
}
data = {
"ret": 200,
'data': result,
'msg': "数据规范"
}
return HttpResponse(json.dumps(data))
def index(request):
return render(request, 'index.html')
- 再次修改urls.py文件
# helloworld/dashboard/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('api', views.api, name='api'), # 新增
]
- 访问http://127.0.0.1:8000/api，结果如下：
- 修改index.html文件
<!--helloworld/templates/index.html-->
<!--在index.html的head标签下方追加如下代码 -->
....
<head>
....
<!-- 追加代码，通过ajax读取api接口，完成对页面数据的填充 -->
<script type="text/javascript">
window.onload = function () {
$.get("/api", function (data_json, status) {
data = JSON.parse(data_json)['data'];
build_pie(id_ = 'chart1', chart = data)
})
}
</script>
</head>
....
返回index.html页面刷新，效果图如下：
结尾
至此，我们完成了从制作（虚假的）数据，以接口形式返回数据，最后再以页面形式把数据图表内容呈现出来，如果想要实现文中开头的效果图，一方面需要补充数据源，另一方面需加以修饰页面。
最后，我想说，其实独立完成一个数据面板并不难，关键在于怎么理解业务，识别业务中存在的痛点，尝试着把这些痛点拆解为一个个可以量化的小目标，完成小目标，从而实现大目标。
如果你想了解完整的代码，欢迎点评：https://gitee.com/gzrosefinch/data-analysic/tree/master/Django/simple_data_panel
