当我们在浏览器中的地址栏中输入这个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代码，最终把解析后的页面呈现在用户浏览器的窗口中。
注：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即可访问：
点击添加按钮，可以发现成功添加了数据。