解决前后端分离开发，后端重定向不到前端页面问题

Posted 2023-04-25

参考技术A 公司项目使用的是springboot+angularjs这种前后端不完全分离的开发方式，前段时间把项目改成springboot+vue前后端完全分离，开发过程中有个后端重定向问题。后端项目地址： http://localhost:8080/ ，前端项目地址： http://localhost:9090/ ，比如后端 redirct:"/#/main" 重定向到这个页面，浏览器重定向的却是 http://localhost:8080/#/main 后端项目的地址，找了很久最终在webpack中找到解决方案。

我们可以在 devServer.proxy.onProxyRes 中做处理，配置如下:

前后端分离

概况

1. 后端渲染-前端渲染

2. 后端控制路由-前端控制路由

mvc开发架构

1. 前端人员负责静态页面设计

2. 后台人员负责套前端模板

-技术问题

1. 后台控制路由，返回到客户端的html是经过后端渲染( jsp-servlet-html)的， 性能问题

2. 后端人员需要编写编写的前端代码，导致 前后端强耦合

3. 前端人员只负责静态页面，导致前端人员在项目中的 比重低，话语权低

4. 前端人员后期开发需要依赖服务器环境，才能跑得动，后端人员也需要前端人员的页面才能继续开发，工作任务 同步阻塞， 联调开发

5. 前端模板文件依赖服务器环境， 服务器压力大，无法使用nginx上的负载均衡等技术

6. 页面交互逻辑，数据交互逻辑由后端人员负责

ps：

• web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。

• 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。

（一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。）

-开发意义问题

1. 沟通成本高

2. 维护成本高

3. 联调成本高

4. 无法正确且快速的响应变化

5. 总工作量的增加

前后端分离

前后端分离并非仅仅只是前后端开发的分工，而是在开发期进行代码存放分离、前后 端开发职责分离，前后端能够独立进行开发测试;在运行期进行应用部署分离，前后 端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比，能为我们 提升开发效率、增强代码可维护性，让我们有规划地打造一个前后端并重的精益开发 团队，更好地应对越来越复杂多变的Web应用开发需求。

实现方法一：ajax-RESTful风格编程

静态资源文件（js，css，html）放在nginx静态资源机上，由ajax调用应用服务器（java、tomcat）上的api接口，取得json格式的数据，无中间件。

可能出现的问题：

1. 出现性能问题、白屏问题、网络环境差体验差问题

2. 前端的校验后端仍须做一次

3. 前端请求的api后端未必存在

4. seo不良好

实现方法二：nodejs-web中间件

nodejs作为客户端和服务器的中间件，前端请求数据的方式通过nodejs请求应用服务器获取的并进行 一定的处理再返回给客户端。

特点：

1. 负责把请求转发给后台服务器

2. 跑在 服務器上的JS

3. 转发数据，串接服务

4. 路由设计，控制逻辑

5. 渲染页面，体验优化

6. 前端熟悉的语言，學習成本低

7. 都是JS，可以前后端复用

8. 体质适合：事件驱动、非阻塞I/O

9. 适合 IO密集型业务

10. 执行速度也不差

11. 实现跨终端

其它问题

• mock：只要规定好api接口，前端使用mock假数据来进行开发，无须同步后端开发进度

• 首屏问题：当首屏的时候，就在nodejs里面生成HTML（也属于前端渲染），不是首屏的时候，就AJAX过来在浏览器端渲染展示

参考网站

• 淘宝中途岛

• 伯乐在线的文章

• b站的前端之路

• 前后端分离实践