前后端分离
前后端分离：
前后端分离就是将一个应用的前端代码和后端代码分开写，为什么要这样做？
如果不适用前后端分离的方式，会有哪些问题？
传统的java web开发中，前端使用jsp开发，jsp代码不是有后端开发者来独立完成的。
前端=》HTML静态页面=》后端=》jsp
这种开发方式效率极低，可以使用前后端分离的方式进行开发，就可以完美的解决这些问题。
前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码，提供数据接口即可
前端通过Ajax请求来访问后端的数据接口，将Model展示到View中即可。
前后端开发者只需要提前约定好接口文档（URL，参数，数据类型。。。），然后独立开发即可。前端可以先造一些假数据进行测试，完全不需要依赖与后端，后端同理。最后完成前后端集成即可。真正实现了前后端应用的解耦合。极大的提升了开发效率。
单体==》前端应用+后端应用
前端应用：负责数据展示和用户交互
后端应用：负责提供数据处理接口
前端HTML--》Ajax---》RESTful后端数据接口。
传统的单体应用：
前后端分离的结构：
前后端分离就是将一个单体应用拆分成两个独立的英语，前端应用和后端停用一JSON格式进行交互。
实现技术：
springBoot +Vue
使用SpringBoot进行后端应用开发，使用Vue进行前端应用开发。
Vue + Element UI
Vue集成Element UI
Element UI后台管理系统主要的标签：
1.el-container：构建整个页面框架
2.el-aside：构建左侧菜单
3.el-menu：左侧菜单内容，常用属性：
：default-openeds：默认展开的菜单，通过菜单的index值来关联。
：default-active：默认选中的菜单，通过菜单的index值来关联。
4.el-submenu：可展开的菜单，常用属性：
index：菜单的下标，文本类型，不能是数值类型。
5.template：对应el-submenu的菜单名。
6.i：设置菜单图标，通过class属性设置：
el-icon-messae
el-icon-menu
el-icon-setting
7.el-menu-item：菜单的子节点，不可再展开，常用属性：
index：菜单的下表，文本类型，不能是数值类型。
Vue router来动态构建左侧菜单
导航1
页面1
页面2
导航2
页面3
页面4
{
path: "/",
name: "导航1",
component: App,
children:[
{
path: "/pageOne",
name: "页面1",
component: PageOne
},
{
path: "/pageTwo",
name: "页面2",
component: PageTwo
}
]
}，
{
path: "/navigation",
name:"导航2",
component:App,
children: [
{
path: "/pageThree",
name: "页面3",
component: PageThree
},
{
path: "/pageFour",
name:"页面4",
component: PageFour
}
]
}
menu与router的绑定
1.<el-menu>添加router属性。
2.在页面中添加<router-view>标签，它是一个容器，动态渲染你选择的router。
3.<el-menu-item>标签的index值就是要跳转的router。
Element UI 表单数据校验
定义rules对象，在rules对象中设置表单各个选项的校验规则
rules: {
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
region: [
{required: true, message: '请选择活动区域', trigger: 'change'}
],
date1:
[
{type: 'date', required: true, message: '请选择日期', trigger: 'change'}
],
date2: [
{type: 'date', required: true, message: '请选择时间', trigger: 'change'}
],
type: [
{type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
],
resource: [
{required: true, message: '请选择活动资源', trigger: 'change'}
],
desc:
[
{required: true, message: '请填写活动形式', trigger: 'blur'}
]
}
required: true, 是否为必填项
message: '请输入活动名称',提示信息
trigger: 'blur'，触发事件
