我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

写在前面

最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

截图

上半部分截图

快速查询与快递单号

快速查询

之前写过的一篇文章<a href="http://www.jianshu.com/p/8f971a78b808">简书搜索自动匹配功能</a>其实就是这个功能,只不过我这里查出来的数据是动态的而已,并且点击可以跳转到不同的模块查看。大家去看那篇文章就可以了,这里不再赘述了。

快递单号

这个功能其实跟快速查询的功能差不多,无非就是js,css,ajax这些基本的web前端知识,只不过多了一些判断,样式的排版,监听事件而已。物流信息使用li标签实现的,需要注意的一点是:物流信息左侧的线条是要计算的,每个运单号物流信息量是不同的,不然线条不完整了,因为每条物流信息都是追加上去的,所以可以这样计算:

var h = $("ul li:first-child").height();//第一个li的高度 $(".line").css("top",h/2); $(".line").height($("ul").height()-h);

大概实现就是下图这个样子:

我的待办

我的待办也是通过ajax获取数据,用li标签显示,有具体数字表示待办事件的数量,数字为红色,点击进入到具体的事项处理界面,显示具体数据(数据已经自动查询加载),”0“表示无待办事件,数字为黑色,点击进入相关界面,无数据显示;每处理一条数据减1,每新增一条数据加1。然后就是加了权限控制,不同的人看到的待办数量自然不同。

事物办理与信息查询

刚开始以为里面的都是写死的,用a标签写几个菜单就完事了。做完之后,需求改成:菜单要从第三方库获取,于是傻不拉几的写了个SDK,只有坐等数据再改了。。。。而且做完之后发现li标签在不同设备适配有问题,于是索性改成了表格。

公告通知

公告通知,顾名思义即通知信息的传达处理。目的是为了让用户获得需要得到的消息及提醒并进行处理。实现的功能基本就两个:

未查看的公告,能够提示“new”图标,查看过一次之后“new”图标消失。 点击每条公告通知,可进入该报告的“公告通知查询(管理人员))”界面,查看详情。

关于web网站系统通知设计更多详细的说明,<a href="http://www.jianshu.com/p/a89b61b6944d">请戳这里。</a>

销售业绩与新客户业绩

这是用iframe从第三方引入进来的数据曲线图,报表。我并没有做什么特别的工作。唯一一点就是先通过ajax在后台获取第三方库的账号和密码,然后在请求的时候传过去就可以获取页面了。

工作看板

刚开始在网上找了一个只是查看日期的简单日历,之后用着才发现里面到处都是bug,于是改啊改啊,改的过程中真有点恶心到我了,改好了这里,那里又出问题了。改好了之后,要把他变成类似那种schedule日历的形式。就是添加几个功能:

日历上加个添加功能,点击”添加“,弹出添加任务计划的窗口; 点击各天,在下方显示当天最早的三条需要处理的计划;当天的计划提前30分钟提醒,点击“查看详情”,显示计划的详情界面,点击“知道了”,关闭弹出框,本条计划提醒消失,后续计划前移。

在页面加载的时候把后台需要处理的计划全部都查出来并初始化日历,让有任务的计划日期追加不同样式,比如颜色变灰,以便用户知道并可以点击查看任务详情。完成的效果如下:

排行榜

实现的功能主要有两个:

上月排行:点击”上月排行“,显示上个月的相关排行榜(当前表格刷新); 下月排行:点击“下月排行”,显示下个月的相关排行(当前表格刷新);

排行榜的数据也是从第三方库获取的,于是在第三方库写好接口后,利用sdk获取数据显示。效果如下:

ps:因为数据库没加图片,测试数据不够完整,所以图片啥的没有出来,而且sql也没有去重。后续再弄了。

改版后

改版后

写在最后

还有一些就不一一写了,总之,在做的过程中发现自己的前端有点薄弱,有待提高。whatever,勇敢的去尝试,从失败中去学习。人都是做自己原本不能胜任的事情中,才能快速成长。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

Progressive Web Apps入门

PC和Mobile开发技术演进 PC方向,从客户端到富客户端,到现在广泛使用的Web。 移动方向,目前主要还是原生应用和Mobile Web,PWA相关技术是未...

25010
来自专栏求索之路

适用于键盘流、懒人、强迫症患者以及码农的究极Mac使用指南

再次声明:本文是给一些喜欢折腾提升效率的、希望成为键盘流选手的、懒惰得不愿意多移动手指的、有严重的强迫症的人提供一些经验和帮助的。所以意义党、不分青红皂白党、键...

3313
来自专栏张戈的专栏

WordPress 4.0 Benny简体中文版现已开放下载

昨天,收到了 WordPress 官方邮件,告知 4.0 已发布,要我确认中国联盟的导航插件是否兼容新版本。 ? 不过后台看了下,却没提示更新。直到今早才在后台...

3647
来自专栏逸鹏说道

NodeJS 应用仓库钓鱼

前言 城堡总是从内部攻破的。再强大的系统,也得通过人来控制。如果将入侵直接从人这个环节发起,那么再坚固的防线,也都成为摆设。 下面分享一个例子,利用应用仓库,渗...

3035
来自专栏何俊林

仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)

本文是由奇虎360公司高磊关于使用百度地图仿摩拜单车APP,原文地址:http://blog.csdn.net/gaolei1201/article/detai...

3199
来自专栏小文博客

“息屏提醒”你的小米手机用上了吗

1862
来自专栏CSDN技术头条

流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑

我们经常见到这么一些场景: 微博的列表页面; 各类协同工具的任务看板,比如 Teambition。 ? 这类场景的一个共同特点是: 由若干个小方块构成; 每个小...

2956
来自专栏CDA数据分析师

教你一招 | 用Python写一个简单的微博爬虫

我是个微博重度用户,工作学习之余喜欢刷刷timeline看看有什么新鲜事发生,也因此认识了不少高质量的原创大V,有分享技术资料的,比如好东西传送门;有时不时给你...

22610
来自专栏liulun

基于.net开发chrome核心浏览器【一】

说明: 这是本系列的第一篇文章,我会尽快发后续的文章。 源起   1.加快葬送IE6浏览器的进程     世界上使用IE6浏览器最多的地方在中国     中国...

2925
来自专栏拂晓风起

关于前后端同构,我的一点思路和心得(vue、nodejs、react、模版)

3704

扫码关注云+社区

领取腾讯云代金券