51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 2237|回复: 0

[讨论] 基于python从redmine-api中获取项目缺陷数据并可视化(2)

[复制链接]

该用户从未签到

发表于 2018-5-29 16:27:43 | 显示全部楼层 |阅读模式
上一篇文章讲到缺陷数据的获取实现方式,这篇文章主要讲讲如何通过web框架flask将获取到的数据进行
web数据可视化

1.调研python web框架

一开始想通过html+js+highcharts去实现数据可视化,但是实现起来不方便而且本人js及前端开发了解甚
少,所以还是借助web框架。故调研了以下框架进行对比分析,最终选取了flask框架

2.安装搭建web框架

2.1.安装flask

安装flask最便捷的方式是使用虚拟环境,这是一个python解释器的一个私有副本,即virtualenv。
我用的是python3.6,在命令窗口用:

$pip3 install virtualenv*
即可自动安装,安装完虚拟环境,则要开始使用了,在你的项目文件的目录执行:

$virtualenv venv*
出现下面结果,那么恭喜你你的第一个虚拟环境就建好了。
  1. <p>
  2. </p><p> ~ pip3 install virtualenvCollecting virtualenv  Downloading virtualenv-15.1.0-py2.py3-none-any.whl (1.8MB)    100% |████████████████████████████████| 1.8MB 650kB/sInstalling collected packages: virtualenvSuccessfully installed virtualenv-15.1.0➜  ~ cd /Users/zhangmeiyuan/PycharmProjects/MyProject➜  MyProject lsTEST     test1.py➜  MyProject virtualenv venvUsing base prefix '/Library/Frameworks/Python.framework/Versions/3.6'New python executable in /Users/zhangmeiyuan/PycharmProjects/MyProject/venv/bin/python3.6Also creating executable in /Users/zhangmeiyuan/PycharmProjects/MyProject/venv/bin/python</p><p>Installing setuptools, pip, wheel...done.</p><p>virtualenv 安装完毕,你可以立即打开 shell 然后创建你自己的环境。在python3下由于在MAC上自带pyvenv,不用额外安装。</p><p>我用的是mac:故操作如下:</p><p>
  3. </p><p>mkdir .pyvenv</p><p>cd .pyvenv</p><p>pyvenv flask_venv</p><p>source flask_venv/bin/activate</p><p> cd /Users/zhangmeiyuan/PycharmProjects/MyProject➜  MyProject mkdir .pyvenv➜  MyProject cd .pyvenv➜  .pyvenv pyvenv flask_venvWARNING: the pyenv script is deprecated in favour of `python3.6 -m venv`➜  .pyvenv source flask_venv/bin/activate</p><p>(flask_venv) ➜  .pyvenv </p><p>启动成功后,会在前面多出 flask_env字样,如下所示</p>
复制代码


zhangmeiyuan-4:.pyvenv zhangmeiyuan$ source flask_venv/bin/activate
(flask_venv) zhangmeiyuan-4:.pyvenv zhangmeiyuan$
接下来就可以在虚拟环境中安装包,不影响外貌的环境

pip3 install requests
pip3 install flask_sqlalchemy
pip3 install pymysql
pip3 install flask
pip3 install flask-script
pip3 install flask-migrate
退出虚拟环境
deactivate

2.2Flask 创建代码工程

体验 Flask
有一点准备工作要做,既然 Flask 是一个 MVC 的 web 框架,我们就得按照 MVC 的模式来对代码文件分层。

首先我们创建一个工作的文件目录
$ mkdir -p bug_report/app
$ mkdir -p bug_report/app/static
$ mkdir -p bug_report/app/templates
Tips: 我们的应用程序包是放置于 app 文件夹中。子文件夹static
用来存放静态文件例如图片,JS 文件以及样式文件。子文件夹templates是存放模板文件类的html文件。

接下来我们进入到 app 文件夹中,并创建init.py和views.py
$ cd bug_report/app
$ touch __init__.py
$ touch views.py
上面创建项目是直接在命令行进行,也可以打开pycharm创建flask项目

location为项目路径
interpreter为解释器路径,我们可以将这里更改为自己创建的虚拟环境中的解释器,
第一次添加需要add local,选定制定虚拟环境文件夹flask_env/bin/python3.6,
创建好后默认会出现一个简单的flask程序

让我们编写第一个视图函数(文件app/views.py
)
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import flask

app = Flask(__name__)

@app.route('/')
@app.route('/index')
def index():
    return "Hello, World!"
if __name__ == '__main__':
    app.run(host='localhost', port=8888, debug=True)
Flask自带一个Web服务器,Run这个文件后,就会开始监听,可以使用,出现如下提示

/Users/zhangmeiyuan/PycharmProjects/MyProject/.pyvenv/flask_venv/bin/python3.6 /Users/zhangm
eiyuan/PycharmProjects/bug_report/app/views.py
* Running on http://localhost:8888/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 117-803-899
在浏览器输入http://localhost:8888/index,最终效果图如下

以上flask框架已经基本搭建完成,可以在已经建好的项目中进行编程实现缺陷数据可视化

3.采用pygal charts+flask+mysql实现缺陷数据可视化

3.1框架设计

流程框架如下:



