WEB开发新人指南

写给母校UESTCweb开发方向的同学,也分享给大家,希望多提好的意见,沟通交流。

博客原文链接:http://leuisken.github.io/2015/07/17/web-dev/ 转载请注明出处

一、首先要知道的

如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器。其实服务器,并没有什么特别的,也就是一台昼夜不停运转的电脑罢了。每一台入网的机器,都会被分配一个ip,我们可以通过ipconfig / ifconfig这样的命令,知道我们电脑的ip地址。服务器本身,运行着服务器程序,他们监听着来源于网络的请求,并对请求进行响应。

比较常见的服务器程序,比如apache / Nginx / IIS等等,我们可以通过以下这样的一个小的实验,来了解网络中的客户端与服务器,是如何进行交互的。

实验:一个小的局域网

第一步:运行你电脑上的服务器程序(以apache为例,建议使用xampp / wamp这样的软件包,win下一键安装,能省不少事。当然,喜欢折腾的同学和SA们肯定要一个一个装啦),在apache的www目录下放入一些网页文件,然后在浏览器的localhost下浏览网页。

第二步:在电脑上打开wifi共享软件,通过ipconfig / ifconfig命令查看本机在内网的ip,让手机连接电脑共享的wifi(或者是两者同连一个路由器的wifi),在手机浏览器的地址栏输入电脑的ip,进入电脑的服务器并浏览网页。

上面的小实验的第二步,就模拟了一个简单的浏览器+服务器系统(BS系统),也在一定程度上反映了网站基本的访问原理。同时,这也是Web前端开发中真机测试移动端页面的一个行之有效的方法;当然,你也可以通过这种方式,实现局域网络的文件共享。

继续深入一步,我们在浏览网站的时候很少使用ip直接访问的,而是用www.baidu.com这样的域名,域名与提供对应服务的服务器的ip地址通过DNS服务器相互对应。我们可以通过ping命令,也可以通过一些在线的工具,如http://ping.chinaz.com来获取一个网站的ip地址,有时候ping出来的ip是不一样的,一般和你使用网络的地点有关,这主要是为了将对服务器的请求分流,减轻服务器的压力,保证网站的访问速度(比如可以了解一下CDN)。

二、开发的过程与设计的艺术

如何从0建立一个网站,这就涉及到软件产品的开发了。一般,会有以下几个职位。产品(PM):负责对软件产品的功能,目标用户等许多部分,进行一个详细的归纳整理,包括前期的功能地位和后期的功能修缮;设计(UE):对用户使用的产品界面、交互方式进行统筹和设计;前端(FE):活跃于客户端的程序员,负责使用代码实现设计师的设计,并与后端协调数据在客户端的渲染工作;后端(BE):活跃于服务器端的程序员,为前端的渲染提供所需的数据;系统(SA):保证开发过程中,对于服务器权限的管理与协调,以及服务器运行环境的提供,同时保证网站在生产环境中的平稳运行。

限于个人能力,我在此仅从前端和后端这两个角度,探讨网站实现的技术细节,其中会涉及许多具体的解决方案,供大家参考。

现在我们从这样的角度去看一个网站,我将他分为三层,视图层,数据层,以及控制数据在视图上的显示方式的控制器。举个例子,一个留言板,他的数据层会包括留言者的留言内容、留言时间、留言者的信息等内容。这些数据,就像一张excel表格一样,存储在我们的服务器。而我们的用户肯定不希望看到一个简陋的表格,他们希望看到的至少是一个界面,数据内容被清新美观的显示在我们的浏览器上,而这个界面,也会随着数据内容的增删修改而做出相应的调整。存储表格数据的,就是数据层;用户看到的,就是视图层;让界面随数据产生改变,则是控制器的使命。

现在,从技术的角度我们去实现他。首先,前端工程师根据设计师的设计,做出视图层的模板,后端工程师也做好相应的数据存储工作,包括设计创建数据库、数据表等等。现在,基本的工作完成。继续下去,我们则有很多的选择。

选择一:后端渲染数据到视图。

这种方法,就是前端将模板交给后端,告诉后端具体在哪个位置放什么样的数据,放的时候有什么具体的要求,剩下的渲染工作完全交给后端处理。这样的方法实现起来门槛低,而且由于服务器计算性能一般情况下强于客户机,后端来刷模板简单粗暴速度快,没有任何争议。缺点是后端工程师由于处理了数据填写的工作,相当于涉及了视图层(即前端)的工作内容,导致分工不够明确;同时,由于是后端更新数据,而后端代码是运行在服务器上的,每次要更新都要刷新页面重新请求一个完整的页面,某种意义上来说,用户体验相对较差。

选择二:后端将数据生成为小的数据文件,前端获取数据并由前端更新视图。

