1. Overview

Python + MySQL + Django, 有些数据托管在 MySQL 的数据库,然后我们希望进行可视化,通过 web 的方式对数据库的信息去进行展示/检索/维护/..

这个项目中,我们的数据托管在 MySQL 的数据库中,然后在 Django 中配置数据库信息,连接到数据库,在前端用 Django-table2 进行渲染;

最终我们可以在 web 端看到如下所示效果,可以进行展示所有的数据,然后进行检索和过滤;

我这边爬了一些新闻下来,放到数据库里面,然后在前端 web 显示后端 MySQL 数据库中的新闻 (Time + Title + Category);

支持 search 和 filter 功能,支持下载界面内容到 CSV 功能;

2. 流程

想要在 Django 中访问 MySQL 数据库的数据,首先要在 Django 的 setting.py 里面规定好数据库的 'Name' / 'USER' / 'PASSWORD'

需要对于对象 news 或者别的实体,创建 model, 下图中的 step4;

利用 Django-tables2 进行渲染,具体 Django-tables2 的使用可以参考 https://django-tables2.readthedocs.io/en/latest/pages/tutorial.html ;

过滤/搜索/排序 都可以在后端,变成对 query 的操作,如 step6 ;

3. 源码

代码托管在 github, 在 Ubuntu host:

git clone https://github.com/coneypo/Django_MySQL_Table

前端代码 index.html

{% load render_table from django_tables2 %}
{% load querystring from django_tables2 %}
{% load bootstrap3 %}
<!doctype html>
<html>
<head>
<a href="board/"><title>Django table example</title></a>
<link rel="stylesheet" href="/static/css/pos.css"/>
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/css/table_1.css"/>
<style>
body {background-color: whitesmoke;}
</style>
<script type="text/javascript" src="/static/js/jquery-1.11.0.js"></script>
</head>
<body>
<div id="Top" style="background:#38c">
<a href="/table_example" id="acrn_title">&nbsp;Django-MySQL example -- coneypo</a>
</div>
<div id="Center">
<div id="Center_Searcher">
<form action="/news_search" method="get">
<table class="center_table">
<tr><td colspan="5"><h3>Search by Title</h3></td></tr>
<tr>
<td>Keyword:</td>
<td align="center">&nbsp;&nbsp;<input name="keywd_input" value="{{ keywd_input }}"></td>
<td align="center">&nbsp;&nbsp;<input type="submit" value="search"></td>
</tr>
</table>
</form>
</div>
<div id="Center_Filter">
<form action="/news_filter" method="get">
<table class="center_table">
<tr><td colspan="5"><h3>Filter</h3></td></tr>
<tr>
<td>Category:</td>
<td>&nbsp;&nbsp;<select name="filter_category">
{% for i in category_list %}
<option value="{{i}}" {% if i == filter_category %} selected{% endif %}>{{i}}</option>
{% endfor %}
</select></td>
<td><input type="submit" value="Filter"></td>
</tr>
</table>
</form>
</div>
</div>
<div id="Table">
<h3>&nbsp;Device table</h3>
<form action="/download_excel" method="get">
&nbsp;&nbsp;<a href="/download_excel">Download to excel</a>
</form><br>
{% render_table table %}
</div>
</div>
</body>
</html>

后端 Django 视图代码 views.py

 from django.shortcuts import render