代码目录框架如下:
  1. <p>├── pycache</p><p>│ └── mysql_save.cpython-36.pyc</p><p>├── app</p><p>│ ├── init.py</p><p>│ ├── pycache</p><p>│ │ ├── init.cpython-36.pyc</p><p>│ │ └── views.cpython-36.pyc</p><p>│ ├── static</p><p>│ │ └── pygal-tooltips.min.js</p><p>│ ├── templates</p><p>│ │ ├── charts.html</p><p>│ │ └── config.py</p><p>│ └── views.py</p><p>├── fix_period.py</p><p>├── mysql_save.py</p><p>└── run.py</p>
复制代码

3.2实现过程

从上一篇文章写到,从redmine获取到的数据将存在mysql中,所以Flask + sqlalchemy 是一种不错的选择,
由于自己此前完全未接触过 flask,基本是零基础边学边用,对于网页展示动态数据,摸索了很久才弄明白
其实现方式原理,而且遇到各种各样的调试问题,所以这块的功能实现的时间比较长也比较坎坷。

数据展示层的代码如下:由于涉及业务内容,只拿(三种类型的图)出来展示
  1. <p>
  2. </p><p>def bugdata():</p><p>   try:</p><p>       conn = pymysql.connect(host='localhost', user='root', passwd='****', db='test', charset='utf8')</p><p>   except Exception as e:</p><p>       print(e)</p><p>       sys.exit()</p><p>   cursor = conn.cursor()</p><p>   sql = "select distinct category,bugs from priority_line where bank='***' "</p><p>  </p><p>   sql3 = "select distinct date_time,newbug,closebug from bug_line where bank='***' "</p><p>
  3. </p><p>   sql5 = "select distinct period_time,bugs from period_line where bank='***' "</p><p>   cursor.execute(sql)</p><p>   alldata = cursor.fetchall()</p><p>   print(alldata)</p><p>   cursor.execute(sql2)</p><p>   alldata1 = cursor.fetchall()</p><p>   print(alldata1)</p><p>  </p><p>   cursor.execute(sql4)</p><p>   alldata3 = cursor.fetchall()</p><p>  </p><p>
  4. </p><p>   title = " This is a  demo"</p><p>   pie_chart = pygal.Pie()</p><p>   </p><p>   pie_chart.title = '电子账户4.2_priority_bug'</p><p>   line_chart = pygal.Line()</p><p>   line_chart1 = pygal.Bar()</p><p>   line_chart.title = '电子账户4.2_bug_trend'</p><p>#饼图</p><p>   if alldata:</p><p>       for rec in alldata:</p><p>           print(rec[0], rec[1])</p><p>           pie_chart.add(rec[0], rec[1])</p><p>       chart = pie_chart.render_data_uri()</p><p>   pie_chart2.title = '电子账户4.2_author_bug'</p><p>#折线图</p><p>   if alldata2:</p><p>       date_time =[]</p><p>       new_bug = []</p><p>       close_bug = []</p><p>       for rec in alldata2:</p><p>           date_time.append(rec[0])</p><p>           new_bug.append(rec[1])</p><p>           close_bug.append(rec[2])</p><p>       print(date_time)</p><p>       print(close_bug)</p><p>       line_chart.title = '电子账户4.2_Bug_trend'</p><p>       line_chart.x_labels=date_time</p><p>       line_chart.add('new_bug',new_bug)</p><p>       line_chart.add('close_bug',close_bug)</p><p>       chart1 = line_chart.render_data_uri()</p><p>   </p><p> #柱形图</p><p>   line_chart1.title = '电子账户4.2_period_time'</p><p>   if alldata4:</p><p>       period_time = []</p><p>       bugs = []</p><p>       for rec in alldata4:</p><p>           period_time.append(rec[0])</p><p>           bugs.append(rec[1])</p><p>       print(period_time)</p><p>       print(bugs)</p><p>       line_chart1.title = '电子账户4.2_period_line'</p><p>       line_chart1.x_labels = period_time</p><p>       line_chart1.add('bugs', bugs)</p><p>       chart4 = line_chart1.render_data_uri()</p><p>
  5. </p><p>   return render_template('charts.html', title=title,chart=chart,chart2=chart2,chart3=chart3,chart4=chart4)</p><p>
  6. </p><p>   cursor.close()</p><p>   conn.close()</p><p>
  7. </p><p>if __name__ == '__main__':</p><p>   app.run(host='localhost', port=8888, debug=True)</p><p>charts.html代码如下</p><p>
  8. </p><p><!DOCTYPE html></p><p><html></p><p><head></p><p>
  9. </p><p>    <meta charset="utf-8"></p><p>    <script type="text/javascript" src="{{url_for('static',filename='pygal-tooltips.min.js')}}"></script></p><p>    <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script></p><p></head></p><p>
  10. </p><p><body></p><p>**************</p><p>隐藏</p><p>**************</p><p>    <h3 style="text-align:center;">电子账户4.2_质量分析报告可视化</h3></p><p>    <div id="chart"></p><p>        <embed type="image/svg+xml" src={{ chart|safe}}></embed></p><p>        <embed type="image/svg+xml" src={{ chart3|safe}}></embed></p><p>        <embed type="image/svg+xml" src={{ chart1|safe}}></embed></p><p>        <embed type="image/svg+xml" src={{ chart4|safe}}></embed></p><p>    <embed type="image/svg+xml" src={{ chart2|safe}}></embed></p><p>    </div></p><p> author: Jammy</p><p></body></p><p>
  11. </p><p></html></p>
复制代码

最后成果如下(后续还将继续优化展示结果、新增维度分析及支持多个项目缺陷数据图片查询):








本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-3-29 21:09 , Processed in 0.064744 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表