这种方法,涉及到前端的Ajax。说白了就是在后台异步加载另外一个页面,在加载过程中用户不会看到任何变化,而加载完成后,相当于在前端程序里获取了一个字符串,剩下的任务就是将这个字符串解析取出里面的数据并将对应内容渲染到相应的位置上。通过这种方式,首先可以保证视图层显示的内容都完全由前端工程师负责,分工明确,实现了一定程度上的前后端分离;同时,与服务器交互的文件大小,从一整个页面缩小到了一个仅仅包含要更新的数据的小文件,交互的量减小,带来性能上的提升;另外,由于交互文件一般使用json这种多数编程语言都可以解析的数据格式,不仅可以给网页前端使用,也可以给移动端app的前端开发使用,统一了接口,扩展时减小了工作量。

选择三:单页应用(SPA)

我先解释一下单页应用,和传统网站相比,他更接近于移动端应用程序,其核心就是将路由控制在前端工程师的手里。核心技术除了上面的Ajax,还有pushState,又有人将两者合称为PJAX。

先说什么是路由,路由可以理解为你网站域名后面的内容,比如www.abc.com/p/123这样的网址,后面的/p/123就标明了一个路径。可以类比于我们电脑的磁盘,当我在路径的位置输入C:/p/123的时候,我希望看到C盘下p文件夹下123文件夹的内容,当123变成了456,显示的内容应该有些变化。如果456文件夹存在,显示该文件夹的内容;如果不存在,则会弹出错误信息提示不存在。对应我们的网站,如果当/p/123变成/p/456的时候,也应该给出对应的显示。路由由前端控制的含义,就是说,网站url的变化与对应的显示由前端处理。你的整个网站实际上只有一个页面,前端根据url的变化,通过Ajax异步加载需要的数据,然后通过pushState操作浏览器的历史记录,达到与浏览普通网站同样的效果。

SPA最大的优点,大概就是响应速度了。当然,使用SPA对前端的技术提出了相对比较高的要求。使用SPA的一般情况,是你要做一个类似于安卓app的网站,如淘宝的手机站和Gmail,都是相当典型的SPA。不过,虽然现在SPA很多,并不是所有的场景都适合使用SPA的。

淘宝收藏夹的架构:

作为访问量如此高的网站,淘宝是怎么做的。(首先,php的后台肯定是担负不起这样的访问量的。)在淘宝UED,他们介绍了“中途岛”项目,基本架构是:前端工程师使用Node.js进行模板渲染,保证模板的渲染由服务器完成提高效率;Node.js访问由java后台封装的高级数据接口,而java在访问数据库的时候,则是使用C语言来实现最有效率的访问。技术细节可以参考淘宝UED的博客。

三、项目开发中值得一提的点

关于查阅资料和提问:

遇到问题先问搜索引擎,这我想应该都没有什么意见。用不了谷歌,可以从laod.cn下个hosts,翻出去的话,方法太多,不废话了。

当然了,找不到具体问题问人是不可避免的。但是当问题比较复杂的时候,比如前端这边处理浏览器兼容问题的时候,一定要有在线demo,一定要把问题描述的很清楚并且真的是自己解决不了了再问。关于提问的艺术,可以看看张鑫旭大神的博客(个人非常喜欢,强烈推荐前端同学关注),如何提问才能进阶成为前端大神?,这篇文章对提问需要注意的点说的非常明确,请大家,无论是不是做前端,最好都看看。

任务进度管理:

虽然在学校里做东西,很少会有严格的工期安排、进度计划这些,但是在公司里,这些问题肯定是会遇到的。推荐几个工具,大家可以了解一下:tower和微软的project。

版本控制:

几乎没有任何成功的软件项目,是一个敲代码敲出来的,况且,就算是一个人敲代码,也应该对自己所做的改动有所记录和备份。在这里,我将介绍两种使用git进行版本控制的方式,供大家参考。

分支管理:

整个项目是一个大的仓库,这个大的仓库由于不同的修改而有不同的分支。一般来说,有master(稳定发布版本) / dev(开发中的相对稳定版本) / 开发人员个人分支(集中个人的修改)这些。一般的工作过程为,个人会在个人的分支上修改,然后push到dev分支,稳定下来的dev分支作为新的版本再合并到master分支。那一部分出了问题,就在哪一部分进行修改。git在你每次更新分支的内容时都要求你输入一段描述修改的文字,这在将来的版本控制和回退上都会很有帮助。

仓库管理:

个人理解其实是扩大化的分支管理,项目负责人建立项目仓库,项目开发人员fork母仓库,做了自己的修改后,对母仓库发出pull request,申请合并到母仓库。这一方法最大的优点,就是方便负责人进行code review,保证代码质量;同时也可以方便对开发人员的贡献度进行考核。通常公司里会选取这种方式。

项目的持续集成:

