當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/9/30 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了【flask学习笔记】flask与HTTP,flask与mongodb交互，用手机输入局域网ip访问flask界面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

引入（關于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 MongoClientclass DataBaseManager(object):def __init__(self):client = MongoClient()database = client.chapter_4self.handler = database.people_infodef query_info(self):info_list = list(self.handler.find({'deleted': 0}, {'_id': 0}))return info_listdef _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 0def add_info(self, para_dict):last_id = self._query_last_id()this_id = last_id + 1para_dict['id'] = this_idtry:self.handler.insert_one(para_dict)except Exception as e:print('插入數據失敗，保存信息如下：{}'.format(e))return Falsereturn Truedef 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 Falsereturn Truedef 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 Checkerapp = 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.jsonif 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'] = 0insert_result = manager.add_info(info)return json.dumps({'success': insert_result})@app.route('/update', methods=['POST']) def update_info():info = request.jsonif 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

然后手機瀏覽器輸入ip即可訪問：

點擊添加按鈕，可以發現成功添加了數據。

總結

以上是生活随笔為你收集整理的【flask学习笔记】flask与HTTP,flask与mongodb交互，用手机输入局域网ip访问flask界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【练习】2021下半年数据结构刷题笔记和
下一篇：【java学习】常用实体类--Strin