flask+echarts+pyecharts+layui+bootstrap+爬虫 flask快速搭建学习

最新推荐文章于 2024-07-11 10:00:04 发布
最新推荐文章于 2024-07-11 10:00:04 发布
阅读量1.3k 收藏 8
点赞数 3
分类专栏： python pyecharts python爬虫 文章标签： flask python bootstrap echarts layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44415775/article/details/119320879
版权

首先看一下示例图，按顺序以下页面称 首页，什么都有（乱取的），登录页，资源管理
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
开始。
bootstarp模板包下载地址https://codeload.github.com/twbs/bootstrap/zip/v3.4.1
前端页面确实是个难事，资源管理页面和首页，用的分别是layui的模板与bootstrap，我也只会对模板进行使用。首先来看首页代码，本界面使用的是carousel，方法：直接将html代码拷贝，然后用block块给head，body ，content，css，js等包起来，运行即可看到效果。注意：js，css文件要和代码同位置。
html代码，在相应的地方设置href的链接地址即可跳转。


{% extends "bootstrap/base.html"  %}
{%- block head %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>首页</title>
    {%- block styles %}
     <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
        <!-- Bootstrap core CSS -->
{#    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/carousel.css" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
{% block body -%}
    {% block navbar %}
<!-- NAVBAR
================================================== -->
  <body>
    <div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">ckq的首页</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="#">前端怎么做？</a></li>
                <li><a href="#">联系</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>


    {%- endblock navbar %}
    {% block content -%}
    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="../static/img3.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>我不是我没有</h1>
              <p>建议女孩子出门穿的多一点，穿的太漏容易被人跟踪，我今天就跟踪了一个</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">点了没用没加链接</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="../static/img2.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>球球你了</h1>
              <p>如果十年后，你的老公天天和你吵，孩子成绩也不好，你会不会后悔今天没有私聊我</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">点了没用没加链接</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="../static/img1.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>想植发</h1>
              <p>手机真会偷窥隐私啊，我上一秒用前置挤痘痘，下一秒就给我推整容医院是吧？</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">点了没用没加链接</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="../static/bumiao.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2>资源管理</h2>
          <p>女孩子要多做一点坏事，老天爷一生气说不定就给你发个小伙</p>
          <p><a class="btn btn-default" href="/form2" role="button">开始管理服务器资源 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="../static/bumiao.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2>什么都有</h2>
          <p>什么地方妖气最重？钢琴和邮箱，因为钢琴住了几个妖，邮箱住了几个魔</p>
          <p><a class="btn btn-default" href="/smdy" role="button">说了都有就是都有！！！ &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="../static/bumiao.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2>不知道链接到哪</h2>
          <p>我有权保持沉默，沉船说</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
      </div>


{%- endblock content %}


{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
     <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
{#    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>#}
    <script src="../static/js/jquery-1.11.1.min.js"></script>

    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
{#    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
    <script src="../static/js/bootstrap.min.js"></script>


{%- endblock scripts %}

{%- endblock body %}

python使用:
安装包flask_bootstrap ，然后导入from flask_bootstrap import Bootstrap
声明对象app = Flask(__name__) bootstrap=Bootstrap(app)

接下来是登录页（点击资源管理进入）
登录页的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    #login{
    position: absolute;
    top: 50%;
    left:50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}
 #form1{
    position: absolute;

}
#yzm{
position: absolute;
left:100%;
top:53%
}
</style>
<body background="../static/bjt.jpg" style=" background-repeat:no-repeat ;background-size:100% 100%;
background-attachment: fixed;">
<div id="login">
<form method="post"  id="form1" style="margin:0px;display:inline;">
  {{form.csrf_token()}}
  {{form.username.label}}{{form.username}}<br>
  {{form.password.label}}{{form.password}}<br>
  {{form.yzm1.label}}{{form.yzm1}}<input type="button" id="yzm" style="height:20px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" /><br>
<script src="../static/js/jquery-1.11.1.min.js"></script>
  <script type=text/javascript>
     $(function() {
          $('#yzm').bind('click', function() {
            $.getJSON('/email_send',
                function(data) {
              //do nothing
            });
            return false;
          });
        });
        </script>
<script type="text/javascript">
 var clock = '';
 var nums = 10;
 var btn;
 function sendCode(thisBtn)
 {
 btn = thisBtn;
 btn.disabled = true; //将按钮置为不可点击
 btn.value = nums+'秒后可重新获取';
 clock = setInterval(doLoop, 1000); //一秒执行一次
 }

 function doLoop()
 {
 nums--;
 if(nums > 0){
 btn.value = nums+'秒后可重新获取';
 }else{
 clearInterval(clock); //清除js定时器
 btn.disabled = false;
 btn.value = '点击发送验证码';
 nums = 10; //重置时间
 }
 }
</script>
  {{form.submit}}<br>
    {% for msg in get_flashed_messages() %}
        {{ msg }}
    {% endfor %}
</form>
    </div>
</body>
</html>

然后是python代码，此处使用的wtforms来管理，首先下载包，然后导入，使用wtforms可以通过配置参数来设置必填字段DataRequired()
在这里插入图片描述
对于submit的css，可以通过自定义css传递进去
发送邮件使用的网易邮箱与flask_mail，网易邮箱需要先开启配置，MAIL_PASSWORD系写的是邮箱的授权密码在这里插入图片描述

from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import  DataRequired,EqualTo
from flask_wtf import FlaskForm
from flask_mail import Mail,Message
app.secret_key = 'ckq'
app.config["MAIL_SERVER"] = "smtp.163.com"
app.config["MAIL_PORT"] = 465
app.config["MAIL_USE_SSL"] = True
app.config["MAIL_USERNAME"] = "chenkq1204@163.com"
app.config["MAIL_PASSWORD"] = "EZYHEUFHFFDSKOJU"
mail = Mail(app)
class LoginForm(FlaskForm):
    username = StringField(u'用户名：',validators=[DataRequired()])
    password = PasswordField(u'密码：',validators=[DataRequired()])
    yzm1 = PasswordField(u'验证码：',validators=[DataRequired()])
    submit = SubmitField(u'登录',render_kw=style)#传入css
code = ""
style ={
    'class': 'ourClasses', 'style': 'width:50%;position:absolute; left:25%;bottom:-20%;right:50%;other_css_style;'
}
def sj_code():
    global code
    code = random.randint(10000,99999)#生成随机验证码

@app.route('/email_send',methods=['GET','POST'])
def email_send():
    message = Message("标题", sender=app.config["MAIL_USERNAME"], recipients=["chenkq1204@163.com"])#发送邮件到recipients
    sj_code()
    message.body = "验证码为{0}".format(code)
    with app.app_context():
        mail.send(message)
    print('test')
    return 'test'
@app.route('/form2',methods=['GET','POST'])
def login():
    login = LoginForm()
    db = pymysql.connect(host="localhost", user="root", password="Asdfg12345", database="skt",charset="utf8")
    cursor = db.cursor()
    # SQL查找数据库中的账号信息，返回账号不存在，密码错误等
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        yzm1 = request.form.get('yzm1')
        sql = "select * from user where user_name='{0}' and user_passwd='{1}'".format(username,password)
        sql_passwd = "select * from user where user_passwd='{0}'".format(password)
        sql_name = "select * from user where user_name='{0}' ".format(username)
        print(sql)
        try:
            # 执行sql语句
            cursor.execute(sql_name)
            results = cursor.fetchall()
            print(len(results))
            if len(results) == 1:
                cursor.execute(sql_passwd)
                results = cursor.fetchall()
                if len(results) == 1:
                    print(yzm1,code)
                    if str(yzm1) == str(code):
                        return redirect('/dashboard')
                    else:
                        flash('验证码错误')
                        return redirect('/form2')
                else:
                    flash('密码错误')
                    return redirect('/form2')
            else:
                flash('账号不存在')
                return redirect('/form2')
            # 提交到数据库执行
            db.commit()
        except:
            # 如果发生错误则回滚
            traceback.print_exc()
            db.rollback()
            # 关闭数据库连接
        db.close()
    return render_template('login.html',form=login)

sql创建的代码我也贴一下

CREATE TABLE user(
 user_id INT NOT NULL AUTO_INCREMENT,
 user_name VARCHAR(40) NOT NULL,
 user_passwd VARCHAR(40) NOT NULL,
 PRIMARY KEY ( user_id )
 )ENGINE=InnoDB DEFAULT CHARSET=utf8;

mysql> INSERT INTO user (user_name, user_passwd) VALUES ("ckq", "Asdfg12345");

然后是dashboard页，该页面前端使用的layui。
参考文章
https://blog.csdn.net/weixin_33774615/article/details/88860240
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php echo $curTitle;?></title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">ckq的服务器管理</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                ckq的服务器资源
            </li>
            <li class="layui-nav-item"><a href="">安全退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧垂直导航区域-->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">资源</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a  id="bar1" href="javascript:;" data-id="1" data-title="内存cpu" data-url="/te"
                               class="site-demo-active" data-type="tabAdd">内存cpu</a></dd>
                        <dd><a href="javascript:;" data-id="2" data-title="进程" data-url="/bfb"
                               class="site-demo-active" data-type="tabAdd">进程</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">日志管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="3" data-title="日志查看" data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">日志查看</a>
                        </dd>
                        <dd><a href="javascript:;">xxx</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">权限设置</a></dd>
                        <dd><a href="javascript:;">公告设置</a></dd>
                        <dd><a href="javascript:;">控制台</a></dd>
                        </dl>
                </li>
            </ul>
        </div>
    </div>

    <!--tab标签-->
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
        <ul class="layui-tab-title"></ul>
<!--        <div class="layui-tab-content">-->
        <div class="layui-tab-content" >
<!--            <button type="button"  οnclick="javascript:location.reload()">刷新</button>-->
    </div>

<div class="layui-footer" style="text-align:center;">
    <!-- 底部固定区域 -->
    © ckq.tk ckq服务器
</div>
</div>
<script src="../static/layui/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'jquery'], function () {
        var element = layui.element;
        // var layer = layui.layer;
        var $ = layui.$;
        // 配置tab实践在下面无法获取到菜单元素
        $('.site-demo-active').on('click', function () {
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });

        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                    id: id //规定好的id
                })
                FrameWH();  //计算ifram层的大小
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            }
        };
        function FrameWH() {
            var h = $(window).height();
            $("iframe").css("height",h+"px");
        }
    });
