前後端分離

前後端分離：

前後端分離就是将一個應用的前端代碼和後端代碼分開寫，為什麼要這樣做？

如果不适用前後端分離的方式，會有哪些問題？

傳統的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'，觸發事件