基于Flask+Bootstrap+机器学习的会计专业毕业生薪资可视化分析系统

本项目使用Flask框架搭建基于机器学习的会计专业毕业生薪资可视化分析系统其中关于Flask知识点可参考文章Flask全套知识点从入门到精通，学完可直接做项目1.登录/注册模块2.首页板块3.训练模型板块3.岗位信息模块4.可视化大屏模块技术：Flask、html、css、javascript、bootstrap、echarts系统架构：。

艾派森

4648人浏览 · 2025-06-10 09:08:06

艾派森 · 2025-06-10 09:08:06 发布

🤵‍♂️ 个人主页：@艾派森的个人主页

✍🏻作者简介：Python学习者
🐋 希望大家多多支持，我们一起进步！😄
如果文章对你有帮助的话，
欢迎评论 💬点赞👍🏻 收藏 📂加关注+

一、项目介绍

1.1项目简介

本项目使用Flask框架搭建基于机器学习的会计专业毕业生薪资可视化分析系统

其中关于Flask知识点可参考文章Flask全套知识点从入门到精通，学完可直接做项目

整个项目分为以下几个模块：

1.登录/注册模块
2.首页板块
3.训练模型板块
3.岗位信息模块
4.可视化大屏模块

技术：Flask、html、css、javascript、bootstrap、echarts

系统架构：

其中job_data,csv是数据集文件，manager.py是系统主文件，password.csv是存储系统账号密码的文件，static和templates分别是系统的css/javascript和html文件。

1.2技术工具

IDE编辑器：vscode

后端框架：Flask

前端框架：Bootstrap

1.3页面概述

首先，运行manager.py文件后在浏览器打开http://127.0.0.1:5000/，来到系统登录页面

如果是第一次进入系统没有账号的话，可以先点击注册进行注册账号

登录好之后来到系统首页

最上面的导航栏中有首页、训练模型、查看岗位信息、可视化大屏以及退出按钮。

点击训练模型后，依次按照建模步骤点击即可，

点击查看岗位信息即可看到会计岗位的招聘信息，同时也可以根据薪资区间进行筛选岗位信息

点击可视化大屏后即可看到会计岗位招聘信息可视化大屏

二、项目步骤

