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

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

<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的打印

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<user> 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<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文件

@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;
 }
}

实体类

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文件

<!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>

启动文件

@enableautoconfiguration
@configuration
@componentscan
@mapperscan("com.imooc.repository")
@springbootapplication
public class demoapplication {
 public static void main(string[] args) {
 springapplication.run(demoapplication.class, args);
 }
}

启动项目，打开

推荐专题阅读：

spring boot开发教程：//www.jb51.net/special/943.htm

mybatis教程：//www.jb51.net/special/774.htm

以上所述是小编给大家介绍的spring boot + mybatis + vue.js + elementui 实现数据的增删改查实例代码(二)，希望对大家有所帮助