前后端分离

本文适合刚学习完 Java 语言基础的人群，跟着本文可了解和运行项目，本示例是在 Windows 操作系统下演示。 本文作者：HelloGitHub- 秦人 大家好！这里是 HelloGitHub 推出的 《讲解开源项目》 系列，今天给大家带来一款基于 Java 语言的人力资源管理开源项目―― 微人事 微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 架构。该系统是管理员对员工信息的一些列的操作。首先管理员需要登入系统，可对员工信息进行增删查改操作，也可以对员工进行奖罚，工资等信息的增删查改。然后实现对部门员工信息的统计和修改。所有的操作都在系统中有日志记录。 微人事的项目地址： https://github.com/lenve/vhr 想要快速搭建一套微人事管理系统，那就跟着本文的步骤。你只需要花 10 分钟，就能拥有一个属于自己的微人事管理系统，并且可以对前后端分离的项目有一个完成的概念和感觉。下面是搭建完成的效果图： 微人事这个项目采用： SpringBoot ：SpringBoot 是基于 Spring4 进行设计，目的是为了简化 Spring 应用的初始搭建以及开发过程。 该框架使用特定的方式(集成 starter，约定优于配置)来进行配置，从而使开发人员不需要再定义样板化的配置。 SpringSecurity

## apache配置 ### 基于端口配置 - 在ports.conf中配置端口 - 在aliyun中开启端口 - a2ensite xxx.conf启用service配置 ### 反向代理配置 反向代理用于前后端分离 #### 配置内容 ``` # 关闭正向代理，才可以使用ProxyPass ProxyRequests Off # 代理api地址 ProxyPass /api http://192.168.0.1:8081 # 不跳转url(不重定向) ProxyPassReverse /api http://192.168.0.1:8081 # 把www的cookies改成api的 ProxyPassReverseCookieDomain 192.168.0.1:8082 192.168.0.1:8081 ProxyPassReverseCookiePath / /api ``` #### 开启模块 ```javascript sudo a2enmod ssl sudo a2enmod proxy sudo a2enmod proxy_balancer sudo a2enmod proxy_http 以上就是配置 代理 的内容 来源： https://www.cnblogs.com/ruanjer/p/11763479.html

传统的前后端： 　　后端是跟数据库跟服务器打交道的，前端是跟浏览器打交道的。但似乎他们的职责在以前甚至于现在都并不明确，虽然前端是跟浏览器打交道，但是最终浏览器拿到的页面是服务器通过模板生成的一个临时静态页面而已。所以，实际上后端也掺和进来了，因为他要处理模板。当然，一般传统上的开发协作模式有两种： 一种是前端先写一个静态页面，写好后，让后端去套模板。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板，这些前端代码后端需要浏览一遍，以免出错。 另一种协作模式是，前端直接去写模板，这样做的问题在于，前端编写过程中很依赖与后端环境，如果当后端没写完的情况下，前端几乎没法干活。 在做前后端分离时，第一个关注到的问题就是 渲染 ，也就是 View 这个层面的工作，模板引擎、前后端分离、单页模式，它们本应是三个完全分离的概念，但确实有很多现代 Web 项目同时使用了这些技术，于是它们的概念就经常被混淆。虽然它们各自并不闪耀，但当它们一起使用时确实可以成为现代 Web 中一种优秀的实践。 模板引擎 　　模板引擎是相当古老的东西了，现在能看到的很多后端编程语言其实都是基于模板引擎的。但这种语言级的模板引擎其实很难让开发者满意。以前写 ASP 的时候觉得用程序把数据库查询出来的数据填入页面中是一件很痛苦的事情。不是写出一堆凌乱的标签就是程序里做一堆字符串拼接

转自： https://www.jianshu.com/p/c81008b68350 1. 前言 随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接 工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。 本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。 2. 为何要分离 参考两篇文章 《Web 研发模式的演变》 、 《Web应用的组件化开发》 , 目前现有前后端开发模式：“后端为主的MVC时代”，如下图所示： 后端为主的MVC时代 代码可维护性得到明显好转，MVC 是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆，还可以选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是功能变弱了，但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰，这个阶段的典型问题是：

1.前言 最近学习reactjs ，前些年用RN开发过移动端，入门还算轻松。现在打算使用 Antd Pro 实现前后端分离。要使用Antd Pro这个脚手架，必须熟悉 umi、dva、redux-saga 等相关知识。 基础知识及目录结构可以先看官方文档 ： https://pro.ant.design/docs/getting-started-cn 官方介绍： Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 [Ant Design](http://ant.design/) 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 2. 网络请求库添加钩子 钩子的目的主要是对请求头设置（如：添加 token，api服务端通过token鉴权，当然您的token格式也可以是jwt，我这里是自己加密后的字符串）和对请求返回的数据实现拦截过滤特殊处理。 antd pro 使用的是 umi-request.js 这个库，其实也是基于 fetch 封装 。 一开始用axios替换了request.js里面。后来发现umi-request 也很容添加钩子，这里在umi-request上添加。 添加拦截钩子 ： 提交请求格式（根据你的api服务选择）：

