大庆市萨尔图区建设局网站,软文案例大全300字,天津网站制作南昌,网站宝建站前端Vue2的搭建与环境配置条件基本表查询#xff08;查询所有管理员#xff09;#xff08;AdminMapperxml#xff09;后端搭建编码条件查询#xff08;管理员列表#xff09;添加分页功能分页查询理论 前端 后端开始实现#xff08;理论#xff09;#xff1a;后端 更… 前端Vue2的搭建与环境配置条件基本表查询查询所有管理员AdminMapperxml后端搭建编码条件查询管理员列表添加分页功能分页查询理论 前端 后端开始实现理论后端 更简单的分页实现前端 前端Vue2的搭建与环境配置
配置好node.js准备HBuilderX进行前端开发创键vue2.6项目 4.为了实现页面的跳转,给项目增加路由功能
组件路由是指在前端框架中将不同的组件与不同的路由路径相对应的机制。通过组件路由可以根据用户访问的路由路径来动态加载对应的组件实现页面的切换和内容的展示。
npm install router使用npm指令下载路由
创建路由文件夹,配置路由地址 在router.js中嵌入已下代码
import Vue from vue;
import VueRouter from vue-router; // 正确导入 VueRouter
Vue.use(VueRouter); // 使用 VueRouter// 定义组件路由
const router new VueRouter({// 配置路由地址routes: [{}]
});
export default router; // 导出路由对象在main.js中导入路由并创建添加路由对象
//导入路由
import router from ./router/router.js
Vue.use(router);new Vue({// 添加路由对象router,render: h h(App),
}).$mount(#app)在App.vue文件中进行代码修改
如下即可 现在就可以进行网页布局了
Vue框架就像跟拼积木一样,把一个一个的vue文件当成组件拼接起来组成一个网页布局
开始设计后端网页使用ElementUI
基本展示界面adminList.vue
templateel-card classbox-card!-- 查询条件--el-row :gutter20el-col :span6el-input placeholder请输入账号 /el-input/el-colel-col :span6el-radio label男男/el-radioel-radio label女女/el-radio/el-colel-col :span6el-button typeprimary iconel-icon-search 查询/el-button/el-col/el-rowbr/el-button typeprimary iconel-icon-plus新增/el-buttonel-table :datatableData border stylewidth: 100%el-table-column propaccount label账号 width100/el-table-columnel-table-column propgender label性别 width100/el-table-columnel-table-column propphone label电话 width150/el-table-columnel-table-column propadmin.account label操作人/el-table-columnel-table-column propoperTime label操作时间 aligncenter/el-table-columnel-table-column label操作 fixedrighttemplate slot-scopescopeel-button sizemini编辑/el-buttonel-button sizemini typedanger 删除/el-button/template/el-table-column/el-table/el-card/templatescriptexport default {data() {return {tableData: []}},methods: {},mounted() {// 像后端发送请求查询管理员列表this.$http.get(adminCtl/admins).then((resp){this.tableDataresp.data.data;});}}
/scriptstyle
/style条件基本表查询查询所有管理员AdminMapperxml
查询所有管理员信息
?xml version1.0 encodingUTF-8?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd!--与接口进行绑定--
mapper namespaceorg.example.dao.AdminDao
!--查询所有管理员信息--resultMap idadminMap typeAdminid columnid propertyid/result columnaccount propertyaccount/result columnpassword propertypassword/result columnphone propertyphone/result columngender propertygender/result columntype propertytype/result columnoper_time propertyoperTime/
!-- 嵌套查询管理员信息--association propertyadmin javaTypeAdminresult columnoperator_account propertyaccount//association/resultMapselect idsearchAllAdmins resultMapadminMapSELECTa1.id,a1.account,a1.phone,a1.gender,a1.type,a2.account AS operator_account,a1.oper_timeFROMadmin a1LEFT JOIN admin a2ON a1.adminid a2.idWHERE a1.type 2/select/mapper结果如下 后端搭建
参考Java框架Spring学习的后端搭建本项目就是以上面为基础搭建的后端
编码
条件查询管理员列表
查询所有管理员如上
我们重点在为列表添加查询条件
那么为什么要添加查询条件
答为了加快对所需信息的快速检索
案例比如筛选账号与性别
对应AdminMapper.xml代码
?xml version1.0 encodingUTF-8?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd!--与接口进行绑定--
mapper namespaceorg.example.dao.AdminDao
!--查询所有管理员信息--resultMap idadminMap typeAdminid columnid propertyid/result columnaccount propertyaccount/result columnpassword propertypassword/result columnphone propertyphone/result columngender propertygender/result columntype propertytype/result columnoper_time propertyoperTime/
!-- 嵌套查询管理员信息--association propertyadmin javaTypeAdminresult columnoperator_account propertyaccount//association/resultMapselect idsearchAllAdmins resultMapadminMapSELECTa1.id,a1.account,a1.phone,a1.gender,a1.type,a2.account AS operator_account,a1.oper_timeFROMadmin a1LEFT JOIN admin a2ON a1.adminid a2.idWHERE a1.type 2if testaccount!AND a1.account #{account}/ifif testgender!AND a1.gender #{gender}/if/select
/mapperadmins(){this.$http.post(adminCtl/admins,this.form).then((resp){this.tableDataresp.data.data;});}添加分页功能
为了限制一次查询过多的数据为了提高查询效率
分页查询理论 前端 后端 分页的必备条件
总记录数总共有多少条
每页显示的条数
总页数总记录数/每页显示的条数1
分页实现
mysql的limit查询
当前页数 n limit (n-1)*每页显示的条数
前端向后端传递哪些数据
1.当前页数
2.每页显示的条数
后端向前端传递那些数据
1.总条数
2.对应页的数据
开始实现理论
后端
1.在前端form表单里面添加页数pageNumber与pageSize数据
form:{account:,gender:,pageNumber:1,pageSize:10
}2.后端Admin添加上面对应属性 3.在AdminService层添加分页逻辑
//当前页数转换为每页开始的位置
admin.setPageNumber((admin.getPageNumber()-1)*admin.getPageSize());4.修改select代码
limit #{pageNumber}, #{pageSize}效果如下 但我们还需要给前端传总条数这个需要我们在后端自己写。这样就可以配合ElementUI组件实现分页功能但我们也可以通过更简单的方法来实现分页功能
更简单的分页实现
无需计算分页具体配置如下
1.pom.xml配置
dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion1.4.5/version/dependency
一定要注意版本问题
2.application.yml文件配置
# application.yml文件配置
spring:main:allow-circular-references: true #开始支持spring循环依赖3.Service类中 public PageInfoAdminsearchAllAdmins(Admin admin) {PageHelper.startPage(admin.getPageNumber(), admin.getPageSize()); //1.会自动算出limit后面的开始位置ListAdmin admins adminDao.searchAllAdmins(admin); //2.重新发一条sql,查询总条数PageInfoAdmin pageInfo new PageInfo(admins);return pageInfo;}我们发现后端框架已经处理好了传送 此时以及显示传过来了只需要修改前端代码即可 我们发现框架已经提我们算好了分页数据了
前端
由于我们发现数据都在list里面所以要修改前端获取数据的代码如下 我们开始添加页脚的页数组件
div classblockspan classdemonstration完整功能/spanel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[100, 200, 300, 400]:page-size100layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination/div前端完整代码
templateel-card classbox-card!-- 查询条件--el-row :gutter20el-col :span6el-input placeholder请输入账号 v-modelform.account /el-input/el-colel-col :span6el-radio label男 v-modelform.gender男/el-radioel-radio label女 v-modelform.gender女/el-radio/el-colel-col :span6el-button typeprimary iconel-icon-search clicksearch()查询/el-button/el-col/el-rowbr/el-button typeprimary iconel-icon-plus新增/el-buttonel-table :datatableData border stylewidth: 100%el-table-column propaccount label账号 width100/el-table-columnel-table-column propgender label性别 width100/el-table-columnel-table-column propphone label电话 width150/el-table-columnel-table-column propadmin.account label操作人/el-table-columnel-table-column propoperTime label操作时间 aligncenter/el-table-columnel-table-column label操作 fixedrighttemplate slot-scopescopeel-button sizemini编辑/el-buttonel-button sizemini typedanger 删除/el-button/template/el-table-column/el-tablediv classblockel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageform.pageNumber:page-sizes[10, 20, 30, 40]:page-size100layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/el-card/templatescriptexport default {data() {return {total:0,tableData: [],form:{account:,gender:,pageNumber:1,pageSize:10}}},methods: {search(){this.admins();},handleSizeChange(val) { //当改变下拉框页数大小时触发的this.form.pageSize val;this.admins();},handleCurrentChange(val) {//当改变当前页数时候触发this.form.pageNumber val;this.admins();},admins(){this.$http.post(adminCtl/admins,this.form).then((resp){this.tableDataresp.data.data.list;this.total resp.data.data.total;});}},mounted() { //会在网页加载的时候调用里的方法// 像后端发送请求查询管理员列表this.admins();}}
/scriptstyle
/style效果如下 前端完成工作如下
1.可以根据总页数和每页显示的条数计算出总页数
2.通过组件显示分页样式
3.通过组件可以改变当前页数 和 页数大小
