前后端分离如何配置asml

‘壹’ springboot 前后端分离跨域方案 ProxyServlet配置

针对前后端分离场景下的一种跨域方案，如果不使用如nginx或者springboot的zuul网关等方案，可以采用 httpproxy 方案。

配置说明：
servlet_url : 对外可以访问的匹配路径，如前端js 在web服务访问后端服务的一个接口，可以不加域名或者ip port;
target_url : 指向后端服务的根服务地址。

更多，请关注：
springboot 技术实践总结

‘贰’ 怎样通过nginx配置实现前后端分离

两种方式，一个是前端一个nginx，后端几个webserver，后端设置防火墙，防火墙允许nginx进入。
另一个方式就是nginx设置好读写分离

‘叁’ springboot国际化（前后端分离情况）

spring.messages.basename=messages/messages

其中if else部分可以省略，看前端传的情况，前端如果传送header中的Accept-Language是en，zh，ja这样的简写，就需要补全，如果前端传过来的就是en-US，zh-CN,这样的就不需要if，else转换。

当然也可以不用messageSource用ResourceBundle ：

messages.properties中的是默认的，如果语言取不到就取默认的。

messages_zh_CN.properties是中文的配置：

messages_en_US.properties是英文配置：

比如切换语言的多选框：

具体方法：

则jquery调用可以是这样：

其中 headers:{ 'Accept-Language':localStorage.getItem('lang')||'en' }, 这个就是根据你切换的语言，传给服务端对应的语言，这样就做到前后端同步。

‘肆’ Sa-Token v1.20.0权限系统Springboot前后端分离使用

Sa-Token是一个轻量级java权限认证框架，主要解决：登录认证、权限认证、Session会话、单点登录、OAuth2.0 等一系列权限相关问题

框架针对踢人下线、自动续签、前后台分离、分布式会话……等常见业务进行N多适配，通过Sa-Token，你可以以一种极简的方式实现系统的权限认证部分。

以往大家会选择使用shiro或spring security都需要繁琐的配置定义拦截，前后端分离时还要搭配shiro，OAuth2.0 跨域等等问题。

sa-token在于方便、简单、拆箱即用，少量配置实现登录、权限拦截。

下面演示在springboot中使用sa-token：

1. 首先需要引入jar：maven项目在pom当中写入即可，此外关于权限系统都需要5张表：

 user表、role表、permission表 userRole表，rolePermission表(不在赘述)

2. 配置拦截器 （主要用于拦截未登录用户，排除login、index等接口）

3.对于前端的跨域解决，因为复杂post请求会有预请求，所以作如下配置:

5.众所周知，权限拦截是根据角色code或权限code进行拦截，sa-token将此接口暴漏，在此处存储List<String>,当拦截时可根据code是否拥有校验即可，所以此处查询code码存储到集合。

6.至此，权限配置基本完结，另外sa-token提供了两种方式拦截，一种是路由拦截，一种是接口注解拦截，

路由拦截:

此处方法可以写到拦截器配置 2 的SaServletFilter 里，例如：

注解拦截：

加在controller的接口注解上即可。

‘伍’ (Docker Nginx) Spring boot+Vue 前后端分离部署 详细完整版

简述：Spring boot+Vue 前后端分离项目部署，主要采用docker容器部署方式。

Springboot项目部署：docker构建mysql环境+docker构建项目自身环境。

Vue项目：使用docker启动nginx服务器方式代理部署。

项目使用mysql8.0作为数据源，所以部署时需要使用docker构建mysql环境及项目自身环境。

连接出现1251错误时：

首先将项目进行打包：mumu-0.0.1-SNAPSHOT.jar

到此，springboot项目采用docker方式运行部署结束。

使用docker容器方式运行nginx服务器。

对于nginx服务器，重要的两个操作是：

所以我们在配置启动nginx容器的时候，需要将对应的目录及文件进行宿主机挂载，方便后续更新资源及操作

启动命令：

‘陆’ 前后端分离的前端是怎么部署到生产环境中的，直接通过 nginx 吗

front-end-separate(前后端分离脚手架)

front-end-separate
一个前后端分离的脚手架工具（自主研发）
为什么选择grunt而不是gulp
如果你也和我一样喜欢grunt这种配置的方式，那么我相信这个脚手架觉对十分适合你
所有静态资源都md5全并压缩打包,css,js,img,html
已在生产环境验证
基于express和grunt的前后端分离框架
模板引擎使用的是nunjucks，好处是可以实现模版继承，又不像jade一样把html标签都简化了
express提供路由服务
项目中app为原代码文件（开发用），dist为打包后的文件（用于线上）
开发使用app，线上使用dist，支持一键cdn部署，加速你的项目
项目启动时，修改任何express代码，可以实现自动重启–基于nodemon
支持sass图片精灵（自动打包精灵图片，再也不用手动去拼凑了）
基于grunt md5 打包合并
线上输出的html已经压缩成一行（让你的代码更有Geeker范）

