全栈工程师如何快速构建一个Web应用

开发相对来说倒是一件按部就班的事情，首先基于SpringBoot以及其他第三方库所提供的API来开发出基于REST的服务。然后在前端利用AngularJS将应用分为几个模块UserManager,ResourceManger，FeedbackManager分别开发，通过$http来调用后端服务来进行业务处理和数据交互。

整个开发过程中，你仍需要去解决一些问题：

前后端分离之后，如何进行Session的管理 如何实现安全的跨域请求 在Spring Boot中如何整合MyBatis框架 如何利用Spring Security来构建安全的REST服务 利用云服务实现图片的上传与处理

以上这些具体的开发技巧，我都会在《全栈修炼》的后续文章中与大家分享。

部署

选择云服务器

虽然我们采用了前后端分离的架构，但在上线初期，我们可以将系统的前端、后端和数据库都部署在一台云服务器上。我们需要选择一个云服务提供商，将应用部署上去了。如果你是一个学生，我建议你选择亚马逊云，因为它能提供首年免费使用的服务。我由于有多台服务器使用了阿里云，所以为了管理的方便，我还是选择了阿里云服务器来部署我的应用，操作系统方面，我选择的是Ubuntu Linux，其他硬件方面除了带宽，我选择了3M之外，其他我都使用的是最低的配置，因为根据上线初期的用量评估，这样的配置已经足够使用了，当用户和规模增加时，可以通过升级配置的方式来获得更多硬件资源，这一点还是非常方便和经济的。

应用部署

后端： 由于采用了SpringBoot，后端的服务可以用Maven Plugin直接打包成一个可运行的jar包，它集成了jetty服务器可以直接向外提供REST服务。当然，如果你不喜欢jetty，也可以通过在pom.xml中简单地修改配置来集成tomcat作为你的应用服务器。最后在你的服务器启动脚本中，简单地使用 java -jar命令，就可以启动你的后端服务了。

前端： 前端是一个静态网站，包含HTML、CSS、以及图片文件。我将它部署在了一台Apache服务器上，当然你也可以选择Nginx这样的高性能服务器。

安全

你需要定义出网站的安全策略，比如用户组，用户权限的分配，出于安全的考虑，尽可能将不需要开放的端口用防火墙隔离，只保留80等几个对外提供服务的端口等等。另外，如果你的网站交互中包含一些敏感的信息，那么你还应该使用TLS对数据的传输进行加密处理。

性能调优

正式上线之前，你还应该对网站做一些性能调优，以保证网站能够有比较好的响应速度。使用YSlow等工具是一个不错的选择，它能告诉你网站加载缓慢的原因，并给出优化的建议。

下面是一些常见的优化方法：

合并压缩静态文件： 将JavaScript，CSS文件进行压缩（去掉不必要的空格、换行和注释）与合并（将多个CSS或JavaScript文件合并成一个文件），并且使用GZIP进行压缩，可以提高网站的加载速度。

使用前端镜像库： 对于网站中用到的第三方字体和前端代码库，我通过360和百度的前端镜像站点来获取，这样可以降低网站本身流量的开销，也可以提高网站的整体加载速度。

利用云存储和CDN进行加速： 技匠社的资源分享有图片上传功能，而图片是最占带宽的，3M的带宽根本支持不了几个用户的同时访问。因此，我选择使用了七牛云，我将用户上传的图片通过七牛云的API传到七云存储空间内，并直接利用它的CDN对这些静态资源进行加速，这样一来网站的图片以及那些静态文件（我们将那些不会频繁修改的JavaScript、CSS等都放到了CDN上）就不会占用阿里云的带宽了。另外，不得不说七牛云的价格对于个人用户或初创企业来说还是比较优惠的，比如10G空间以内的存储都是免费的。

下图为网站的CDN流量统计：

网站数据统计

网站上线后，你仍然需要对网站的访问量，用户情况进行持续的统计和分析，大家可能发现在网站的功能里我们并没有加入相应的用户访问跟踪模块，是的，我们可以借助第三方的统计平台来帮我们做这件事。由于国内无法使用Google Analytics，因此我选择了百度统计，你只需要在百度统计中注册一个账号并加入你的站点，然后在你的网站头部加入一小段JavaScript代码就能实现最基础的网站统计功能了。当你需要更多用户个性化分析时，可以在应用的内部去增加相应的模块，进行数据的抓取和分析。

开发与设计工具

最后来分享一下我在整个开发过程中所使用到的4个主要的开发和设计工具，我用到的其他一些工具，也可以在我的《一名全栈设计师的Mac工具箱（设计,开发,效率）》中找到。

Eclipse

Eclipse是我一直在使用的后端JAVA开发IDE，我也使用它来开发基于SpringBoot的后端服务应用。其实比起商用过的Intellij它仍然逊色不少，推荐它是因为一方面我一直在使用它，另一方面它是免费的。

Sublime Text 3

我使用Sublime Text来开发前端基于AngularJS的静态网站。它是我开发前端代码时最喜欢使用的IDE。我非常喜欢它的那些使代码异常清晰的主题，以及功能丰富的插件。有了它开发HTML、CSS、JavaScript变成了一件非常愉悦的事情。

Code Kit

CodeKit 可自动编译自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件。为 JavaScript 提供合并、压缩以及错误检查。还可以优化 jpeg 和 png 图片，并为我提供一个本地的测试环境。当然，你也可以不使用任何工具，直接通过Grunt或Gulp的插件去实现所有这些功能。

Sketch 3

Sketch是我目前最常使用的设计工具。它只有几十M，相较于Photoshop,它小巧得多，更重要的是它是专为UI设计而生的，我不必关注那些与我做UI设计毫无关系的图片处理功能，从而降低了工作环境中的噪音。另外，通过强大的插件功能，我能根据需要进行安装使用，这大大提高了我的工作效率。所以，现在大到做一个完整的UI设计，小到设计一个图标或修一张图片我都会首先选择Sketch这个工具。

能够快速构建出一个Web应用或APP是全栈工程师的核心竞争力，这也是为什么那么多初创公司都在寻找全栈工程师的原因。如果你也希望成为全栈工程师，跟着我一起全栈修炼吧^_^

在我的下一篇文章中，将与你分享《基于Spring Boot构建REST服务》。另外，我们也欢迎你加入技匠社这个开源项目成为Contributor或Core成员，它是一个完全开源的实验项目，我们希望能在这里汇聚年轻的设计师与开发人员，一起实践优秀的设计和技术，并通过微创新来做出更多有意思的东西来，期待你的加入！

本文由 技匠 授权 站长之家 发表，并经站长之家编辑。转载此文请于文首标明作者姓名，保持文章完整性，并请附上出处（站长之家）及本页链接。

注：相关网站建设技巧阅读请移步到建站教程频道。

推荐：用高性能云服务器 稳定的网站才能更赚钱

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!