对于一个从未接触过B/S项目开发的初学者来说,最大的问题在于不知从何处下手。
本人并非计算机科班出身,之所以还要做软件开发,完全是出于工作需要。以我服务多年的全国多家报社为例,2000年--2010年可以说是报业发展的黄金10年,大手笔采购各种管理软件是必须的,但他们仍然会抱怨这些软件在使用中的各种不便,其中不乏一些大的品牌软件商。我们本来的主业是报业数据咨询服务,听到他们的抱怨久了,就产生了一个想法:为什么我们就不能来开发一个更贴近报社使用实际的应用软件呢?和专业的开发人员相比,我们在代码能力上确实欠缺,但作为职场从业人员,却拥有着对行业深刻的理解和经验,而这正是我们最大的财富和竞争力!
说干就干。我们先用Excel帮客户开发了一套可以快速生成日报、周报、月报的“一键报表系统”,几家报社使用后反响非常好;后来又借助VBA和其它辅助工具正式升级为专业化的“广告通”软件,在全国报业最发达的珠三角地区一度成为覆盖面最广的同类软件。
后来,在帮助一家报社定制C/S数据库应用项目时,客户提出要同时支持远程浏览器访问。C/S毕竟只是本地局域网使用比较方便嘛,为了接下这个预算在二三十万左右的“大单”,尽管我们还没有任何这方面的开发经验,但仍然硬着头皮先口头答应了下来。紧接着就到京东、当当上购买各种所谓的“从入门到精通”教材,这些书一般都是先从一个个的基础知识点讲起,最后再用实战示例做综合运用。由于B/S涉及到的知识点是非常多的,这个学习的过程非常枯燥。特别是css样式的部分,简直想吐。
按照传统的做法,一般是用html的各种标签写出网页框架,然后用css再来设计页面样式;设计页面样式时,还要考虑与传统PC端、手机平板等不同设备的兼容;当需要和用户、数据库进行交互时,还要用JavaScript、php等编程语言来写一系列的程序处理代码。因此,一个完整的B/S项目开发一般都是需要前端、后端工程师相互配合完成的。这么多的知识点,对于当时相当于是完全小白的我,肯定是没有时间、也没有能力做到的。
怎么办?传统的老路走不通了!答应客户的事,必须要做到啊,不然20多万的单子就会飞掉的!我开始上网查资料、找工具,想快速开发。最后发现了jqueryEasyUI这个东东,当时它最最最吸引我的是:再不用为那些多的想吐的css样式布局烦神了,依照自身带的各种实例可以非常快的搭建好自己的网站项目。好在自己还有一点数据库方面的基础,最终不到一个月就拿出了测试版,客户非常满意。够拼吧?
项目做完之后,回头再仔细看jqueryEasyUI提供的很多插件,越研究越觉得它是企业级项目开发的得力工具。毕竟当时做那个项目是依葫芦画瓢的,完全属于项目驱动、硬逼出来的。因此,我们建议初学者一定要带着解决问题的心态去学习,最好是能结合手上的现成案例,这样的学习效率会更高。
众所周知,受移动互联网的冲击,传统报业这几年日子很不好过,本人所在公司的主营业务自然也受到很大影响。业务少了,我开始有更多的时间来思考自己这10余年来的职业经历。总结下来,我觉得,这10余年自己的最大收获就在于,从一个单纯的“办公软件使用者”到“职场程序员”的转变。这期间,自己所经历过的各种曲折仍然历历在目。为了给仍然在职场上辛苦打拼或者打算向it方面转型的同学提供一些帮助,本人会陆续将自己的一些感悟或实战案例在微信公众号《职场码上汇》上分享给大家。
虽然,国内已经有了类似于w3school这样的网站可以提供关于web技术方面的学习内容和日常所需资料的查询,但我们真的不建议初学者象查字典一样的逐条去学习。这主要是因为,该网站仅仅相当于一个庞大的知识库,逐条学习难免会分不清重点,而且非常耗时间,学习到最后的结果可能还是没有头绪,具体到项目开发时仍然无从下手。就像小学生学语文一样,见过谁是拿着一本《新华字典》一个字一个字的去学吗?肯定是要结合一些场景来学习比较好!
为此,本人打算采用“项目实例驱动”的方法,让每一个从未接触过B/S开发的初学者直接从具体案例入手,只要坚持一点点的跟着学、跟着做,一个月左右的时间就能完成自己的应用项目。通过这样一个实战项目的操作,不仅可以快速解决自己工作中的应用需求,更主要的是了解了B/S的项目开发流程。即使以后想继续把项目做的更完善,最起码也知道了自己需要发力的方向。
这个案例非常简单,就是做一个登录窗口。最终完成的结果如下图:
登录窗口
这个看起来虽小,但涉及的知识面却五脏俱全:登录界面要用到html和css、点击按钮产生的互动动作要用JavaScript处理、把数据发送到后台并返回结果需要用到Ajax技术、后台数据库检索匹配时则要用php进行处理。
当然,大家也不要紧张,该功能全部实现起来仅需100行左右的代码而已。现在就开始该案例实战的第一篇文章:使用什么编码工具?
既然要做项目开发,肯定需要用到代码编辑器。我们向大家推荐的代码编辑工具是完全免费的SublimeText3。
该软件可以到西西软件园下载,地址为:http://www.cr173.com/soft/55484.html,这是v3.3126汉化特别版,一个纯绿色的版本,无需安装,解包后即可直接使用,且已自动完成注册激活、并安装好了Emmet插件。
请注意,该软件下载解包后会有2个文件夹,一个是x86的版本,运行在32位的windows系统上;另一个是x64的版本,运行在64位的系统上,请根据需要选择。
除此之外,本课附件同时提供了AndyJS2.rar的文件下载,这是一个JavaScript程序代码的智能提示插件,下载后解包到SublimeText3相应版本的Data\Packages文件夹即可生效。
现在我们就先来简单感受一下SublimeText3的方便吧:打开SublimeText3,先随便起个名字保存为一个文件,后缀名为html,然后输入内容“!”或者“html:5”,接着按Tab键,立刻就会自动生成一个完整的html结构代码:
按感叹号自动生成的thml代码结构
是不是觉得很酷?有了这个代码编写神器,根本就不用再担心html中各种繁琐的尖括号了:只要输入标签名称,按个Tab键即可自动补齐;或者,先输入一个尖括号再加上标签名称,直接回车,也会自动完成相关属性的输入。
这里自动生成的html结构代码,默认语言是en;如果需要将其改成中文,可以修改安装目录下的配置文件:Data\Packages\Emmet\emmet\snippets.json:
需要修改的位置
将这里的en改成zh-cn,保存即可。重启SublimeText3,再次输入感叹号按Tab,生成的代码结构自动就变了。
同理,也可以修改各种快捷键所对应生成的内容,以更加符合自己的快速输入需要。网上有一大堆关于SublimeText3操作技巧的文章,有需要的请自行搜索!
联系客服