1、创建springboot项目

2、pom.xml 里面添加 依赖

org.springframework.bootspring-boot-starter-webmysqlmysql-connector-java5.1.22com.baomidoumybatis-plus-boot-starter3.5.2org.projectlomboklomboktrueorg.springframework.bootspring-boot-starter-testtestorg.springframework.bootspring-boot-starter-web

3、pojo 实体类实现

@Data
@TableName("userinfo")
public class UserInfo {@TableId(type = IdType.AUTO)private Integer id;private String username;private String password;
}

4、mapper 接口实现

@Mapper
public interface UserInfoMapper extends BaseMapper {//分页public Page findByPage(int pageCode, int pageSize);
}

5、service 接口实现

public interface UserInfoService extends IService {//分页public Page findBy(int pageCode, int pageSize);
}

service 下面impl 的业务实现类：

@Service
public class UserInfoServiceImpl extends ServiceImpl implements UserInfoService {@Autowiredprivate UserInfoMapper userInfoMapper;@Overridepublic Page findByPage(int pageCode, int pageSize) {//1.创建Page对象，传入两个参数：当前页和每页显示记录数Page page = new Page(pageCode,pageSize);//2.将分页查询到的所有数据封装到Page对象中userInfoMapper.selectPage(page,null);return page;}
}

6、mybatis-plus 分页需要实现分页拦截器 config 包

@Configuration
@MapperScan("com.mapper")
public class MybatisPlusConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor(){MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}

7、controller 控制器的实现

@CrossOrigin //允许跨域 禁止ajax 访问
@RestController
@RequestMapping("/userinfo")
public class UserInfoController {@Autowiredprivate UserInfoService userService;//    分页@GetMapping("/page/{pageCode}/{pageSize}")public Page findByPage(@PathVariable(value = "pageCode") int pageCode,@PathVariable(value = "pageSize") int pageSize) {Page pageInfo = userService.findByPage(pageCode, pageSize);return pageInfo;}}

8、静态页面实现

这里的index.js和index.css 是element 的js和css。

9，下载前端插件vue+elementui+axios链接

下载链接-前端插件vue+elementui+axios.rar