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

环境搭建

spring boot的简介

以往我们开发时用到spring总是避免不了繁琐的配置，例如我们要配置一个数据库连接，可能需要以下几步：

1、编写jdbc.properties配置文件；

2、创建spring的配置文件，加入spring配置文件前缀、配置数据库连接信息以及sqlsessionFactory等等；

3、还要在web.xml文件中加入spring的监听。

springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置)，让我们专注于应用功能的开发，而不是把时间浪费在配置文件、亦或对其排查错误，大大提高开发效率。

springboot创建了独立的spring应用，使用内嵌的tomcat，打包之后以jar文件格式运行，并且在运行时可以指定一些参数，这个在稍后的手记中会提到。

mybatis

mybatis在这里就不多做阐述了。有想了解的朋友可以自行搜索其教程

Vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

以上内容摘自Vue官网

ElementUI

这是一款饿了么提供的一套前端UI，拥有丰富的组件。详情

接下来介绍Idea新建springboot项目，搭建开发环境

选择New Project

填写基本信息

选择需要的模块

完成创建

配置application.yml，删除初始化时候生成的properties文件，新建一个application.yml文件，在这里不推荐使用properties文件进行配置

加入如下配置：

spring:
 profiles:
 active: develop
 datasource:
 driver-class-name: com.mysql.jdbc.Driver
 url: jdbc:mysql://localhost:3306/dh
 username: root
 password: 123456

新建一个Controller类：

@RestController
public class UserController {

 @GetMapping(value = "getUsername")
 public String getUsername(String callback) {
 return "admin";
 }
}

之后我们启动springboot项目，即运行DemoApplication.java，默认端口为8080，我们打开浏览器进行访问：

推荐专题阅读：

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

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

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

赞 (0)

相关推荐

  • 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

  • SpringMVC4 + MyBatis3 + SQL Server 2014整合教程（含增删改查分页）

    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中SqlSession实现增删改查案例

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

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

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

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

    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=

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

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

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

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

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

    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实现增删改查（CRUD）实例代码

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

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

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

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

  • JS操作对象数组实现增删改查实例代码

    JS操作对象数组实现增删改查实例代码

    1.介绍 最近帮朋友弄一个简单的针对json数组的增删改成页面,正好涉及到了js去操作对象数组实现增删改查功能.我估计很多朋友应该也会遇到这类操作,所以记录一下以便分享. 2.数据准备 这里我就以学生对象数组为例了,其实这个数组和json数组操作起来基本一致的,转换一下即可.例如可以使用JSON.parse将一串JSON字符串转换为js对象数组. 测试数据: // 学生对象数组 var students = [ {id:1, name: "张三", age: 14}, {id:2, n

  • Mybatis开发环境搭建实现数据的增删改查功能

    config.xml的配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!-- 拿到数据库

  • 简述Mybatis增删改查实例代码

    简述Mybatis增删改查实例代码

    编写一个简单的mybatis进行插入数据的实例 1 数据库建表 其中建表dob=Date of Birth 的意思 create table students (stud_id number primary key, name varchar2(20), email varchar2(20), dob date ); Oracle数据库中出现表已创建,则表示创建成功,如果出现名称已被使用,则可在建表之前进行删除操作:drop table students;或者进行级联删除drop table s

  • Oracle + mybatis实现对数据的简单增删改查实例代码

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBatis 可以使用简单的XML 或注解用于配置和原始映射,将接口和 Java 的 POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 本文将详细介绍利用Oracle + mybatis实现对数据的简单增删改查的相关内容,下面话不多说了,来一起看看详细的介绍

  • 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

  • js实现提交前对列表数据的增删改查

    js实现提交前对列表数据的增删改查

    js实现列表数据的增删改查,AJAX提交后,js操作数据 最近工作中,有一处列表数据是页面初始化加载的,用户可以进行操作,因为这些数据并不存在数据库中,同时为了数据的整洁以及高效,所以要在页面进行增删改操作(其实查也可以,类似改),之前写过一个二维数组保存的,代码乱而且效率不高,后改用object 感觉还可以,主要是查询和删除的时候不需要自己遍历数组. 1. html 列表是用div+ul标签弄的,贴一些用到的片段 1.1 要展示的列表 <div class="tab">

  • Spring Boot 与 Vue.js 整合流程

    一直都想尝试做前后端分离,我之前一直是学 Java 的,所以后端选择了 Spring Boot:前端选择了 Vue.js 这个轻量.易上手的框架.网上其实已经有了不少 Spring Boot 和 Vue.js 整合的资料,Github 上就有好多 repo,但是每当我指望按图索骥的时候就会出现各种各样奇怪的 bug,上 Stack Overflow 问了也没人搭理.前前后后研究了差不多三个星期,现在总算是理清楚了. 本文重点介绍我在实践过程中的基本流程,以及我遇到的一个困扰了我好久的问题,就是如

随机推荐