先後端分離進階一：使用ElementUI+前端分頁

前兩篇入門：先後端分離初體驗一：前端環境搭建

　　　　　　先後端分離初體驗二：後端環境搭建+數據交互

 

 

參考：https://www.bilibili.com/video/BV137411B7vB

B站UP：楠哥教你學Java

 

框架：vue + springboot

 

vue 集成 Element UI

• el-container:構建整個頁面的框架

• el-aside：構建左側菜單

• el-menu：左側菜單內容，經常使用屬性：

  • default-openeds：默認展開的菜單，經過菜單的index值來關聯

  • default-active：默認選中的菜單，經過菜單的index值來關聯

• el-submenu：可展開的菜單，經常使用屬性：

  • index：菜單的下標，文本類型，不能算數值類型

• template：對應 el-submenu的菜單名

• i：設置菜單圖標，經過class屬性設置

  • el-icon-message

  • el-icon-menu

  • el-icon-setting

• el-menu-item-group:分組

• el-menu-item：菜單的子節點，不可再展開，經常使用屬性：

  • index：菜單的下標，文本類型，不能是數值類型

 

動態構建左側菜單

使用 Vue router

App.vue

 <template>
 ​
   <div id="app">
 ​
   <el-container style="height: 500px; border: 1px solid #eee">
 ​
     <el-aside width="200px" style=" color: rgb(17, 119, 0);">>
 ​
       <el-menu>
         <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
           <template slot="title"><i class="el-icon-setting"></i>{{item.name}}</template>
           <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
         </el-submenu>
       </el-menu>
 ​
     </el-aside>
     <el-container>
       <el-header style="text-align: right; font-size: 12px">
         <el-dropdown>
           <i class="el-icon-setting" style="margin-right: 15px"></i>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>查看</el-dropdown-item>
             <el-dropdown-item>新增</el-dropdown-item>
             <el-dropdown-item>刪除</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <span>王小虎</span>
       </el-header>
       <el-main>
         <router-view></router-view>
       </el-main>
     </el-container>
   </el-container>
   </div>
 </template>
 ​
 <style>
   .el-header {
     background-color: #B3C0D1;
     color: #333;
     line-height: 60px;
   }
 ​
   .el-aside {
     color: #333;
   }
 </style>
 ​
 <script>
   export default {
     data() {
       const item = {
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀區金沙江路 1518 弄'
       };
       return {
         tableData: Array(20).fill(item)
       }
     }
   };
 </script>

 

4個不一樣頁面

PageOne.vue、PageTwo.vue、PageThree.vue、PageFour.vue同理

 <template>
     <h1>頁面1</h1>
 </template>
 ​
 <script>
     export default {
         name: "PageOne"
     }
 </script>
 ​
 <style scoped>
 ​
 </style>

 

router/index.js

分紅2個導航頁，每一個導航中有2個頁面

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 ​
 import App from "../App";
 import PageOne from "../views/PageOne"
 import PageTwo from "../views/PageTwo"
 import PageThree from "../views/PageThree"
 import PageFour from "../views/PageFour"
 ​
 Vue.use(VueRouter)
 ​
 const routes = [
     {
         path: "/",
         name: "導航一",
         component: App,
         children: [
             {
                 path: "/pageOne",
                 name: "頁面一",
                 component: PageOne
             },
             {
                 path: "/pageTwo",
                 name: "頁面二",
                 component: PageTwo
             }
         ]
     },
     {
         path: "/navigation",
         name: "導航二",
         component: App,
         children: [
           {
             path: "/pageThree",
             name: "頁面三",
             component: PageThree
           },
           {
             path: "/pageFour",
             name: "頁面四",
             component: PageFour
           }
         ]
     }
 ​
 ]
 ​
 const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
 })
 ​
 export default router

 

結果

對應頁面顯示

 

menu與router綁定

一、< el-menu> 添加router

< el-menu router>

 <el-menu router>
     <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
         <template slot="title"><i class="el-icon-setting"></i>{{item.name}}</template>
         <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
     </el-submenu>
 </el-menu>

 

