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="https://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/1.1.2/index.js"></script>
 <script src="https://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);
 }
}

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

推荐专题阅读:

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

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

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

时间: 2017-05-25

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

环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是

SpringMVC4 + MyBatis3 + SQL Server 2014整合教程(含增删改查分页)

前言 说起整合自然离不开ssm,我本身并不太喜欢ORM,尤其是MyBatis,把SQL语句写在xml里,尤其是大SQL,可读性不高,出错也不容易排查. 开发环境 idea2016.SpringMVC4.Mybatis3 项目结构 SSM整合 1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance&qu

Mybatis实现增删改查(CRUD)实例代码

MyBatis简介 MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBatis 可以使用简单的XML 或注解用于配置和原始映射,将接口和 Java 的 POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. MyBatis下载:https://github.com/mybatis/mybatis-3/releases Mybatis实

Mybatis实现增删改查及分页查询的方法

MyBatis的前身就是iBatis.是一个数据持久层(ORM)框架. MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持 久层框架.MyBatis消除了几乎所有的JDBC 代码和参数的手工 设置以及结果集的检索.MyBatis使用简单的XML或注解用于 配置和原始映射,将接口和Java 的POJOs(Plan Old Java Objects,普通的Java 对象)映射成数据库中的记录.每个 MyBatis应用程序主要都是使用SqlSessionFactory实例的,一个 SqlS

mybatis generator 配置 反向生成Entity简单增删改查(推荐)

mybatis generator 配置 反向生成Entity简单增删改查实例代码如下所示: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd

mybatis实现增删改查_动力节点Java学院整理

所需要用到的其他工具或技术: 项目管理工具 : Maven 测试运行工具 : Junit 数据库 : Derby Maven Dependencies: <dependencies> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.2.7</version> </dependen

Mybatis增删改查mapper文件写法详解

  1. 插入 <mapper namespace="需要实现接口的全类名"> <insert id="需要实现的接口里的方法名" parameterType="方法参数类型,如果是对象要写全类名"> INSERT sql命令(命令里通过#{}获取对象属性) <!--注意属性名区分大小写 --> </insert> <mapper> EG: <mapper namespace=&q

MyBatis入门之增删改查+数据库字段和实体字段不一致问题处理方法

当数据库字段和实体bean中属性不一致时 之前数据库Person名字字段是name,PersonBean中属性也是name,但是之后数据库中修改为了user_name, 方法1:通过sql语句的字段起别名,别名和实体中的对象属性一致 SELECT id,user_name as name,sex,age from person <select id="find" resultType="com.luogg.domain.Person"> SELECT i

MyBatis中SqlSession实现增删改查案例

前言 开博客这是第一次写系列文章,从内心上讲是有点担心自己写不好,写不全,毕竟是作为java/mybatis学习的过程想把学习的路线和遇到的问题都总结下来,也让知识点在脑海里能形成一个体系. 开发环境 idea2016.mybatis3.SQLServer2012 pom.xml.mybatis.xml.log4j.properties 先贴上pom.xml是因为他直接和搭建开发环境和测试环境有关系,mybatis.xml则是连接数据库,log4j.properties在学习阶段配置上有助于我们

mybatis使用xml进行增删改查代码解析

MyBatis是支持普通sql查询.存储过程和高级映射的持久层框架. MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装. MyBatis可以使用 简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects 普通的Java对象)映射成数据库中的记录. 每一个Mybatis应用程序都以一个sqlSessionFactory对象的实例为核心. sqlSessionFactory对象的实例可以通过sqlSessionFa

浅谈JavaScript中数组的增删改查

数组的增加 •ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift()  向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4];   var res=ary.unshift(6);   console.log(res); ---->5 返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数组改

Mybatis 条件查询 批量增删改查功能

模糊查询: @Select({ "SELECT * FROM account where account like CONCAT('%',#{query},'%') or email like CONCAT('%',#{query},'%')" }) Account findAccountByAccountOrMail(@Param("query") String query); 批量添加: @Insert({ "<script>"

Java语言实现对MySql数据库中数据的增删改查操作的代码

简单说操作的步骤: 1.连接数据库 2.将SQL语句发送到数据库 3.执行SQL语句 这里举个例子: 在一个数据库中有个students表,表中有学号(Id),姓名(Name),性别(Sex),地址(Address),电话(Phone),专业(Dept). 这里把这个表写成一个学生信息类(Info_student) (请先确保看了例子说明,不然代码有的地方可能看不明白) 要实现操纵我们首先得连接数据库,因为每个操作都要进行连接操作,所以我们直接把连接的操作封装在一个类中,需要连接的时候直接调用可

C#在winform中实现数据增删改查等功能

winform中利用ado.net实现对单表的增删改查的详细例子,具体如下: 1.前言: 运行环境:VS2013+SQL2008+Windows10 程序界面预览: 使用的主要控件:dataGridview和menuStrip等.  2.功能具体介绍: 1.首先,我们要先实现基本的数据操作,增删改查这几个操作. (1)先定义一个数据库操作的公共类: using System; using System.Collections.Generic; using System.Linq; using S

Mybatis实现数据的增删改查实例(CRUD)

什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBatis 可以使用简单的XML 或注解用于配置和原始映射,将接口和 Java 的 POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. MyBatis下载:https://github.com/mybatis/mybatis-3/releases Mybat

spring boot2结合mybatis增删改查的实现

1. 场景描述 本节结合springboot2.springmvc.mybatis.swagger2等,搭建一个完整的增删改查项目,希望通过这个基础项目,能帮忙朋友快速上手springboot2项目. 2. 解决方案 2.1新建springboot项目 使用idea新建springboot项目(springboot项目快速搭建) (1)new project (2)gav设置 2.2 项目整体图及说明2.2.1 整体图 2.2.2 说明 项目包含4大内容 (1)pom.xml maven项目必备

Spring boot+mybatis+thymeleaf 实现登录注册增删改查功能的示例代码

本文重在实现理解,过滤器,业务,逻辑需求,样式请无视.. 项目结构如下 1.idea新建Spring boot项目,在pom中加上thymeleaf和mybatis支持.pom.xml代码如下 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3

vue实现表格数据的增删改查

在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注于对数据的操作和处理. 比如我们有一个这样的页面: 我们在这个页面里,就实现了增删改查4个功能,点击链接查看demo[http://www.xiabingbao.com/demo/vue-curd/index.html]. 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: