前后端分离

前后端分离：

前后端分离就是将一个应用的前端代码和后端代码分开写，为什么要这样做？

如果不适用前后端分离的方式，会有哪些问题？

传统的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'，触发事件