二、在頁面中添加< router-view>

< router-view>是一個容器，動態渲染所選的router

 <el-main>
     <router-view></router-view>
 </el-main>

 

三、< el-menu-item>

其中的index值就是要跳轉的router

<el-menu router>
     <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
         <template slot="title"><i class="el-icon-setting"></i>{{item.name}}</template>
         <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path">{{item2.name}}</el-menu-item>
     </el-submenu>
 </el-menu>

 

 

前端

vuetest_02

設置 PageOn e做爲被分頁的頁面

Table表格（固定列）

 <template>
   <el-table
     :data="tableData"
     border
     style="width: 100%">
     <el-table-column
       fixed
       prop="date"
       label="日期"
       width="150">
     </el-table-column>
     <el-table-column
       prop="name"
       label="姓名"
       width="120">
     </el-table-column>
     <el-table-column
       prop="province"
       label="省份"
       width="120">
     </el-table-column>
     <el-table-column
       prop="city"
       label="市區"
       width="120">
     </el-table-column>
     <el-table-column
       prop="address"
       label="地址"
       width="300">
     </el-table-column>
     <el-table-column
       prop="zip"
       label="郵編"
       width="120">
     </el-table-column>
     <el-table-column
       fixed="right"
       label="操做"
       width="100">
       <template slot-scope="scope">
         <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
         <el-button type="text" size="small">編輯</el-button>
       </template>
     </el-table-column>
   </el-table>
 </template>
 ​
 <script>
   export default {
     methods: {
       handleClick(row) {
         console.log(row);
       }
     },
 ​
     data() {
       return {
         tableData: [{
           date: '2016-05-02',
           name: '王小虎',
           province: '上海',
           city: '普陀區',
           address: '上海市普陀區金沙江路 1518 弄',
           zip: 200333
         }, {
           date: '2016-05-04',
           name: '王小虎',
           province: '上海',
           city: '普陀區',
           address: '上海市普陀區金沙江路 1517 弄',
           zip: 200333
         }, {
           date: '2016-05-01',
           name: '王小虎',
           province: '上海',
           city: '普陀區',
           address: '上海市普陀區金沙江路 1519 弄',
           zip: 200333
         }, {
           date: '2016-05-03',
           name: '王小虎',
           province: '上海',
           city: '普陀區',
           address: '上海市普陀區金沙江路 1516 弄',
           zip: 200333
         }]
       }
     }
   }
 </script>

 

分頁代碼

<el-pagination
   background
   layout="prev, pager, next"
   :total="1000">
 </el-pagination>

 

合併並修改

 <template>
     <div>
     <el-table
             :data="tableData"
             border
             style="width: 100%">
         <el-table-column
                 fixed
                 prop="id"
                 label="編號"
                 width="150">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="書名"
                 width="120">
         </el-table-column>
         <el-table-column
                 prop="author"
                 label="做者"
                 width="120">
         </el-table-column> 
         <el-table-column
                 fixed="right"
                 label="操做"
                 width="100">
             <template slot-scope="scope">
                 <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                 <el-button type="text" size="small">編輯</el-button>
             </template>
         </el-table-column>
     </el-table>
 ​
     <el-pagination
             background
             layout="prev, pager, next"
 ​
             page-size="6"
 ​
             :total="50"
             @current-change="page"
     >
     </el-pagination>
     </div>
 </template>
 ​
 <script>
 ​
     export default {
         methods: {
             handleClick(row) {
                 console.log(row);
             },
         page(currentPage){
         
         }
         data() {
             return {
                 tableData: [{
                     id: '1',
                     name: '西遊記',
                     author: '吳承恩'
                     
                 }, {
                     id: '2',
                     name: '水滸傳',
                     author: '施耐庵'
                 }, {
                     id: '3',
                     name: '紅樓夢',
                     author: '曹雪芹'
                 }, {
                     id: '4',
                     name: '三國演義',
                     author: '羅貫中'
                 }]
             }
         }
     }
 </script>

 

效果