本项目采样springboot+Vue+Mybatis-plus+MySql框架
1、设置数据库
数据表的格式设置成utf8
2、后台处理
Map接口
public interface RoleMapper extends BaseMapper<Role> {
@Select("SELECT * FROM campus_helper.role r where r.name like '%${name}%'")
List<Role> getRoleByName(Page<Role> page, @Param("name") String name);
}
服务接口
public interface RoleService extends IService<Role> {
Page<Role> getRoleByName(Page<Role> page, String name);
}
服务类
@Service
public class RoleServiceImpl extends ServiceImpl<RoleMapper, Role> implements RoleService {
public Page<Role> getRoleByName(Page<Role> page, String name){
return page.setRecords(this.baseMapper.getRoleByName(page, name));
}
}
控制类
@PostMapping("/query")
public BaseResponse<?> query(int start, String query, int pageNum, int pageSize){
Page<Role> page=new Page<>(pageNum, pageSize);
Page<Role> roleList=roleService.getRoleByName(page, query.trim());
return (new BaseResponse<>()).Result(Constants.SUCCESS,roleList,"success");
}
3、前端处理
template模板
<el-input v-model="queryInfo.query" placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
</el-input>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]"
:page-size="queryInfo.pageSize" :total="total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
数据
queryInfo: {
start: 0,
query: '',
pageNum: 0,
pageSize: 2
},
js方法
onSearch () {
this.queryInfo.start = 1
this.getRoleList()
},
4、问题解决
查询不可靠,有时可以魔化查询,有时不行
将当前页指名为首页问题解决。
onSearch () {
this.queryInfo.start = 1
this.queryInfo.pageNum = 0
this.getRoleList()
},