2.1登录注册板块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .container {
            height: 100%;
            background-image: linear-gradient(to right, #999999, #330867);
        }

        .login-wrapper {
            background-color: bisque;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .input-item::placeholder {
            text-transform: uppercase;
        }

        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

        .msg {
            text-align: center;
            line-height: 88px;
        }

        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="login-wrapper">
            <form action="/login/" method="post">
                <div class="header">Login</div>
                <div class="form-wrapper">
                    <input type="text" name="username" placeholder="username" class="input-item">
                    <input type="password" name="password" placeholder="password" class="input-item">
                    {% if error %}
                    <font color="red">{{ error }}</font>
                    {% endif %}
                    <input class="btn" type="submit" value="立即登录">
                </div>
                <div class="msg">
                    Don't have account?
                    <a href="{{url_for('my_register')}}">Sign up</a>

                </div>
            </form>

        </div>


    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #999999, #330867);
        }
        .login-wrapper {
            background-color: bisque;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }
        .input-item::placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <form action="/register/" method="post">
                <div class="header">Register</div>
                <div class="form-wrapper">
                <input type="text" name="username" placeholder="username" class="input-item">
                <input type="password" name="password" placeholder="password" class="input-item">
                <!-- <a href="{{url_for('my_login')}}"><div class="btn">Submit</div></a>  -->
                {% if error %}
                <font color="red">{{ error }}</font>
                {% endif %}
                <input class="btn" type="submit" value="Submit">
                
            </div>
            </form>
            
        </div>
    </div>
</body>
</html>

2.2主页面板块

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <link rel="stylesheet" href="../static/main.css">

</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="{{url_for('main')}}">首页</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link" href="{{url_for('train_model')}}">训练模型<span class="sr-only">(current)</span></a>
                <a class="nav-link" href="{{url_for('my_look')}}">查看岗位信息</a>
                <a class="nav-link" href="{{url_for('visual_screen')}}">可视化大屏</a>
              </div>
            </div>
            <a href="{{url_for('my_login')}}"><button type="button" class="btn btn-danger">退出</button></a>
            
          </nav>
          <h1 style="margin-top: 200px;margin-left: -20px;">基于Echarts+机器学习的会计专业毕业生薪资可视化与预测分析</h1>
    </div>
</body>
</html>

2.3训练模型板块

train_model.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练模型</title>
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <link rel="stylesheet" href="../static/main.css">

</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-2">
        <div class="top" style="margin-top: 40px;margin-left: 40px;">
          <ul class="nav flex-column">
              <li class="nav-item" >
                <a class="nav-link" href="{{url_for('load_data')}}" >
                  <button type="button" class="btn btn-outline-primary">1.导入数据</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left: 60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="">
                  <button type="button" class="btn btn-outline-primary" disabled>2.查看数据</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left:60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="">
                  <button type="button" class="btn btn-outline-primary" disabled>3.数据预处理</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left: 60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="">
                  <button type="button" class="btn btn-outline-primary" disabled>4.数据可视化</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left: 60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="">
                  <button type="button" class="btn btn-outline-primary" disabled>5.特征工程</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left: 60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="">
                  <button type="button" class="btn btn-outline-primary" disabled>6.构建模型</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left: 60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="">
                  <button type="button" class="btn btn-outline-primary" disabled>7.保存模型</button>  
                </a>
              </li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16" style="margin-left: 60px;">
                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
              </svg>
              <li class="nav-item" >
                <a class="nav-link" href="{{url_for('main')}}">
                  <button type="button" class="btn btn-outline-primary">返回首页</button>  
                </a>
              </li>
              
            </ul>
      </div>
      </div>
      <div class="col-xl-10">
        <div class="card" style="margin-top: 20px;">
          <div class="card-body">
          </div>
        </div>
      </div>
    </div>
   
  </div>
    
</body>
</html>

2.4查看岗位信息板块

look_job_data.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看岗位信息</title>
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <link rel="stylesheet" href="../static/main.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="{{url_for('main')}}">首页</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link" href="{{url_for('train_model')}}">训练模型<span class="sr-only">(current)</span></a>
                <a class="nav-link active" href="{{url_for('my_look')}}">查看岗位信息</a>
                <a class="nav-link" href="{{url_for('visual_screen')}}">可视化大屏</a>
              
              </div>
            </div>
          </nav>
          <div>
            <form action="/look_job/" method="post">
              <div class="form-group row">
                  <label for="inputPassword" class="col-sm-3 col-form-label">请输入平均薪资区间(元/月)：</label>
                  <div class="col-sm-3">
                    <input type="text" placeholder="2000" name="min" class="form-control">
                  </div>
                  <div class="col-sm-1">
                    ——
                  </div>
                  <div class="col-sm-3">
                    <input type="text" placeholder="10000" name="max" class="form-control">
                  </div>
                  <div class="col-sm-3">
                    <input type="submit" value="搜索" class="btn btn-primary">
                  </div>
                </div>
            </form>
            <section class="counts section-bg">
              <div class="container">
                <table class="table text-nowrap">
                  <tr class="text-center">
                    <td>职位名称</td>
                    <td>公司名称</td>
                    <td>工作经验要求</td>
                    <td>学历要求</td>
                    <td>工作地点</td>
                    <td>薪酬</td>
                    <td>公司规模</td>
                    <td>公司福利</td>
                  </tr>
                  {% for job in jobs %}
                  <tr class="text-center">
                    <td>{{ job.职位名称 }}</td>
                    <td>{{ job.公司名称 }}</td>
                    <td>{{ job.工作经验要求 }}</td>
                    <td>{{ job.学历要求 }}</td>
                    <td>{{ job.工作地点 }}</td>
                    <td>{{ job.薪酬 }}</td>
                    <td>{{ job.公司规模 }}</td>
                    <td>{{ job.公司福利 }}</td>
                  </tr>
                  {% endfor %}
                </table>
              </div>
            </section><!-- End Counts Section -->
          </div>
    </div>
</body>
</html>

2.5可视化大屏板块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会计岗位招聘信息可视化大屏</title>
    <link rel="stylesheet" href="../static/screen.css">
    <script src="../static/echarts.min.js"></script>
    <script src="../static/jquery-3.6.0.min.js"></script>
    <script src="../static/echarts-wordcloud.min.js"></script>
    <style>
      body{
          margin: 0;
          background-color: #333;
      }
    </style>
</head>
<body>
  <div class="title">会计岗位招聘信息可视化大屏</div>
  <div class="l1" id="l1"></div>
  <div class="l2" id="l2"></div>
  <div class="c1">
    <div class="num"><h1>542</h1></div>
    <div class="num"><h1>北京</h1></div>
    <div class="num"><h1>深圳</h1></div>
    <div class="num"><h1>京企优选</h1></div>
    <div class="txt"><h2>岗位数量</h2></div>
    <div class="txt"><h2>岗位最多的城市</h2></div>
    <div class="txt"><h2>薪资最高的城市</h2></div>
    <div class="txt"><h2>岗位最多的公司</h2></div>
  </div>
    <div class="c2" id="main" ></div>
    <div class="r1" id="r1"></div>
    <div class="r2" id="r2"></div>

   <script src="../static/ec_l1_data.js"></script>
   <script src="../static/ec_l2_data.js"></script>
   <script src="../static/ec_r1_data.js"></script>
   <script src="../static/ec_r2_data.js"></script>
   <script src="../static/ec_main_data.js"></script>
</body>
</html>

三、项目总结

本次我们使用了Flask框架结合了基于机器学习的会计专业毕业生薪资预测模型，构建了一个简易版基于机器学习的会计专业毕业生薪资预测系统，整个项目还有很多地方可以优化，比如页面美化、模块添加等等，这些就留给学习的小伙伴根据自身需求进行创新升级！喜欢本项目的话就三连支持一下啦！

本项目源码需关注公主号派森小木屋后入q群领取

心得与体会：

通过这次Python项目实战，我学到了许多新的知识，这是一个让我把书本上的理论知识运用于实践中的好机会。原先，学的时候感叹学的资料太难懂，此刻想来，有些其实并不难，关键在于理解。

在这次实战中还锻炼了我其他方面的潜力，提高了我的综合素质。首先，它锻炼了我做项目的潜力，提高了独立思考问题、自我动手操作的潜力，在工作的过程中，复习了以前学习过的知识，并掌握了一些应用知识的技巧等

在此次实战中，我还学会了下面几点工作学习心态：

1）继续学习，不断提升理论涵养。在信息时代，学习是不断地汲取新信息，获得事业进步的动力。作为一名青年学子更就应把学习作为持续工作用心性的重要途径。走上工作岗位后，我会用心响应单位号召，结合工作实际，不断学习理论、业务知识和社会知识，用先进的理论武装头脑，用精良的业务知识提升潜力，以广博的社会知识拓展视野。

2）努力实践，自觉进行主角转化。只有将理论付诸于实践才能实现理论自身的价值，也只有将理论付诸于实践才能使理论得以检验。同样，一个人的价值也是透过实践活动来实现的，也只有透过实践才能锻炼人的品质，彰显人的意志。

3）提高工作用心性和主动性。实习，是开端也是结束。展此刻自我面前的是一片任自我驰骋的沃土，也分明感受到了沉甸甸的职责。在今后的工作和生活中，我将继续学习，深入实践，不断提升自我，努力创造业绩，继续创造更多的价值。

这次Python实战不仅仅使我学到了知识，丰富了经验。也帮忙我缩小了实践和理论的差距。在未来的工作中我会把学到的理论知识和实践经验不断的应用到实际工作中，为实现理想而努力。

资料获取，更多粉丝福利，关注下方公众号获取

在这里插入图片描述