116.【SpringBoot和Vue结合-图书馆管理系统】（五）

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'
import PageThree from '../views/PageThree.vue'
import PageFour from '../views/PageFour.vue'
import App from '../App.vue'
import Index from '../views/Index.vue'
Vue.use(VueRouter)
const routes = [
  // 导航1
  {
    path: '/',
    name: '导航1',
    component: Index,
    redirect:'/pageone',  // 当我们访问到父路径 / 的时候，用这个子组件填充父组件并展示
    children: [  // 二级路由
      {
        path: '/pageone',
        name: 'pageone',
        component: PageOne
      },
      {
        path: '/pagetwo',
        name: 'pagetwo',
        component: PageTwo
      },
    ]
  },
  // 导航2
  {
    path: '/navigation',
    name: '导航2',
    component: Index,
    children: [
      {
        path: '/navigation/pagethree',
        name: 'pagethree',
        component: PageThree
      },
      {
        path: '/navigation/pagefour',
        name: 'pagefour',
        component: PageFour
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
  mounted(){
    console.log('vc',this);
  }
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

<template>
  <div>
        <!-- 页面框架 -->
    <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-submenu>
        </el-menu> -->
<!-- 菜单详细信息 -->
        <el-menu :default-openeds="['0','1']" router>
          <!-- 可展开的菜单 : 这里的index一定要加上,目的是为了分清父菜单-->
          <el-submenu  v-for="(item_father, index_father) in $router.options.routes" :key="index_father" :index="index_father+''">
            <!-- 这个菜单的标题和图标 -->
            <template slot="title"><i class="el-icon-message"></i>{{item_father.name}}</template>
            <!-- 菜单字节点  index在这里作用是高亮选择,index一定要保证唯一性 -->
            <el-menu-item  v-for="(item_son, index_son) in item_father.children" :key="index_son" :index="item_son.path" :class="$route.path==item_son.path ? 'is-active':''">{{item_son.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>
            <router-view></router-view>
        <el-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

<template>
  <div>
    <h1>这是页面2</h1>
  </div>
</template>
<script>
export default {
    name:'PageTwo',
}
</script>
<style>
</style>

<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){  //得到的参数是我们的页码
        alert(currentpage)
    }
  },
  data() {
    return {
      tableData: [
        {
          id: "1",
          name: "活着1",
          author: "余华1",
        },
        {
          id: "2",
          name: "活着2",
          author: "余华2",
        },
        {
          id: "3",
          name: "活着3",
          author: "余华3",
        },
        {
          id: "4",
          name: "活着4",
          author: "余华4",
        },
      ],
    };
  },
};
</script>

以下两个步骤: 
1. ElementUI->页码 @current-change="page"
 <el-pagination background layout="prev, pager, next" page-size="6"  :total="50" @current-change="page"></el-pagination>
2. 调用的方法
page(currentpage){  //得到的参数是我们的页码
        alert(currentpage)
    }

npm install axios

<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="totalPage" @current-change="page"></el-pagination>
  </div>
</template>
<script>
import axios from "axios"
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    page(currentpage){  //得到的参数是我们的页码
         const _this=this;
      axios.request("http://localhost:8181/findAll/"+currentpage+"/6").then(function(response) {
      console.log(response)
      // 传送数据- 页面信息 
        _this.tableData=response.data.content
      // 传递总页数-
      _this.totalPage=response.data.totalElements
    }).catch({
    }).finally({
    })
    }
  },
  data() {
    return {
      tableData: [],
      totalPage:0
    };
  },
  mounted() {
    const _this=this;
    axios.request("http://localhost:8181/findAll/1/6").then(function(response) {
      console.log(response)
      // 传送数据- 页面信息 
        _this.tableData=response.data.content
      // 传递总页数-
      _this.totalPage=response.data.totalElements
    }).catch({
    }).finally({
    })
  },
};
</script>