from django.db import models
from django.http import HttpResponse
import django_tables2 as tables
import MySQLdb
import datetime
import pytz
from django_tables2.config import RequestConfig
import itertools
from django.db import connection
from djqscsv import render_to_csv_response ##### Modify with your database here #####
db = MySQLdb.connect("localhost", "root", "intel@123", "ithome_news", charset='utf8')
cursor = db.cursor() category_list = ['All', 'iPhone应用推荐', 'iPhone新闻', 'Win10快讯', 'Win10设备', '业界', '人工智能', '人物', '天文航天', '奇趣电子', '安卓应用推荐',
'安卓手机', '安卓新闻', '影像器材', '新能源汽车', '智能家居', '智能家电', '活动互动', '游戏快报', '电商', '电子竞技', '电脑硬件', '科技前沿', '科普常识',
'笔记本', '网络', '苹果', '车联网', '软件快报', '辣品广告', '通信'] class news(models.Model):
time = models.CharField(max_length=10, blank=True, null=True)
title = models.CharField(max_length=10, blank=True, null=True)
category = models.CharField(max_length=200, blank=True, null=True) class Meta:
db_table = "news" class newsTable(tables.Table):
counter = tables.Column(verbose_name="No", empty_values=(), orderable=False)
time = tables.Column(verbose_name="Time")
title = tables.Column(verbose_name="Title")
category = tables.Column(verbose_name="Category") def render_counter(self):
self.row_counter = getattr(self, 'row_counter', itertools.count(1))
return next(self.row_counter) class Meta:
model = news
attrs = {
"class": "info-table",
}
fields = ("counter", "time", "title", "category") def to_render(html_render, data, table):
html_render['table'] = table
html_render['category_list'] = category_list def table_show(request):
data = news.objects.all()
data = data.values('time', 'title', 'category') table = newsTable(data)
RequestConfig(request, paginate={'per_page': 100}).configure(table) html_render = {}
to_render(html_render, data, table)
return render(request, "index.html", html_render) # rendering "Search by Title"
def news_search(request):
data = news.objects.all()
html_render = {} data = data.filter(models.Q(title__icontains=request.GET['keywd_input']))
data = data.values("time", "title", "category")
table = newsTable(data) # , order_by="-time")
RequestConfig(request, paginate={'per_page': 100}).configure(table)
to_render(html_render, data, table)
html_render['keywd_input'] = request.GET['keywd_input'] return render(request, "index.html", html_render) # rendering "Filter"
def news_filter(request):
data = news.objects.all()
html_render = {} if request.GET['filter_category'] == 'All':
pass
else:
data = data.filter(models.Q(category__icontains=request.GET['filter_category'])) data = data.values("time", "title", "category")
table = newsTable(data)
RequestConfig(request, paginate={'per_page': 100}).configure(table)
to_render(html_render, data, table)
html_render['filter_category'] = request.GET['filter_category'] return render(request, "index.html", html_render) def download_excel(requst):
data = news.objects.all()
print(type(data))
data = data.values("time", "title", "category")
print(type(data))
return render_to_csv_response(data, filename="table_download.csv")

具体来看这块,我加了注释:

# 声明 django.db 的 model
class news(models.Model):
time = models.CharField(max_length=10, blank=True, null=True)
title = models.CharField(max_length=10, blank=True, null=True)
category = models.CharField(max_length=200, blank=True, null=True) class Meta:
# 声明 MySQL 中 table 的名字,要不然可能会找不到
db_table = "news" # 声明 django-tables2 的 table
class newsTable(tables.Table):
# verbose_name=显示名称
counter = tables.Column(verbose_name="No", empty_values=(), orderable=False)
time = tables.Column(verbose_name="Time")
title = tables.Column(verbose_name="Title")
category = tables.Column(verbose_name="Category") # 用来渲染第一列的计数器
def render_counter(self):
self.row_counter = getattr(self, 'row_counter', itertools.count(1))
return next(self.row_counter) class Meta:
model = news
attrs = {
# 声明 table 要调用的 CSS 样式
"class": "info-table",
}
fields = ("counter", "time", "title", "category")

用 djqscsv 来实现导出到 CSV:

from djqscsv import render_to_csv_response

def download_excel(requst):
data = news.objects.all()
print(type(data))
data = data.values("time", "title", "category")
print(type(data))
return render_to_csv_response(data, filename="table_download.csv")

urls.py 中绑定好链接:

urlpatterns = [
path('table_example', views.table_show),
url(r'^news_search$', views.news_search),
url(r'^news_filter$', views.news_filter),
url(r'^download_excel', views.download_excel),
]

4. 配置

在 run Django server 之前,需要进行一些配置:

4.1 在本地 MySQL 数据库中添加 ithome_news 这个 database;

mysql> create database ithome_news;
mysql> use ithome_news;
mysql> source /home/con/code/python/Django_MySQL_Table/ithome_news.sql

4.2 修改 Django 中 setting.py 中的 database 的配置,与你本地的数据库 NAME / USER / PASSWORD 一致:

# Database
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'ithome_news',
'USER': 'root',
######## modify with your password here ########
'PASSWORD': 'pwd',
################################################
'CONN_MAX_AGE': 3600,
}
}

4.3 启动 MySQL 服务器

python3 manage.py runserver 8000

打开本地网站 http://127.0.0.1:8000/table_example

或者

python3 manage.py runserver 0.0.0.0:port

# 比如
python3 manage.py runserver 0.0.0.0:8777

打开本地网站 http://[本机IP]:[port]/table_example, 同一路由下也可以访问到该网站;

所以可以用来搭建 lab 内设备管理系统 / 人员登记 / KPI 展示 前端 web 网页;

# 请尊重他人劳动成果,转载或者使用源码请注明出处:http://www.cnblogs.com/AdaminXie

# 如果对您有帮助,欢迎在 GitHub 上 Star 支持下: https://github.com/coneypo/Django_MySQL_Table

# 如有问题请留言或者联系邮箱 coneypo@foxmail.com,商业合作勿扰

