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

女爷i 2022-10-06 08:58 19阅读 0赞

### 文章目录 ###

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

# 引入（关于http) #

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

# flask项目的配置 #

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

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

下面是flask目录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 4]  
与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>
                           
                                    <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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 5]  
然后手机浏览器输入ip即可访问：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 6]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 7][]  
点击添加按钮，可以发现成功添加了数据。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]: /images/20221005/c7d1003e17494852b345e896a013da35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]: /images/20221005/603750208aa34cc3b6412c1a7293d05b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 2]: /images/20221005/506036908bd2428c9077200b731eb29c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 3]: /images/20221005/ea76a2ef43eb42b2bb1aa18c704e98d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 4]: /images/20221005/21d8ecd9c48440829a2171779b902a4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 5]: /images/20221005/bfe9e178e5e340d486bd6d9b9f360cce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 6]: /images/20221005/6ef377fff0974633a4e5e254f52d131e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 7]: /images/20221005/540e1c4d6eb64aeaa11ace4cf6a0e274.png