前后端分离实现了技术上更大的专一性，并且赋予了前后数据的灵活性！公司现在沿用的阿拍腔尺里系前后端分离，姑且分享下！
前后端分离之前的时代，MVC框架大行其道，通常是前端(后台亲切称呼为写静态页面的)开发HTML页面，包括CSS等，然后由后端开发人员统一进行动态数据绑定，这样前端的能力没有体现出来，而后端也对改样式，调布局不胜其烦，而且前后端耦合容易引发相互污染，项目笨重等缺点，这时候分离是最好的选择！
原始的袭高MVC模型图示:
读写分离就是将原来后端的框架MVC分为MC＋V，后端controller只需要控制流程的流转，权限认证，业务逻辑等，model层为业务代码与数据层的连接，整个View层全部作为前端项目的形式拆分，单独部署在不同的服务节点上，实现分离！
分离之前View与controller的数据传输只需圆厅要通过转发或者重定向，将数据传递到页面，使用特定的EL表达式进行数据接收与显示，分离之后两个项目通常在不同的服务器中，数据的传输涉及到网络通信，所以需要在满足一定的传输协议的基础上进行动态数据的处理！
前后端分离怎么做的呢？
①，后端:后端设计好数据结构后，根据需求提供一套接口文档，内容包括遵循b/get)nginx中我通过配置映射将a/b/get映射为a/b/get(后端)实际的暴露地址，实现了数据的获取！
这样的一个架构，在用户看来是完全透明的，实现了整个功能的内聚，前后分离让前后端的开发人员更加专注的维护自己的代码，大大提升了开发人员的效率，如果你在开发过程中有疑惑，欢迎在线咨询
㈡ 微信小程序前后端分离怎么实现
微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开，前端负责展示和交互，后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤：
1. 前端代码开发：使用微信小程序开发者工具或其他工具，开发出前端的界面橡模汪、功能、逻辑代码等。
2. 后端接口开发：后端负责提供API接口，承担数据处理和逻辑控制等任务。采用RESTful API 或GraphQL API 形式提供前端需要的数据接口。
3. 前后端接口对接：在前端代码中，需要对后端提供的接口进行调用，获取数据进行展示，完成前后端交互。
4. 服务端部署：将码御后端代码部署到服务器上，在服务器上运行后端代码，使得前端发起请求后梁仔能够得到正确的数据返回。
5. 网络安全和数据安全：在前端和后端的实现过程中，需要注意网络安全和数据安全的问题，保证通信过程中的安全以及数据的保密性和完整性。
以上是微信小程序前后端分离实现的一些关键步骤，需要注意的是，该过程需要前端和后端开发人员进行密切协作，并进行适当的测试和调整，以保证整体的实现效果和性能。
㈢ java中，前后端分离，如何实现session失效后，页面操作自动跳转登录页。
publicvoiddoFilter(ServletRequestservletRequest,,FilterChainchain)throwsIOException,ServletException{
HttpServletRequestrequest=(HttpServletRequest)servletRequest;
HttpServletResponseresponse=(HttpServletResponse)servletResponse;
//获取根目录所对应的绝对路径
StringcurrentURL=request.getRequestURI();
//截取到当前文宴衫件名用于比较
StringtargetURL=currentURL.substring(currentURL.indexOf("/",1),currentURL.length());
//System.out.println(targetURL);
//如果session不为空就返回该session，如果为空就返回null
HttpSessionsession=request.getSession(false);
if((!"/index.html".equals(targetURL))&&(!"/login.action".equals(targetURL))&&(!"/regist.html".equals(targetURL))&&(!"/regist.action".equals(targetURL))){
//判断当前页面是否是重定向后的登陆页面页面，如果是就不做session的判断，防止死循环
if(session==null||session.getAttribute("username")==null){
粗祥仿//如果session为空表示用户没有登陆就重定向到index.html页面
//System.out.println("request.getContextPath()="+request.getContextPath());
response.sendRedirect(request.getContextPath()+"/index.html"岩纤);
return;
}
}
chain.doFilter(request,response);
}
㈣ java前后端分离 页面怎么跳转
jsp对指定页面进行跳转
servlet可以对指定页面重定向或转发
㈤ 前后端分离与不分离的区别总结
前后端不分离：
在前后端不分离的情况下，神闹返前端页面看到的效果都是有后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。
这种模式比较适合纯文本的形式，但如果是后端对接APP时，App不仅仅给后端返回一个HTML网页也可能只有数据本身，所以这种模式不适合与APP对接，为了与APP数据对接我们还必须游饥开发一套适合APP的接口。
前后端分离：
在前后端分离模式下，后端仅返回前端所需要的数据弯悄，不在渲染前端页面
㈥ 前后端分离整合项目重写前端会影响项目运行吗
如果您在前后端分离整合项目中只修改了前端代码，而未修改后端代码，那么前端代码的修改应该不会影响项目的运行。如粗察但是，具体情况需要根据您的项目架构和代码实现来判断。如果您的前端代码与后端代码缺乏清晰的接口定义，那么修改前端代码可能会影响到后端代码的运行。
另外，如果您修改了前端代码中的某些接口配置或请求参数，而后端代码的相应接口或参数未做相应修改，这也可能会导致项目的运行渣茄问题。所以在进行前端修改时，最好对后端代码进行相应的测试和调整，以确凳尺保项目能够正常运行。
㈦ Vue项目前后端分离下的前端鉴权方案
# Vue项目前后端分离下的前端鉴权方案
### 技术栈
前端Vue全家桶，后台.net。
### 需求分析
1. 前端路由鉴权，屏蔽地址栏入侵
2. 路由数据由后台管理，前端只按固定规则异步加载路由
3. 权限控制精确到每一个按钮
4. 自动更新token
5. 同一个浏览器只能登录一个账号
### 前端方案
> 对于需求1、2、3，采用异步加载路由方案
1. 首先编写vue全局路由守卫
2. 排除登录路由和无需鉴权路由
3. 登录后请求拉取用户菜单数据
4. 在vuex里处理菜单和路由匹配数据
5. 将在vuex里处理好的路由数据通过`addRoutes`异步推入路由
```
router.beforeEach((to, from, next) => {
// 判断当前用户是否已拉取权限菜单
if (store.state.sidebar.userRouter.length === 0) {
// 无菜单时拉取
getMenuRouter()
.then(res => {
let _menu = res.data.Data.ColumnDataList || [];
// if (res.data.Data.ColumnDataList.length > 0) {
// 整理菜单&路由数据
store.commit("setMenuRouter", _menu);
// 推入权限路由列表
router.addRoutes(store.state.sidebar.userRouter);
next({...to, replace: true });
// }
})
.catch(err => {
// console.log(err);
// Message.error("服务器连接失败");
});
} else {
//当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面
if (to.path == "/login") {
next({
name: "index"
});
} else {
next();
}
}
} else {
// 无登录状态时重定向至登录 或可进入无需登录状态路径
if (to.path == "/login" || to.meta.auth === 0) {
next();
} else {
next({
path: "/login"
});
}
}
});
```
##### 注意
> 我这里无需鉴权的路由直接写在router文件夹下的index.js，通过路由元信息meta携带指定标识
```
{
path: "/err-404",
name: "err404",
meta: {
authentication: false
},
component: resolve => require(["../views/error/404.vue"], resolve)
},
```
> 上面说到路由是根据后台返回菜单数据根据一定规则生成，因此一些不是菜单，又需要登录状态的路由，我写在router文件夹下的router.js里，在上面步骤4里处理后台返回菜单数据时，和处理好的菜单路由数据合并一同通过`addRoutes`推入。
这样做会有一定的被地址栏入侵的风险,但是笔者这里大多是不太重要的路由，如果你要求咳咳，可以定一份字典来和后台接口配合精确加载每一个路由。
```
// 加入企业
{
path: "/join-company",
name: "join-company",
component: resolve => require([`@/views/index/join-company.vue`], resolve)
},
```
> 在vuex中将分配的菜单数据转化为前端可用的路由数据，我是这样做的：
管理系统在新增菜单时需要填写一个页面地址字段`Url`,前端得到后台菜单数据后根据`Url`字段来匹配路由加载的文件路径，每个菜单一个文件夹的好处是：你可以在这里拆分js、css和此菜单私有组件等
```
menu.forEach(item => {
let routerItem = {
path: item.Url,
name: item.Id,
meta: {
auth: item.Children,
}, // 路由元信息 定义路由时即可携带的参数，可用来管理每个路由的按钮操作权限
component: resolve =>
require([`@/views${item.Url}/index.vue`], resolve) // 路由映射真实视图路径
};
routerBox.push(routerItem);
});
```
> 关于如何精确控制每一个按钮我是这样做的，将按钮编码放在路由元信息里，在当前路由下匹配来控制页面上的按钮是否创建。
菜单数据返回的都是多级结构，每个菜单下的子集就是当前菜单下的按钮权限码数组，我把每个菜单下的按钮放在此菜单的路由元信息`meta.auth`中。这样作的好处是：按钮权限校验只需匹配每个菜单路由元信息下的数据，这样校验池长度通常不会超过5个。
```
created() {
this.owner = this.$route.meta.auth.map(item => item.Code);
}
methods: {
matchingOwner(auth) {
return this.owner.some(item => item === auth);
}
}
```
> 需求4自动更新token，就是简单的时间判断，并在请求头添加字段来通知后台更新token并在头部返回，前端接受到带token的请求就直接更新token
```
// 在axios的请求拦截器中
let token = getSession(auth_code);
if (token) config.headers.auth = token;
if (tokenIsExpire(token)) {
// 判断是否需要刷新jwt
config.headers.refreshtoken = true;
}
// 在axios的响应拦截器中
if (res.headers.auth) {
setSession(auth_code, res.headers.auth);
}
```
> 对于需求5的处理比较麻烦，要跨tab页只能通过`cookie`或`local`,笔者这里不允许使用`cookie`因此采用的`localstorage`。通过打开的新页面读取`localstorage`内的`token`数据来同步多个页面的账号信息。`token`使用的`jwt`并前端md5加密。
这里需要注意一点是页面切换要立即同步账号信息。
> 经过需求5改造后的全局路由守卫是这样的：
```
function _AUTH_() {
// 切换窗口时校验账号是否发生变化
window.addEventListener("visibilitychange", function() {
let Local_auth = getLocal(auth_code, true);
let Session_auth = getSession(auth_code);
if (document.hidden == false && Local_auth && Local_auth != Session_auth) {
setSession(auth_code, Local_auth, true);
router.go(0)
}
})
router.beforeEach((to, from, next) => {
// 判断当前用户是否已拉取权限菜单
if (store.state.sidebar.userRouter.length === 0) {
// 无菜单时拉取
getMenuRouter()
.then(res => {
let _menu = res.data.Data.ColumnDataList || [];
// if (res.data.Data.ColumnDataList.length > 0) {
// 整理菜单&路由数据
store.commit("setMenuRouter", _menu);
// 推入权限路由列表
router.addRoutes(store.state.sidebar.userRouter);
next({...to, replace: true });
// }
})
.catch(err => {
// console.log(err);
// Message.error("服务器连接失败");
});
} else {
//当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面
if (to.path == "/login") {
next({
name: "index"
});
} else {
next();
}
}
} else {
// 无登录状态时重定向至登录 或可进入无需登录状态路径
if (to.path == "/login" || to.meta.auth === 0) {
next();
} else {
next({
path: "/login"
});
}
}
});
}
```
> 经过需求5改造后的axios的请求拦截器是这样的，因为ie无法使用`visibilitychange`，并且尝试网络其他属性无效，因此在请求发出前做了粗暴处理：
```
if (ie浏览器) {
setLocal('_ie', Math.random())
let Local_auth = getLocal(auth_code, true);
let Session_auth = getSession(auth_code);
if (Local_auth && Local_auth != Session_auth) {
setSession(auth_code, Local_auth, true);
router.go(0)
return false
}
}
```
> 这里有一个小问题需要注意：因为用的`local`因此首次打开浏览器可能会有登录已过期的提示，这里相信大家都能找到适合自己的处理方案
### 结语
经过这些简单又好用的处理，一个基本满足需求的前后端分离前端鉴权方案就诞生啦
㈧ 解决前后端分离开发，后端重定向不到前端页面问题
公司项目使用的是springboot+angularjs这种前后端不完全分离的开发方式，前段时间把项目改成springboot+vue前后端完全分离，开发过程中有个后端重定向问题。后端项目地址： http://localhost:8080/ ，前端项目地址： http://localhost:9090/ ，比如后端 redirct:"/#/main" 重定向到这个页面，浏览器重定向的却是 http://localhost:8080/#/main 后端项目的地址，找了很久最终在webpack中找到解决方案。
我们可以在 devServer.proxy.onProxyRes 中做处理，配置如下: