这周着手开始重新构建官网,OTA1.3V继续推进,目前分为了企业版,与国外版,老官网那套架构的代码经过几千人手的改动,于是索性干掉,采用新的架构模式(前后端分离开发部署模式),找到下面这篇文章我觉得说的挺好,在开始讨论这个话题之前我们先来认识一下传统的开发模式。
一、传统开发模式
相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/XML页面,比如:
- PHP 开发有 Smarty模板引擎
- Java web工程有jsp页面
- Python 各个Web框架都有各自的模板引擎
- NodeJS 的express你懂得
都有一个共同的特点,服务器端后台语言生成解析后的HTML/XML格式返回给客户端,例如浏览器端访问直接返回解析好的HTML,浏览器直接就解释执行。
二、Ajax过渡
Ajax是把前后端分离部署的推进者,当时网页局部更新就是未来前后端分离的开端。那什么是前后端分离开发呢?
简单来说就是前端开发不需要部署后台语言那堆垃圾环境,后端开发也不需要前端写好的任何程序,后台只管暴露各种API接口提供前端进行数据的增删改查,不负责生成HTML页面
前端请求到数据后再动态声称dom节点。
三、前端构建
相对于后台来说,前端构建是重点,因为前后端分离开发后侧重点在于前端,后端就是一个数据提供,权限控制api。
后端项目通常都带自己的Server,除了PHP以外,所以后端做PHP开发的还需要一个WebServer,Apache就是经典配合,最近被抛弃换做Nginx了,所以后台环境本来就是伪生产环境。
前端项目还是要搭建一个Server,然后把项目丢里边才能跑起来调试开发,最笨的直接整一个Apache或者Nginx也可以,但这样开发还是很痛苦。可以利用Node工具集即可,Node工具集非常多,比如我非常喜欢用的BrowserSync。
四、解决请求问题
前后端分离后,我们只需要Server端告诉我们Api URL即可,那么这会产生一个问题:Ajax跨域。这里就不能使用一般的跨域解决方法去解决,比如jsonp,iframe信使等等,因为我们还有POST请求。
于是Http Proxy类工具就有用了,比如我就会在BrowserSync加入中间件判断每一个请求,如果是/api前缀就会代理到API Server端,API Server端收到数据后再返回给BrowserSync,BrowserSync再返回给浏览器端。这样就解决跨域请求的问题
生产环境有两种部署,一种是放到后台项目里,这就没啥说的,另外一种就是前后端分开部署,那就在前端WebServer处理端写点转发规则就好,如Nginx,Apache都支持。
五、静态资源路径问题
如果你的项目有上传资源功能,那自然就会产生用户资源,那前后端分离后,如何来处理这个问题呢?得先看模式。
资源与后台项目放一起,后台处理完后需要返回前台一个相对路径,如果资源时一台单独的服务器,那就需要返回资源的绝对URL即可。
六、会话
Web项目最头疼的就是无状态导致会话问题,传统的Web项目都使用Session/Cookie,但在前后端分离,集群部署模式下这Session明显缺陷太多。token方式已经是当前Web端解决会话的主流,并且有很多开源好用的token生成管理程序,基本上拿来就能用。
最后
前后端分离的弱点,无非有两点
1、前端负载增多,如请求到列表后,前端需要自己遍历数据集声称DOM节点 (目前绝大多数用户的电脑配置都不差,而且浏览器内核已经不在是满身缺陷的IE浏览器了)
2、不利于蜘蛛(其实现在的部分蜘蛛已经很厉害了,能够支持H5 C3效果)
强点,
1、Web端就像手机端的App一样,不需要Cookie/Session,与Server完全分离,易于维护、扩展。一个Server API可以随意服务多个Web App
2、AngularJS用过了以后,你应该会感觉未来的Web开发模式,AngularJS在几乎是前后端分离的领航者
3、前端静态资源与后台API分流,互不影响,甚至不会存在IO问题
4、开发上与后台几乎同步,互相不影响,特别是基于RESTFul API风格,更是减少了沟通的成本
5、方便各自debug,JAVA开发人员不需要跑到前端开发人员机器上看tomcat控制台的报错,前端开发人员也不需要跑到后端开发人员的机器上看浏览器报错调试
开发阶段目前需要考虑到的问题:
1前端负载的问题
2前端跨域调用问题
3安全性考虑(可能遭遇到相关的刷接口,xss攻击等)
4用token传递表示状态,token的安全性问题
相关推荐
发刊论文:面向企业级 web 应用的前后端分离开发模式及实践 针对企业级的 web 应用,研究前后端分离技术,提出一种解决多终端性能、组件化开发和打包部署的完整的开发模型,通过Vue实现组件化开发思想。企业级开发...
NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发+部署模式,包括: 浏览器环境、移动端环境、Electron 环境;后端有两个版本:SpringBoot 版本和 SpringCloud 版本。
本项目采用前后端分离开发模式,前端使用的技术有Javascript、jQuery、Art-template,后端使用技术有Flask、mysql、redis、celery等。文档全面,可快速部署。 可用于本科毕业设计,难度和工作量均较为适中。资料内...
前后端分离开发已经是很流行的一个开发模式。前端开发不需要部署后端语言的环境,后端开发也不需要前端写好的任何程序。后端只管暴露各种API接口供给前端进行数据的增、删、改、查,不负责生成HTML页面,这种方式...
NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发+部署模式,包括: 浏览器环境、移动端环境、Electron 环境;后端有两个版本:SpringBoot 版本和 SpringCloud 版本
NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发+部署模式,包括: 浏览器环境、移动端环境、Electron 环境;后端有两个版本:SpringBoot 版本和 SpringCloud 版本。
- 前后端分离部署,适应当前潮流。 - 接入第三方登录,减少注册成本。 - 留言采用弹幕墙,更加炫酷。 - 支持代码高亮和复制,图片预览,深色模式等功能,提升用户体验。 - 搜索文章支持高亮分词,响应速度快。 - ...
开发模式:Django + Vue 前后端分离 涉及技术:celery、FastDFS、ElaticSearch、redis、MySQL读写分离 部署方式:docker容器部署 nginx(vue) + uwsgi(django) 给出体验地址: 121.4.47.229:8080 因为钉钉、QQ、...
前后端分离是一种开发模式,它允许前端和后端作为独立的部分进行开发、测试和部署。在这种模式下,前端负责用户界面和用户体验,而后端则处理业务逻辑和数据存储。这种模式的好处包括提高开发效率、便于迭代和维护、...
前后端分离,Docker Compose 一键部署 采用 RABC 权限模型,使用 Sa-Token 进行权限管理 支持动态权限修改、动态菜单和路由 说说、友链、相册、留言弹幕墙、音乐播放器 支持代码高亮、图片预览、黑夜模式、点赞、...
与普通的 Spring 项目相比,Spring Boot 可以简化项目的配置和编码,使项目部署更方便,而且它还为开发人员提供了“开箱即用”的良好体验,可以进一步提升开发效率。 Spring Boot 正在成为越来越流行的开发框架。从...
这是一个系列项目,目标是示范前后端分离的开发+部署模式,包括: 浏览器环境、移动端环境、Electron 环境;后端有两个版本:SpringBoot 版本和 SpringCloud 版本。 1.主要依赖 名称 版本 描述 Angular 16.2.0 ...
springboot+vue校园社团管理系统,有如下的优点: ...2、前后端分离模式,贴近实际工作的开发模式,可用于学习或者毕设项目。 3、本项目可以支持协助部署,有需要请在“安前码后”公众号联系即可。
与普通的 Spring 项目相比,Spring Boot 可以简化项目的配置和编码,使项目部署更方便,而且它还为开发人员提供了“开箱即用”的良好体验,可以进一步提升开发效率。 Spring Boot 正在成为越来越流行的开发框架。从...
alibaba、Vue实现,采用前后端分离开发模式。前台商城系统具有首页门户、商品推荐、商品检索、商品详情、用户中心、购物车、订单流程、支付、秒杀等功能,后台管理系统具有控制面板、统计管理、商品系统、用户系统、...
该系统采用了前后端分离的架构模式,前端使用Vue.js框架进行开发,后端则使用SpringBoot框架。这种架构模式使得前后端的开发可以并行进行,提高了开发效率。 在功能上,该系统包含了实习生管理、实习单位管理、实习...
#thinkphp6+vue2.6+element2.13 前后端分离落地解决方案 本人开发环境版本信息: npm=6.13.4 vue =@vue/cli 4.1.2 node=v12.14.1 #注意1:vue-admin 中接口请求规则和动态路由,是对应tp6 中的接口规则和权限规则,...
该系统采用了前后端分离的开发模式,前端使用Vue.js框架实现用户界面,后端使用Spring框架实现业务逻辑处理和数据库访问,同时使用了MyBatis作为ORM框架简化了数据操作。\ \ 该系统具有以下特点:\ \\ 功能齐全:...