Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)，接下来我们添加分页相关的依赖，时间紧张，直接上代码了，贴上我的pom文件

 4.0.0
 com.imooc
 demo
 0.0.1-SNAPSHOT
 jar
 demo
 Demo project for Spring Boot
 
 org.springframework.boot
 spring-boot-starter-parent
 1.4.3.RELEASE
  
 
 
 UTF-8
 UTF-8
 1.8
 
 
 
  org.mybatis.spring.boot
  mybatis-spring-boot-starter
  1.1.1
 
 
  org.springframework.boot
  spring-boot-starter-web
 
 
  mysql
  mysql-connector-java
  runtime
 
 
  org.springframework.boot
  spring-boot-starter-test
  test
 
 
  org.mybatis.spring.boot
  mybatis-spring-boot-starter
  1.1.1
 
 
  org.springframework.boot
  spring-boot-starter-redis
 
 
  org.springframework.boot
  spring-boot-starter-activemq
 
 
 
  org.springframework.boot
  spring-boot-starter-actuator
 
 
  com.github.pagehelper
  pagehelper
  4.1.6
 
 
 
 
  
  org.springframework.boot
  spring-boot-maven-plugin
  
 
 

接下来是yml文件，主要加入了mybatis的配置，以及sql的打印

spring:
 datasource:
 name: test
 url: jdbc:mysql://localhost/imooc?useUnicode=true&characterEncoding=utf-8&useSSL=false
 username: root
 password: 123456
 driver-class-name: com.mysql.jdbc.Driver
mybatis:
 type-aliases-package: com.imooc.model
 mapper-locations: classpath:mybatis/mapper/*.xml
 check-config-location: true
 config-location: classpath:mybatis/mybatis-config.xml
logging:
 level:
 com.imooc.repository: debug
 com.imooc.service.impl: debug
 com.imooc.controller: debug
 com.imooc.activemq: debug

接下来是repositpry文件

@Repository
public interface UserRepository {
 List findUsersByUsername(@Param("username") String username);
 int getCount();
 int saveUser(User user);
 int modifyUser(User user);
 int removeUser(@Param("userId") int userId);
}

service文件

@Service
public class UserServiceImpl implements UserService {
 @Autowired
 private UserRepository userRepository;
 @Override
 public Map getTableData(int pageNum, int pageSize, String username) {
 try {
  PageHelper.startPage(pageNum, pageSize);
  List userList = userRepository.findUsersByUsername(username);
  int count = userRepository.getCount();
  Map tableData = new HashMap<>();
  tableData.put("list", userList);
  tableData.put("count", count);
  return tableData;
 } catch (Exception e) {
  e.printStackTrace();
 }
 return null;
 }
}
public interface UserService {
 Map getTableData(int pageNum, int pageSize, String username);
}

controller文件

@RestController
public class UserController {
 @Autowired
 private UserService userService;
 @GetMapping("getTableData")
 public Map getTableData(int pageNum, int pageSize, String username) {
 try {
  return userService.getTableData(pageNum, pageSize, username);
 } catch (Exception e) {
  e.printStackTrace();
 }
 return null;
 }
}

实体类

public class User {
 private Integer userId;
 private String username;
 private Byte sex;
 private Date createTime;
 public Integer getUserId() {
 return userId;
 }
 public void setUserId(Integer userId) {
 this.userId = userId;
 }
 public String getUsername() {
 return username;
 }
 public void setUsername(String username) {
 this.username = username;
 }
 public Byte getSex() {
 return sex;
 }
 public void setSex(Byte sex) {
 this.sex = sex;
 }
 public Date getCreateTime() {
 return createTime;
 }
 public void setCreateTime(Date createTime) {
 this.createTime = createTime;
 }
}

sql

CREATE TABLE `t_user` (
 `user_id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(32) DEFAULT NULL,
 `sex` tinyint(4) DEFAULT NULL,
 `create_time` datetime DEFAULT NULL,
 PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=10003 DEFAULT CHARSET=utf8

在static目录下新建 index.html文件

启动文件

@EnableAutoConfiguration
@Configuration
@ComponentScan
@MapperScan("com.imooc.repository")
@SpringBootApplication
public class DemoApplication {
 public static void main(String[] args) {
 SpringApplication.run(DemoApplication.class, args);
 }
}

启动项目，打开http://localhost:8080/index.html

推荐专题阅读：

spring boot开发教程：https://www.jb51.net/Special/943.htm

mybatis教程：https://www.jb51.net/Special/774.htm

以上所述是小编给大家介绍的Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！