【前后端分离】前台多表联查

实现效果

多个条件实现数据库中数据的查询

前台页面代码

此处引入 dVO这样的对象，与后台的DVO类对应

<el-form :inline="true" :model="dVO" class="demo-form-inline"><el-form-item label="部门" label-width="70px"><el-select clearable v-model="dVO.departmentId" placeholder="请选择"><el-optionv-for="item in departments":key="item.id":label="item.name":value="item.id"><span style="float: left">{{ item.name }}</span><span style="float: right; color: #8492a6; font-size: 13px"><span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.deptCount }}</span></span></el-option></el-select></el-form-item><el-form-item label="用户名" label-width="70px"><el-input clearable v-model="dVO.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="邮箱" label-width="70px"><el-input clearable v-model="dVO.email" placeholder="请输入邮箱"></el-input></el-form-item><el-form-item label-width="70px"><el-radio v-model="dVO.sex" label="0">男</el-radio><el-radio v-model="dVO.sex" label="1">女</el-radio><el-radio v-model="dVO.sex" label="">全部</el-radio><!--        <el-button type="primary" @click="onSubmit">查询</el-button>--></el-form-item><el-form-item label="昵称" label-width="70px"><el-input clearable v-model="dVO.nickname" placeholder="请输入昵称"></el-input></el-form-item><el-form-item style="margin-left: 10px"><el-button icon="el-icon-refresh" @click="resetDVO">重置</el-button><el-button type="primary" icon="el-icon-search" @click="getDList">查询</el-button><el-button type="success" icon="el-icon-plus">添加</el-button><el-button type="warning" icon="el-icon-download">导出</el-button></el-form-item></el-form>

JS代码

//该部分增加 dVO 列表，对应名字尽量和后台中dVO类属性一致
data () {return {dVO: {departmentId: '',username: '',email: '',sex: '1',nickname: ''},// 用户集合dList: [],// 部门集合deptList: [],// currentPage4: 4,// 每页显示条数size: 6,// 总条数total: 100,// 当前页码current: 1,departments: [],value: ''}},// method 中设置 resetDoctorVO 方法methods: {async getDList(){const {data} = await findDList(this.current,this.size,this.dVO)/* console.log(data); */this.dList = data.data.recordsthis.total = data.data.total},// 重置查询resetDVO(){this.dVO.departmentId=''this.dVO.username=''this.dVO.sex=''this.dVO.nickname=''this.dVO.email=''this.getDList()}
}

后台代码参看点击

发布web页面即可实现多表联查的功能

【前后端分离】前台多表联查相关推荐

若依前后端分离版获取部门表所有最子级部门并匹配部门名称生成excel
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
前后端分离学习笔记(5) ---[表单的增删改操作；以及为管理员上传头像]
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面添加管理员操作修改管理员信息删除管理员为管理员上传头像修改密码 ...
elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
为什么前后端分离了，你比从前更痛苦？
作者:谢小呆来源:https://my.oschina.net/xbl/blog/2246297 你有没有遇到过: 前端代码刚写完,后端的接口又变了. 接口文档永远都是不对的. 测试工作永远只能临近 ...
easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 转自:我心依旧.cnblogs.com/-clouds/p/11633786.html 框架 ...
动静分离和前后端分离
一.前端和后端的概念(怎么区分是前端还是后端) 什么是前端? 这又可以分解成几个小问题. 1.JS是前端么? 2.只要用JS写的,都是前端么? 3.只要是前端工程师写的,都是前端么?4.大前端就是指的 ...
springboot jwt token前后端分离_为什么要前后端分离？
作者:互扯程序来源:互扯程序广而告之:由于此订阅号换了个皮肤,系统自动取消了读者的公众号置顶.导致用户接受文章不及时.您可以打开订阅号,选择置顶(星标)公众号,重磅干货,第一时间送达! 本文知 ...
dotnetcore+vue+elementUI 前后端分离架二（后端篇）
前言最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍前后端分离架构实战. 涉及的技术栈服务端技术 mysql 本项目使用mysql 作为持 ...
springboot前后端分离后权限原理浅谈
1. 需求描述最近在梳理springboot前后端分离后的权限管理问题.前段时间,已经把shiro的实现和spring security 的实现进行了初步的了解.如果深入细节,一个篇幅怕是不够.本文 ...

【前后端分离】前台多表联查

实现效果

前台页面代码

JS代码

后台代码参看点击

发布web页面即可实现多表联查的功能

【前后端分离】前台多表联查相关推荐

最新文章

热门文章