服务器之家

服务器之家 > 正文

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

时间：2020-10-29 15:15     来源/作者：慕梦辰

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

 
?
1
 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.imooc</groupId>
 <artifactId>demo</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>
 <name>demo</name>
 <description>Demo project for Spring Boot</description>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>1.4.3.RELEASE</version>
 <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <properties>
 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 <java.version>1.8</java.version>
 </properties>
 <dependencies>
 <dependency>
  <groupId>org.mybatis.spring.boot</groupId>
  <artifactId>mybatis-spring-boot-starter</artifactId>
  <version>1.1.1</version>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <scope>runtime</scope>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-test</artifactId>
  <scope>test</scope>
 </dependency>
 <dependency>
  <groupId>org.mybatis.spring.boot</groupId>
  <artifactId>mybatis-spring-boot-starter</artifactId>
  <version>1.1.1</version>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-redis</artifactId>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-activemq</artifactId>
 </dependency>
 <!--http://localhost:8080/health-->
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-actuator</artifactId>
 </dependency>
 <dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>4.1.6</version>
 </dependency>
 </dependencies>
 <build>
 <plugins>
  <plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
  </plugin>
 </plugins>
 </build>
</project>

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

 
?
1
 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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文件

 
?
1
 
2
3
4
5
6
7
8
@Repository
public interface UserRepository {
 List<User> findUsersByUsername(@Param("username") String username);
 int getCount();
 int saveUser(User user);
 int modifyUser(User user);
 int removeUser(@Param("userId") int userId);
}

service文件

 
?
1
 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Service
public class UserServiceImpl implements UserService {
 @Autowired
 private UserRepository userRepository;
 @Override
 public Map<String, Object> getTableData(int pageNum, int pageSize, String username) {
 try {
  PageHelper.startPage(pageNum, pageSize);
  List<User> userList = userRepository.findUsersByUsername(username);
  int count = userRepository.getCount();
  Map<String, Object> tableData = new HashMap<>();
  tableData.put("list", userList);
  tableData.put("count", count);
  return tableData;
 } catch (Exception e) {
  e.printStackTrace();
 }
 return null;
 }
}
public interface UserService {
 Map<String, Object> getTableData(int pageNum, int pageSize, String username);
}

controller文件

 
?
1
 
2
3
4
5
6
7
8
9
10
11
12
13
14
@RestController
public class UserController {
 @Autowired
 private UserService userService;
 @GetMapping("getTableData")
 public Map<String, Object> getTableData(int pageNum, int pageSize, String username) {
 try {
  return userService.getTableData(pageNum, pageSize, username);
 } catch (Exception e) {
  e.printStackTrace();
 }
 return null;
 }
}

实体类

 
?
1
 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

 
?
1
 
2
3
4
5
6
7
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文件

 
?
1
 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="ZH">
<head>
 <meta charset="UTF-8">
 <title>spring boot + mybatis + vue + elementui</title>
 <link rel="stylesheet" href="//cdn.bootcss.com/element-ui/1.1.2/theme-default/index.css" rel="external nofollow" >
 <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
 <script src="//cdn.bootcss.com/element-ui/1.1.2/index.js"></script>
 <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
<div id="vm">
 <el-row :gutter="3" style="margin: 10px 0;">
 <el-col :span="5">
  <el-input placeholder="输入用户名称查询" v-model="username" icon="search" @change="changeUsername">
  </el-input>
 </el-col>
 </el-row>
 <el-table border fit :data="tableData" highlight-current-row style="width: 100%;font-size: 12px;">
 <el-table-column type="index" width="50"></el-table-column>
 <el-table-column prop="username" label="用户名称"></el-table-column>
 <el-table-column prop="sex" label="性别" :formatter="formatSex"></el-table-column>
 <el-table-column prop="createTime.time" label="创建时间" sortable :formatter="formatCreateDate"></el-table-column>
 </el-table>
 <el-col class="toolbar" style="padding:10px;">
 <el-pagination @current-change="findAll" :current-page="currentPage" :page-size="10"
   layout="total, prev, pager, next, jumper" :total="total" style="float:right"></el-pagination>
 </el-col>
</div>
</body>
<script>
 Vue.http.options.emulateJSON = true;
 Vue.http.options.emulateHTTP = true;
 var vm = new Vue({
 el: '#vm',
 data: {
  tableData: [],
  currentPage: 1,
  total: 10,
  listLoading: false,
  username: null
 },
 mounted: function () {
  this.findAll();
 },
 methods: {
  findAll: function (currentPage) {
  this.listLoading = true;
  if (!isNaN(currentPage)) {
   this.currentPage = currentPage;
  }
  var params_ = {
   pageNum: this.currentPage,
   pageSize: 10
  };
  if (this.username && this.username.trim() != "") {
   params_['username'] = this.username;
  }
  this.$http.get("/getTableData", {
   params: params_
  }).then(function (response) {
   console.log(response.data);
   this.total = response.data.count;
   this.tableData = [];
   for (var key in response.data.list) {
   this.$set(this.tableData, key, response.data.list[key]);
   }
  }).catch(function (response) {
   console.error(response);
  });
  this.listLoading = false;
  },
  formatDate: function getNowFormatDate(time) {
  var date = new Date(time);
  var seperator1 = "-";
  var seperator2 = ":";
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
   month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
   strDate = "0" + strDate;
  }
  var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
   + " " + date.getHours() + seperator2 + date.getMinutes()
   + seperator2 + date.getSeconds();
  return currentdate;
  },
  formatCreateDate: function (row, column) {
  if (row.createTime != null) {
   return this.formatDate(row.createTime);
  } else {
   return '';
  }
  },
  formatSex: function (row, column) {
  if (row.sex != null) {
   return row.sex == 1 ? '男' : '女';
  }
  },
  changeUsername: function () {
  this.findAll(1);
  }
 }
 });
</script>
</html>

启动文件

 
?
1
 
2
3
4
5
6
7
8
9
10
@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 + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

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

原文链接：http://www.imooc.com/article/15699

标签：
mybatis 增删改查 Vue.js spring boot ElementUI 

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解，亲测可用！！！
Intellij idea2020永久破解，亲测可用！！！ 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
最新idea2020注册码永久激活(激活到2100年)
最新idea2020注册码永久激活(激活到2100年) 2020-07-29
返回顶部