</script>

</div></body>
</html>

设置点击显示的柱状图方法，其实就是将一个新html网页放在入右侧。右侧地址为/te

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
   <button type="button"  onclick="javascript:location.reload()">刷新</button>
    <div id="bar" style="width:1000px; height:600px;"></div>

    <script>
        var chart = echarts.init(document.getElementById('bar'), 'light', {renderer: 'canvas'});

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 20000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "/barChart",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    </script>
</body>
</html>

如代码，需要使用pyecharts来绘制图表，/te会监听/barchat路由也就是图表，就是说我们需要新建个pyecharts图表的路由来给te

def bar_base() -> Bar:
    mem = psutil.virtual_memory().percent
    cpu = psutil.cpu_percent(interval=1)
    c = (
        Bar(
            init_opts=opts.InitOpts(animation_opts=opts.AnimationOpts(
                    animation_delay=1000, animation_easing="elasticOut"
                ),theme="light")
        )
            .set_global_opts(
            title_opts=opts.TitleOpts(title="内存cpu资源", subtitle="服务器"),
            toolbox_opts=opts.ToolboxOpts(
                # 是否显示该工具
                is_show=True,
            ),
        )

            .add_xaxis(["本机"])
            .add_yaxis("mem", [mem])
            .add_yaxis("cpu", [cpu])
            .set_series_opts(markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(type_="max", name="最大值"),
                opts.MarkPointItem(type_="min", name="最小值"),
                opts.MarkPointItem(type_="average", name="平均值"),
            ]
        ),  # 局部配置，这里设置凸显出值
        )
    )
    return c