持续集成大家在学校也很少会接触到,但是当你在公司里,遇到大项目的时候,就肯定会接触到持续集成这方面的需求和工具。个人认为持续集成更像是一种思想,在项目的开发过程中,前端和后端在开发过程中不断的对接,测试样例提前都做好,然后自动化构建项目,自动化测试等等。每当代码库更新(当然,本地构建失败的代码是不允许提交到仓库的)的时候,自动构建脚本、自动测试脚本都会跑出一个更新后的产品给大家看,方便团队中的每一个人掌握项目的情况和目前的进度。

实现这种思想,就需要与之配合的工具,关于持续集成这方面现在在企业中目前还没有“最佳实践”,不过确实有很多前人的经验供咱们借鉴。《持续集成最佳实践》里面对于持续集成实践进行了思考,欢迎点击。(感谢原作者高磊的无私分享。)

四、几点建议

在学习开发技术的过程中,个人给大家一点建议:

前期初学的时候,千万不要求多

道理大家都明白,什么都想学肯定什么都学不好。如果一个人都能学过来,那么我们还搞这么多方向做什么。有些东西,当你需要的时候,自然就会接触到;而那个时候你再学,你肯定是在实际项目中遇到了什么问题。有问题导向的学习是非常有效率的,所以千万不要求多,稳住。

千万不要刚刚入门就觉得自己什么都会了

这是我经历过的阶段,当时被一位学长拉了回来,也是非常幸运。这个阶段你觉得自己清楚很多东西了,感觉只要查查资料自己什么都能解决。其实想一想,这么多人研究这个领域,你怎么可能马上就看透了他呢。每个领域,都有很多坑,每一个坑也都会有至少一个与之对应的解决方案,而处理项目和解决方案,是一条漫长的道路。知识是越学越细的,本来你以为前端只能写写页面,深入学习以后,你才会发现,js可以写机器人;可以调系统API做桌面应用;哪怕只是在写页面这部分也有着页面渲染时间、内存泄漏等各种各样的问题和与之对应的层出不穷的解决方案。所以,低调,前面的路还很长。

学到一定程度,可以多去看看

我们知道书本上的知识肯定不是最新的,技术在不断的发展。可能你现在用的书上的代码都已经过时到运行不了了。这个,其实很正常,毕竟做网络这方面,怎么可能光靠书来追踪技术呢。所以多去看吧,github,各种社区、论坛,线下的技术交流,这些可以给你带来最新鲜的养分。所以,世界这么大,出去多看看。

五、结语:

还记得在看松本行泓的《代码的未来》的时候,里面提到的程序员“无所不能”的自由给我留下了很深的印象。写代码,按照自己的意愿去构建一个产品,一个项目,哪怕再小,依然是自由的。哪怕是在实现别人的需求,可以做好,做精,做出一套最佳的解决方案(没有最佳,只有最适合项目),给别人留下轮子去做好二次开发,依然是自由的,是有意义的。

其实个人觉得,单纯作为新人入门的话,本文的第三部分并没有太大的意义。之所以提及,是希望新人们能够更注重代码之外的效率,从团队合作、项目管理、利于维护和二次开发的角度去反思自己的代码,自己的解决方案,有时候会有更多收获。于是多加一笔,虽然限于个人水平,说的不详细,但也希望抛砖引玉,对大家能有些帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

skywalking服务端_skywalking部署

文件列表apache-skywalking-apm-7.0.0.tar.gz:服务端文件mysql-connector-java-5.1.30.jar:mysql jdbc驱动jar包需要条件Jdk1.8以上mysql5.7以上服务端部署把文件上传到服务器上/root目录下scp apache-skywalking-apm-7.0.0.tar.gz root192.168.3.211:/r…

微软Connect教程系列--自动生成增删改查页面工具介绍(二)

本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1、web.config文件不在存在,用config.json替代,以适应支撑vs的插件化。 即config.json可以在项目中不…

新增成功到编制为空bug_36 个JS 面试题为你助力,让面试更有力(面试必读)

来源:javapoint译者:前端小智点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试…

Lua协程

协作例程 1、同一时刻仅一个例程在运行 2、执行权让渡和恢复【栈】转载于:https://www.cnblogs.com/freebird92/p/4713106.html

PI数据库的使用-PI System Management Tools

1、PI连接管理器 2、标记搜索 3、当前值 转载于:https://www.cnblogs.com/jumahe/p/4107790.html

在python中模块可以封装_python 制作python包,封装成可用模块教程

首先编写py程序:printtest.pydef test():print(print test)将以上.py文件做成python模块,需要在相同目录下创建setup.py文件,setup.py中输入配置信息:from setuptools import setupsetup(nameprinttest,version1.0,py_modules[printtest],)打开终端&…

F# 4.0于全平台发布