‘柒’ 如何在开发时部署和运行前后端分离的JavaWe

在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用bbo+zookeeper或者springCloud来构建微服务，前端则会是一个单独的项目，前台的请求通过微服务来调用。但是，不同与传统的web项目，这类前后端分离的项目如何在开发中部署和运行呢？

当前后端分离时，后端项目一定会被加载到tomcat的webapp目录下面，但是前端的资源院该如何被访问到呢？这里以tomcat这个中间件为例，探讨在开发这类项目的时候，如何让前后端分离的项目部署并且运行起来，即后端项目部署在tomcat之后如何在运行时访问静态资源（非上线部署）。

主要有两种方案：1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中，并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍

一、使用Nginx来访问静态资源。

在本地安装nginx并且修改nginx.conf，修改相关配置，将web访问的端口的资源进行更改，配置如下：

server { listen 80; server_name localhost; charset utf-8; #access_log logs/host.access.log main;
location / { proxy_pass http://tomcat_pool; proxy_redirect off;
proxy_set_header HOST $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
location ~ .*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$ {
root D:Workspacesesop-html; index index.html;
}

listen对象改为你本地的tomcat访问端口，最下面location中的root改为你前端项目中静态资源的位置，这样就可以实现只部署后端的项目就能访问前端的页面了。

二、将前端项目转换为动态的web项目，随后端项目一起丢入tomcat

这个方案省去了在本地安装和配置nginx，但是也只适用于开发阶段项目的部署运行和调试，真正在生产环境通常前后端项目会部署在不同的服务器。

• 如果是Intellij Idea,在导入前端项目之后，右键项目 add framework support --> web application，这时将会把前端项目转换为一个javaweb项目，然后将静态资源放在生成的web目录下即可。

• 如果是eclipse，可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下，或者直接先导入前端项目，然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。

然后，运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。

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

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

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

‘玖’ 前后端如何做到分离开发，最后再整合部署

由于后端提供的接口方式可能多种多样，同时开发人员在编写Node端代码访问这些接口的方式也有可能多种多样。如果我们在接口访问方式及使用上不做统一架构处理，则会带来以下一些问题：
1. 每一个开发人员使用各自的代码风格编写接口访问代码，造成工程目录及编码风格混乱，维护相对困难。
2. 每一个开发人员编写自己的mock数据方式，开发完毕之后，需要手工修改代码移除mock。
3. 每一个开发人员为了实现接口的不同环境切换(日常，预发，线上)，可能各自维护了一些配置文件。
4. 数据接口调用方式无法被各个业务model非常方便地复用。
5. 对于数据接口的描述约定散落在代码的各个角落，有可能跟后端人员约定的接口文档不一致。
6. 整个项目分离开发之后，对于接口的联调或者测试回归成本依然很高，需要涉及到每一个接口提供者和使用者。

‘拾’ nodejs-koa2（mvc模式）前后端分离 前端设计

前后端分离，前端nodejs运行环境，使用koa2集成负责资源分配与用户交互，实现token验证用户身份，路由控制。等！

自行 网络 解决；

"program": "${workspaceFolder}app.js"

此处就是是将app.js作为启动文件。${workspaceFolder}代表根目录，vsc启动时会在根目录下找到并加载app.js文件。

参数介绍： name 项目名称、 version 版本号、 description 项目描述、 main 项目启动文件、 scripts 启动快捷设置， author 作者， dependencies 第3方中间件名称及版本。

最重要的
“ dependencies ”这里添加一些要用到的包，以上是这次要用到的所有的包，版本自己更改。
“ scripts ”这里是一些nodejs的便捷命令，上线的时候会用到，直接在终端中，package.json同级目录 ，执行‘npm start’ 即 可启动app.js。
别的没啥太大作用瞎写即可。

启动相关配置，封装到config/init.js中，启动文件直接引用即可

3-6-1、init.js项目核心。

异常友好处理方法封装

路由配置

视图渲染

核心集成

3-6-2、config.js项目参数配置。为什么不用json文件 因为json不能加注释

3-6-3、token.js项目token相关方法封装。

执行后项目结构会增加两个文件

新增

src/hello.js。

views/index.html

浏览器访问： http://127.0.0.1:3000/koa/login

输入值获取token

获取的token如图：

先不用带token进行访问: http://127.0.0.1:3000/koa/ hello/jiaobaba,被token拦截，返回401

带上token访问： http://127.0.0.1:3000/koa/ hello/jiaobaba

测试页面渲染，及跳转html页面，直接访问 http://127.0.0.1:3000/koa /views

结束！！！！！！

需要源码联系我