背景
应同学的要求帮忙做一个他们自己店铺的退货功能,需求很简单,考虑自己也想试试用web来开发下小功能,就试了试。
需求
店铺有多个员工,原本店长(同学)把每天要退货的“订单号”“退货内容”“是否已收货”“签收员”“收货时间”放在excel中,然后不同的人收到货之后设置下“已收货”。如果每人一个excel,那么就会出现不同步,最后统计时很麻烦。
思路
使用mysql作为数据中心,然后提供一个界面给员工操作,其实很简单。
方案一
使用C/S界面,我一般都用mfc/qt 来开发小工具,所以直接就使用mfc来开发客户端,花费了1天的时间,功能基本完成,截图如下,丑是丑了点,但好歹用起来没什么问题
如果仅仅这样子就无法满足我的初衷了,我是要用web来做UI的。
方案二
使用B/S开发,linux服务端可以选择用C++、go、python等语言开发,但我打算用openrestry+lua脚本来开发。
总体大概思路:web端发起http请求给openresty, openresty通过lua脚本集成mysql驱动获取数据通过http返回请求。
因为主要是报表的功能,所以需要选择一个js的报表库,我使用的是jsgrid,这个我是随便选的。1
2
3
4
5http://js-grid.com/
Lightweight Grid jQuery Plugin
jsGrid is a lightweight client-side data grid control based on jQuery.
It supports basic grid operations like inserting, filtering, editing, deleting, paging,
and sorting. jsGrid is flexible and allows to customize its appearance and components.
step 1
花费半天时间学习jsgrid,网站有demos、api文档介绍,半天时间总算知道如何通过静态数据进行一些报表的操作。
step 2
openrestry 学习。 几年前接触过,所以用起来还算可以,虽说只有简单的几个sql数据但我对lua不熟悉,调试花费了很多时间,一个下午的时间差不多也弄完了。
step 3
通过http请求数据到jsgrid中。其中功能优化、调试大概又花费了半天
step 4
线上真实数据测试。历史数据大概3000条,一次性请求按原来的逐条jsgrid insetitem 方法太慢(3000条需要1分钟),然后再仔细查看api文档、demo、issues 找到了方法一次性插入所有数据,问题解决,花费半天时间。1
$("#jsGrid").jsGrid("option", "data", lists);
效果如下
大体功能应该完成了,自己也熟悉了web的界面开发。
注意点
jsgrid 报表在手机app上显示有个问题,就是如果autoload时如果没数据的化,手机app是无法滑动报表表头的,
只有有数据时才能滑动,所以应该把关键的filter 列放在无数据时也能操作的地方。
代码
又重新写了一遍代码,比原来简单多了
lua
1 | local cjson = require "cjson" |
js
1 | <!DOCTYPE html> |