利用python爬虫和数据分析基于flask的物流订单的数据可视化

编程语言 2023-09-16 21:06:09 阅读次数: 0

文章目录

一、目的

通过并利用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>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <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>
<!--    <h2 class="btn-title">请点击下方按钮进行操作:</h2>-->
<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-db</a>
        <a class="btn btn-primary" href="{
     
     {url_for('player')}}">Players-info</a>
        <a class="btn btn-indent" href="{
     
     {url_for('info')}}">Indent-info</a>
    </div>
</div>

    <!-- 可选的Js两选一！ -->

    <!-- 选项1:带有Popper的引导包 -->
    <script src="../static/js/bootstrap.bundle.min.js"
            integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
            crossorigin="anonymous"></script>

    <!-- 选项2:分离Popper和Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" 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

猜你喜欢

转载自blog.csdn.net/m0_63599362/article/details/131983718
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022