【flask学习笔记】flask与HTTP,flask与mongodb交互，用手机输入局域网ip访问flask界面

最新推荐文章于 2024-06-24 04:35:34 发布

march of Time

最新推荐文章于 2024-06-24 04:35:34 发布

阅读量467

点赞数

分类专栏：项目文章标签： flask python mongodb

本文链接：https://blog.csdn.net/qq_41358574/article/details/117845077

版权

项目专栏收录该内容

28 篇文章 2 订阅

订阅专栏

文章目录

引入（关于http)
flask项目的配置

引入（关于http)

当我们在浏览器中的地址栏中输入这个URL，然后按下Enter时，稍等片刻，浏览器会显示一个问候页面。这背后有一个程序运行着。它负责接收用户的请求，并把对应的内容返回给客户端，显示在用户的浏览器上。事实上，每一个Web应用都包含这种处理模式，即“请求-响应循环（Request-Response Cycle）”：客户端发出请求，服务器端处理请求并返回响应，
flask web的工作流程：
在这里插入图片描述
从图中可以看出，HTTP在整个流程中起到了至关重要的作用，它是客户端和服务器端之间沟通的桥梁。当用户访问一个URL，浏览器便生成对应的HTTP请求，经由互联网发送到对应的Web服务器。Web服务器接收请求，通过WSGI将HTTP格式的请求数据转换成我们的Flask程序能够使用的Python数据。在程序中，Flask根据请求的URL执行对应的视图函数，获取返回值生成响应。响应依次经过WSGI转换生成HTTP响应，再经由Web服务器传递，最终被发出请求的客户端接收。浏览器渲染响应中包含的HTML和CSS代码，并执行JavaScript代码，最终把解析后的页面呈现在用户浏览器的窗口中。

flask项目的配置

注：windows防火墙高级配置里面可以新建规则开放端口（不过好像不设置这个也可以访问）
在这里插入图片描述
打开mongodb数据库连接：

mongod.exe --config mongod.cfg
在这里插入图片描述
注意，记录写在了log中，所以什么都不会输出

下面是flask目录：
在这里插入图片描述
与mongodb交互的代码：

from pymongo import MongoClient


class DataBaseManager(object):
    def __init__(self):
    
        client = MongoClient()
        database = client.chapter_4
        self.handler = database.people_info

    def query_info(self):
  
        info_list = list(self.handler.find({'deleted': 0}, {'_id': 0}))
        return info_list

    def _query_last_id(self):
    
        last_info = self.handler.find({}, {'_id': 0, 'id': 1}).sort('id', -1).limit(1)
        return last_info[0]['id'] if last_info else 0

    def add_info(self, para_dict):
   
        last_id = self._query_last_id()
        this_id = last_id + 1
        para_dict['id'] = this_id
        try:
            self.handler.insert_one(para_dict)
        except Exception as e:
            print('插入数据失败，保存信息如下：{}'.format(e))
            return False
        return True

    def update_info(self, people_id, para_dict):
     
        try:
            y = self.handler.update_one({'id': people_id}, {'$set': para_dict})
            print(y)
        except Exception as e:
            print('更新数据错误，报错信息如下：{}'.format(e))
            return False
        return True

    def del_info(self, people_id):
    
        return self.update_info(people_id, {'deleted': 1})


if __name__ == '__main__':
    database_manager = DataBaseManager()

main.py代码：

import json
from flask import Flask, render_template, request
from your_code_here.DataBaseManager import DataBaseManager
from util.Checker import Checker

app = Flask(__name__)
manager = DataBaseManager()
checker = Checker()


@app.route('/')
def index():
    data_list = manager.query_info()
    return render_template('index.html', data_list=data_list)


@app.route('/add', methods=['POST'])
def add_info():
    info = request.json
    if not checker.check_add_fields_exists(info):
        return json.dumps({'success': False, 'reason': '字段不完整'}, ensure_ascii=False)
    fail_reason = checker.check_value_valid(info)
    if fail_reason:
        return json.dumps({'success': False, 'reason': fail_reason}, ensure_ascii=False)
    info['deleted'] = 0
    insert_result = manager.add_info(info)
    return json.dumps({'success': insert_result})


@app.route('/update', methods=['POST'])
def update_info():
    info = request.json
    if not checker.check_update_fields_exists(info):
        return json.dumps({'success': False, 'reason': '字段不完整'}, ensure_ascii=False)
    people_id = checker.transfer_people_id(info['people_id'])
    if people_id == -1:
        return json.dumps({'success': False, 'reason': 'ID必需为数字'})
    dict_tobe_updated = info['updated_info']
   # fail_reason = checker.check_value_valid(dict_tobe_updated)
    #if fail_reason:
     #   return json.dumps({'success': False, 'reason': fail_reason}, ensure_ascii=False)
    update_result = manager.update_info(people_id, dict_tobe_updated)
    return json.dumps({'success': update_result})


@app.route('/delete/<people_id>', methods=['GET'])
def delete(people_id):
    people_id = checker.transfer_people_id(people_id)
    if people_id > 0:
        delete_result = manager.del_info(people_id)
        return json.dumps({'success': delete_result})
    return json.dumps({'success': False, 'reason': 'ID必需为数字'})

template下面是html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大创开支记录</title>
    <link rel="stylesheet" href="{{url_for('static', filename='css/spectre.min.css')}}">
    <script src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
