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. mybatis 中 useGeneratedKeys 和 keyProperty 含义

    MyBatis如何获取插入记录的自增长字段值: 第一步: 在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Ja ...

  2. python 26 反射

    目录 1. 类的反射 1.1 实例对象 1.2 类 1.3 其他模块 -- 其他.py文件 1.4 本模块 -- 当前.py文件 2. 函数与方法的区别 2.1区别的方法: 2.2 总结 3. 特殊的 ...

  3. CodeForces 909E

    题意略. 思路:一个拓扑排序的题目吧.肯定是要先处理后面那个任务,再处理前面那个任务,我的思路是尽力先把主处理器能操作的先操作完,然后再把副处理器能操作完的再操作完,这样循环,直到处理完全部. 定义t ...

  4. JavaScript 数据结构与算法之美 - 你可能真的不懂递归

    1. 前言 算法为王. 排序算法博大精深,前辈们用了数年甚至一辈子的心血研究出来的算法,更值得我们学习与推敲. 因为之后要讲有内容和算法,其代码的实现都要用到递归,所以,搞懂递归非常重要. 2. 定义 ...

  5. 记一次vue使用innerHTML更新dom出现的样式失效问题

    场景说明:我在实现对html拼接后重新渲染到页面的功能遇到了一点问题,当然实际的业务逻辑并没有这么简单,所以只提出这个问题,而不讨论如何修正: 具体情况:使用refs获取到dom,然后使用innerH ...

  6. 洛谷 P1070 道路游戏 DP

    P1070 道路游戏 题意: 有一个环,环上有n个工厂,每个工厂可以生产价格为x的零钱收割机器人,每个机器人在购买后可以沿着环最多走p条边,一秒走一条,每条边不同时间上出现的金币是不同的,问如何安排购 ...

  7. LuoGu-P2863牛的舞会The Cow Prom[tarjan 缩点模板]

    传送门:https://www.luogu.org/problemnew/show/P2863 思路:tarjan模板题,之前会的tarjan,一直想学缩点到底是什么操作,发现就是把同组的放在一个数组 ...

  8. 牛客2018多校第五场E-room 最小费用最大流

    题意:有n个寝室,每个寝室4个人,现在在搞搬寝室的活动,告诉你每个寝室之前的人员名单,和之后的人员名单,问最少需要几个人要搬寝室. 思路: 转化为最小费用最大流解决的二分图问题,对每个去年的宿舍,向每 ...

  9. 杭电多校第九场 HDU6415 Rikka with Nash Equilibrium dp

    Rikka with Nash Equilibrium Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K ...

  10. codeforces 814 D. An overnight dance in discotheque （贪心+bfs）

    题目链接:http://codeforces.com/contest/814/problem/D 题意:给出奇数个舞者,每个舞者都有中心坐标和行动半径,而且这些点组成的园要么相互包含要么没有交集求,讲 ...