This article records the process of front-end and back-end user binding and paging display
Show results
Technology Architecture
Backend: SpringBoot+Mybatis-plus
Frontend: Vue framework
Data transmission: Axios asynchronous request
Related code
code behind
/*
分页查询
*/
@GetMapping("/findDList")
public Result findDList(@RequestParam(required = true,defaultValue = "1")Integer current,
@RequestParam(required = true,defaultValue = "6")Integer size){
//对用户进行分页，current是当前页，size是页面大小，泛型注入的为用户类
Page<D>page=new Page<>(current,size);
//
Page<D> dPage = dService.page(page);
long total = dPage.getTotal();
List<D> records = dPage.getRecords();
return Result.ok().data("total",total).data("records",records);
}
Before writing the front-end code, you need to install the axios library. For details, please refer to the entry
front-end page code
code structure
request.js code
//引入axios包
import axios from 'axios'
// 创建 axios 对象
const instance = axios.create({
// 后台端口号为 8081
baseURL: 'http://localhost:8081',
timeout: 3000 //单位 毫秒
});
export default instance;
The file that the background object controller interacts with, that is, the js under the api folder, is the following
import request from '../utils/request'
/*
后面每次请求都需要携带token
*/
export const findDList = (current,size) => {
return request({
// Java 后台的 controller 方法
url: '/system/d/findDList',
method: 'get',
params: {
current,
size,
}
})
}
The front-end page of the views layer, this part of the content can be entered with reference to Element UI
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 用户列表卡片 -->
<el-card class="box-card">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="部门" label-width="70px">
<el-select clearable v-model="formInline.city" placeholder="请选择">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{
{
item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{
{
item.value }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用户名" label-width="70px">
<el-input clearable v-model="formInline.user" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="邮箱" label-width="70px">
<el-input clearable v-model="formInline.email" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label-width="70px">
<el-radio v-model="formInline.radio" label="1">备选项</el-radio>
<el-radio v-model="formInline.radio" label="2">备选项</el-radio>
<el-radio v-model="formInline.radio" label="3">备选项</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="formInline.nikeName" placeholder="请输入昵称"></el-input>
</el-form-item>
<el-form-item style="margin-left: 10px">
<el-button icon="el-icon-refresh">重置</el-button>
<el-button type="primary" icon="el-icon-search">查询</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>
<!-- 表格内容显示区域 height: 400px-->
<!-- 此部分的 prop 为实体类的属性名 -->
<el-table
:data="dList"
border
max-height="400"
style="width: 100%;">
<el-table-column
prop="id"
label="#"
width="120">
</el-table-column>
<el-table-column
prop="username"
label="用户名"
width="120">
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="60">
<template slot-scope="scope">
{
{
scope.row.sex==0?"男":(scope.row.sex==1?"女":"秘密")}}
</template>
</el-table-column>
<el-table-column
sortable
prop="name"
label="所属部门"
width="180">
</el-table-column>
<!-- sortable 声明可排序 -->
<el-table-column
sortable
prop="birth"
label="生日"
width="180">
</el-table-column>
<el-table-column
sortable
prop="email"
label="邮箱"
width="180">
</el-table-column>
<el-table-column
sortable
prop="phoneNumber"
label="电话"
width="180">
</el-table-column>
<el-table-column
sortable
prop="status"
label="是否禁用"
width="200">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status==1"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
label="操作">
<el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
<el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
<el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
style="padding-top: 15px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[6, 10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template>
front-end effects
<script>
import {
findDList } from '../../api/d'
export default {
name: 'Users',
data () {
return {
formInline: {
user: '',
email: '',
city: '',
radio: '1',
nikeName: '',
},
// 用户集合
dList: [],
// 部门集合
deptList: [],
// currentPage4: 4,
// 每页显示条数
pageSize: 6,
// 总条数
total: 100,
// 当前页码
current: 1,
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: '',
}
},
created () {
// 创建组件的时候 调用医生信息查询
this.getDList();
},
methods: {
onSubmit () {
console.log('submit!')
},
// 更新size的值
handleSizeChange (val) {
// 将val赋值给size
this.size = val;
// 重新去后台查询数据
this.getDList();
// console.log(`每页 ${
val} 条`)
},
// 更新当前页
handleCurrentChange (val) {
this.current = val;
// 重新去后台查询数据
this.getDList();
// console.log(`当前页: ${
val}`)
},
// axios 异步请求
async getDList(){
const {
data} = await findDList(this.current,this.size);
/* console.log(data); */
this.dList = data.data.records;
this.total = data.data.total;
}
}
}
</script>
Test the effect, when the button below is clicked, the data will be automatically updated, and the test is successful
