vue-admin-template实现分页查询功能

最新推荐文章于 2025-02-28 09:50:02 发布

jarvis314159

最新推荐文章于 2025-02-28 09:50:02 发布

阅读量2k

点赞数 4

分类专栏：前端笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43283513/article/details/112566863

版权

本文档介绍了如何在Vue-admin-template中搭建前端环境并实现分页查询功能。首先，关闭ESLint检查，然后安装依赖并启动项目。接着，添加路由并在views目录创建对应的list.vue页面。在src/api创建接口js文件，定义URL和参数，并在list.vue中调用发送请求。最后，使用Element-UI展示接口返回的数据，完成分页显示讲师列表的功能。

摘要由CSDN通过智能技术生成

搭建前端环境

config目录下的index.js文件中，将useEslint改为false
注：ESLint是语法检查的插件，但是语法检查太严格，故此不用
安装依赖：在项目根目录下执行 npm install ，会根据package.json中的依赖配置进行安装
启动：根目录下执行npm run dev
如果不报错且弹出默认登录页面，则搭建完成

做一个分页显示讲师列表的功能

后台接口如下

@ApiOperation(value = "多条件组合分页查询讲师")
@PostMapping("/pageTeacherByCondition/{current}/{size}")
public CommonResponseVo pageTeacherByCondition(
        @ApiParam(name = "current",value = "当前页",required = true) @PathVariable int current,
        @ApiParam(name = "size",value = "每页显示条数",required = true) @PathVariable int size,
        @ApiParam(name = "teacherQueryVo",value = "条件") @RequestBody(required = false) TeacherQueryVo teacherQueryVo){
   
}

1. /src/router下的index.js中添加路由

{
   	
  path: '/teacher',
  component: Layout,
  redirect: '/teacher/table',  // 使用/teacher会路由到/teacher/table页面
  name: '讲师管理',
  meta: {
    title: '讲师管理', icon: 'example' },  //左侧栏的信息。title是左侧栏目的名称
  children: [
    {
   
      path: 'table',
      name: '讲师列表',
      component: () => import('@/views/teacher/list'),  //对应views/teacher目录下的list.vue文件
      meta: {
    title: '讲师列表', icon: 'table' }
    },
    {
   
      path: 'save',
      name: '添加讲师',
      component: () => import('@/views/teacher/save'),
      meta: {
    title: '添加讲师', icon: 'tree' }
    }
  ]
},

在这里插入图片描述
2. views目录下添加路由对应的页面

list.vue

<template>
	<div>
		讲师列表
	</div><

最低0.47元/天解锁文章