【Mybatis】spring boot与vue的结合实现增删查改

新建数据库

create TABLE Depart(Dname VARCHAR(30) CHARACTER SET utf8 COMMENT '部门名称',Manger VARCHAR(20) CHARACTER SET utf8 COMMENT '负责人',`index` int COMMENT '排序',Tel char(11) COMMENT '联系电话',Email VARCHAR(30) COMMENT '邮箱',`Status` VARCHAR(10)  CHARACTER SET utf8 COMMENT '状态',Cdate  DATETIME COMMENT '创建时间',PRIMARY KEY (Dname))

IDEA搭建SpringBoot+mybatis+thymeleaf增删改查项目（一）

首先，老师发了解决跨域问题的类，目前还不知道为什么，先放在这个，以后有时间再来解决。

package com.example.mybatis01;import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@Component
public class WebGlobalConfig implements  Filter{@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {HttpServletResponse res = (HttpServletResponse) response;res.addHeader("Access-Control-Allow-Credentials", "true");res.addHeader("Access-Control-Allow-Origin", "*");res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {response.getWriter().println("ok");return;}chain.doFilter(request, response);}@Overridepublic void destroy() {}@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body><div id="app"><p v-for="item in info">{{item}}</p>
</div>
<script>var vm = new Vue({el:'#app',data(){return{//请求的返回参数格式必须和json字符串格式保持一致info:[]}},mounted(){    //钩子函数//获取数据,参数urlaxios.get('http://localhost:8082/depart/findAll').then(response=>(this.info=response.data))     //然后}})
</script>
</body>
</html>

展示

springboot+vue实现增删改查小demo

给Vue添加一个属性

import axios from "axios";
Vue.prototype.$axios = axios

Axios请求方法及别名（delete方法）

 deleteClick(row){this.$axios.delete('http://localhost:8082/depart/delete',{params:{Dname:row.dname}}).then(successResponse =>{this.getList();}).catch(err=>{console.log(row.dname);})},

#打印sql语句
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

application.properties

server.port=8082#热部署生效
spring.devtools.restart.enabled: true
#设置重启的目录
spring.devtools.restart.additional-paths: src/main/java
#classpath目录下的WEB-INF文件夹内容修改不重启
spring.devtools.restart.exclude: WEB-INF/**spring.datasource.url=jdbc:mysql://localhost:3306/edbc?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&allowMultiQueries=true&sessionVariables=sql_mode='NO_ENGINE_SUBSTITUTION'
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver# mybatis的 Mapping.xml的位置
mybatis.mapper-locations=classpath:mapping/*Mapping.xml
# 指定POJO扫描包来让mybatis自动扫描到自定义的POJO，如果配置了该配置则不需要再ResultMap中指定全类名了
mybatis.type-aliases-package=com.su.springboot79.entity#一开始我的数据库的表属性是teacher_id,address_id
#在Student类中定义的属性是teacherId,addressId结果就查询不出来
#所以通过以下方式将其改为驼峰式名下划线去掉,后面的一个字母变为大写
mybatis.configuration.map-underscore-to-camel-case=true#打印sql语句
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

个人更喜欢yml风格，注意冒号后面要有个空格。

server:port: 8888spring:#数据库连接datasource:url: jdbc:mysql://localhost:3306/edbc?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&allowMultiQueries=true&sessionVariables=sql_mode='NO_ENGINE_SUBSTITUTION'username: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver#热部署devtools:restart:#热部署生效enable: true#设置重启的目录additional-paths: src/main/javafreemarker:cache: false
mybatis:# mybatis的 Mapping.xml的位置mapper-locations: classpath:mapping/*Mapping.xml# 指定POJO扫描包来让mybatis自动扫描到自定义的POJO，如果配置了该配置则不需要再ResultMap中指定全类名了type-aliases-package: com.example.springboot.entityconfiguration:#一开始我的数据库的表属性是teacher_id,address_id#在Student类中定义的属性是teacherId,addressId结果就查询不出来#所以通过以下方式将其改为驼峰式名下划线去掉,后面的一个字母变为大写map-underscore-to-camel-case: true#打印sqllog-impl: org.apache.ibatis.logging.stdout.StdOutImpl
logging:#日志打印等级level:com:example:springboot: DEBUGfile:#设置日志文件路径及名称name: e:\日志\Student.log

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.5</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>springBoot</artifactId><version>0.0.1-SNAPSHOT</version><name>springBoot</name><description>Demo project for Spring Boot</description><properties><java.version>11</java.version></properties><dependencies>
<!--        thymeleaf--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--        web启动器--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--        mybatis--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.0</version></dependency><!--        热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency>
<!--        mysql--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--        lombok 自动生成Getter&Setter、toString()、构造函数 尽量不使用--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!--        测试--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

springboot+mybatis+mysql （用户登录实例）

【Mybatis】spring boot与vue的结合实现增删查改相关推荐

Mybatis、SpringBoot入门实战（微型项目） -- Mysql增删查改、写接口、测试接口
Mybatis入门实战(微型项目) – Mysql增删查改.写接口.测试接口开发环境: 1.Window10 v1909 2.idea 2019 3.jdk 1.8 4.mybatis 3.5.5 ...
记一次Spring boot 和Vue的前后端分离的入门培训
记一次Spring boot 和Vue的前后端分离的入门培训由于公司之前是写C#的,现在要转 Java分布式 + vue,所以进行一次前后端的简单培训. 前端工具和环境: Node.js V10.1 ...
最细致的Spring Boot结合Vue前后端分离项目打包部署步骤（搭配Nginx）
文章目录前言一.环境准备二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器三.Vue项目打包 1.1 修改后台请求地址 1. ...
spring boot整合vue项目
博主公司开发的某个项目是前后台分离的,前台是使用vue开发的,后台使用的是spring boot.那么前台发布的时候其实使用的spring boot启动了一个服务.简单说明下如何使用spring bo ...
最全的Spring Boot +Mybatis 简单的增删查改
在resources包下创建mapping包然后创建UserMapper.xml UserMapper.xml <?xml version="1.0" encoding=&q ...
Cannot load configuration class org.mybatis.spring.boot.autoconfigure.MybatisAutoConfiguration
当启动时报错,查看错误信息,如Cannot load configuration class: org.mybatis.spring.boot.autoconfigure.MybatisAutoCon ...
spring和mybatis结合做简单的增删查改系统_springbootamp;amp;vue简单的景点信息管理系统...
springboot&&vue简单的景点信息管理系统这两天闲着没有什么事,就根据陈哥的教程,试着写了一个springboot和vue的简单的景点信息管理系统.也就大致实现了最基本的增 ...
基于 Spring Boot 的 Restful 风格实现增删改查
前言在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
安卓后端mysql_后端Spring Boot+前端Android交互+MySQL增删查改（Java+Kotlin实现）
1 前言&概述这篇文章是基于这篇文章的更新,主要是更新了一些技术栈以及开发工具的版本,还有修复了一些Bug. 本文是SpringBoot+Android+MySQL的增删查改的简单实现,用到 ...

【Mybatis】spring boot与vue的结合实现增删查改

新建数据库

展示

【Mybatis】spring boot与vue的结合实现增删查改相关推荐

最新文章

热门文章