Flask+Bootstrap展示MM图片在网页上,从而更好地挑选富婆??

Posted Python王者之路

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flask+Bootstrap展示MM图片在网页上,从而更好地挑选富婆??相关的知识,希望对你有一定的参考价值。

Flask+Bootstrap展示MM图片在网页上,从而更好地挑选富婆??

前言

  • 哎呀呀,好久没更新公众号了,趁着今天是1024节,我们的节日,来庆祝一下吧,祝各位大佬节日快乐呀~~
  • 今年的程序员节可真是特殊的一年呢: 2020-1024=996
  • 言归正传,本次的分享是基于我前面两篇推文的,这篇已经是第三篇啦,小伙伴们可以按顺序观看更佳哦,(获取数据-分析数据-展示数据)这个完整项目算是收尾了:


需求分析

我想要的展示MM图片的一个效果是这样的:每个MM的昵称、年龄、城市、颜值分数和座右铭以及原来的交友网址放在一个卡片上,来展现在页面上,大概如下图:

开始敲代码

1.编写前端html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

三个筛选条件的表单代码:

<form class="needs-validation" action="/" method="POST">
    <div class="form-row">
    <div class="col-md-3 mb-3">
      <select name="age" class="custom-select" id="age">
        <option selected disabled value="">请选择年龄区间:</option>
        <option value="18-25">18岁~25岁</option>
        <option value="26-30">26岁~30岁</option>
        <option value="31-40">31岁~40岁</option>
        <option value="41-50">41岁~50岁</option>
        <option value="51-100">51岁以上</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <select name="face" class="custom-select" id="face">
        <option selected disabled value="">请选择颜值区间:</option>
        <option value="80-100">80分以上</option>
        <option value="60-80">60分~80分</option>
        <option value="40-60">40分~60分</option>
        <option value="30-40">30分~40分</option>
        <option value="0-20">20分以下</option>
      </select>
    </div>
      <div class="col-md-3 mb-3">
      <select name="area" class="custom-select" id="area">
        <option selected disabled value="">请选择地区:</option>
        <option value="广东">广东省</option>
        <option value="四川">四川省</option>
        <option value="湖南">湖南省</option>
        <option value="湖北">湖北省</option>
        <option value="广西">广西省</option>
      </select>
    </div>
      <button style="height:38px" type="submit" class="btn btn-outline-primary">查询</button>
    </div>
</form>

从后端获取的图片等数据并展现在小卡片上的代码如下:

<div class="row row-cols-1 row-cols-md-3">
      {% for item in data %}
      <div class="col mb-4">
        <div class="card h-100">
          <img src="data:;base64,{{ item.get('img')}}" class="card-img-top" alt="...">
          <div class="card-body">
            <p class="h5">{{ item.get('name')}}&nbsp;&nbsp;{{ item.get('age')}}岁&nbsp;&nbsp;{{ item.get('area')}}&nbsp;&nbsp;P{{ item.get('how') }}&nbsp;&nbsp;{{ item.get('score') }}分</p>
            <p class="card-text">座右铭:{{ item.get('content')}}</p><br>
            <a href="{{ item.get('url') }}" class="btn btn-primary" target="_blank">详细资料</a>
          </div>
        </div>
      </div>
      {% endfor %}
</div>

2.编写Python后端

如果一个查询里面数据太多,请求的时间就会变得非常慢,针对这个问题,采用了分页查询,从而提高请求的速度,在app.py文件中写了两个路由,第一个路由函数即下面是处理第一次筛选条件的请求:

