对于一个从未接触过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操作技巧的文章，有需要的请自行搜索！
联系客服
