前后端分离已经在慢慢走进各公司的技术栈，根据松哥了解到的消息，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，松哥也非常建议大家学习一下前后端分离开发，以免在公司干了两三年，SSH 框架用的滚瓜烂熟，出来却发现自己依然没有任何优势！
其实前后端分离本身并不难，后段提供接口，前端做数据展示，关键是这种思想。很多人做惯了前后端不分的开发，在做前后端分离的时候，很容易带进来一些前后端不分时候的开发思路，结果做出来的产品不伦不类，因此松哥这里给大家整理了几个开源的前后端分离项目，帮助大家快速掌握前后端分离开发技术栈。
美人鱼

star 数 3499
项目地址： https://gitee.com/mumu-osc/NiceFish

听名字就知道这是个不错的项目，事实上确实不赖。NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本，前端有 Angular 、React 以及 Electron 等版本。
项目效果图：

微人事

star 数 9313
项目地址：https://github.com/lenve/vhr

微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发。项目打通了前后端，并且提供了非常详尽的文档，从 Spring Boot 接口设计到前端 Vue 的开发思路，作者全部都记录在项目的 wiki 中，是不可多得的 Java 全栈学习资料。
项目效果图:

项目部分文档截图：

bootshiro

star 数 1370
项目地址： https://gitee.com/tomsun28/bootshiro

bootshiro 是基于 Spring Boot + Shiro + JWT 的真正 RESTful URL 资源无状态认证权限管理系统的后端,前端 usthe 。区别于一般项目，该项目提供页面可配置式的、动态的 RESTful api 安全管理支持，并且实现数据传输动态秘钥加密，jwt 过期刷新，用户操作监控等，加固应用安全。
项目效果图：

open-capacity-platform

star 数 2643
项目地址：https://gitee.com/owenwangwen/open-capacity-platform

open-capacity-platform 微服务能力开放平台，简称 ocp ，是基于 layui + springcloud 的企业级微服务框架(用户权限管理，配置中心管理，应用管理，…)，其核心的设计目标是分离前后端，快速开发部署，学习简单，功能强大，提供快速接入核心接口能力，其目标是帮助企业搭建一套类似百度能力开放平台的框架。
项目效果图：

V 部落

star 数 2902
项目地址：https://github.com/lenve/VBlog

V部落是一个多用户博客管理平台，采用 Vue + SpringBoot + ElementUI 开发。这个项目最大的优势是简单，属于功能完整但是又非常简单的那种，非常非常适合初学者。
项目效果图：

悟空 CRM

star 数 650
项目地址：https://gitee.com/wukongcrm/72crm-java

悟空 CRM 是基于 jfinal + vue + ElementUI 的前后端分离 CRM 系统。
老实说，jfinal 了解下就行了，没必要认真研究，Vue + ElementUI 的组合可以认真学习下、前后端交互的方式可以认真学习下。

paascloud-master

star 数 5168
项目地址：https://github.com/paascloud/paascloud-master

paascloud-master 核心技术为 SpringCloud + Vue 两个全家桶实现，采取了取自开源用于开源的目标，所以能用开源绝不用收费框架，整体技术栈只有阿里云短信服务是收费的，都是目前 java 前瞻性的框架，可以为中小企业解决微服务架构难题，可以帮助企业快速建站。由于服务器成本较高，尽量降低开发成本的原则，本项目由 10 个后端项目和 3 个前端项目共同组成。真正实现了基于 RBAC、jwt 和 oauth2 的无状态统一权限认证的解决方案，实现了异常和日志的统一管理，实现了 MQ 落地保证 100% 到达的解决方案。
项目效果图：

总结
他山之石，可以攻玉。当我们学会了很多知识点之后，需要一个项目来将这些知识点融会贯通，这些开源项目就是很好的资料。现在前后端分离开发方式日渐火热，松哥也强烈建议大家有空学习下这种开发方式。虽然我们身为 Java 工程师，可是也不能固步自封，看看前端单页面应用怎么构建，看看前端工程化是怎么回事，这些都有助于我们开发出更加合理好用的后端接口。好了，七个开源项目，助力大家在全栈的路上更进一步！
关注公众号【江南一点雨】，专注于 Spring Boot+微服务以及前后端分离等全栈技术，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！

