前端架构

HTTP HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。 HTTP是一个基于TCP/IP通信协议来传递数据 HTTP 工作原理 HTTP协议工作于客户端-服务端架构上。 浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。 Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。 Web服务器根据接收到的请求后，向客户端发送响应信息。HTTP默认端口号为80，但是你也可以改为8080或者其他端口。 HTTP三点注意事项： HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。 HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。 HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。 HTTP 消息结构

本文梳理如何搭建和构建前端组件库. 了解几个问题 为何需要组件化？ 大部分项目起源都是源于业务方的各种各样的 奇葩 需求。随着公司的业务发展，公司内部开始衍生出很多的B2C系统、后台系统，前端部门也疲于应对越来越多同质化的项目，这些项目在很多基础模块层、源代码存在不小的相似，甚至存在相似的业务模块。 笔者曾经所在的一个电商团队，前端成员基本每个人多做过登录注册、购物车、支付、微信登录...... 大量重复的业务代码。由于组内技术没有强制规范 本质上相同的东西，重复的去code就显得浪费. 分析这些问题发现： 日渐增多的业务场景需求 前端资源有限，无法支持所有项目的快速迭代 公司内部诸多产品业务混乱、体验不统一 于是开发底层的工具去服务不同业务就很有必要： 设计一套公司内部的基础组件库支撑各个前端项目，提升项目和业务的可用性和一致性。 一个前端团队拥有大量的业务场景和业务代码，相似的页面和代码层出不穷，如何管理和抽象这些相似的代码和模块，绝大多数团队会遇到这样的问题。 不断的拷代码？ 修改代码？还是抽象成组件？显然后者更高效。所以在多项目存在高度的可控、底层依赖的情况下，前端实现组件库是最好的选择。 组件化，又或者组件抽离的目的是为了 功能 共享方便维护，其能够带来的好处是少写代码，统一管理、统一维护。一套基础组件代码千锤百炼精而又精，从而起到快速支撑业务迭代，提升开发效率的目的。

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。 互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。 学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。 后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push 必备基础技能 前端技能汇总（ https:// github.com/JacksonTian/ fks ）这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向，完善技能和知识面。 frontend-dev-bookmarks（ https:// github.com/dypsilon/fro ntend-dev

2．1、Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架，即使用了MVC架构模式的思想，将web层进行职责解耦，基于请求驱动指的就是使用请求-响应模型，框架的目的就是帮助我们简化开发，Spring Web MVC也是要简化我们日常Web开发的。 另外还有一种基于组件的、事件驱动的Web框架在此就不介绍了，如Tapestry、JSF等。 Spring Web MVC也是服务到工作者模式的实现，但进行可优化。前端控制器是DispatcherServlet；应用控制器其实拆为处理器映射器(Handler Mapping)进行处理器管理和视图解析器(View Resolver)进行视图管理；页面控制器/动作/处理器为Controller接口（仅包含ModelAndView handleRequest(request, response) 方法）的实现（也可以是任何的POJO类）；支持本地化（Locale）解析、主题（Theme）解析及文件上传等；提供了非常灵活的数据验证、格式化和数据绑定机制；提供了强大的约定大于配置（惯例优先原则）的契约式编程支持。 2．2、Spring Web MVC能帮我们做什么 √让我们能非常简单的设计出干净的Web层和薄薄的Web层； √进行更简洁的Web层的开发；

SpringMVC的工作原理图： SpringMVC流程 1、 用户发送请求至前端控制器DispatcherServlet。 2、 DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 4、 DispatcherServlet调用HandlerAdapter处理器适配器。 5、 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 6、 Controller执行完成返回ModelAndView。 7、 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 8、 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 9、 ViewReslover解析后返回具体View。 10、DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 11、 DispatcherServlet响应用户。 组件说明： 以下组件通常使用框架提供实现： DispatcherServlet：作为前端控制器

1. 引言 Serverless 是一种 “无服务器架构”，让用户无需关心程序运行环境、资源及数量，只要将精力 Focus 到业务逻辑上的技术。 现在公司已经实现 DevOps 化，正在向 Serverless 迈进，而为什么前端要关注 Serverless？ 对业务前端同学： 会改变前后端接口定义规范。 一定会改变前后端联调方式，让前端参与服务器逻辑开发，甚至 Node Java 混部。 大大降低 Nodejs 服务器维护门槛，只要会写 JS 代码就可以维护 Node 服务，而无需学习 DevOps 相关知识。 对一个自由开发者： 未来服务器部署更弹性，更省钱。 部署速度更快，更不易出错。 前端框架总是带入后端思维，而 Serverless 则是把前端思维带入了后端运维。 前端开发者其实是最早享受到 “Serverless” 好处的群体。他们不需要拥有自己的服务，甚至不需要自己的浏览器，就可以让自己的 JS 代码均匀、负载均衡的运行在每一个用户的电脑中。 而每个用户的浏览器，就像现在最时髦，最成熟的 Serverless 集群，从远程加载 JS 代码开始冷启动，甚至在冷启动上也是卓越领先的：利用 JIT 加速让代码实现毫秒级别的冷启动。不仅如此，浏览器还是实现了 BAAS 服务的完美环境，我们可以调用任何函数获取用户的 Cookie、环境信息、本地数据库服务

