数据列表
成员数据、组长数据 以及 开单数据，都是用数据表格展示的，使用了 jsGrid[9] 框架，主要是方便易用。
在页面上定义一个 div，并设置 id，然后用 jsGrid 方法渲染一些就可以了，和简单。
其实在上一节，我们以及看到如何渲染了，需要做的事定义后台 API 接口，通过 Ajax 加载数据就可以了：
$("#jsGrid").jsGrid({ height: '600', width: "100%", editing: false, sorting: false, autoload: true, controller: { loadData: function() { var d = $.Deferred(); $.ajax({ url: "/api/memberdata", }).done(function(response) { d.resolve(response.data); }); return d.promise(); } }, fields: [{'name': '组', type: "text"}, {'name':'昵称', type: "text"}, {'name':'开单', type: "text"}, {'name':'分享', type: "text"}, {'name':'打卡', type: "text"}, {'name':'提问', type: "text"}, {'name':'解答整理', type: "text"}, {'name':'积分', type: "text"}, ] });
controller里的loadData在页面元素绘制完成调用loadData方法返回一个 promise[10]，等数据获取成功之后，会渲染到页面上
那么 组长数据 和 开单数据 是类似的，就不赘述了。
数据接口
Flask 实现后台接口，特别简单，只需要再接口相应方法前，加句注解[11] 就好了，例如 打卡率的接口：
@app.route('/') @app.route('/check_rate') def check_rate(): data = dataSource.show_check_rate(rtype='dict') ret = [['date', '1组', '2组', '3组', '4组', '5组']] for d in data: row = [] for k in d: row.append(d[k]) ret.append(row) return render_template('check_rate.html', title='打卡率', data=ret)
@app.route是个注解，以指定 URL 路径，由check_rate方法做相应dataSource是对上一期数据处理功能的一个封装，调用相应方法，获取数据render_template是 Flask 响应页面合成的方法，第一个参数是模板页面，后面的命名参数是需要替换的数据
打卡率页面的数据，是合成响应页面时提供的，还有一些页面需要前台通过 Ajax 方式获取，接口怎么写呢？
用获取成员数据作为例子：
@app.route('/api/memberdata') def api_memberdata(): data = {'data': dataSource.show_member_score(rtype='dict')} return jsonify(data)
- 通过封装的数据处理类，得到数据
- 调用 Flask 的
jsonify方法将数据作为 json 响应提供给前台
那么，其他的页面响应和数据响应接口是类似的，更详细的代码，见代码示例。
部署
主要的开发工作完成后，就可以部署了。
之前写过 部署 Flask[12]，用的是 uWSGI ，刚好照搬。
如果没有 git 或者 svn 的代码管理，就直接将复制到服务器上，安装 Flask，就可以启动了。
python app.py
没有问题，配置一下 Nginx[13] 的反向代理:
server { listen 80; server_name stc.example.com; access_log /var/log/nginx/access_stc.log main; location / { proxy_buffers 8 1024k; proxy_buffer_size 1024k; proxy_pass http://127.0.0.1:5000; } }
server_name为域名，也就是通过这个地址可以访问到系统的，在此之前需要申请并备案域名[14]location里的 proxy_pass 是服务器上我们的 Web 服务的地址- Nginx 的作用是做一个代理，将通过 stc.example.com 的访问转发到 真实地址上
配置完成之后，重启一下 Nginx 服务，如果没有问题，就可以通过设置的域名访问了。
维护
开发部署完成，还不是真的完成，还需要做运维。
以这个项目为例，运维工作主要有两部分：
- 数据处理
- 服务器维护
只有不断地做数据处理，才能及时更新数据，这个工作对于 Web 系统来说，属于支撑性的，所以没必要让 Web 系统来负责。
在 Linux 系统上，有个 crontab[15] 命令，用它做定时数据数据，好处是开发量少，另外不会因为 Web 系统的问题导致数据处理不及时。
服务器维护，就是保证服务器不会因为异常停止工作，一般使用像 uWSGI 类的服务器都有自维护功能，如果没有使用的话，就需要自己处理了，比如写个监控脚本，当发现服务器不工作时，重启服务，并发送通知。
强烈建议 使用安全的 Web 服务器，特别是在生产环境中
总结
到此，系统的搭建完成了，再也不用我每天为生成报表耗费时间了，可以将更多的时间用在更重要的事情上了。
如果你认真读了，就会发现，每一块的知识技术，都是很简单的，但如何将这些简单的点拼接起来，是需要大量的知识记录和历练的。
而我之所以可以这样做，是因为在这里的长期输出，从最基础的 Web 系统开始，一点一点了解整个 Web 系统需要的基础，当需要完成一个系统时，大部分都是来自平时的积累。
期望这篇文章对你有所启发，一切都源自持续积累，比心！
