我的前端转行之路

一次并不成功的仓储请领系统设计2018/02

2019-03-23  本文已影响0人  千茉紫依

近期,用了将近一个月的时间,完成了一个仓储请领系统的设计,功能包括购物车、excel自动生成打印、系统内搜索、多用户访问和流程控制。虽然完成了所有功能,但是一方面由于php,jquery,css和html都写在了一起,一个页面多达千行,另一方面由于数据库设计的不合理,导致整个系统难以维护,几乎变成了一个一次性的玩意,教训极为深刻。我觉得很有必要总结一下。

技术栈 php+mysql+jquery

1、购物车:购物车涉及到跨页数据交换问题,前端之间数据交换两种方法:cookie和localStorage,前端向后端传递数据有一种方法:submit,后端向前端传递数据有一种方法:echo,后端之间传递数据两种方法:数据库与session。localStorage是h5的新特性,调用和维护十分方便,cookie应用时间比较久,更加成熟,操作起来就是简单赋值。开始我很天真的选择使用cookie保存购物车数据,选用localStorage维护登录用户,cookie还好,除了url和json编码解码经常被绕晕之外一切顺利,localStorage就很无语了,因为涉及到大量后台操作,我测试发现php根本不支持localStorage,所以取得登录用户之后几乎每个页面都必须要设计一个隐藏的form来submit给后端,十分肉痛。事后想想,其实除了主界面使用静态页面提高响应速度之外,其他的界面应该统一标准,使用session统一管理就没有这些问题了。还有就是图省事,没解码把购物车json数据直接丢数据库里了,导致购物车数据库结构只有我能看懂,估计过几个月连我也看不懂了,悲剧。


请领界面
cookie中保存的购物车数据 localStorage中保存的用户登录信息 购物车界面 购物车数据库,cart项居然是个json,也不知道当时怎么想的

2、excel自动生成打印:管理员审核通过之后,可以自动生成申请单。这个主要是链接数据库,调用phpexcel类库,按照公文格式设置excel,比较简单。最复杂的是根据流水单号生成条形码,我使用的是国际通用的39号条形编码,(听起来高大上,但是很简单,对着官网API抄就行了,根本不需要理解为什么叫39),生成条形码的思路就是在phpexcel类库中把流水单号先转成图片格式,存在本地,然后再插入到excel中去,因为网上基本上没有这方面资料,就是凭着感觉试,还好试成功了。下图的红框是关键步骤。还有一个坑点就是为了图省事,我流水单号用的是中文的,因为好识别嘛,一看就知道是谁,然后过程中转码之蛋疼,谁试谁知道,“二维码最好用英文或数字来编码”,这是多么痛的领悟。。。


点击请领后进度条刷新,此处可生成excel表格 自动生成的excel,已经输入好了所有信息 生成excel中调用数据库的关键代码 设置excel格式 自动合成的条形码图片 插入条形码图片的关键步骤 中文条形码的操作极为不便

3、搜索功能:界面很简单就是类似于百度那样,一个奇丑无比的长方形框。原理也不难,如果搜索本地数据库,使用ajax链接数据库,

SELECT * from table where 
concat(ifnull(type,''),ifnull(name,''),ifnull(director,''),ifnull(state,''),
ifnull(unit,''),ifnull(place,'')) like'%".$inputData."%'  ;  

关键在于使用concat(ifnull()),这样可以对多个字段进行模糊查询,

concat(ifnull())控制返回搜索结果的数量,使用like %控制搜索规模。如果搜索全网,就要使用jsonp设置callback来接收数据,如果能链接到外部网络,就能让用户用百度来搜索他们想要的数据。如下图,用百度搜索我的名字,百度用了160毫秒返回一个名叫jQuery18208871294147486224_1513418664343的结果,其中包含10个搜索结果,结果被封装为一个叫做s的数组,那么你使用event.data.s就可以了。

使用jsonp跨域调用百度

4多用户访问和流程控制:对于涉及到多种操作的后端界面,我建议每次提交都交给自己,然后在php中设置判断,这能有效减轻工作量,缺点就是代码太长,不好维护,仁者见仁吧。还有就是美工问题,就是那个绿的进度条,css中的背景定位position和float简直是两大神坑,变化太多又找不到规律,按书上给的公式算又不准,无比纠结,如下图,你们应该知道我经历了什么吧。

流程控制 多类型响应的自身调用 对于position的无奈
上一篇 下一篇

猜你喜欢

热点阅读