Django+MySQL Dashboard 网页端数据库可视化的更多相关文章

  1. Docker入门(四)——MySQL镜像中的数据库可视化

      在详细介绍这篇文章的内容前,需要说明下笔者写这篇文章的意图:笔者在现有的开发中,前后端联调的方式为Docker镜像对接,数据库使用MySQL镜像,开发环境为远程服务器,因此,笔者迫切需要一种能将远 ...

  2. mac安装mysql及终端操作mysql与pycharm的数据库可视化

    一.Mac安装mysql 首先下载mysql,地址:https://dev.mysql.com/downloads/mysql/ 然后已知安装就好了,会出现让你记住密码的提示,然后就安装好了.... ...

  3. Django:模型model和数据库mysql(一)

    以一个栗子尝试来记录: 两个表存储在数据库中,BookInfo表示书,HeroInfo表示人物.一本书中有多个人物 在MySQL中新建一个数据库Django1,不用创建表,用Django模型来配置数据 ...

  4. 覆盖Django mysql model中save方法时碰到的一个数据库更新延迟问题

    最近有一个需求,通过django的admin后台,可以人工配置5张表的数据,这些数据进行一些业务规则处理后会统一成一份数据缓存在一个cache之中供服务端业务访问,因而任何一张表的数据更新(增.删.改 ...

  5. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  6. mysql,oracle,sql server数据库默认的端口号,端口号可以为负数吗?以及常用协议所对应的缺省端口号

    mysql,oracle,sql server数据库默认的端口号? mysql:3306 Oracle:1521 sql server:1433 端口号可以为负吗? 不可以,端口号都有范围的,0~65 ...

  7. Django/MySql数据库基本操作&ORM操作

    数据库配置: #第一步在settings里面 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME':'dbna ...

  8. CAD图与互联网地图网页端相互叠加显示技术分析和实现

    需求分析 之前相关的博文中介绍了如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud),当一些CAD图纸有实际地理坐标位置时,如地形图等, ...

  9. Django基础四(model和数据库)

    上一篇博文学习了Django的form和template.到目前为止,我们所涉及的内容都是怎么利用Django在浏览器页面上显示内容.WEB开发除了数据的显示之外,还有数据的存储,本文的内容就是如何在 ...

随机推荐

  1. vue中组件通信

    组件的通信 1. 父子组件通信 案例:   //父子组件通信思路 // 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定 // 2 子组件用props 接受自定义的那个:号属性 Vue.co ...

  2. 怎样才算精通Linux

    1.掌握至少50个以上的常用命令(包括grep.awk.sed.ps.find等等吧,熟练使用,基础的选项不用man) 2.熟悉Gnome/KDE等X-windows桌面环境操作 3.掌握.tgz.. ...

  3. 使用Eclipse开发动态Javaweb项目

    使用Eclipse开发动态Javaweb项目 一.Eclipse的使用 1. 把开发选项切换到 JavaEE 2. 可以在 Window -> Show View 中找到 Package Exp ...

  4. hdfs运行机制

    hdfs:分布式文件系统 hdfs有着文件系统共同的特征: 1.有目录结构,顶层目录是:  / 2.系统中存放的就是文件 3.系统可以提供对文件的:创建.删除.修改.查看.移动等功能 hdfs跟普通的 ...

  5. 互联网从此没有 BAT

    根据 Wind 数据截止2019年8月30日,中国十大互联网上市公司排名中,百度排名第 6 位市值 365 亿美元,阿里巴巴排名第一市值高达 4499 亿美元,腾讯排名第二市值 3951 亿美元. 1 ...

  6. Bootstrap如何禁止响应式布局

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  7. Fiddle用于移动端抓包

    一.什么情况下可以用到 1.调查参考其他移动端网站的抓包,他们传输方式.如微信上京东的智能机器人的包.移动端的请求接口格式.如何实现的效果等. 2.调试本地移动端页面的测试页面效果是否有问题.如:页面 ...

  8. PAT L3-017. 森森快递

    L3-017. 森森快递 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 俞勇(上海交通大学) 森森开了一家快递公司,叫森森快递.因为 ...

  9. C++临时变量的回顾思考以及librdkafka设置回调函数注意点

    1 生命周期 如果仅仅是临时变量,并没有调用new来在堆上创建空间,那么注意 : 生命周期仅在该作用域中,即声明该临时变量的{}中: 2 使用(librdkafka C++回调使用) 在创建临时变量后 ...

  10. 数据库常用SQL语句(一):常用的数据库、表操作及单表查询语句

    以MySql数据库为例进行说明 1.数据库操作语句 2.表的操作语句 3.表中的字段操作语句 4.MYSQL支持的完整性约束 数据库管理系统提供了一致机制来检查数据库表中的数据是否满足规定的条件,以保 ...