前端开发和后台开发是有区别的，工作的内容和负责的东西是完全的不同的，以下以网站的开发为例。 1、前端开发 前端开发现在一般指的就是web前端开发工程师，其负责是网站前端页面也就是网页的页面开发，简单的说网站前端负责是东西是网站用户可见的东西，如网页上的特效、网页的布局、图片、视频等内容。网站前端工程师的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并和后端开发工程师配合做网页的数据显示和交互。 2、后端开发 后端开发一般也叫做后台，其负责是网站后台逻辑的设计和实现还有用户及网站的数据的保存和读取。比如一般网站都是有用户注册和登录的，用户的注册的信息通过前端发送给后端，后端将其保存在数据库中，用户登录网站的时候，后端需要通过用户输入的用户名和密码是否与数据库中的一致来判断用户是否有权限登录，这是后台开发中的一个最简单的功能。 一、要弄清区别，首先要知道前端和后端的概念： 1）Web前端: 顾名思义是来做Web的前端的。这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 2）Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。 二、实际的开发过程中，前端、后端开发人员所要具备的技能： 1）前端开发人员

最近开始实习，公司用的都是前后端分离的架构，自己在学校学习的时候真的是对这方面了解太少了，所以开一篇博客来记录一下自己学前后端分离的过程。 什么是前后端分离和为什么要前后端分离 首先要理解前后端分离，得先理解前端和后端的含义。以前我是这么认为的，像html,css,js,jq包括UI之类的就是前端的工作，而后端则是提供前端需要获取的数据的接口。如果是像这样的理解的话，以前那样用jsp进行开发的模式(这里以java为例)，就会产生一个问题，因为jsp它是用jsp标签在html页面中插入java代码，而java代码是由后端开发人员进行编写，而jsp中的那些html代码，又是前端人员编写，在开发的过程中，会出现后端人员必须要等待前端人员的页面编写完成后再进行进一步的开发。而还有一个更严重的问题是，在调试过程中也非常不方便，前端人员要对着jsp，看着那一串又一串的java代码进行调试，而后端人员同样也要对着html代码进行调试，增加了开发人员的学习成本，最直接的结果就很容易产生前后端开发人员的互怼，因为不好直接看出是前端还是后端出了问题 为了解决这一问题，就出现了前后端分离这一开发模式。什么是前后端分离，简单来说，就是前端和后端分为两个工程，后端就是去实现业务逻辑，提供前端所需要的API接口。而前端就调用后端提供的接口，实现前端页面的交互逻辑，运用nodejs或者ajax进行交互。

目录 理解前后端分离 为什么要做前后端分离，它到底有什么好处？ 实现的一些表现 RESTful风格的API 理解前后端分离 为什么要做前后端分离，它到底有什么好处？ 前后端的分离也实现了前后端架构的分离，带来的好处有： 整个项目的开发权重往前移，实现真正的前后端解藕，动态资源和静态资源分离，提高了性能和扩展性。 前端静态化 前端有且仅有静态内容,再明确些,只有HTML/CSS/JS。 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。 前端内容的运行环境和引擎完全基于浏览器本身。 后端数据化 后端可以用任何语言,技术和平台实现。 遵循一个原则:只提供数据,不提供任何和界面表现有关的内容。 统一API接口，接口完全可以共用。 提供的数据可以用于任何其他客户端(如IOS,安卓,PC,微信小程序等)。 通过一些代码重构，就可以大量复用接口，提升效率。 平台无关化 前端3大技术（HTML/CSS/JS）本身就是平台无关的。 后台连接部分的本质是实现合适的RESTful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现。 前后端交给不同的人来编写，明确划分职责，发现bug的时候可以快速定位。 vue.js等框架编写前端时，会比之前写jquery更简单快捷。 架构分离化 前端架构完全基于HTML/CSS的发展和JS框架的演变,由于前台是纯静态内容

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 核心思想： 前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互 。 在互联网架构中， web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。 一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。 以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。 随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻。 对于后端java工程师： 把精力放在 java基础，设计模式，jvm原理，spring+springmvc原理及源码