1.1 目的 最近在项目中因前后端部署不同地方，前端在请求后端api时发生了跨域请求，我们采用 (跨域资源共享)来解决跨域请求，这需要前后端的配合来完成 , 1.2后端项目配置 由于在开发和部署的过程中都会存在跨域问题,在局域网内可能因为API的端口不同造成跨域,后端项目要值得注意一些配置,一般在webconfig的xml文档中如下配置: < httpProtocol > < customHeaders > <!-- 注意这个地方为前端项目的开发或者线上地址,一定要写 --> <!-- 支持全域名访问，不安全，部署后需要固定限制为客户端网址 --> < add name = " Access-Control-Allow-Origin " value = " http://192.168.3.11:8088 " /> <!-- 支持的http 动作 --> < add name = " Access-Control-Allow-Methods " value = " GET, POST, PUT, DELETE, OPTIONS " /> <!-- 响应头 请按照自己需求添加 这里新加了token这个headers --> < add name = " Access-Control-Allow-Headers " value = " Content-Type,X-Requested

一、问题背景 　　之前使用django+vue进行前后端分离碰到跨域请求问题，跨域（域名或者端口不同）请求问题的本质是由于浏览器的同源策略导致的，当请求的响应不是处于同一个域名和端口下，浏览器不会接受响应，同源策略也是浏览器针对请求的安全问题所作出的一种保护行为。针对跨域问题，可以有下面的解决方式： JSONP方式 自定义中间件，设置响应头 使用django-cors-headers包 二、解决方式 （一）自定义中间件 　　JSONP本质上是利用html的一些不受同源策略影响的标签属性src，例如：<a>、<img>、<script>等标签的src属性，从而实现跨域请求，但是这种方法只支持GET的请求方式，这里暂不做过多讨论，主要说自定义中间件以及利用django-cors-headers包来实现跨域。 1、自定义中间件 class MiddlewareMixin(object): def __init__(self, get_response=None): self.get_response = get_response super(MiddlewareMixin, self).__init__() def __call__(self, request): response = None if hasattr(self, 'process_request'): response

自然是有很大意义的。下面我可能说的比较多……方便题主能够更全面的了解为什么说是有有意义的。另外，本文是以Java的角度谈前后端分离。放心，大家一定会有种是我了，没错，的感觉。 一、先来明晰下概念 　　前后端分离是通过Ngnix+Tomcat的方式（也可以中间加一个Node.js）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，iOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 　　它的核心思想是 前端HTML页面通过Ajax调用后端的Restful API接口并使用json数据进行交互。这点题主也有提到。 二、其次，让我们了解下，没有前后端分离的时代（各种耦合） 　　过去，Java Web项目大多数都是Java程序员又当爹又当妈，又搞前端，又搞后端。 　　感觉就是，怀疑猿生…… 　　那时的JavaWeb项目都是使用了若干后台框架，Spring MVC/Struts + Spring + Spring JDBC/Hibernate/Mybatis 等等。 　　大多数项目在Java后端都是分了三层，控制层，业务层，持久层。控制层负责接收参数，调用相关业务层，封装数据，以及路由&渲染到JSP页面。然后JSP页面上使用各种标签或者手写Java表达式将后台的数据展现出来

1、简述 在前后端分离的项目中涉及跨域问题，通常都会使用token进行验证。最近在前后端分离的项目中在一个问题上搞了很久，就是以前下载附件或者导出数据为文件的时候，在以前的那些项目前端可以直接用 window.location.href='后端url'，window.open(url)或者其他的方式，但是在前后端分离中这种方式不能把token也一起传到后端进行请求，导致权限不够访问不了后端。 2、基本使用 Html代码 <el-button type="primary" @click="downLoad(url)">下载图片</el-button> Script代码 data数据 url : '文件下载地址' methods方法 /** * [getBlob 获取二进制流] * @param {[String]} url [url] * @param {[Blob]} [文件二进制] */ getBlob(url) { return new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "blob"; xhr.onload = () => { if (xhr.status === 200) { resolve(xhr

1. 一个原则 做权限管理，一个核心思想就是后端做权限控制，前端做的所有工作都只是为了提高用户体验，我们不能依靠前端展示或者隐藏一个按钮来实现权限控制，这样肯定是不安全的。 就像用户注册时需要输入邮箱地址，前端校验之后，后端还是要校验，两个校验目的不同，前端校验是为了提高响应速度，优化用户体验，后端校验则是为了确保数据完整性。权限管理也是如此，前端按钮的展示/隐藏都只是为了提高用户体验，真正的权限管理需要后端来实现。 这是非常重要的一点，做前后端分离开发中的权限管理，我们首先要建立上面这样的思考框架，然后在这样的框架下，去考虑其他问题。 因此，下文我会和大家分享两种方式实现动态菜单，这两种方式仅仅只是探讨如何更好的给用户展示菜单，而不是探讨权限管理，因为权限管理是在后端完成的，也必须在后端完成。 2. 具体实现 一旦建立起这样的思考框架，你会发现动态菜单的实现办法太多了。 动态菜单就是用户登录之后看到的菜单，不用角色的用户登录成功之后，会看到不用的菜单项，这个动态菜单要怎么实现呢？整体来说，有两种不同的方案，松哥曾经做过的项目中，两种方案也都有用过，这里分别来和大家分享一下。 2.1 后端动态返回 后端动态返回，这是我在微人事中采用的方案。微人事中，权限管理相关的表一共有五张表，如下： 其中 hr 表就是用户表，用户登录成功之后，可以查询到用户的角色