前后端分离项目
博客地址：https://blog.csdn.net/beixishuo
一、解读前后端分离
1、前后端不分
前后端不分，jsp是一个典型写法，jsp和java代码结合起来，刚开始，确实提高了开发效率，但时间长了，大伙发现jsp存在的问题，对于后端程序员来说不懂前端，

所以开发流程一般是这样的：前端设计页面–>后端把页面改造成jsp(把后台数据塞到jsp页面)–>后端发现问题—>页面给前端—>前端不会jsp。互相踢皮球，这种方式效率低下；

特别是互联网 兴起后，一套系统对应多个前端，一般除了PC端， 还有移动的、小程序等，此时前后端不分方式就不是最优的选择。
2、前后端分离
前后段分离是将一个单体应用分成两个独立的项目：前端应用和后端应用
spring boot+jpa+vue+element-ui+MySql
二、Vue-cli搭建
https://blog.csdn.net/beixishuo/article/details/104230203

三、Vue目录结构介绍



build文件夹，用来存放项目构建脚本


config中存放基本配置信息，最常用的就是端口转发


node_modules存放的是项目的所有依赖，即npm install命令下载的文件


src存放项目的源码


static用来存放静态资源


index.html首页，人口页，也是整个项目唯一的html页面


package.json中定义了项目的所有依赖，包括开发时依赖和发布时依赖


对于开发者更多操作的是src

1.assets存放资产文件
2.components存放组件
3.router存放路由js文件，用于页面的跳转
4.App.vue是一个Vue组件，也是项目的第一个Vue组件
5.main.js相当于java中的main方法，是整个项目的入口js
main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

1.在main.js中导入Vue对象
2.导入App.vue，并且命名为App
3.导入router，默认识别index.js,因此可以省略
4.所有到导入成功后，创建Vue对象，设置被绑定的节点是‘#app’，‘#app’是index.html文件中的一个div
5.将router设置到vue对象中
6.声明一个组件App，App这个组件在一开始已经导入到项目中了，但是无法直接使用，必须声明
7.template中定义了页面模板，即在App组件中的内容渲染到’#app’这个div中
App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>



App.vue是一个vue组件，包含三部分内容：页面模板 、页面脚本 、页面样式


页面模板中定义了一个图片，另一个是router-view


'router-view‘简单理解为路由占位符


页面脚本是用来实现数据初始化、事件处理等等


页面样式
index.js


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

1.路由文件，path路径，对应的组件为HelloWorld，即在浏览器地址为/时，在router-view位置显示HelloWorld组件
四、前后端项目搭建
1.vue项目启动命令： npm run dev
2.axios的安装：npm install axios
3.解决axios不能直接使用问题


解决方法：
  在main.js中添加一下代码
import axios from 'axios';//加这句引用

Vue.prototype.$http=axios;//加这句赋值

4.跨域问题


在后台解决跨域问题：
@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }

}

五、Vue+element-ui
1.在Vue中集成element-ui

npm install element-ui -S

2.在main.js文件中 完整引入 element 组件  ：

​    import ElementUI from ‘element-ui’

​    import ‘element-ui/lib/theme-chalk/index.css’
​    Vue.use(ElementUI)

App.vue解读
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']" :default-active="'1-1'">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>

element-ui后台管理系统主要标签：


​	el-container	构建页面框架


​    el-aside          构建左侧菜单


​    el-menu     左侧菜单内容，常用属性
​					:default-openeds="[‘1’, ‘3’]" 默认展开的菜单
​					 :default-active="‘1-1’"默认选中的菜单


el-submenu  可展开的菜单，常用属性：


​	 	 	index=“1”  菜单的下标，文本类型，不能是数值类型。


template：对应 el-submenu  的菜单名


i标签  class=“el-icon-message”  设置菜单图标


未完。。。。

专注于IT技术知识梳理，书写前沿技术文章！更多技术在这里慢慢探索吧，请关注杰哥！

前后端分离项目，如何解决跨域问题

跨域资源共享（CORS）是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。

什么是跨域问题
CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。
跨域问题演示及解决
我们使用mall项目的源代码来演示一下跨域问题。此时前端代码运行在8090端口上，后端代码运行在8080端口上，由于其域名都是localhost，但是前端和后端运行端口不一致，此时前端访问后端接口时，就会产生跨域问题。
点击前端登录按钮

此时发现调用登录接口时出现跨域问题。

覆盖默认的CorsFilter来解决该问题

添加GlobalCorsConfig配置文件来允许跨域访问。
package com.macro.mall.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

