文字/技术人员(简书的签约作者)
不久前，我为我的微信用户写了一个小网站，分享学习编程和设计resources-jijiangshe.com，一个工匠俱乐部。有朋友问我怎么在短时间内写出这个网站，用了哪些技术和框架？这其实是一个有趣的话题。我们都知道全栈工程师可以快速开发一个网站或者APP，那么他们是怎么做的呢？我花了一些时间把自己在这个实验性小项目中的一些实践写成了文章，并把这个系列命名为“全栈实践”，在简书中与大家分享。
如果你问十个全栈工程师如何快速搭建一个Web应用，相信你会得到10个不同的答案，因为每个全栈工程师的技术栈都不一样。擅长设计的全栈设计师可能会告诉你，做好设计，然后应用博客系统或基于CMS的内容管理平台(如Drupal、Jommla、Wordpress)，就可以快速搭建网站，而前端全栈工程师可能会建议用HTML5+JavaScript(AngularJS或React)写网站前端，Node.js写后端服务。一开始是Java程序员，后来成了架构师，自学设计，成了全栈工程师。所以我更倾向于用Java搭建一个稳定的可扩展的后端服务，用Html5+CSS3+JavaScript，结合一些流行的前端框架，快速编写一个Web应用。当然，这绝对不是唯一的或者最好的技术组合。你需要根据不同的应用场景和自己的专业知识做出合理的选择。
作为“全栈实践”系列的第一篇文章，我将从整体的角度，结合网站开发的所有重要环节(网站定位、功能设置、设计、架构、开发、部署、性能调优、数据统计、开发工具)，谈谈我在建设这个真实网站过程中的思考和实践。后续文章我会结合这个实际案例分享具体的技术实现方法和代码示例，让你像全栈工程师一样独立开发自己的应用。
网站定位和功能设置
网站无论大小，都应该有一个明确的定位，就是你希望你的网站做什么？这一点非常重要。我见过很多网站，功能很多，但由于缺乏明确的定位，很少有人对其感兴趣。我要写的站，核心功能只有一个，就是帮助我的微信订阅用户(多是学计算机或设计的大学生和想工作后很快提高技能的设计师或程序员)分享那些优秀的开发或设计(学习)资源。
围绕这个核心功能，我得到了构成这个网站的三个主要功能:
资源的释放和显示。(核心功能，用户可以分享自己的资源，看到别人的分享)用户第三方登录(为了快速开发，我省略了不必要的用户注册功能，全部使用第三方社交平台登录)用户反馈功能。(用户反馈是我建立的几乎每个网站都包含的一个功能，它使我能够通过不断收集用户反馈来改进这个平台。)
至此，我已经完成了网站的功能设置。我尽可能的省略了所有不必要的网站功能，也没有写任何文档，这使得我能够以最快的速度实现这个web应用。这种方法也是目前成长型黑客普遍采用的做法:快速搭建一个具有核心功能的应用原型——MVP(最可行产品最小化可行产品)来验证自己的商业模式，然后根据用户的需求和反馈不断改进。当然，随着项目规模的不断扩大，更多团队成员的参与，我们可以回过头来，把前期遗漏的那些文档补上。请记住，只有当我们确信文档能够产生价值时，我们才应该编写它们。
信息架构
这个阶段在不同的团队或项目中会有很多不同的名称，比如大纲设计、业务建模等。而我最喜欢信息架构这个名字，因为在这个阶段，我们要做的就是抽象、规划、设计不同纬度、不同粒度的信息，来支撑整个网站的信息系统。我经历了很多不同的信息架构方法论，从最初的基于模块的设计，到后来的领域驱动设计(DDD)，面向服务设计(SOA)，Oracle的数据建模驱动设计，到最新的微服务架构设计等等。我想说的是，这些方法论大多是针对那些大规模的应用。你需要了解它们，并在你的系统设计中有意识地匹配这些优秀的架构和设计思想，这将有助于你做出一个具有良好可扩展性的系统，从而避免整个系统复杂度和规模的扩大带来的大规模重新配置的风险。
对于我们的小站，只需要先定义合适的业务域和实体模型。这里，我们定义了以下三个业务实体，并为这些实体添加了必需的字段。
用户-用户
资源-资源
反馈——用户反馈。
围绕这三个领域模型，我们定义了另外三个服务，并为它们添加了相应的方法:
用户服务-用户服务资源服务-资源服务反馈服务-用户反馈服务。
信息阶段完成后，我们对整个网站有一个全面的看法。接下来，我们可以进入UI设计阶段。
Ui设计
我经常在CSDN、V2EX等一些开发社区看到一些程序员独立开发的网站或工具。我在访问这些网站的时候，经常发现大部分都是简单套用一个模板或者根本就没有任何设计。这样的网站虽然功能不错，但是很难吸引用户使用。我也不是设计师。我只是在业余时间自学如何设计，但是当我需要独立完成一个网站的时候，我还是会尽力去做一些设计。为了快速实现一个网站，我的做法往往是使用现代的网站设计工具(比如Blocs)或者现成的网页模板来实现。在这个项目中，我还使用了一套相对简单的H5+CSS3网络模板。
使用模板有很多好处，比如可以直接得到优秀的设计，使用web模板自带的HTML、CSS、JavaScript代码可以节省大量开发时间。但是使用模板也会带来一些问题。例如，web模板可能包含大量您不需要使用的页面或代码。你需要小心地剔除它们。设计师写的一些脚本很可能存在缺陷，你需要修复它们。同时我想说，你必须先了解设计，才能正确使用模板，因为模板往往不能解决你所有的设计需求，你总会需要在你的设计中添加一些额外的页面。这时候你必须在已有设计的基础上进行添加或改造，这往往比从头开始做一个完整的设计更难，因为你必须保持设计思路与网页模板的设计者一致，否则你的网站会变得非常不和谐。在整个过程中，你
下面是我在工匠社网站工作时用Sketch做的一个资源详情页的设计。
为了获得更好的用户体验，我还会在最终显示效果中利用CSS3的@Keyframe和打开报纸之类的简单动态效果，让应用更加生动。
应用架构
接下来，我要做的就是为网站选择合适的应用架构。我为这些银行或保险公司编写了底层核心框架，以支持他们复杂或高度并发的业务场景。但是对于一个刚刚起步的网站来说，完全不需要做这么复杂的架构设计。尽可能的使用那些标准的和开源的框架和技术，可以保证你可以做出一个扩展性很好的网站。记住:没有最好的架构，只有最适合的架构。
为了方便将来系统的扩展，我采用了前端分离的架构设计:
前端:
目前最流行的两个前端框架是AngularJS和React。在这个项目中，我选择AngularJS主要有以下两个原因:
我需要的是一个更完整的JavaScript框架。AngularJS可以满足我的综合要求。我可以使用它的控制器、服务、指令和其他特性来构建一个完整的Web应用程序。我以后会用Ionic写一个App应用。由于Ionic也是基于AngularJS的，这意味着我将能够重用很多前端代码。
后端:
我选择了一个基于SpringBoot的框架，它不是Spring的升级版，而是一个全新的框架，为构建微服务提供更好的支持。SpringBoot可以给我提供一个扩展性很好的框架。在初始阶段，我可以作为一个整体服务于所有功能。随着用户数量的增加和系统规模的不断扩大，我将可以使用SpringBoot拆分系统的服务，并基于域驱动设计的设计思想构建一系列微服务。
目前我在后端主要使用以下技术或框架组合:
SpringBoot:开发基于REST的服务，使用JSON作为数据交换格式。MyBatis:提供基于SQL的持久层支持。Redis:由于前后端的分离，我使用Redis来持久化用户会话信息。SpringSecurity:提供安全支持，可以与SpringBoot无缝集成。MySQL:数据库。在这个项目中，我仍然使用传统的关系数据库。Maven:项目的包依赖管理，以及项目打包。
剥削
相对来说，发展是一个循序渐进的事情。首先，基于SpringBoot和其他第三方库提供的API，开发基于REST的服务。然后在前端使用AngularJS将应用分成UserManager、ResourceManger和FeedbackManager几个模块，分别开发，通过$http调用后端服务进行业务处理和数据交互。
在整个开发过程中，您仍然需要解决一些问题:
端和前端分离后，如何管理Session，如何实现安全的跨域请求，如何集成SpringBoot的MyBatis框架，如何使用SpringSecurity构建安全的REST服务，如何使用云服务上传和处理图片。
这些具体的开发技巧会在全栈实践的后续文章中与大家分享。
部署
选择云服务器
虽然我们采用了前端分离的架构，但是上线初期可以将系统的前端、后端、数据库部署在一个云服务器上。我们需要选择云服务提供商并部署应用程序。如果你是学生，建议你选择亚马逊云，因为第一年可以提供免费服务。由于我有很多服务器使用阿里云，为了方便管理，我选择阿里云服务器来部署我的应用程序。至于 *** 作系统，我选择了UbuntuLinux，其他硬件除了带宽，我选择了3M。我用的是最低配置，因为根据最初网上的使用评测，这个配置足够了。当用户和规模增加时，通过升级配置可以获得更多的硬件资源。这仍然是事实。
应用程序部署
后端:由于采用了SpringBoot，后端服务可以直接打包成一个带有Maven插件的runnablejar包，集成了jettyserver直接对外提供REST服务。当然，如果您不喜欢jetty，也可以通过简单地修改pom.xml中的配置来集成tomcat作为您的应用服务器。最后，在您的服务器启动脚本中，只需使用java-jar命令来启动您的后端服务。
前端:前端是一个静态网站，包含HTML，CSS，图片文件。我把它部署在阿帕奇服务器上。当然也可以选择Nginx这样的高性能服务器。
安全的
你需要定义网站的安全策略，比如用户组，用户权限的分配。出于安全考虑，尽量用防火墙隔离不需要开放的端口，只保留80个对外提供服务的端口，等等。另外，如果你的网站交互包含一些敏感信息，那么你也应该使用TLS对数据传输进行加密。
性能调整
在正式上线之前，你也要对网站做一些性能调优，保证网站能有更好的响应速度。使用YSOW等工具是不错的选择，可以告诉你网站加载慢的原因，并给出优化建议。
以下是一些常见的优化方法:
合并静态文件:压缩JavaScript和CSS文件(去掉不必要的空大小写、换行符和注释)和合并(将多个CSS或JavaScript文件合并成一个文件)，用GZIP压缩可以提高网站的加载速度。
使用前端镜像库:对于网站使用的第三方字体和前端代码库，我是通过360和百度的前端镜像站点获取的，可以减少网站本身的流量开销，提高网站的整体加载速度。
使用云存储和CDN加速:工匠社的资源共享有上传图片的功能，图片占用带宽最多。3M的带宽根本无法支持几个用户同时接入。所以，我选择用七牛云。我通过七牛云的API把用户上传的图片转移到七云存储空，直接用它的CDN对这些静态资源进行加速，这样网站的图片和那些静态文件(我们把JavaScript，CSS等。不会在CDN上频繁修改)不会占用阿里云的带宽。另外，不得不说七牛云的价格对于个人用户或者初创企业来说都是优惠的。比如10G空内的存储是免费的。
下图是网站的CDN流量统计:
网站数据统计
网站上线后，你还需要对网站的访问量和用户进行持续的统计和分析。你可能会发现，我们并没有在网站功能中加入相应的用户访问追踪模块。是的，我们可以借助第三方统计平台来帮助我们做到这一点。因为GoogleAnalytics在国内用不了，所以选择了百度统计。你只需要在百度统计中注册一个账号，加入你的站点，然后在你的网站头部添加一段简短的JavaScript代码，就可以实现最基本的网站统计功能。当需要对用户进行更个性化的分析时，可以在应用中添加相应的模块进行数据的抓取和分析。
开发和设计工具
最后，我来分享一下我在整个开发过程中使用的四个主要的开发设计工具。我使用的其他工具也可以在我的Mac工具箱(设计、开发、效率)中找到。
黯然失色
Eclipse是我一直在用的后端JAVA开发IDE，我也用它来开发基于SpringBoot的后端服务应用。实际上，它仍然不如商业智能。我推荐它是因为一方面我一直在用，另一方面它是免费的。
崇高文本3
我使用SublimeText开发基于AngularJS的前端静态网站。它是我开发前端代码时最喜欢使用的IDE。我喜欢它让代码异常清晰的主题，喜欢它功能丰富的插件。有了它，开发HTML、CSS、JavaScript成了一件很惬意的事情。
代码套件
CodeKit可以自动编译和自动编译Less，Sass，Stylus，CoffeeScript，Jade&Haml等文档。为JavaScript提供合并、压缩和错误检查。它还可以优化jpeg和png图像，并为我提供一个本地测试环境。当然，你也可以不使用任何工具，直接通过Grunt或Gulp的插件来实现所有这些功能。
草图3
草图是目前最常用的设计工具。只有几十米。和Photoshop比起来，小很多。更重要的是，它是为UI设计的。我不用关注与我UI设计无关的图像处理功能，从而降低工作环境中的噪音。另外，通过强大的插件功能，我可以根据需要安装使用，大大提高了我的工作效率。所以，现在我会选择Sketch作为第一工具，从设计一个完整的UI设计到设计一个图标或者修复一张图片。
能够快速构建一个Web应用或app是全栈工程师的核心竞争力，这也是为什么那么多创业公司都在找全栈工程师的原因。如果你也想成为全栈工程师，就跟着我练全栈吧_
在我的下一篇文章中，我将与你分享“建立基于SpringBoot的休息服务”。此外，我们也欢迎您作为贡献者或Core成员加入工匠社的开源项目。它是一个完全开源的实验项目，我们希望在这里聚集年轻的设计师和开发者，一起实践优秀的设计和技术，通过微创新做出更多有趣的东西。我们期待您的加入！
本文由技术人员授权站长之家发布编辑。请在本文开头注明作者姓名，以保持文章的完整性，并请附上出处(站长之家)及本页链接。
注:阅读相关建站技巧请移至建站教程频道。
推荐:只有高性能云服务器稳定的网站才能赚更多的钱。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）