VUE+SSM框架增删改查（CRUD）

已于 2022-09-29 14:00:28 修改
阅读量3.3k 收藏
点赞数 1
分类专栏： vue idea 文章标签： mybatis java 开发语言
于 2022-09-21 20:32:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66924116/article/details/126977947
版权
本文档详细介绍了如何使用Vue.js前端框架与Spring、SpringMVC和MyBatis（SSM）后端框架进行增删改查（CRUD）操作。首先，讲解了后台的工作，包括导入相关依赖，配置Web.xml，设置数据库访问层、业务逻辑层和控制层。接着，讨论了前端部分，演示了如何使用HBuilder X创建新项目，并进行端口配置。最后，展示了如何实现前后端的数据交互，完成CRUD功能。
摘要由CSDN通过智能技术生成

目录

一、后台工作

 1.导入依赖

 2.Web.xml

3.配置文件：

 4.工具类：

5、数据库访问层、业务逻辑层、控制层

BookMapper.xml

二、前端工作 

 新建test02项目 使用工具HBuilder X

 下载命令运行

修改端口号

一、后台工作

 后台创建新项目工具---IDEA

 创建maven项目时注意：

 1.导入依赖

 <?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>20220915</artifactId>
        <groupId>org.example</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>
 
    <artifactId>untitled</artifactId>
    <packaging>war</packaging>
 
    <name>untitled Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>
 
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.plugin.version>3.7.0</maven.compiler.plugin.version>
 
        <!--添加jar包依赖-->
        <!--1.spring 5.0.2.RELEASE相关-->
        <spring.version>5.0.2.RELEASE</spring.version>
        <!--2.mybatis相关-->
        <mybatis.version>3.4.5</mybatis.version>
        <!--mysql-->
        <mysql.version>5.1.44</mysql.version>
        <!--pagehelper分页jar依赖-->
        <pagehelper.version>5.1.2</pagehelper.version>
        <!--mybatis与spring集成jar依赖-->
        <mybatis.spring.version>1.3.1</mybatis.spring.version>
        <!--3.dbcp2连接池相关 druid-->
        <commons.dbcp2.version>2.1.1</commons.dbcp2.version>
        <commons.pool2.version>2.4.3</commons.pool2.version>
        <!--4.log日志相关-->
        <log4j2.version>2.9.1</log4j2.version>
        <!--5.其他-->
        <junit.version>4.12</junit.version>
        <servlet.version>4.0.0</servlet.version>
        <lombok.version>1.18.2</lombok.version>
 
    </properties>
 
    <dependencies>
        <!--1.spring相关-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${spring.version}</version>
        </dependency>
 
        <!--2.mybatis相关-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>${mybatis.version}</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!--pagehelper分页插件jar包依赖-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>${pagehelper.version}</version>
        </dependency>
        <!--mybatis与spring集成jar包依赖-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>${mybatis.spring.version}</version>
        </dependency>
 
        <!--3.dbcp2连接池相关-->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-dbcp2</artifactId>
            <version>${commons.dbcp2.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-pool2</artifactId>
            <version>${commons.pool2.version}</version>
        </dependency>
 
        <!--4.log日志相关依赖-->
        <!--核心log4j2jar包-->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>${log4j2.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-api</artifactId>
            <version>${log4j2.version}</version>
        </dependency>
        <!--web工程需要包含log4j-web，非web工程不需要-->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-web</artifactId>
            <version>${log4j2.version}</version>
        </dependency>
 
        <!--5.其他-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>${lombok.version}</version>
            <scope>provided</scope>
        </dependency>
 
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
 
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
 
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
        </dependency>
 
 
    </dependencies>
 
    <build>
        <finalName>20220915</finalName>
 
        <resources>
            <!--解决mybatis-generator-maven-plugin运行时没有将XxxMapper.xml文件放入target文件夹的问题-->
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
            <!--解决mybatis-generator-maven-plugin运行时没有将jdbc.properites文件放入target文件夹的问题-->
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>jdbc.properties</include>
                    <include>*.xml</include>
                </includes>
            </resource>
        </resources>
 
 
 
        <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
            <plugins>
 
 
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>${maven.compiler.plugin.version}</version>
                    <configuration>
                        <source>${maven.compiler.source}</source>
                        <target>${maven.compiler.target}</target>
                        <encoding>${project.build.sourceEncoding}</encoding>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.mybatis.generator</groupId>
                    <artifactId>mybatis-generator-maven-plugin</artifactId>
                    <version>1.3.2</version>
                    <dependencies>
                        <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
                        <dependency>
                            <groupId>mysql</groupId>
                            <artifactId>mysql-connector-java</artifactId>
                            <version>${mysql.version}</version>
                        </dependency>
                    </dependencies>
                    <configuration>
                        <overwrite>true</overwrite>
                    </configuration>
                </plugin>
 
 
 
                <plugin>
                    <artifactId>maven-clean-plugin</artifactId>
                    <version>3.1.0</version>
                </plugin>
                <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <version>3.0.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.8.0</version>
                </plugin>
                <plugin>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.22.1</version>
                </plugin>
                <plugin>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.2.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-install-plugin</artifactId>
                    <version>2.5.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-deploy-plugin</artifactId>
                    <version>2.8.2</version>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project>

 2.Web.xml

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
  <display-name>Archetype Created Web Application</display-name>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationCotext.xml</param-value>
  </context-param>
  <!-- 读取Spring上下文的监听器 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>


  <!-- Spring MVC servlet -->
  <servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--此参数可以不配置，默认值为：/WEB-INF/springmvc-servlet.xml-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/springmvc-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
    <!--web.xml 3.0的新特性，是否支持异步-->
    <async-supported>true</async-supported>
  </servlet>
  <servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!-- 中文乱码处理 -->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <!--web.xml 3.0的新特性，是否支持异步-->
    <async-supported>true</async-supported>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- 解决cors跨域问题过滤器 -->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.liu.util.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

3.配置文件：

generatorConfig.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
<generatorConfiguration>
    <!-- 引入配置文件 -->
    <properties resource="jdbc.properties"/>

    <!--指定数据库jdbc驱动jar包的位置-->
    <classPathEntry location="F:\\lx_mvn_localRespository\\mysql\\mysql-connector-java\\5.1.44\\mysql-connector-java-5.1.44.jar"/>

    <!-- 一个数据库一个context -->
    <context id="infoGuardian">
        <!-- 注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/><!-- 是否取消注释 -->
            <property name="suppressDate" value="true"/> <!-- 是否生成注释代时间戳 -->
        </commentGenerator>

        <!-- jdbc连接 -->
        <jdbcConnection driverClass="${jdbc.driver}"
                        connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>

        <!-- 类型转换 -->
        <javaTypeResolver>
            <!-- 是否使用bigDecimal， false可自动转化以下类型（Long, Integer, Short, etc.） -->
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>

        <!-- 01 指定javaBean生成的位置 -->
        <!-- targetPackage：指定生成的model生成所在的包名 -->
        <!-- targetProject：指定在该项目下所在的路径  -->
        <javaModelGenerator targetPackage="com.liu.model"
                            targetProject="src/main/java">
            <!-- 是否允许子包，即targetPackage.schemaName.tableName -->
            <property name="enableSubPackages" value="false"/>
最低0.47元/天 解锁文章
白敬亭的鞋44ma
关注
专栏目录
Vue+SSM框架增删改查
m0_65774688的博客
09-29 572
Vue+SSM框架增删改查
SSM整合Vue
m0_68917672的博客
10-24 1595
SSM整个Vue
SSM框架与Vue.js融合的电脑测评系统设计
最新发布
weixin_28931449的博客
08-31 1651
本文还有配套的精品资源，点击获取 简介：该电脑测评系统采用Java企业级后端框架SSM（Spring、SpringMVC、MyBatis）和前端Vue.js技术，构建了一个高效且用户友好的电脑性能评估平台。项目集成了前后端分离、依赖注入、持久层交互、Web交互和移动端适配等多方面的技术要点，适合学生进行毕业设计项目实践。系统功能包括用户管理、电脑信息录入、性能测试及结果展示...
Vue和SSM搭配使用
二木成林
01-25 7896
使用SSM和Vue+axios发送POST请求来实现简单的前后端分离，这里实现的是登录功能。 项目目录如下： 其中只介绍前台login.html文件和后端处理UserController.java的代码。 login.html <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> ...
vue-安装 Element-ui-增删改查（第二章-增删改查Crud）
码农的专栏
03-14 861
粘代码实在累，直接上干货，开源： https://github.com/bigbigword3/Vue.Crud.git 项目结构： 前端 product.js import request from '@/utils/request' export function getProductPageList(params) { return request({ ur...
vue+ssm实现登录页面和部门管理
Liu_wen_wen的博客
09-28 2978
前后端分离项目:员工&部门管理0927_ssm_vue_KTLX
基于Vue+ssm框架的汇美食电子商城.zip
04-01
《构建基于Vue+SSM框架的“汇美食”电子商城》 在当今互联网时代，电商平台已经成为日常生活不可或缺的一部分。本文将详细介绍一个使用Vue.js前端框架与SSM（Spring、SpringMVC、MyBatis）后端框架相结合，构建的...
Vue SSM搭建一个简单的Demo前后端分离含增删改查(CRUD)、分页、批量功能
年轻的心跳
08-10 8268
Vue SSM搭建一个简单的Demo前后端分离含增删改查(CRUD)、分页、批量功能 前言 最近想复习一下SSM，所以就搭建了这个小DEMO，轻车熟路，个人认为在只用到SSM框架的前提下，这样做是最简洁的搭建方式了。写这篇博客也是复习的一部分，也想收获些意料之外的XXXX。 用到的技术和开发工具 前端 开发工具：WebStorm 开发框架：vue + axios + elementUI 包管理工具: npm 打包工具：webpack 后端 开发工具：IDEA 开发框架：springMVC + spri
基于VUE+SSM框架的在线宠物商城.zip
04-05
这是一个基于Vue.js前端框架和Spring Boot（SSM）后端框架构建的在线宠物商城项目。Vue.js是一个轻量级的JavaScript库，它以其组件化、响应式的数据绑定和易用性而闻名，常用于构建用户界面。Spring Boot是Java开发...
ssm简单增删改查小系统
06-30
这个“ssm简单增删改查小系统”是一个适合初学者练习和学习的基础项目，涵盖了SSM框架的基本使用和数据库操作。 1. **Spring框架**：Spring是Java企业级应用开发的核心框架，提供了依赖注入（DI）和面向切面编程...
SpringBoot2.0整合SSM框架，Vue.js示例项目
01-06
基于SpringBoot2.0 + SSM + Vue.js + ElementUI实现的示例项目，实现了登录、注册、用户管理（增删改查）功能。 项目未实现前后端分离。 启动前请先建立数据库ssm_demo，并执行项目resources文件夹下的ssm_demo.sql文件，导入user表，以及默认的eknows管理员（name=eknows, password=123456）
基于vue和ssm框架的管理系统一键代码生成
11-27
基于vue和ssm框架的管理系统一键代码生成，请用idea打开 可阅读源码
ssm+vue前后端分离框架整合实现(附源码)
10-15
主要介绍了ssm+vue前后端分离框架整合实现(附源码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ssm+vue项目实战
11-21
vue实战项目，前端框架使用vue+bootstrap，后端框架使用的是spring+springmvc+mybatis，数据库使用mysql，包含全套代码
SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查
01-27
SpringBoot配置SSM实现简单的增删改查Demo，SQL文件导入可直接运行，用于学习。
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
SSM整合项目（Vue3环境搭建）
Sun的个人博客
03-09 1111
cd ssm_vue。
SSM项目怎么与vue结合
热门推荐
ssdssa的博客
01-16 1万+
SSM写完后与前端vue对接 没有经验鼓捣了一天才弄好… 我用的idea+maven写的 首先idea中加上这个识别vue的插件 2.结合vue之前 要先下载好相应nodejs环境 然后配npm cnpm 然后脚手架 最后用webpack打包vue项目 这些网上教程很详细跟着做完就好了 最后打包完vue会生成一个dist文件夹 因为vue是无法被浏览器直接识别的 所以打包完后的dist里面就是把vue转成了css js和一个index.html页面，直接把这个文件夹拖进项目的webapp下目录就就可以了
vue和ssm怎么集成到一起以及RESful API的介绍
qq_46086519的博客
03-06 1719
它的核心思想是将每个资源抽象为唯一的URI（统一资源标识符），并使用HTTP协议的不同请求方法（GET、POST、PUT、DELETE等）对资源进行操作。综上所述，RESTful API是一种基于HTTP协议的API设计风格，它可以提高不同系统之间的通信效率和灵活性，同时也提供给客户端和移动端使用的Web服务。编写RESTful API：在前端和后端的API之间，需要进行RESTful API的设计和编写，包括请求方式、请求路径、请求参数和响应数据等。
ssm vue增删改查
10-14
SSM Vue 增删改查（CRUD）是指使用 SSM（Spring+SpringMVC+MyBatis）作为后端技术框架，使用 Vue.js 作为前端框架实现数据的增加、删除、修改和查询。 首先，我们需要在后端使用 Spring 框架来处理前端请求。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值