重新运行代码，点击登录按钮

发现需要登录认证的/admin/info接口的OPTIONS请求无法通过认证，那是因为复杂的跨越请求需要先进行一次OPTIONS请求进行预检，我们的应用整合了SpringSecurity，对OPTIONS请求并没有放开登录认证。

设置SpringSecurity允许OPTIONS请求访问

在SecurityConfig类的configure(HttpSecurity httpSecurity)方法中添加如下代码。
.antMatchers(HttpMethod.OPTIONS)//跨域请求会先进行一次options请求
.permitAll()

重新运行代码，点击登录按钮

发现已经可以正常访问。

一次完整的跨域请求

先发起一次OPTIONS请求进行预检

请求头信息：
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Copy to clipboardErrorCopied
响应头信息：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Length: 0
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

请求成功返回状态码为200

发起真实的跨域请求

请求头信息：
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
{username: "admin", password: "123456"}
password: "123456"
username: "admin"

响应头信息：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: application/json;charset=UTF-8
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Transfer-Encoding: chunked
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

请求成功返回状态码为200

	

不少同学问前后端分离到底是怎么回事？说实话，这只是一种思想，没必要那么在意。这里，我给大家整理了一些还不错的前后端分离项目，供大家去学习。
美人鱼
star 数 3499
项目地址：https://gitee.com/mumu-osc/NiceFish
听名字就知道这是个不错的项目，事实上确实不赖。NiceFish(美人鱼) 是一个系列项目，目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本，前端有 Angular 、React 以及 Electron 等版本。项目效果图：
微人事
star 数 9313
项目地址：https://github.com/lenve/vhr
微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发。项目打通了前后端，并且提供了非常详尽的文档，从 Spring Boot 接口设计到前端 Vue 的开发思路，作者全部都记录在项目的 wiki 中，是不可多得的 Java 全栈学习资料。项目效果图:
项目部分文档截图：
bootshiro
star 数 1370
项目地址：https://gitee.com/tomsun28/bootshiro
bootshiro 是基于 Spring Boot + Shiro + JWT 的真正 RESTful URL 资源无状态认证权限管理系统的后端,前端 usthe 。区别于一般项目，该项目提供页面可配置式的、动态的 RESTful api 安全管理支持，并且实现数据传输动态秘钥加密，jwt 过期刷新，用户操作监控等，加固应用安全。项目效果图：
open-capacity-platform
star 数 2643
项目地址：https://gitee.com/owenwangwen/open-capacity-platform
open-capacity-platform 微服务能力开放平台，简称 ocp ，是基于 layui + springcloud 的企业级微服务框架(用户权限管理，配置中心管理，应用管理，....)，其核心的设计目标是分离前后端，快速开发部署，学习简单，功能强大，提供快速接入核心接口能力，其目标是帮助企业搭建一套类似百度能力开放平台的框架。项目效果图：
V 部落
star 数 2902
项目地址：https://github.com/lenve/VBlog
V部落是一个多用户博客管理平台，采用 Vue + SpringBoot + ElementUI 开发。这个项目最大的优势是简单，属于功能完整但是又非常简单的那种，非常非常适合初学者。项目效果图：
悟空 CRM
star 数 650
项目地址：https://gitee.com/wukongcrm/72crm-java
悟空 CRM 是基于 jfinal + vue + ElementUI 的前后端分离 CRM 系统。老实说，jfinal 了解下就行了，没必要认真研究，Vue + ElementUI 的组合可以认真学习下、前后端交互的方式可以认真学习下。
paascloud-master
star 数 5168
github.com/paascloud/paascloud-master
paascloud-master 核心技术为 SpringCloud + Vue 两个全家桶实现，采取了取自开源用于开源的目标，所以能用开源绝不用收费框架，整体技术栈只有阿里云短信服务是收费的，都是目前 java 前瞻性的框架，可以为中小企业解决微服务架构难题，可以帮助企业快速建站。由于服务器成本较高，尽量降低开发成本的原则，本项目由 10 个后端项目和 3 个前端项目共同组成。真正实现了基于 RBAC、jwt 和 oauth2 的无状态统一权限认证的解决方案，实现了异常和日志的统一管理，实现了 MQ 落地保证 100% 到达的解决方案。项目效果图：
相信这几个项目，足够你消化一段时间了，不懂的地方也不用着急，慢慢来。只要完整的吃透一个，项目经验就会增长不少。