@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return  c.dump_options_with_quotes()

接下来是服务器使用内存占比前几的进程

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3>使用内存前几的进程</h3>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                       <button type="button"  onclick="javascript:location.reload()">刷新</button>

                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            {% for i in labels %}
                                <td>{{ i }}</td>
                            {% endfor %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in content %}
                            <tr>
                                {% for j in i.split() %}
                                    <td>{{ j }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>
</html>


@app.route('/bfb')
def bfb():
    m = os.popen('ps aux|head -1;ps aux|grep -v PID|sort -rn -k +4|head ')
    labels = ['USER','PID','%CPU','%MEM','VSZ','RSS', 'TTY','STAT','START','TIME','COMMAND']
    #content = open('bfb.txt').readlines()
    return render_template('bfb.html', labels=labels, content=m)

最后是什么都有。。。页面
上代码，灵感来源 b站视频搜索《flask疫情可视化》，参考了布局设置

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>疫情监控</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="../static/js/jquery-1.11.1.min.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
<!--    <script src="../static/js/echarts-wordcloud.min.js"></script>-->
    <link rel="stylesheet" href="../static/css/main.css">
</head>
<body>
<video id="v1" autoplay loop muted>
  			<source src="../static/video2.mp4" type="video/mp4"  />
        </video>

    <div id="title">什么都有</div>
    <div id="tim" class="time"><font color="white"></font></div>
    <div id="l1"></div>
    <div id="l2"></div>
    <div id="c1" >
        <h2><font color="white">微博热搜榜</font> </h2>
        <ul class="list_a">
            {% for i in data %}
                        <li>
                <a href="{{ i.url }}">
                    <i class="icon icon_pinned"></i>
                    <span>{{i.title}}<em>{{i.hotness}}</em></span>
                    <i class="icon icon_hot"></i>
                </a>
            </li>
            {% endfor %}
                                </ul>
    </div>
    <div id="c2" ></div>
    <div id="r1">右二</div>
    <div id="r2">
        <center>
        <input type="file" id="inputfile" name="fileContent">
        <svg width="600" height="400"></svg>
        <script src="../static/js/config.js"></script>
        <script src="../static/js/imgs.js"></script>
        <script src="../static/js/color_ranges.js"></script>
        <script src="../static/js/colors.js"></script>
        <script src="../static/js/visual.js"></script>
        <link rel="../static/stylesheet" href="stylesheet.css">
    </center>
<!--        右二-->
<!--<div class="content" id="content">-->
<!--			<span class="change left" id="pre">-->
<!--			&lt;-->
<!--		</span>-->
<!--			<span class="change right" id="next">-->
<!--			&gt;-->
<!--		</span>-->
<!--			<ul class="contentList" id="contentList">-->
<!--				<li><img src="../static/img1.jpg" /></li>-->
<!--				<li><img src="../static/img2.jpg" /></li>-->
<!--				<li><img src="../static/img3.jpg" /></li>-->
<!--				<li><img src="../static/img4.jpg" /></li>-->
<!--			</ul>-->

<!--			<div class="shade">-->
<!--				<ul class="contentRount" id="contentRount">-->
<!--					<li></li>-->
<!--					<li></li>-->
<!--					<li></li>-->
<!--					<li></li>-->
<!--				</ul>-->
<!--			</div>-->
<!--		</div>-->
<!--		<script type="text/javascript" src="js/carous.js">-->
<!--		</script>-->

    </div>
    <script src="../static/js/ec_center.js"></script>
<!--    <script src="../static/js/ec_left1.js"></script>-->
<!--    <script src="../static/js/ec_left2.js"></script>-->
<!--    <script src="../static/js/ec_right1.js"></script>-->
<!--    <script src="../static/js/ec_right2.js"></script>-->
<!--    <script src="../static/js/controller.js"></script>-->
    <script src="../static/js/controller.js"></script>
    <script src="../static/js/ec_left1.js"></script>
    <script src="../static/js/ec_left2.js"></script>
    <script src="../static/js/ec_right1.js"></script>

</body>

</html>


import requests
from bs4 import BeautifulSoup
def wbpq():
    news = []
    # 新建数组存放热搜榜
    hot_url = 'https://s.weibo.com/top/summary/'
    # 热搜榜链接
    r = requests.get(hot_url)
    # 向链接发送get请求获得页面
    soup = BeautifulSoup(r.text, 'lxml')
    # 解析页面

    urls_titles = soup.select('#pl_top_realtimehot > table > tbody > tr > td.td-02 > a')
    hotness = soup.select('#pl_top_realtimehot > table > tbody > tr > td.td-02 > span')

    for i in range(11):
        hot_news = {}
        # 将信息保存到字典中
        hot_news['title'] = urls_titles[i].get_text()
        # get_text()获得a标签的文本
        hot_news['url'] = "https://s.weibo.com" + urls_titles[i]['href']
        # ['href']获得a标签的链接，并补全前缀
        hot_news['hotness'] = hotness[i].get_text()
        # 获得热度文本
        news.append(hot_news)
        # 字典追加到数组中

    return news
@app.route('/smdy')
def smdy():
    return render_template('smdy.html',data=wbspider.wbpq())

这个页面关于js以及css的代码挺多的，就不一一放了

陈彦祖本祖
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui + Flask 使用（01）
CITYDATA
09-13 992
Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用，非常适合网页界面的快速构建。在使用了很久之后，也发现了一些问题。先说优点：layui 采用的是原生的 HTML/CSS/JavaScript 技术开发，上手难度低。layui 有比较非常完善的文档，非常方便入门学习，只要把官方文档全部过一遍，并把提供的案例调试一遍就能快速上手。
管理驾驶舱DashBoard实现方式
09-13
通用的管理驾驶舱实现方式，可钻取，展示方式丰富！
Flask+Layui开发案例教程
最新发布
07-11 345
等技术栈精心打造的一款集模块化、高性能、组件化于一体的企业级敏捷开发框架，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
利用python flask框架和layui模板构建网页
m0_70247753的博客
08-07 1543
本页面写了一个登陆页面和一个查询页面：查询页面有增删改查和导出数据到excel文件的功能登陆页面：loging_myself.html查询页面：query_myself.html后台py文件：query_myself.py使用flask框架首先要创建一个项目，然后再项目中创建虚拟环境，如下，one为我创建的项目，fir是我创建的虚拟环境，写的html文件要放在templates中，这是硬性规定此外，还需要引入。
基于Python搭建Flask+Layui后台管理系统
一米阳光的博客
04-17 1116
一款 Python 语言基于Flask、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
Python后台管理系统Flask+Layui框架搭建教程
一米阳光的博客
04-21 795
一款 Python 语言基于Flask、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
使用Python爬虫+flask+mysql+echarts实现的职业(大数据)管理平台.zip
09-28
1. Python爬虫：Python爬虫是获取网络数据的重要工具。在本项目中，可能使用了如BeautifulSoup、Scrapy等库来抓取与职业相关的大数据，如职位信息、薪资水平、行业动态等。爬虫通过模拟浏览器发送HTTP请求，解析HTML...
Python优秀项目 基于Flask+Bootstrap的运维系统源码+部署文档+全部数据资料.zip
05-25
Python优秀项目 基于Flask+Bootstrap的运维系统源码+部署文档+全部数据资料.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示GPT修改；若...
Python优秀项目 基于Flask+MySQL+bootstrap的信息管理系统源码+部署文档+数据资料.zip
05-25
Python优秀项目 基于Flask+MySQL+bootstrap的信息管理系统源码+部署文档+数据资料.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示GPT修改...
Python优秀项目 基于Flask+MySQL+Bootstrap实现的任务清单管理系统源码+部署文档+数据资料
05-25
Python优秀项目 基于Flask+MySQL+Bootstrap实现的任务清单管理系统源码+部署文档+数据资料 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示GPT...
Python优秀项目 基于Flask+mysql+bootstrap的实验室预约系统源码+部署文档+数据资料.zip
05-25
Python优秀项目 基于Flask+mysql+bootstrap的实验室预约系统源码+部署文档+数据资料.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示GPT...
python + flask + LayUI + mysql 网站模板.zip
05-14
python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql
Java项目:大学生兼职论坛(java+SSM+JSP+jQuery+Layui+mysql)
常年被追砍的博客
05-10 377
源码获取：博客首页 "资源" 里下载！ 项目介绍 该项目是一个大学生校园兼职讨论平台，分为前台和后台功能，主要用户有三种角色：分别是商家、学生、管理员。商家可以发布兼职信息，发布后，管理员进入后台确认信息是否有效，并且审核该兼职信息。学生登录平台后，可以查看兼职信息，并且，可以在线和商家聊天，聊天的内容持久化到mysql数据库中。 该网站还有论坛交流的功能，用户可以在论坛发表贴子，并且，可以在帖子下面回复。论坛版块设置有3块广告区，管理员可以在后台对广告进行增删改查。 整体功能包括：论坛交流，帖子发.
Layui+Pyecharts地图使用
z60015260的博客
06-23 1390
前端使用layui+echarts, 后端用flask+pyecharts，完成页面的地图显示1.引入layui2.引入echarts
flask+layui学生信息管理系统
YHC000001的博客
08-26 494
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
数据分析可视化14 PyEcharts & Flask 框架集成
fegus的博客
10-06 2479
上一节，我介绍了“”的第一课，Python Flask Web 框架基础理论，带你了解了 Flask 框架的主要特性、源码资源、安装部署和基本使用方法。接下来，我会介绍该部分的第二节，，包括 PyEcharts 与 Flask 框架整合的两种方法和数据刷新机制。完整的知识结构如下图所示：图 1：章节知识结构图PyEcharts 与 Flask 整合的方式有两种：前后端混合模式和前后端分离模式。是指前端页面设计和后台服务响应设计糅合在一起，页面内容的渲染由后台程序控制；
利用 Flask 动态展示 Pyecharts 图表数据的几种方法
Python编程与实战的博客
09-03 6949
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法，不会的话你来找我呀… Flask 模板渲染 1. 首先我们新建一个项目 flask-echarts 在编辑器中选择 New Project，然后选择 Flask，创建完之后，Pycharm 会帮我们把启动脚本和模板文件夹都建好 2. 拷贝 pyecharts 模板...
使用flask+echarts+jinja2\ajax画图的方法，画一个牛奶和面包的散点图
chenqiao888666的博客
06-08 553
Flask初始化参数尽量使用你的包名，这个初始化方式是官方推荐的，官方解释：http://flask.pocoo.org/docs/0.12/api/#flask.Flask。函数对模板（html）进行渲染，并允许在render_template函数传入需要传递给模板（html）的变量。DataFrame.to_dict转为字典或列表 to_json转为JSON字符串并解决中文乱码。Flask项目在主函数（app.py）里的视图函数（@route修饰的函数）的返回值中通过。
没有那么难，基于 Echarts + Python Flask 动态实时大屏轻松可以实现
m0_59596937的博客
10-06 5558
支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置好python环境即可。目前开通了技术交流群，群友已超过3000人，添加时最好的备注方式为：来源+兴趣方向，方便找到更快获取资料、入群。方式②、微信搜索公众号：Python学习与数据挖掘，后台回复：大屏。方式①、添加微信号：dkl88191，备注：来自CSDN+大屏。支持在每个echarts图表中独立控制定时更新的间隔。对横跨多个行列的格子定义。
基于flask框架、爬虫的评论分析系统总体规划
05-04
5. 用户交互部分：使用 Flask 框架搭建网站，提供用户交互界面，用户可以输入关键词搜索相关评论，可以看到分析结果的可视化展示，并可以进行互动、评论和留言等操作。 6. 性能优化部分：对系统进行性能优化，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值