处女座AB型
有只爱笑的猫
身在匹兹堡 心在魔都 的美帝留学生
爱甜食 爱巧克力口味 爱bubble tea
文艺又世俗
坐得住但水平低的程序媛
 
 

再多试一次

When the world says, "Give up," Hope whispers, "Try it one more time."

上周三晚上,我和问了下HJ学妹Web作业的要求。当时心就塞住了。比预想的难,恐怕hold不住。那个晚上我焦急地翻了书、查了些网址,甚至绝望到连“要不花钱请个人帮我写代码”的念头都已经从水面探出了个头,我很痛苦,觉得选错了课,不想做后端,眼瞧着这门课最后的两个大作业觉得自己都要炸了。

这里很感谢HJ酱不嫌不弃地带领我装了Netbeans。我很讨厌搭环境。我之前所有做的网页都是一个Sublime编辑器+一个浏览器就搞定的。好不容易那天装了Tomcat把JSP的入门教程写了一遍,觉得可以继续维持这种单纯环境一直写到地老天荒……但是Servelet就不行了,但是后面大项目要连数据库也不行了。这些太多东西错综复杂,你不用个大综合是hold不住了。在HJ的带领下,我入了Netbeans的门。然后一切问题开始迎刃而解……参考了老师的工程包,大致知道要做成什么样,读读他的代码大致知道背后的逻辑,再在Stackoverflow各种查……

在今天,我把Web课最后一个作业做好了。从周三晚上的苦苦挣扎,到今天周六的欢欢喜喜。中间就是一个“Try it one more time”的距离。

回头一看,总结起来的话其实这是一个不难的作业,顶多算JSP/Servelet的一个入门吧,而且还不带数据库的。下面允许我以愉快的心情展示一下。这项目是一个小巧的、只包含了基本功能的备忘录。包含了5个页面,其中2个是jsp,3个是直接servelet生成的,用到css和js(jQuery),同时还有个用来传值的Javabeans和一个txt文件用来读取和保存数据。唯一用到的一张图片是背景图。

我用了16个slides来过了一遍它的功能,这里放几张截图:

第一个页面是添加新的备忘事项:



第二个页面是在读取该事项后,让用户可以选择性添加更多详细信息。这里比较费工夫的是那一排按钮,是备忘事项的分类。我本来是打算根据Stephen Covey的时间管理矩阵(参考:Time Management Matrix by Stephen Covey – Urgent vs Important)设计这四个按钮的,即左上 = 重要且紧急的事项;右上 = 重要但不紧急的事项;左下 = 不重要但紧急的事项;右下 = 不重要也不紧急的事项。根据他的理论,做事情的先后顺序应根据以上顺序进行。后来我嫌费时费力放弃了,其实要结合该理论设计这个功能,我会:(1)重新排列四个按钮;(2)增加交互,当鼠标放上去时弹出提示小框说明该类型含义。现在为了减少工作量,我只是很简单地排列了四个按钮,设计上根据冷暖色调来区分重要与不重要。



第三个页面就是所有待办事项的列表,是备忘录的主体。右上角+号可跳转到第一页面添加新的事项。当添加了新的事项后,会显示在列表最上方,后面还有提示。



如果已完成一个事项,可通过点击左边的选框,选框颜色大家可能也注意到了,是根据事项类型来显示的。当鼠标放到框中时,会有一个小勾出现,暗示点击后就意味着已完成该事项了。



点击后会出现一个确认页面,确认删除后自动跳转回到备忘事项列表,并且会看到已完成的事项已经消失了。



如果想要编辑某事项,只要点击文字,就会跳转到编辑页面,该事项的标题、类型和内容都会自动填充,你在原来的基础上修改即可。返回后就会发现修改内容已经更新在列表上了,并出现在列表最上方。





以上部分可见部分都算前端设计吧。逻辑不复杂(也可能是我心里敞亮、理得比较顺吧),可参考我简单画的图:



后端设计用到JSP/Servlets/JavaBean和一个txt文件存放数据,这些都是老师有要求的。大致结构如下:


我做的slides里最后几页还截了一些核心代码。基本是一些读取、写入、传值的内容。我挨个认真做了注释,然后做slides总结的时候又复习一遍,现在看穿了也就觉得没有那么难……

比起后端,我真的是更喜欢前端了,而且一直在进步,现在已经无法直视做的第一第二个个人主页了。第三个也快要弃用了。而且在JS的结构、CSS的类名与ID名混用、网页的布局等各方面都有了很多进步,每做一个都进步一次。后端的代码在我看来比较丑陋一些,但是真的很有用,几句话就把功能实现了,而且没有后端的前端,感觉就像少了灵魂一样。

苦的时候越苦,甜的滋味来得也更甜一点。好啦,下面还有别的作业要对付!在这里做一个总结后,我要move on了。

02 Nov 2014
 
评论(4)
 
热度(3)
  1. 红猫印讯木寻云 转载了此文字
© 木寻云 | Powered by LOFTER