前后端分离项目

*分页的实现

后端代码

第一步：分页的配置类

/**
 * 分页的配置类
 */
@Configuration
public class PageConfig {
	@Bean
	public MybatisPlusInterceptor mybatisPlusInterceptor(){
		MybatisPlusInterceptor interceptor =
				new MybatisPlusInterceptor();
		interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
		return interceptor;
	}

第二步：控制器代码

	@GetMapping("/findUsers/{offset}/{pagesize}")
	public Result findUser(@PathVariable("offset") Integer offset,@PathVariable("pagesize") Integer pagesize){
		Page<User> pager=this.userService.pager(offset,pagesize);
		return new Result(true, StatusCode.OK,"用户分页列表展示成功",pager);
	}

第三步：业务层代码

	@Resource
	private UserMapper userMapper;
	@Override
	public Page<User> pager(Integer offset, Integer pagesize) {
		Page page=new Page(offset,pagesize);
//		QueryWrapper queryWrapper=new QueryWrapper();
//		queryWrapper.like("username",mohu);
		Page pager = this.userMapper.selectPage(page,null);
		System.err.println("分页每页的集合："+pager.getRecords());
		return pager;
	}

页面的效果：

做到这里我们的后端就大功告成了！现在我们来开发前端！

第一步：vue前端代码

<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;">
       <el-form style="margin-left: -40px"  label-width="100px" class="demo-ruleForm">
<!--           <div style="border: 0px solid red;width: 400px;height: 60px;position: relative;top: -64px;left: 270px">-->
               <el-form-item label="搜搜我：">
                   <el-input v-model="mohu" placeholder="请输入关键字" style="width: 160px;"></el-input>
                   <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;" @click="submitForm('ruleForm')">搜索</el-button>
               </el-form-item>
<!--           </div>-->
       </el-form>
    <el-table
            :data="table.records"
            style="width: 1100px"
            max-height="550">
        <el-table-column
                fixed
                prop="id"
                label="序号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="password"
                label="用户密码"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="120">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="生日"
                width="100">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号码"
                width="120">
        </el-table-column>
        <el-table-column
                label="头像"
                width="120">
            <template slot-scope="scope">
                <div class="block"><el-avatar shape="square" :size="50"></el-avatar>
                     <img :src="'data:image/*;base64,'+scope.row.photo">
                </div>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"circle></el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle></el-button>
            </template>
        </el-table-column>
    </el-table>
       <div class="block">
           <el-pagination
                   @size-change="findPage"   //每页显示的条目数
                   @current-change="findSize" //起始位置的页数
                   :page-sizes="[3, 10, 15, 20]"    
                   :page-size="pagesize"    //每页显示的条目数
                   :current-page="offset"    //起始位置
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="table.total">   //共多少条数据
           </el-pagination>
       </div>
   </div>

第二步：JavaScript代码;

data() {
            return {
                mohu:'',
                offset: 1,
                pagesize: 4,
               table:{},
            }
        },
        methods: {
            handleEdit(row){
               this.$router.push("/update?id="+row.id)
            },
            
            submitForm(formName){
                let _this = this.mohu;
                // this.findUser(this.offset,this.pagesize,_this);
            },
            findPage(page){    //每页显示的记录
                console.log(page)
            },
            findSize(size){     //显示处理分页
                console.log(size)
               this.findUser(size,this.pagesize)
            },
            findUser(offset,pagesize){
                this.$http.get('http://localhost:9090/user/findUsers/'+offset+'/'+pagesize).then(resp=>{
                    console.log(resp.data.data)
                    this.table=resp.data.data;
                })
            }
        },
        created() {
            this.findUser(this.offset,this.pagesize);
        }
    }

页面的效果

 做到这里我们的分页功能全部完成！希望对你们有帮助！