前言
家里宝宝目前幼儿园小班，谈话的时候经常问她的也就是今天玩了什么、学了什么、吃了什么等。这其中最容易检验答案的就是“吃了什么”，因为有幼儿园官方主页的每日伙食菜单可以对照。其他的只能在家长群里交流了解。
但幼儿园官网的菜单有个明显缺点——只能查看当前一个星期的，没法查看历史数据。正好现在接触Python比较多，于是很自然地有了爬取菜单保存到数据库的想法。那既然保存了吧，就再搭个web服务展示出来吧；既然要弄网页吧，那干脆放到公众号里吧。于是有了这个“幼儿园伙食菜单”迷你项目。
主要呢自己也能通过“幼儿园伙食菜单”项目接触下bootstrap和微信公众号平台，复习下Django。github地址：https://github.com/zhangjizhong-86/kinder_foods
效果预览
最终成品是个看上去很简洁的一个网页，默认高亮显示当天菜单，也可以通过日期选择器选择日期，显示对应日期的幼儿园伙食。
环境
- Debian 9 x64
- python 3.7.0
- mysql Ver 15.1 Distrib 10.1.37-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2
- Django 2.0.7
项目目录结构
主要目录和文件，不重要的或没用上的就不列出了。
kinder_foods
│ bosva_menu.log # 日志
│ bosva_menu.py # 采集脚本
│ manage.py # django脚本
│
├─menu # django
│ │ views.py # 视图文件
│ │
│ ├─static
│ │ ├─css
│ │ │ bootstrap-datetimepicker.css等
│ │ ├─fonts
│ │ │ glyphicons-halflings-regular.eot等
│ │ └─js
│ │ │ bootstrap-datetimepicker.js等
│ │ └─locales
│ │ bootstrap-datetimepicker.zh-CN.js等
│ │
│ ├─templates
│ │ menu.html # 网页模板
│
└─menu_server # django项目
│ settings.py
│ urls.py
数据采集
首先需将菜单从网页上爬下来，bosva_menu.py完成这个任务，其中的函数说明：
- load_html: 爬取菜单，组织数据结构
利用requesets和BeautifulSoup，没什么好多说的，网上关于爬虫的内容很多，这里也是很基础的内容：
def load_html(url):
r = requests.get(url)
html = r.content
soup = BeautifulSoup(html, "html.parser")
...（略）
- db_connect: 连接本地数据库
我比较习惯把数据库连接过程单独封装在一个函数里，通过函数返回连接对象。
def db_connect(host='localhost', user='root', password='pass', db='test', charset='utf8'):
return pymysql.connect(host=host,
user=user,
password=password,
db=db,
charset=charset,
cursorclass=pymysql.cursors.DictCursor)
- to_database: 写入数据库
写入时忽略已存在的数据（insert ignore ...），返回写入的条数。
def to_database(row, conn):
with conn.cursor() as cur:
insert_sql = '''insert ignore into kinder_foods values (%s,%s,%s,%s,%s)'''
rows_affected = cur.executemany(insert_sql, row)
conn.commit()
return rows_affected
- log: 记录日志
简单的日志记录函数，当然还是推荐使用Logger，这里偷懒了。
def log(log, file):
with open(file, 'a', encoding='utf8') as f:
print('[' + datetime.now().strftime('%Y-%m-%d %H:%M:%S') + ']' + log, file=f)
代码均只展示主要部分，省略异常处理等细节
定时执行采集任务
网页上的菜单每周更新，但不确定确切时间，干脆每天运行bosva_menu.py吧（所以插入数据的时候使用insert ignore）
crontab -e
58 6 * * * cd /root/bosva_menu && /root/.pyenv/shims/python bosva_menu.py
每天的UTC6:58（北京时间14:58）执行爬取脚本
Django项目
在当前路径下新建项目
django-admin.py startproject menu_server .
允许IP访问
settings.py中将服务器的IP和域名加入ALLOWED_HOSTS
ALLOWED_HOSTS = ['XX.XX.XX.XX','domain-name.com']
模板（templates）
模板文件menu.html，使用bootstrap框架和bootstrap的日期选择器。
选择日期后通过ajax更新菜单表格<tbody>。
<body>里的内容包括两部分：
- 日期选择器
bootstrap datetimepicker提供了一些样例，稍加修改即可。
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">选择日期</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
</fieldset>
</form>
</div>
- 菜单表格
class=table-responsive使表格具备自宽度适应功能。
<tbody>标签下留白，留给ajax更新。
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">日期</th>
<th class="text-center">早点</th>
<th class="text-center">午餐</th>
<th class="text-center">午点</th>
<th class="text-center">体弱儿营养菜</th>
</tr>
</thead>
<tbody id='menu'>
</tbody>
</table>
</div>
引用部分
引用bootstrap 3.3.7、bootstrap datetimepicker、jquery
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/bootstrap-datetimepicker.min.css" media="screen">
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
以及适配移动终端
加入viewport适配移动终端，否则在高分屏上字体非常小。更多viewport参考：https://www.cnblogs.com/2050/p/3877280.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8" >
模板主要js脚本
- dom ready后执行do_ajax，初始化日期选择插件，定义日期改变事件触发ajax，向后台POST参数new_query_date
<script type="text/javascript">
$(document).ready(function(){
do_ajax(today());
$('.form_date').datetimepicker({
// 初始化日期选择器
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_date').datetimepicker().on('changeDate', function(e) {
// 选择日期发生变化
let new_query_date = $('.form-control').val();
// 通过AJAX发送新的请求，参数为选择的日期
do_ajax(new_query_date);
});
});
</script>
- do_ajax负责发起查询，携带查询日期，成功获得返回值后更新menu的html
function do_ajax(query_date)
{
// AJAX POST，携带查询日期，根据返回JSON更新菜单tbody
$.post("/ajax/",
{'query_date': query_date, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
function(data, status){
for (let query_date_return in data) {
menu = data[query_date_return];
if (status == 'success' & menu != null) {
let html;
for (let date in menu) {
if (query_date_return == date) { html += '<tr class="success"><th class="text-center">' + date + '<br>' + getWeekday(date) + '</th>'; } // 该日期与查询日期一致，高亮显示
else { html += '<tr><th class="text-center">' + date + '<br>' + getWeekday(date) + '</th>'; }
let meals = menu[date];
for (let meal in meals) {
let dishes = meals[meal];
html += '<td class="text-center">' + dishes + '</td>'; //菜品
}
html += '</tr>'
}
$("#menu").html(html);
} else { alert('这个日期没有数据哦！'); } //查询的日期没有数据
}
});
}
视图（views）
最主要的是ajax函数（ajax请求会被路由到这个函数），当前端ajax请求传递查询日期后，从数据库查询结果，并组织成一个数据结构，以json形式返回。
def ajax(request):
if request.method == 'POST':
# 获取页面请求的日期，如果没有，则默认为当前日期（UTC+8）
# 页面时区以浏览器自动调整
query_date = request.POST.get('query_date', datetime.now(timezone(timedelta(hours=8))).strftime('%Y-%m-%d'))
query_date_menu = db_query(query_date)
for k, v in query_date_menu.items():
date_in_subquery = k
menu = v
if menu:
menu_sort = sort(menu)
query_date_menu[date_in_subquery] = menu_sort
data = json.dumps(query_date_menu) # 如果没有查询到相应日期的菜单, menu==None -> data==null
return HttpResponse(data, content_type='application/json')
服务器后台运行
nohup python manage.py runserver 0.0.0.0:80 &
域名申请
网上搜索了一番，最终用优惠在namesilo花$5.99申请了一个还算看得上眼的.com域名，配置域名解析到服务器IP地址。
如果有需要域名的，欢迎使用本人的优惠注册链接或使用优惠码“WORTHAMILLION”。
微信公众号
个人用户可以开通公众号中的订阅号，在管理-素材管理中新建图文消息，在原文链接中粘贴网页地址，这样在点击阅读原文后就能实现跳转。
如果网站没有备案，或端口不是标准端口（80），微信内置浏览器会对页面进行转换，页面上的js和css会不正常，所以建议申请.com域名+部署在80端口。
设置添加公众号、按需回复和点击菜单，均回复新建的图文消息。这部分都是网页操作，就不详述了。
订阅号效果
进入订阅号，回复“菜单”或点击“每日菜单”：
点击图文消息：
原文链接，可横向滚动：
