Tabla de contenido
2.1 En la ruta de solicitud de configuración
2.2 Construyendo un Menú de Navegación Usando Datos Dinámicos
2.2.1 Obtención de datos a través de la interfaz
2.2.3 Navegación del menú del edificio a través de los datos obtenidos en segundo plano
2.3 Haga clic en el menú para realizar el salto de enrutamiento
2.3.1 Crear un componente de gestión de libros
2.3.2 Configuración de enrutamiento
2.3.3 Modificar el componente LeftAside
2.3.4 Modificar el componente Principal
3. Configuración de la página de inicio del sistema
4. Visualización de datos tabulares
4.2 Consultar y mostrar datos en una tabla
1. Preparativos
- Crear una base de datos de prueba
- Preparar la interfaz de servicio en segundo plano, la consulta de Moudel y la consulta de Libro (paginación de soporte)
- Pruebas unitarias de back-end
- Modifique la configuración de vue para usar el entorno real
2. Árbol dinámico
2.1 En la ruta de solicitud de configuración
Configure la ruta de solicitud para obtener datos de árbol dinámico en src/api/action.js
export default {
//服务器
'SERVER': 'http://localhost:8080/webserver',
//登陆请求
'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陆
//获取动态树数据请求
'SYSTEM_MODULE_REQ': '/sysMsg/sysMsgAction!getModules.action',
//获取完整的请求地址
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
2.2 Construyendo un Menú de Navegación Usando Datos Dinámicos
2.2.1 Obtención de datos a través de la interfaz
LeftAside.vue:
//声明周期钩子函数，此时的Vue实例已经创建，且data和methods已经创建，但没有开始编译模板
//利用该钩子函数获取动态树数据
created: function() {
let url = this.axios.urls.SYSTEM_MODULE_REQ;
this.axios.get(url, {}).then(resp => {
//在data中声明moduleDatas数组，接收返回的数据，以便于在template中使用数据双向绑定
this.moduleDatas = resp.data;
console.log(resp.data);
}).catch(resp => {});
//登录成功后默认显示系统首页
this.$router.push("/Home");
}
Prueba, comprueba si los datos se obtienen con normalidad a través de la consola:
2.2.3 Navegación del menú del edificio a través de los datos obtenidos en segundo plano
2.2.3.1 Cree primero un menú de navegación de primer nivel
LeftAside.vue:
<el-submenu v-for="(m1) in moduleDatas" :key="m1.id" :index="'index_'+m1.id">
<template slot="title">
<i :class="m1.icon"></i>
<span slot="title">{
{m1.text}}</span>
</template>
</el-submenu>
efecto de página:
2.2.3.2 Creación de un menú de navegación secundario
LeftAside.vue:
<!--
使用v-for生成二级导航菜单，index为功能url值，二级菜单为叶子节点，为具体功能的功能菜单，
所以url一定有值（一级菜单的url为空）。
测试数据二级菜单没有分组，所以不用el-menu-item-group，只要生成el-menu-item即可。
-->
<el-menu-item v-for="m2 in m1.childrens" :key="m2.id" :index="m2.url">
<span>{
{m2.text}}</span>
</el-menu-item>
efecto de página:
2.3 Haga clic en el menú para realizar el salto de enrutamiento
2.3.1 Crear un componente de gestión de libros
La url de la función se ha configurado en la tabla t_module_vue.Para mayor comodidad, el componente de gestión de libros se define como BookList. Si usa otros nombres, debe modificar la configuración de URL de la función para mantener la coherencia.
2.3.2 Configuración de enrutamiento
2.3.3 Modificar el componente LeftAside
2.3.4 Modificar el componente Principal
3. Configuración de la página de inicio del sistema
Primero cree un componente de página de inicio
La <vista de enrutador/> especificada en el componente principal se utiliza para mostrar cada componente funcional.
Configurar enrutamiento:
Configure el menú de inicio: 
el icono del menú se puede encontrar en el sitio web oficial.
Configure la página de inicio del sistema para que se muestre de forma predeterminada después de un inicio de sesión exitoso:
<!--设置首页菜单及其图标，index设置的是Home组件的path-->
<el-menu-item key="home" index="/Home">
<i class="el-icon-s-home"></i>
<span>首页</span>
</el-menu-item>
4. Visualización de datos tabulares
4.1 Diseño de página
Para las migas de pan, las condiciones de consulta, las tablas, la paginación y otros espacios utilizados en la página, puede ver el sitio web oficial de element-ui. Este paso se centra principalmente en el diseño de la página y no vincula los datos.Después de escribir, observe el efecto de la página.
BookList.vue:
<template>
<div style="margin-left: 15px; margin-right: 15px;">
<!--面包屑-->
<el-breadcrumb style="margin-top:15px;" separator="/">
<el-breadcrumb-item :to="{path: '/Home'}">首页</el-breadcrumb-item>
<el-breadcrumb-item>书本管理</el-breadcrumb-item>
</el-breadcrumb>
<!--查询条件-->
<el-form style="margin-top: 15px;" :inline="true" class="demo-form-inline">
<el-form-item label="书名">
<el-input placeholder="书名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="primary">新增</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table style="width: 100%;" :border="true" max-height="550">
<el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column>
<el-table-column prop="bookname" label="名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column>
<el-table-column prop="booktype" label="类型" min-width="70" align="center"></el-table-column>
</el-table>
<!--分页-->
<div class="block" style="text-align:right;margin-top:10px;">
<el-pagination
:page-sizes="[10, 20, 30, 40]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</div>
</template>
4.2 Consultar y mostrar datos en una tabla
Independientemente de la paginación, obtenga datos de la interfaz de fondo y vincúlelos a la visualización de la tabla.
- Configure la interfaz para consultar la información del libro a api/action.js
//获取书本信息
'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',
- Componente BookList.vue
Figura 1: parte de la plantilla:
Figura 2: La parte del guión
export default {
name: 'BookList',
data: function() {
return {
bookname: '',
books: []
}
},
methods: {
qry: function() {
let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
this.axios.post(url, {
bookname: this.bookname
}).then(resp => {
console.log(resp);
this.books = resp.data.data;
}).catch(error => {
console.log(error);
});
}
}
}
4.3 Implementar paginación
parte de la plantilla:
<!--分页-->
<div class="block" style="text-align:right;margin-top:10px;">
<!--
@size-chang: 定义在每页显示的记录数变化时的处理函数
@current-change：当前页码发生变化时的处理函数，如点击页码或输入一个特定页码。
:current-page：指定当前页，
:page-size：每页显示的记录数
layout： 布局，可以通过调整该项来调整显示内容
:total： 总记录数
-->
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40]"
:page-size="rows" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
La parte del guión, Figura 1
qry: function() {
let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
this.axios.post(url, {
bookname: this.bookname,
//分页参数
page: this.page,
rows: this.rows
}).then(resp => {
console.log(resp);
this.books = resp.data.data;
//获取总页数
this.total = resp.data.total;
}).catch(error => {
console.log(error);
});
}
La parte del guión, Figura 2:
//当每页显示的记录数发生变化时，设置当前页码为1，执行查询。
handleSizeChange: function(rows) {
this.rows = rows;
this.page = 1;
this.qry();
},
//当前页码发生变化时，执行查询
handleCurrentChange: function(page) {
this.page = page;
this.qry();
}