(三)、前后端分离数据对接
1.搭建静态页面
1. 路由 router/index.js
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
2. 文件入口 main.js
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')
3. App.vue
<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>
4. 父路由 Index.vue
<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>
5. pageThree.vue pageTwo.vue pageFour 页面一样
<template> <div> <h1>这是页面2</h1> </div> </template> <script> export default { name:'PageTwo', } </script> <style> </style>
6. PageOne.vue
<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) }
2.前后端交互-(填充表格数据-分页)
(1).前端安装axios并配置
1.安装axios
npm install axios
2.配置跨域的问题 PageOne.vue
<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>
