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

首先看一下示例图，按顺序以下页面称首页，什么都有（乱取的），登录页，资源管理

开始。
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 codecode = 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"])#发送邮件到recipientssj_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().percentcpu = 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的代码挺多的，就不一一放了

flask+echarts+pyecharts+layui+bootstrap+爬虫 flask快速搭建学习相关推荐

【期末大作业】二手房Python爬虫+Flask前端展示+Echarts可视化大项目
目录前言一.项目目标二.使用工具三.结果展示总结前言爬虫 :一段自动抓取互联网信息的程序,从互联网上抓取对于我们有价值的信息. Python 爬虫架构主要由五个部分组成,分别是调度器.U ...
Python之flask结合Bootstrap框架快速搭建Web应用
目录前言安装bootstrap扩展模板的继承总结前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
python之疫情监控（爬虫+可视化）主要技术（Python+Flask+Echarts）
项目准备简介基于Python+Flask+Echarts打造一个疫情监控系统,涉及技术有: Python爬虫使用Python与Mysql数据库交互使用Flask构建Web项目基于Echart ...
（毕设1）爬虫+mysql+flask+echarts实现网站数据可视化(附源码)
目录 1. 项目要求与内容 ?2.数据爬取 2.1分析url,网页源码 2.2编写代码 2.3 数据清洗 3.数据存储 3.1?mysql中需要建立的6张表 3.2 建表语句 3.3将2中清洗后的数据 ...
人生苦短，我用Python（五）—通过Flask结合Bootstrap框架快速搭建Web应用-2
写在前面: Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http ...
python爬虫+Flask可视化展示
python爬虫+Flask可视化展示废话不多说直接上代码,详细解释,让小白也能操作爬虫部分(含有json请求返回的价格,销售量,好评率,评论等) 爬去某东笔记本电脑920页,每页60条自己算 # ...
基于Flask快速搭建一个管理系统
1. 用到的技术 1.1 导模块 from flask import Flask, render_template, jsonify, redirect, request, url_for, sess ...
Flask框架快速搭建疫情打卡系统
戏说一切还是得从一只蝙蝠说起.在家好好看番剧不香吗?吃啥蝙蝠?ToT,前几天导师问我做不做这个疫情打卡系统,哎~!我又不会那个什么Flask框架为啥找我,我就会个微信小程序还是特简单那种.没 ...
E3【数据可视化】【组件】基于Python+Flask+Echarts+HTML5拖放(DragDrop)实现的可拖放布局并自动保存布局的动态饼图
目录一. 效果展示二. 实现思路所需知识点三. 系统架构四. 关键代码 1. 页面div布局 2. 布局拖放 drag drop 处理 3. 布局保存 4. Python Flask web ...

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

flask+echarts+pyecharts+layui+bootstrap+爬虫 flask快速搭建学习相关推荐

最新文章

热门文章