前后端分离项目的技术与框架通用方案

浅浅的花香味﹌ 2021-09-12 03:24 350阅读 0赞

摘要：本文是关于前后端分离项目的技术与框架选型通用方案，是一个比较成熟的方案。目前大部分公司也是采用这个体系。

## 一、系统架构 ##

整个系统会由三部分组成，如下

![20170326143929271][]

## 二、细节 ##

### 1、前端 ###

前端这里是一个纯前端的项目，使用webpack打包后就只有一些js/css等静态文件。

**开发语言与框架**

vue+webpakc+axios

**部署方式**

静态js/css/html文件直接部署到ngnix所在机器的一个目录，然后ngnix设置映射到该目录

**技术难点**

跨域带cookies,跨域cookies共享

**解决方法**

前台使用fetch/axios请求ajax都可以设置允许跨域带cookies,同时中台也要设置可以跨域。针对cookie共享的问题，可以将cookie写到根域名之下。

### 2、中台 ###

中台是一个war包项目，直接放到tomcat下面就行

**开发语言**

java+springMvc+Spring+Dubbo+Tomcat

**部署方式**

将工程打包成war包，部署到tomcat之上，注意这里的war包是没有页面的，它只是为上面1中的前端工程提供ajax请求的地址

**技术难点**

方案比较成熟，无技术难点

### 3、后台 ###

后台是一个纯后台项目，用java语言

**开发语言**

Java+Spring+Mybatis+Dubbo

**部署方式**

打一个配置分离的包，包含lib、conf、bin三个目录。使用dubbo启动脚本来启动为中台提供服务（参考笔者的这个文章：[Dubbo应用启动与停止脚本,超详细解析][Dubbo]）

**技术难点**

方案比较成熟，无技术难点

## 三、思考 ##

其实，中台的项目可以不用，只不过后台的java接口要找到一个能直接http请求的方案。

[20170326143929271]: /images/20210811/4aed179065db41b18bf4fd34a4c82214.png
[Dubbo]: http://blog.csdn.net/evankaka/article/details/61617483

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现前后端项目分离与交互②

后端数据的加载输入 1.1 在src目录下创建一个utils文件夹，创建了一个request.js文件,然后下载axios。 1.2 在requ

╰+哭是因爲堅強的太久メ/ 2024年04月06日 14:55/ 0 赞/ 51 阅读

相关 SSM前后端分离技术

文章目录前言一、前后端分离技术和跨域二、两种不同的实现方案 1.使用注解实现简单请求的跨域传输 2.通过设置请求头和参数

小灰灰/ 2024年04月01日 08:40/ 0 赞/ 44 阅读

相关前后端分离和前后端不分离项目的区别和优劣

前后端分离和前后端不分离项目的区别和优劣技术层面的区别优缺点同时需要的情况技术层面的区别前后端数据分离：前端调用后台写好的接口来拿数据

怼烎@/ 2023年09月25日 19:43/ 0 赞/ 37 阅读

相关若依框架---前后端分离项目部署实践

一、环境准备系统：centos7（可以买ECS或本地安装虚拟机）安装：git、jdk、maven、npm、mysql、redis、nginx 具体安装方式详见code

深碍√TFBOYSˉ_/ 2023年09月25日 18:43/ 0 赞/ 17 阅读

相关前后端分离的项目部署

目录 1、pom.xml加thymeleaf的依赖 2、controller写个方法跳转到index.html 3、resource下新建static，放

小灰灰/ 2022年12月24日 09:53/ 0 赞/ 157 阅读

相关前后端分离框架 VueThink

VueThink 详细介绍 VueThink 是一套基于 Vue 全家桶（Vue2.x + Vue-router2.x + Vuex）+ Thinkphp5 的前后端分离框

￡神魔★判官ぃ/ 2022年05月18日 11:15/ 0 赞/ 183 阅读

相关方案 - 前后端分离的用户授权

基本原理用户通过前端页面登录成功后后端返回`token`字符串，前端将token存入`localStorage`中，之后前端所有的数据请求都携带token（token可

怼烎@/ 2022年04月03日 04:11/ 0 赞/ 251 阅读

相关前后端分离技术

[localStorage 前后端分离技术][localStorage] html5原始的MVC前后端设计技术，原始。 wcf前后端分离技术。后端springboot，

素颜马尾好姑娘i/ 2021年12月17日 09:19/ 0 赞/ 435 阅读

相关前后端分离项目的技术与框架通用方案

摘要：本文是关于前后端分离项目的技术与框架选型通用方案，是一个比较成熟的方案。目前大部分公司也是采用这个体系。一、系统架构整个系统会由三部分组成

浅浅的花香味﹌/ 2021年09月12日 03:24/ 0 赞/ 351 阅读

相关前后端分离方案以及技术选型

一.什么是前后端分离？理解前后端分离大概可以从3个方面理解： 1. 交互形式 2. 代码组织形式 3. 开发模式与流程 1.1 交互形式前后端不分离

r囧r小猫/ 2021年07月04日 20:11/ 0 赞/ 560 阅读