关键词:
目录:
2. 前后端接口联调;
3.前端性能优化 ;
一、项目有前后端分离和前后端不分离:
在前后端不分离架构中,所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览器的请求后,进行处理得到数据,然后将数据填充到静态页面中,最终返回给浏览器。
实现前后端分离后,有了下面几点改变:
1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器
2.前端服务器需要接收Http请求(一般使用node.js)
3.前端服务器需要进行视图解析(可以使用vue.js、angular.js)
4.前端服务器需要处理路由(也就是页面之间的跳转逻辑)
5.后端服务器只需要返回数据
一、前言
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
在互联网架构中,名词解释:
Web服务器:一般指像nginx,apache这类的服务器,他们一般只能解析静态资源。
应用服务器:一般指像tomcat,jetty,resin这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有web服务器好。
二、技术分工(开发人员分离)
以前的JavaWeb项目大多数都是java程序员又当爹又当妈,又搞前端,又搞后端。
随着时代的发展,渐渐的许多大中小公司开始把前后端的界限分的越来越明确,前端工程师只管前端的事情,后端工程师只管后端的事情。正所谓术业有专攻,一个人如果什么都会,那么他毕竟什么都不精。大中型公司需要专业人才,小公司需要全才,但是对于个人职业发展来说,我建议是分开。
1、对于后端java工程师:(负责Model层,业务处理/数据等)
把精力放在java基础,设计模式,jvm原理,spring+springmvc原理及源码,linux,mysql事务隔离与锁机制,mongodb,http/tcp,多线程,分布式架构,弹性计算架构,微服务架构,java性能优化,以及相关的项目管理等等。
后端追求的是:三高(高并发,高可用,高性能),安全,存储,业务等等。
2、对于前端工程师:(负责View和Controller层。)
把精力放在html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等。
前端追求的是:页面表现,速度流畅,兼容性,用户体验等等。
术业有专攻,这样你的核心竞争力才会越来越高,正所谓你往生活中投入什么,生活就会反馈给你什么。并且两端的发展都越来越高深,你想什么都会,那你毕竟什么都不精。
通过将team分成前后端team,让两边的工程师更加专注各自的领域,独立治理,然后构建出一个全栈式的精益求精的team。
三、开发模式
以前老的方式是:
产品经历/领导/客户提出需求===》UI做出设计图 ===》前端工程师做html页面===》后端工程师将html页面套成jsp页面(前后端强依赖,后端必须要等前端的html做好才能套jsp。如果html发生变更,就更痛了,开发效率低)===》集成出现问题 ===》前端返工 ===》后端返工===》二次集成 ===》集成成功 ==》交付
新的方式是:
产品经历/领导/客户提出需===》UI做出设计图 ===》前后端约定接口&数据&参数 ===》前后端并行开发(无强依赖,可前后端并行开发,如果需求变更,只要接口&参数不变,就不用两边都修改代码,开发效率高)===》前后端集成 ===》前端页面调整 ===》集成成功 ===》交付
四、请求方式
原文:https://blog.csdn.net/bntX2jSQfEHy7/article/details/80589580
二、前后端接口联调:
前言:
以JC同事为例,他公司为前后端分离架构,前端vue全家桶;前后端人员开会协商数据接口后(主要是定义传输的数据和API接口),前后端并行开发;因为后台此时无法提供后端数据,所以前端需要用mock模拟假数据,管理API接口,获取数据,到时接口联调时连接后端服务器,访问后端数据即可。
为什么要联调 本地的mock数据是JC同事自己写的,肯定符合前端需求,但是后端接口首先需要测试通不通,还需要测试数据格式对不对,还有后端有没有填写足够的数据,比如写列表页,前端想分页,如果后端就写了两条测试数据,你咋整? 所以,Jack需要根据后端对接口的调整,不断地来回切换url,这样岂不是还在受后端的影响,还谈什么毛线的前后端分离,名存实亡嘛!
当我的朋友Jack把static文件夹下的mock数据删除之后,在运行项目,发现报错了,浏览器告诉他,你访问的mock下面的index.json文件找不到404。
我们平时本地前端开发环境dev地址大多是 localhost:8080,而后台服务器的访问地址就有很多种情况了,比如 后端程序猿本地IP(127.0.0.1:8889),或者外网域名,当前端与后台进行数据交互时,自然就出现跨域问题(后台服务没做处理情况下)。axios不支持jsonp, 所以我们就要使用http-proxy-middleware中间件做代理。
https://www.douban.com/note/686499733/?type=rec#sep
vue框架前后端联调流程(代码片段)
什么是前后端联调定义在我们开发的过程中,发送请求的ajax数据都不是后端返回的真数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完成后,后端的接口也写好后,我们就需要把mock数据换... 查看详情
开发步骤
项目是基于前后端分离的架构进行开发,前后端分离架构总体上包括前端和服务端,通常是多人协作并行开发,开发步骤如下:1、需求分析梳理用户的需求,分析业务流程2、接口定义根据需求分析定义接口3、服务端和前端并行... 查看详情
工作---前后端联调
一、前后端联调之前当页面的布局和逻辑开发都实现后,后端的的接口没有开发出来的时候,我们可以先进行Mock数据,在已有接口文档的情况下,我们可以直接按照接口文档来开发,通过mock语法来编写相对应的字段... 查看详情
前后端分离微服务架构如何设计
...道最多的。比如:一般前端工作包括六个部分:后端如果前后端职责划分很清楚的话,后端更多开发工作在于业务接口设计、业务逻辑处理以及数据的持久化存储,并提供详细的接口设计文档给前端开发人员使用。一般后端工作... 查看详情
一次极限项目管理,设计,开发,联调与测试
...sp; 最近项目着实忙碌,奋战在第一线,从一开始了解需求,整理需求,到系统设计,模块儿设计。随后前后端接口约定,后台管理模块儿与核心模块儿开发,前后端接口联调,与其他系统接口约定联调。再到全项目测试... 查看详情
微信小程序前后端分离怎么实现
微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开,前端负责展示和交互,后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤:1.前端代码开发:使用微信小程序开... 查看详情
vue+mockjs模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发。关于mockjs,官网描述的是1.前后端分离2.不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。3.数据类型丰富4.通过随机数据,模拟各种场景。等等优点。总结... 查看详情
drf入门规范(代码片段)
一web应用开发模式1.1前后的不分离#前后端混合开发(前后的不分离):返回的是html的内容,需要写模板1.2前后端分离#前后端分离:只专注于写后端接口,返回json/xml格式数据#xml格式数据<xml><name>hjj</name></xml>#js... 查看详情
七个开源的springboot前后端分离项目,一定要收藏!
前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年... 查看详情
drf0.前后端分离
前后端不分离的工作流程:提出需求前端页面开发翻译成模板前后端对接集成遇到问题前端返工后端返工二次集成集成成功交付上线前后端分离提出需求约定接口规范数据格式前后端并行开发前后端对接前端调试效果集成成功交... 查看详情
关于前后端分离与不分离
什么是前后端分离? 在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。 核心思想是前端html页面通过ajax调用... 查看详情
//……关于前后端分离与不分离
什么是前后端分离? 在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。 核心思想是前端html页面通过ajax调用后端... 查看详情
前后端分离
一丶为什么要实现前后端分离:前后端分离有什么好处按照项目开发来说:1.实现前后端分离可以使项目更快的研发完成,2.加快了项目的时间传统开发形式: 前后端分离开发:在开发阶段,当有新的需求时,前后端工程师约定好接... 查看详情
前后端分离
开发模式在Web开发模式中,有两种开发模式前后端不分离前后端分离前后端分离优势在前后端不分离模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合... 查看详情
前后端分离接口规范
...用、高性能、高扩展等特性的要求也愈加苛刻,从而导致前后端研发各自专注于自己擅长的领域深耕细作。然而带来的另一个问题:前后端的对接界面双方却关注甚少,没有任何接口约定规范情况下各自干各自的,导致我们在产... 查看详情
[转]前后端分离开发模式的mock平台预研
.../接口,用一个虚拟的对象/接口来模拟,以便测试。背景前后端分离前后端仅仅通过异步接口(AJAX/JSONP)来编程前后端都各自有自己的开发流程,构建工具,测试集合关注点分离,前后端变得相对独立并松耦合开发流程后台编写和... 查看详情
测试人员需要了解一下开发人员一直在讲的前后端分离
最近做的一个前后端分离的项目,来了补充一下前后端分离的知识点,发现这篇文章特别好,收藏起来,这篇文章有点长,哈哈作者:偏头痛杨来源:https://blog.csdn.net/piantoutongyang一、前戏前后端分离已成为互联网项目开发的业界... 查看详情
前后端分离浅析
...来什么样的好处?下面我就带着这些问题,来简单谈谈我了解到的前后端分离情况。 在讲前后端分离之前,让我们先讲一讲什么是MVC? MVC诞生于上世纪70年代,是一种经典的设计模式,全名为Model-View-Controller,即模型-视... 查看详情