随着Visual Studio 2015的发布,由微软创建的函数式编程语言F#也迎来了它的第四个版本。新版本中的变动包括大量的新特性、bug修复、语言本身的一些增强,以及一些性能方面的改进。此外,新版本的F#还简化了在VS2015中进行调试与编辑的方式。\\微…

一种用css实现图片在父框中等比缩放并垂直居中的办法

一个网页中往往会有很多图片&#xff0c;而网站的编辑上传图片时可能并不一定按照为父框设定的那个宽高来传&#xff0c;这样图片往往会将父框撑开或者被父框截断。一种比较好的解决的办法是这样的&#xff1a; HTML代码结构&#xff1a; <div class"dimg"><…

CLR VIA

标题 状态 内容 什么是CLR? 什么是托管模块&#xff1f; 托管模块由什么组成&#xff1f; 。net代码的执行过程 http://www.cnblogs.com/aaa6818162/p/4726581.html http://www.cnblogs.com/kingmoon/archive/2012/07/16/2594459.html 为了执行程序&#xff0c;首…

python ansys workbench联动_联合ANSYS WORKBENCH和经典界面进行后处理

WORKCENCH主要是为不大懂ANSYS命令和编程的工程师服务的&#xff0c;而经典界面则适用于初学者和研究人员。初学者和研究人员是完全不同的两个层次&#xff0c;为什么ANSYS经典界面却同时适合二者呢&#xff1f;实际上&#xff0c;学好ANSYS&#xff0c;关键并非是操作界面&…

jQuery表格排序总成-tablesorter

一个、进口单证<script type"text/javascript" src"js/jquery.js"></script> <script type"text/javascript" src"js/jquery.tablesorter.js"></script> <!-- 引入下面样式则表头出现排序图标。同一时候…

5渲染判断_云渲染怎么收费,5大云渲染平台实测,您选对了吗?

3DMAX云渲染平台都怎么收费&#xff1f;5大云渲染平台测试后才知道差距这么大&#xff0c;您用对了吗&#xff1f;本次共计测试了3个镜头&#xff0c;为了让大家很直观地感受各个平台渲染时间和费用上的对比&#xff0c;我整理了个表格&#xff0c;供大家自行参考和判断。若有疑…

hadoop1常见配置含义

参数 取值 备注 fs.default.nameNameNode 的URI。hdfs://主机名/dfs.hosts/dfs.hosts.exclude许可/拒绝DataNode列表。如有必要&#xff0c;用这个文件控制许可的datanode列表。dfs.replication默认&#…

Android工程的编译过程

现在很多人想对Android工程的编译和打包进行自动化&#xff0c;比如建立每日构建系统、自动生成发布文件等等。这些都需要我们对Android工程的编译和打包有一个深入的理解&#xff0c;至少要知道它的每一步都做了什么&#xff0c;需要什么环境和工具&#xff0c;输入和输出是什…

activiti 工作流设置并行审批_activity、jbpm5、snakerflow常用工作流审批流对比

# 审批流调研背景由于目前产品研发组支持的产品项目越来越多&#xff0c; 同时几乎每个项目都会有导出审批&#xff0c;流程流转等需求&#xff0c;本着提高开发效率和组件化的目的&#xff0c;调研和开发通用的工作流组件&#xff0c;为后面的项目和新的需求提供快速支持。主要…

java 后台开发关键词解释

bean类&#xff1a;是一些实体类&#xff0c;包括viewbean,databean等等。action类&#xff1a;可作为接收显示层的数据&#xff0c;连接显示层和业务逻辑实现层的控制层。model类&#xff1a;MVC中model层就是到层。在java中无特殊含义就是模块。util类&#xff1a;工具类dao:…

docker mysql关掉后启动_Docker启动mysql的坑2

正确启动mysql&#xff1a;docker run -p 3306:3306 --name mysql02 -e MYSQL_ROOT_PASSWORD123456 -d mysql此时虽然启动成功。但是用客户端链接的时候报错连接Docker启动的mysql出现&#xff1a;ERROR 2059 (HY000): Authentication plugin caching_sha2_password cannot be …

Servlet基础知识(二)——web.xml文件的作用

http://www.cnblogs.com/yqskj/articles/2233061.html 转载于:https://www.cnblogs.com/wangerxiansheng/p/4113607.html

Spring web应用最大的败笔

第一篇 介绍下IOC DI Spring主要是业务层框架&#xff0c;现在已经发展成为一个完整JavaEE开发框架&#xff0c;它的主要特点是IoC DI和AOP等概念的融合&#xff0c;强项在面向切面AOP。推出之初因为Ioc/AOP等新设计理念值得框架设计者学习&#xff0c;现在已经成为Java世界主流…

mysql备份的后缀名_mysql备份数据库后缀名

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…