-
让品牌有温度、有情感
专注品牌策划15年
如何实现前后端分离（如何实现前后端分离vue）
发布时间：2023-03-18 13:57:44
稿源：
创意岭 阅读：
1484
问大家
大家好！今天让创意岭的小编来大家介绍下关于如何实现前后端分离的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
本文目录:
一、前后端分离的项目如何实现登录状态的保持。
前后端分离的项目一般会使用token实现登录状态的保持。 token其实就是一个随机字符串，当用户在登录页面输入账号和密码后，前端将账号密码发送给后端，后端检验完账号和密码后，会生成一个随机不重复的字符串即（token）,并将其响应给前端，前端拿到token后，需要在客户端进行持久化存储（一般会写在localStorage或者sessionStorage中，如果是SPA会存储在sessionStorage中，如果是MPA则存储在localStorage中），那么下次在向后端数据接口发送请求的时候，一般需要将token一并发送给后端数据接口，后端数据接口会对token进行校验，如果合法则正常响应请求，如果不合法，则提示未登录。 前端则根据本地存储中是否存在token判断用户是否处于登录状态。
二、基于Docker-Compose 部署前后端分离单体项目(一)
1.单体项目是否需要采用docker进行部署?
2.如果采用docker部署是否有必要采用docker-compose进行服务编排？
答案是也许有必要，也许没必要，docker的优势很多，但是对于垂直架构的项目优势未必那么明显，总之一句你需要根据自己的项目情况去考虑。笔者之所以会写这篇文章，大概率是基于省事的目的去部署一些小的项目。同时也是提供一种前后端分离的项目的部署方案(但绝对不是最有方案),以及在这种模式下的docker如何去工作才能达到我们的目的。
然而最终的目的是为了偷懒，省事。让前后端分离项目的部署方式变的简单。就也许在这种模式下，你只需要5分钟就可以实现部署，或许吧，不妨把这个当作一个目标。
本文目标:
上图将部署流程分为三部分，本地开发环境，阿里云容器镜像服务，以及linux服务器。下面分成三个部分对上图进行说明，工欲善其事，必先利其器。先进行说明，后面才能对每部分做的工作比较清晰。
本地开发环境分成三个项目
先解释一下图中的相关名词
容器镜像服务，分门别类的存储我们的镜像 。这个是镜像服务的唯一用途，就相当于maven的仓库是一样的。
我们也可以搭建自己的私服仓库，例如开源的harbor等，都非常好用，在企业中用私服会比较多。
首先我们需要在linux服务器上搭建Docker环境，也就是我们在linux上有一个docker。再将我们的镜像运行在docker上。
从上图我们发现在docker上运行这很多容器，mysql，redis，nginx，pitaya-java,pitaya-admin,pitaya-h5.
然而我们的容器是需要通信的，例如:大家都知道pitaya-java是一个springboot的项目，他需要访问mysql进行数据存储服务，需要访问redis缓存我们的令牌信息等。
也就是说，我们运行的这些容器之间是要相互能通信的。所以我们在docker上创建了一个内部网络叫做pitaya-network，他在172.2.0.0这个网段，我们需要我们的容器都加入pitaya-network这个网络，并且分配固定的IP地址,指定固定端口。
为什么需要分配固定IP地址，指定固定端口? 因为我们的容器也可能会和服务器一样，会挂掉，如果随机分配的话，创建新的容器，IP地址可能会变，我们容器间不能通信，例如java服务访问不了mysql，这样我们的线上就无法提供客户正常服务了。
本文我们做一个大概的概述，针对上面的结构以下问题是我们急需解决的？
其实针对java项目和vue项目制作镜像方式不同，但是原理一样，原理无非就是基于docker build这个命令制作镜像，但是java的镜像制作和推送可能更加简单，只需要一条命令即可，因为maven提供了制作镜像的插件。这些内容在下一篇文章都会涉及到！
想要表达清楚一键事情是非常不容易的事情，特别是通过文字，既不想废话连篇，又想表达清楚真的很难，因为细节比较多！然而我觉得弄清楚大方向是非常必要的，然后再进行分解，希望能说的明白，我会加油的，如果写的不好也希望大家原谅！
三、jQuery如何实现类似JSTL的功能进行前后端分离？
前后端分离一般用json交互，不用el表达式（依赖页面，过于耦合）。
还有html不解析el表达式。换成jsp页面导入jstl标签库。
四、前后端分离-跨域会话如何保持？
因为CORS的出现，大大降低了跨域的难度，另到AJAX有了更大的发挥空间，也导致了前后端更加容易实现。但是今天在实现前后端的时候发现了一个问题。 在进行session会话管理的时候，前端无法发送cookie到后端，前端每次访问后端都相当于一次新的会话，这样就导致登录后的信息是无法保存的。客户端每一次访问都需要重新登录。
对于前端来说，seesion字段是存在cookie中的。在跨域过程中，Cookie是默认不发送的。就算后端返回set-Cookie字段，前端也不会保存Cookie,更不会在下一次访问的时候发送到后端了。
因此只要前端可以把cookie发送到后端，后端就可以根据cookie拿到seeion字段进行会话验证。
进过重新对CORS的学习，只要通过3步，就可以让会话保持。
在ajax中设置，withCredentials: true。
例如：
服务端的 Access-Control-Allow-Origin 不可以设置为"*"，必须指定明确的、与请求网页一致的域名
服务端的 Access-Control-Allow-Credentials: true ，代表服务器接受Cookie和HTTP认证信息。因为在CORS下，是默认不接受的。
PS：
web.xml
以上就是关于如何实现前后端分离相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