@app.route('/',methods=['POST','GET'])
def index():
    '''
    num:控制分页查询
    formdata:记录表单内容,使得下一页的请求是上一次的表单
    flag:控制下一页按钮的显现或隐藏
    '''

    global num,formdata,flag
    if request.method == 'POST':
        num=0
        flag=False
        formdata=request.form
        db=mysql(formdata.get('age'),formdata.get('face'),formdata.get('area'),num)
        count,data=db.get_items()
        if count == 20:
            num=1
            flag=True
        else:
            flag = False
        result=[]
        if count != 0:
            for i in data:
                name,address,age,image,url,motto,score=i
                image=image.split(','if image is not None else []
                if image != []:
                    for how,each in enumerate(image):
                        with open(each,'rb'as f:
                            img = base64.b64encode(f.read()).decode('utf-8')
                            result.append({'name':name,'age':age,'area':address,'img':img,'content':motto,'url':url,'how':how+1,'score':score})
            db.db_close()
            return render_template('index.html',data=result,flag=flag)
        else:
            return render_template('index.html',flag=flag)
    else:
        flag=False
        return render_template('index.html',flag=flag)

第二个路由函数是接收并处理下一页请求的:

@app.route('/next',methods=['GET'])
def next():
    global num,flag
    if formdata is not None:
        db=Mysql(formdata.get('age'),formdata.get('face'),formdata.get('area'),num)
        count, data = db.get_items()
        if count == 20:
            num+=1
        else:
            flag=False
        result = []
        if count != 0:
            for i in data:
                name, address, age, image, url, motto, score= i
                image = image.split(','if image is not None else []
                if image != []:
                    for how,each in enumerate(image):
                        with open(each, 'rb'as f:
                            img = base64.b64encode(f.read()).decode('utf-8')
                            result.append({'name': name, 'age': age, 'area': address, 'img': img, 'content': motto, 'url': url,'how':how+1,'score':score})
            db.db_close()
            return render_template('index.html', data=result,flag=flag)
        else:
            return render_template('index.html',flag=flag)
    else:
        return render_template('index.html',flag=flag)

最后,接收前端页面发送的筛选条件,查询数据库中对应的数据并返回给前端,mysql.py文件的代码如下:

import pymysql

class Mysql(object):
    def __init__(self,age,face,area,num):
        self.conn = pymysql.connect(host='localhost',user='',password='',database='',charset="utf8")
        self.cursor = self.conn.cursor()  # 游标对象
        self.age=[int(i) for i in age.split('-')] if age is not None else None
        self.face=[int(i) for i in face.split('-')] if face is not None else None
        self.area=area
        self.num=num

    def get_items(self):
        sql = 'select name,address,age,img_path,url,motto,score from youyuan where'
        if self.age is not None#是否筛选了年龄
            sql+=f' age between {self.age[0]} and {self.age[1]} and'
        if self.face is not None#是否筛选了颜值
            sql+=f' score between {self.face[0]} and {self.face[1]} and'
        if self.area is not None#是否筛选了地区
            sql+=f' address like "{self.area}%" and'
        if sql != 'select name,address,age,img_path,url,motto,score from youyuan where':
            self.cursor.execute(sql[:-4]+f' limit {self.num*20},20')
            data=self.cursor.fetchall()
            return len(data),data
        else:
            self.cursor.execute(sql[:-6] + f' limit {self.num*20},20')
            data = self.cursor.fetchall()
            return len(data), data

    def db_close(self):
        self.cursor.close()
        self.conn.close()

结果展示

运行程序之后,打开浏览器输入:http://127.0.0.1:5000,选择年龄、颜值和城市之后,点击查询,即可查到对应的MM信息,之后就可以愉快地寻找富婆啦~

录屏是真的难弄,把视频转换成gif,然而上传图片的大小不能超过5MB,于是我只能调快了播放倍速,看着好像有点闪眼哈哈哈哈哈嗝~

不足的地方

  • 使用百度的API来得到颜值的分数,虽然个人感觉API的审美还算可以,并且还是无限次数调用,但是免费的QPS实在太低,试过用多线程去请求获取图片的颜值,请求太快会拿不到数据,最终还是慢慢地去调用,真的太卑微了,幸好图片也不是很多吧,6000+条记录,大概有10000张图片。
  • 由于前端的知识不够,导致页面太过于简陋,只有几个简单的按钮,想弄那种高大上的弄不出来。。。以后再研究研究吧,功能到位了就行,其实我的要求并不高哈哈~
  • 还有就是 Flask的知识也不够全面,很多模块应该是有现成的,我硬是自己来实现了哈哈!感觉在重复造轮子,后面需要再全面地去了解和使用 Flask才行。

写在最后

工作实在是太忙了,根本没时间去弄别的东西呀!!感觉我已经嗅到了“社畜”的味道了。不过,我一有时间,还是会继续更新下去的,继续去探索未知~

以上是关于Flask+Bootstrap展示MM图片在网页上,从而更好地挑选富婆??的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Flask展示特定文件中的所有图像?

Flask保存图片与展示

Flask+爬虫,做道“新闻”小菜

第一个python爬虫——保存淘宝mm图片

简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页

SpringBoot如何修改网页标签上展示的小树叶