</head>
<body>
<div class="container">
    <div class="columns">
        <div class="column col-8 col-mx-auto">
            <header class="navbar">
                <section class="centered">
                    <div class="navbar-brand mr-2"><h2>大创开支记录</h2></div>
                </section>
            </header>
        </div>
    </div>
    <div class="columns">
        <div class="col-10 col-mx-auto">
            <div class="card">
                <div class="card-body">
                    <div class="col-12">
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>下单同学</th>
                                <th>物品</th>
                                <th>收货日期</th>
                                <th>订单价格</th>
                                <th>订单备注</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for data in data_list %}
                            <tr>
                                <td class="id" rowindex="{{data['id']}}">{{data['id']}}</td>
                                <td class="name" rowindex="{{data['id']}}">{{data.name}}</td>
                                <td class="age" rowindex="{{data['id']}}">{{data.age}}</td>
                                <td class="birthday" rowindex="{{data['id']}}">{{data.birthday}}</td>
                                <td class="origin-home" rowindex="{{data['id']}}">{{data.origin_home}}</td>
                                <td class="current-home" rowindex="{{data['id']}}">{{data.current_home}}</td>
                                <td>
                                    <button class="btn btn-success" name="edit_this_info" rowindex="{{data['id']}}">编辑
                                    </button>
                                    <button class="btn btn-error" name="delete_this_info" rowindex="{{data['id']}}">删除
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="col-12" style="margin-top: 15px">
                        <button class="btn btn-success centered" id="open_add_modal">添加商品</button>
						 <button class="btn btn-success centered" id="cal_info" onclick="display()">计算总价</button>
                    </div>
                </div>
            </div>
            <div class="modal" id="modal_edit_info">
                <a href="#close" class="modal-overlay" aria-label="Close"></a>
                <div class="modal-container">
                    <div class="modal-header">
                        <div id="close_edit_modal" class="btn btn-clear float-right" aria-label="Close"></div>
                        <div class="modal-title h5">编辑信息</div>
                    </div>
                    <div class="form-horizontal">
                        <div class="modal-body">
                            <div class="content">
                           
                                    <div class="form-group">
                                        <div class="col-3 col-sm-12">
                                            <label class="form-label" for="edit-name">序号</label>
                                        </div>
                                        <div class="col-9 col-sm-12">
                                            <input class="form-input" type="text" id="edit-id">
                                        </div>
                                    </div>
                      
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="edit-name">学生姓名</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input class="form-input" type="text" id="edit-name" placeholder="姓名">
                                    </div>
                                </div>
                   
                                    <div class="form-group">
                                        <div class="col-3 col-sm-12">
                                            <label class="form-label" for="edit-age">物品</label>
                                        </div>
                                        <div class="col-9 col-sm-12">
                                            <input class="form-input" type="text" id="edit-age" placeholder="物品">
                                        </div>
                                    </div>
                        
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="edit-birthday">收货日期</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input class="form-input" type="text" id="edit-birthday" placeholder="收货日期">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="edit-origin-home">订单价格</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input class="form-input" type="text" id="edit-origin-home" placeholder="订单价格">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="edit-current-home">订单备注</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input class="form-input" type="text" id="edit-current-home"
                                               placeholder="订单备注">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success centered" id="update_info">更新</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal" id="modal_add_info">
                <a href="#close" class="modal-overlay" aria-label="Close"></a>
                <div class="modal-container">
                    <div class="modal-header">
                        <div id="close_add_modal" class="btn btn-clear float-right" aria-label="Close"></div>
                        <div class="modal-title h5">添加信息</div>
                    </div>
                    <div class="form-horizontal">
                        <div class="modal-body">
                            <div class="content">
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="input-name">姓名</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input name="name" class="form-input" type="text" id="input-name"
                                               placeholder="姓名">
                                    </div>
                                </div>
                           
                                    <div class="form-group">
                                        <div class="col-3 col-sm-12">
                                            <label class="form-label" for="input-age">物品</label>
                                        </div>
										  <input name="birthday" class="form-input" type="text" id="input-age"
                                               placeholder="物品">
                                    <!--     <div class="col-9 col-sm-12">
                                            <input name="age" class="form-input" type="text" id="input-age"
                                                   placeholder="年龄:根据生日自动计算">
                                        </div> -->
                                    </div>
                       
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="input-birthday">收货日期</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input name="birthday" class="form-input" type="text" id="input-birthday"
                                               placeholder="收货日期">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="input-origin-home">订单价格</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input name="origin_home" class="form-input" type="text" id="input-origin-home"
                                               placeholder="订单价格">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-3 col-sm-12">
                                        <label class="form-label" for="input-current-home">备注</label>
                                    </div>
                                    <div class="col-9 col-sm-12">
                                        <input name="current_home" class="form-input" type="text"
                                               id="input-current-home"
                                               placeholder="备注">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success centered" id="add_info">添加商品</button>
                        </div>
						
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{url_for('static', filename='js/operation.js')}}">

</script>
</body>
</html>

进入该目录下输入：set FLASK_APP=main.py
flask run --host=0.0.0.0 --port=8000
在这里插入图片描述
然后手机浏览器输入ip即可访问：

点击添加按钮，可以发现成功添加了数据。

march of Time

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
【flask学习笔记】flask与HTTP,flask与mongodb交互，用手机输入局域网ip访问flask界面

文章目录引入（关于http)flask项目的配置引入（关于http)当我们在浏览器中的地址栏中输入这个URL，然后按下Enter时，稍等片刻，浏览器会显示一个问候页面。这背后有一个程序运行着。它负责接收用户的请求，并把对应的内容返回给客户端，显示在用户的浏览器上。事实上，每一个Web应用都包含这种处理模式，即“请求-响应循环（Request-Response Cycle）”：客户端发出请求，服务器端处理请求并返回响应，flask web的工作流程：从图中可以看出，HTTP在整个流程中起到了至关重要
复制链接

扫一扫

专栏目录