利用python爬虫和数据分析基于flask的物流订单的数据可视化
文章目录
- 一、目的
-
- 二、遇到问题和解决措施
-
- 三.核心程序
-
- 四、总结
-
- 五、补充
一、目的
通过并利用python爬虫和数据分析基于flask的物流订单的数据可视化
二、遇到问题和解决措施
1．ccc.html（首页）页面的“物流管理”格式设置的问题
问题描述：ccc.html页面的“物流管理”如何将文字前面的点去除掉。
解决措施：需要在“物流管理”的<li>中加入：style="list-style: none"，并配置上颜色：style="color: #00c2ff"。
2．点击ccc.html的如何跳转index.html页面的问题
问题描述：点击“物流管理”无法跳转到index.html页面。
解决措施：需要在“物流管理”的<a>中加入正确的页面内容信息，即加上：href="index.html"内容。
3．index.html页面中标题和副标题的显示问题
问题描述：index.html页面设置打字机格式无法显示，将打字机格式格式写入到一个css文件中，在标签中引用css文件后发现并不显示打字机格式。
解决措施：将css的修饰代码直接写入<h>标签中，并在<div>标签中引入：class="typing"，即可显示。
4．indent.html页面中不显示表格内容的问题
问题描述：indent.html页面中选择物流信息文件后并不显示文件表格的内容。
解决措施：在app.py文件中的indent接口中，需要调用表头中内容为数字型地文字内容才会显示表格信息。即调用'顾客姓名': x, '产品类别': y, '区域': w, "运输方式": z，即可显示。
三.核心程序
1．展示物流信息的图形功能
图像展示功能实现了对物流信息的展示， 接下来对功能和代码做出解释。代码实现如下：
（1）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style>
.a {
width: 100%;
text-align: center;
}
.class{
width: 100px;
height: 100px;
}
style>
head>
<body>
<h1 class="a">图像展示h1>
<div >
<img height="" width="50%" src="./static/img/1.JPG">
<img height="500px" width="50%" src="./static/img/2.jpg">
<img height="500px" width="50%" src="./static/img/3.JPG">
<img height="500px" width="50%" src="./static/img/4.JPG">
div>
body>
html>
（2）
import numpy as np
from flask import Flask, render_template, request, send_file
import pandas as pd
import openpyxl
from butils import remove_whitespace, remove_character, remove_unnecessary, remove_avg, remove_infoindent
app = Flask(__name__)
# filename = '物流订单数据.xls'
@app.route("/")
def index():
print('------物流管理------')
# data = pd.read_excel(filename)
sheet = np.array(["物流管理"])[0]
return render_template('ccc.html', data =data,sheet=sheet)
# @app.route("/home")
# def home():
# sheet = np.array(["物流管理"])
# return render_template('ccc.html',sheet=sheet)
@app.route("/index.html")
def sheet1():
return render_template('index.html')
@app.route("/abc.html")
def sheet2():
return render_template('abc.html')
@app.route("/csgo")
def csgo():
return render_template('csgo_index.html')
@app.route('/data', methods=['GET', 'POST'])
def data():
if request.method == 'POST':
file = request.form['upload-file']
data = pd.read_excel(file)
data = data.head(6)
x = data['team1'].apply(remove_whitespace)
w = data['team2'].apply(remove_whitespace)
y = data['team1'].apply(remove_character)
z = data['team2'].apply(remove_character)
t1_p1 = data['t1-p1'].apply(remove_unnecessary)
t1_p2 = data['t1-p2'].apply(remove_unnecessary)
t1_p3 = data['t1-p3'].apply(remove_unnecessary)
t1_p4 = data['t1-p4'].apply(remove_unnecessary)
t1_p5 = data['t1-p5'].apply(remove_unnecessary)
t2_p1 = data['t2-p1'].apply(remove_unnecessary)
t2_p2 = data['t2-p2'].apply(remove_unnecessary)
t2_p3 = data['t2-p3'].apply(remove_unnecessary)
t2_p4 = data['t2-p4'].apply(remove_unnecessary)
t2_p5 = data['t2-p5'].apply(remove_unnecessary)
pom = data['pom'].apply(remove_unnecessary)
dict = {'team-1': x, 'team-1-points': y, 'team-2': w, 'team-2-points': z, 't1-p1': t1_p1,
't1-p2': t1_p2, 't1-p3': t1_p3, 't1-p4': t1_p4, 't1-p5': t1_p5, 't2-p1': t2_p1,
't2-p2': t2_p2, 't2-p3': t2_p3, 't2-p4': t2_p4, 't2-p5': t2_p5, 'pom': pom}
df = pd.DataFrame(dict)
# dataset = df.to_excel("csgo-db-1.xlsx", index=False)
return render_template('csgo_show.html', data=data.to_html(index=False), df=df.to_html(index=False))
@app.route("/players")
def player():
return render_template('player_index.html')
@app.route("/show", methods=['GET', 'POST'])
def show():
if request.method == 'POST':
file = request.form['upload-file']
df = pd.read_excel(file)
df = df.head(6)
x = df['nick-name'].apply(remove_unnecessary)
y = df['rating'].apply(remove_avg)
w = df['impact'].apply(remove_avg)
z = df['KAST'].apply(remove_avg)
dict = {'nick-name': x, 'rating': y, 'impact': w, "KAST": z}
df1 = pd.DataFrame(dict)
# dataset = df1.to_excel("players-info-1.xlsx", index=False)
return render_template('player_show.html', df=df.to_html(index=False), df1=df1.to_html(index=False))
@app.route("/indents")
def info():
return render_template('indent_index.html')
@app.route("/indent", methods=['GET', 'POST'])
def indent():
if request.method == 'POST':
file = request.form['upload-file']
de = pd.read_excel(file)
de = de.head(200)
x = de['顾客姓名'].apply(remove_avg)
y = de['产品类别'].apply(remove_infoindent)
w = de['区域'].apply(remove_infoindent)
z = de['运输方式'].apply(remove_infoindent)
dictf = {'顾客姓名': x, '产品类别': y, '区域': w, "运输方式": z}
de1 = pd.DataFrame(dictf)
return render_template('indent_show.html', de=de.to_html(index=False), de1=de1.to_html(index=False))
if __name__ == '__main__':
app.run(debug=True)
2．“物流管理”跳转的页面进行选择展示那种表格信息功能
选择表格信息展示功能实现了对每种表格信息的展示， 接下来对功能和代码做出解释。代码实现如下。
doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Flask处理Excel文件title>
<style>
*{
padding: 0;
margin: 0;
}
.btn-indent {
background-color: red;
color: white;
}
/* 打印效果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 21em;
}
}
/* 光标 */
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: currentColor;
}
}
style>
head>
<body>
<div class="typing">
<h1 style="
color: black;
font-size: 3.5em;
width: 13em;
height: 1.5em;
border-right: 1px solid transparent;
animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
font-family: Consolas, Monaco;
word-break: break-all;
overflow: hidden;
margin: 0 auto">Flask处理器excel表格内容h1>
div>
<div style="margin: 0 auto;width: 70%;">
<div class="typing" >
<h2 style="
color: black;
font-size: 25px;
width: 13em;
height: 1.5em;
border-right: 1px solid transparent;
animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
font-family: Consolas, Monaco;
word-break: break-all;
overflow: hidden;
">请点击下方按钮进行操作:h2>
div>
<div class="col-md-6 mt-3">
<a class="btn btn-success" href="{{url_for('csgo')}}">CSGO-dba>
<a class="btn btn-primary" href="{{url_for('player')}}">Players-infoa>
<a class="btn btn-indent" href="{{url_for('info')}}">Indent-infoa>
div>
div>
<script src="../static/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous">script>
body>
html>
3．Csgo表格信息分析功能
CSGO_db功能实现了对Csgo表格信息的展示， 接下来对功能和代码做出解释。代码实现如下。
doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Flask处理Csgo的Excel文件title>
head>
<body>
<div class="container">
<h1>Flask处理csgo的excel表格内容h1>
<div class="input-group mt-3">
<form class="" action="data" method="post">
<div class="custom-file">
<input type="file" class="custom-file-input" name="upload-file">
div>
<div class="input-group-append mt-3">
<input type="submit" class="btn btn-dark" value=" 提交 ">
div>
form>
div>
div>
<script src="../static/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">script>
body>
html>
4．Player表格信息分析功能
Player_info功能实现了对Player表格信息的展示， 接下来对功能和代码做出解释。代码实现如下。
doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Flask处理Player的Excel文件title>
head>
<body>
<div class="container">
<h1>Flask处理玩家player的excel表格内容h1>
<div class="input-group mt-3">
<form class="" action="show" method="post">
<div class="custom-file">
<input type="file" class="custom-file-input" name="upload-file">
div>
<div class="input-group-append mt-3">
<input type="submit" class="btn btn-dark" value=" 提交 ">
div>
form>
div>
div>
<script src="../static/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">script>
body>
html>
5．物流表格信息分析功能
Indent_info功能实现了对物流表格信息的展示， 接下来对功能和代码做出解释。代码实现如下。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Flask处理物流的Excel文件title>
head>
<body>
<div class="container">
<h1>Flask处理物流订单的excel表格内容h1>
<div class="input-group mt-3">
<form class="" action="indent" method="post">
<div class="custom-file">
<input type="file" class="custom-file-input" name="upload-file">
div>
<div class="input-group-append mt-3">
<input type="submit" class="btn btn-dark" value=" 提交 ">
div>
form>
div>
div>
<script src="../static/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">script>
body>
html>
四、总结
在这个基于爬虫、Scrapy和Flask的项目中。学到了许多关于大数据处理和Web开发的知识，并且通过实践应用这些技能，获得了宝贵的经验和成长。
在项目的初期，使用爬虫和Scrapy框架从各种网站上收集数据。这包括了学习如何分析网页结构、使用XPath和CSS选择器提取数据，以及处理异步加载和反爬虫措施。通过这个过程，我们学会了如何设计一个高效的爬虫系统。
接着，参与了开发基于Flask框架的Web应用程序。我们负责前端页面的设计和实现，包括用户界面和交互功能。通过HTML、CSS和JavaScript成功地创建了一个直观且具有响应式设计的用户界面。同时，我们将Flask作为后端框架，处理数据的存储和查询，并实现了API接口供前端调用。
五、补充
项目具体代码包
链接(百度网盘)：https://pan.baidu.com/s/1inDantSJIQn0LVVoVo2G-w
提取码：nndf