前后端分离增删改查 vue+springboot+elementui

最新推荐文章于 2023-05-18 17:11:36 发布
最新推荐文章于 2023-05-18 17:11:36 发布
阅读量572 收藏 4
点赞数 1
文章标签： spring boot vue elementui mybatis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45684919/article/details/116305819
版权

前端页面

在这里插入图片描述
在这里插入图片描述

数据库

DROP TABLE IF EXISTS product;
CREATE TABLE product (
CRM_CODE int(8) NOT NULL,
CRM_TYPE varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
CCY_CODE varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
CRM_VALUE_ORI decimal(20, 0) NOT NULL,
CRM_CP_TYPE varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
CRM_CPC varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
CRM_ST_RATING varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
CRM_LT_RATING varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
PRIMARY KEY (CRM_CODE) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

– Records of product

INSERT INTO product VALUES (1390000, ‘银行承兑汇票(非特别授信)(ZY0301006)’, ‘人民币(CNY)’, 1000, ‘商业银行(BANM)’, ‘中华人民共和国(CHN)’, NULL, NULL);
INSERT INTO product VALUES (1390001, ‘质押-现金’, ‘人民币(CNY)’, 5000, ‘一般公司(CROP)’, ‘中华人民共和国(CHN)’, NULL, NULL);

后端代码

层级结构

在这里插入图片描述

具体后端代码

bean

public class Product implements Serializable {
    private Integer CRM_CODE;
    private String CRM_TYPE;
    private String CCY_CODE;
    private BigDecimal CRM_VALUE_ORI;
    private String CRM_CP_TYPE;
    private String CRM_CPC;
    private String CRM_ST_RATING;
    private String CRM_CP_RATING;
    private String CRM_LT_RATING;
    private String START_DT;
    private String MAT_DT;

    public Integer getcrm_CODE() {
        return CRM_CODE;
    }

    public void setCRM_CODE(Integer CRM_CODE) {
        this.CRM_CODE = CRM_CODE;
    }

    public String getcrm_TYPE() {
        return CRM_TYPE;
    }

    public void setCRM_TYPE(String CRM_TYPE) {
        this.CRM_TYPE = CRM_TYPE;
    }

    public String getccy_CODE() {
        return CCY_CODE;
    }

    public void setCCY_CODE(String CCY_CODE) {
        this.CCY_CODE = CCY_CODE;
    }

    public BigDecimal getcrm_VALUE_ORI() {
        return CRM_VALUE_ORI;
    }

    public void setCRM_VALUE_ORI(BigDecimal CRM_VALUE_ORI) {
        this.CRM_VALUE_ORI = CRM_VALUE_ORI;
    }

    public String getcrm_CP_TYPE() {
        return CRM_CP_TYPE;
    }

    public void setCRM_CP_TYPE(String CRM_CP_TYPE) {
        this.CRM_CP_TYPE = CRM_CP_TYPE;
    }

    public String getcrm_CPC() {
        return CRM_CPC;
    }

    public void setCRM_CPC(String CRM_CPC) {
        this.CRM_CPC = CRM_CPC;
    }

    public String getcrm_ST_RATING() {
        return CRM_ST_RATING;
    }

    public void setCRM_ST_RATING(String CRM_ST_RATING) {
        this.CRM_ST_RATING = CRM_ST_RATING;
    }

    public String getcrm_CP_RATING() {
        return CRM_CP_RATING;
    }

    public void setCRM_CP_RATING(String CRM_CP_RATING) {
        this.CRM_CP_RATING = CRM_CP_RATING;
    }

    public String getcrm_LT_RATING() {
        return CRM_LT_RATING;
    }

    public void setCRM_LT_RATING(String CRM_LT_RATING) {
        this.CRM_LT_RATING = CRM_LT_RATING;
    }

    public String getstart_DT() {
        return START_DT;
    }

    public void setSTART_DT(String START_DT) {
        this.START_DT = START_DT;
    }

    public String getmat_DT() {
        return MAT_DT;
    }

    public void setMAT_DT(String MAT_DT) {
        this.MAT_DT = MAT_DT;
    }

    @Override
    public String toString() {
        return "Product{" +
                "CRM_CODE=" + CRM_CODE +
                ", CRM_TYPE='" + CRM_TYPE + '\'' +
                ", CCY_CODE='" + CCY_CODE + '\'' +
                ", CRM_VALUE_ORI=" + CRM_VALUE_ORI +
                ", CRM_CP_TYPE='" + CRM_CP_TYPE + '\'' +
                ", CRM_CPC='" + CRM_CPC + '\'' +
                ", CRM_ST_RATING='" + CRM_ST_RATING + '\'' +
                ", CRM_CT_RATING='" + CRM_CP_RATING + '\'' +
                ", CRM_LT_RATING='" + CRM_LT_RATING + '\'' +
                ", START_DT='" + START_DT + '\'' +
                ", MAT_DT='" + MAT_DT + '\'' +
                '}';
    }
}

public class RespBean {
    private Integer status;
    private String msg;
    private Object obj;

    public RespBean(Integer status, String msg) {
        this.status = status;
        this.msg = msg;
    }

    public static final RespBean DELETE_SUCCESS = new RespBean(200,"删除成功");
    public static final RespBean DELETE_ERROR = new RespBean(-1,"删除失败");

    public static final RespBean ADD_SUCCESS = new RespBean(200,"添加成功");
    public static final RespBean ADD_ERROR = new RespBean(-1,"添加失败");

    public static final RespBean UPDATE_SUCCESS = new RespBean(200,"更新成功");
    public static final RespBean UPDATE_ERROR = new RespBean(-1,"更新失败");

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getObj() {
        return obj;
    }

    public void setObj(Object obj) {
        this.obj = obj;
    }

    private RespBean(Integer status, String msg, Object obj) {
        this.status = status;
        this.msg = msg;
        this.obj = obj;
    }

    private RespBean() {
    }

}

controller

@RestController
public class BankController {

    @Autowired
    BankService bankService;

    @GetMapping("/getAll")
    @CrossOrigin(origins = "*",maxAge = 3600)
    public List<Product> findAll(){
        return bankService.getAll();
    }

    @PostMapping("/addProduct")
    @CrossOrigin(origins = "*",maxAge = 3600)
    public RespBean addProduct(@RequestBody String product){

        System.out.println(product);
        String objectStr = product;
        String sd = objectStr.substring(15,25);
        String ed = objectStr.substring(53,63);
        Product p = JSONObject.parseObject(objectStr,Product.class);
        p.setSTART_DT(sd);
        p.setMAT_DT(ed);
//        System.out.println(p);
        if(bankService.addProduct(p)==true){
            return RespBean.ADD_SUCCESS;//添加成功
        }
        return RespBean.ADD_ERROR;//添加失败
    }

    @DeleteMapping("product/{crm_CODE}")
    @CrossOrigin(origins = "*",maxAge = 3600)
    public RespBean deleteProduct(@PathVariable  Integer crm_CODE){

        if(bankService.deleteProductById(crm_CODE)==true){
            return RespBean.DELETE_SUCCESS;//删除成功
        }
        return RespBean.DELETE_ERROR;//删除失败
    }

    @PutMapping("product")
    @CrossOrigin(origins = "*",maxAge = 3600)
    public RespBean updateProductById(@RequestBody String product){
        System.out.println(product);
        String objectStr = product;
        String sd = objectStr.substring(15,25);
        String ed = objectStr.substring(53,63);
        Product p = JSONObject.parseObject(objectStr,Product.class);
        p.setSTART_DT(sd);
        p.setMAT_DT(ed);
        System.out.println(p);
//        System.out.println(crm_CODE);
        if(bankService.updateProductById(p)==true){
            return RespBean.UPDATE_SUCCESS;//添加成功
        }
        return RespBean.UPDATE_ERROR;//添加失败
    }
}

mapper

@Mapper
public interface BankMapper {

    //查询
    List<Product> getAll();
    //增加
    Boolean addProduct(Product product);
    //删除
    Boolean deleteProductById(Integer id);
    //修改
    Boolean updateProductById(Product product);
}

service

public interface BankService {

    List<Product> getAll();

    Boolean addProduct(Product product);

    Boolean deleteProductById(Integer id);

    Boolean updateProductById(Product product);
}

@Service
public class BankServiceImpl implements BankService {

    @Autowired
    private BankMapper bankMapper;

    @Override
    public List<Product> getAll() {
        return bankMapper.getAll();
    }

    @Override
    public Boolean addProduct(Product product) {
        return bankMapper.addProduct(product);
    }

    @Override
    public Boolean deleteProductById(Integer id) {
        return bankMapper.deleteProductById(id);
    }

    @Override
    public Boolean updateProductById(Product product) {
        return bankMapper.updateProductById(product);
    }
}

mybatis

<?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>
    <settings>
        <setting name="useGeneratedKeys" value="true" />
    </settings>

    <!-- 为JavaBean起类别名 -->
    <typeAliases>
        <package name="com.muke.bean" />
    </typeAliases>
</configuration>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.muke.mapper.BankMapper">
    <select id="getAll" resultType="com.muke.bean.Product">
        select * from product
    </select>
        <insert id="addProduct" parameterType="com.muke.bean.Product" useGeneratedKeys="true" keyProperty="CRM_CODE" >
        INSERT INTO product(CRM_TYPE,CCY_CODE,CRM_VALUE_ORI,CRM_CP_TYPE,CRM_CPC,CRM_ST_RATING,CRM_LT_RATING,START_DT,MAT_DT)
                    VALUES (#{CRM_TYPE}, #{CCY_CODE}, #{CRM_VALUE_ORI}, #{CRM_CP_TYPE}, #{CRM_CPC},#{CRM_ST_RATING},#{CRM_LT_RATING},#{START_DT},#{MAT_DT});
    </insert>

    <delete id="deleteProductById" parameterType="Integer">
        delete from product where CRM_CODE=#{crm_CODE}
    </delete>

    <update id="updateProductById" parameterType="com.muke.bean.Product">
        update product set CRM_CODE=#{crm_CODE},CRM_TYPE=#{crm_TYPE},CCY_CODE=#{ccy_CODE},CRM_VALUE_ORI=#{crm_VALUE_ORI},CRM_CP_TYPE=#{crm_CP_TYPE},
    CRM_CPC=#{crm_CPC},CRM_CP_RATING=#{crm_CP_RATING},CRM_ST_RATING=#{crm_ST_RATING},start_DT=#{start_DT},mat_DT=#{mat_DT}
    where CRM_CODE=#{crm_CODE}
    </update>
</mapper>

application.yml

server:
  port: 8888

spring:
  resources:
    static-locations: classpath:/
  datasource:
    url: jdbc:mysql://localhost:3306/bank?serverTimezone=UTC&useSSL=false&characterEncoding=UTF-8
    username: root
    password: 267367tt
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

mybatis:
  config-location: classpath:mybatis/mybatis_config.xml
  mapper-locations: classpath:mybatis/mapper/*Mapper.xml

具体前端代码

请前往本人的git仓库自行获取
https://github.com/MUKE-start/vue.git

weixin_45684919
关注
学习 | 基于spring boot+vue的前后端分离的增删改查项目
Jhuo的博客
06-08 3084
介绍 在前面两篇博客中已经分享了基于servlet和基于ssm的增删改查(传送门：SSM，Servlet)，有兴趣的同学也可以先去看看。当然不能少了当先最流行的基于spring boot的增删改查啦，本篇需要一定的spring boot基础+vue环境。 springboot做了两个版本： 第一个版本springboot_thymeleaf,(thymeleaf是类似jsp的java模板引擎，再springboot中推荐优先使用这个) 第二个版本前后端分离的spring boot+vue，这个是我在做完第一
Vue+ElementUI+SpringBoot实现的前后端分离框架
西里古里的博客
11-08 1210
一款 Java 语言基于 SpringBoot2.x、MybatisPlus、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，实现了个性化的需求。
node+vue前后端分离增删改查
08-17
node+vue前后端分离增删改查：node+express+mysql作为后台，vue+bootstrap+jQuery作为前端，简单的增删改查
idea与vue+ElementUI搭建前后端分离的CRUD
weixin_67677668的博客
09-17 3796
idea与vue+ElementUI搭建前后端分离的CRUD
基于前后端分离的增删改查
心有—林夕的博客
08-20 798
实现前后端分离的增删改查
EasyUI(三)
lei_lin的博客
07-01 244
用easyui来实现增删改查方法 我们要用前端easyui来实现美化，用datagrid布局，dialog布局还有from布局来把原来的html转成jsp 前后端分离 前后端分离的好处 1、美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际，在开发前约定数据交互的格式，项目可以同步进行，缩短了项目周期 2、解耦了前端与后端的工作内容 java工程师的工作：写方法返回数据如tre...
Java毕业设计-基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
最新发布
07-08
本项目是一套基于SpringBoot+Vue前后端分离的人力资源管理系统，主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战的Java学习者。也可作为课程设计、期末大作业。包含：项目源码、数据库脚本等，该项目...
springboot+vue +ElementUI前后端分离框架搭建教程
西里古里的博客
08-22 2262
一款 Java 语言基于 SpringBoot2.x、MybatisPlus、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，实现了个性化的需求。
SpringBoot + Vue + ElementUI 从零搭建前后端分离项目
西里古里的博客
01-21 677
一款 Java 语言基于 SpringBoot2.x、MybatisPlus、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，实现了个性化的需求。
vue + element ui + SpringBoot 前后端分离案例 初学者使用
09-10
通过Spring Data JPA和Hibernate等工具，可以轻松地进行数据操作，实现增删改查等功能。同时，Spring Security可以用来处理权限控制，确保系统的安全性。 在前后端通信方面，本项目采用RESTful API设计原则，通过...
SpringBoot+VUE前后端分离demo
04-20
SpringBoot+VUE前后端分离demo,后端 Spring Boot 技术和前端 Vue 技术来简单开发一个增删改查demo，该demo以简单、方便理解的方式来记录前后端结合使用的过程，方便正式开发复杂项目时能提前整体理解流程
Spring&boot;mybatis;增删改查前后端分离分页demo
11-07
Spring&boot;&mybatis;增删改查&前后端分离&分页&demo;
Springboot_Vue前后端分离
06-08
基于springboot+vue的前后端分离的增删改查，使用了idea+maven+mysql，代码清楚简单，先启动vue项目，再启动springboot就会自动连接前后端。
springboot+vue+bootstrap实现用户增删改查
12-19
springboot+vue+bootstrap实现用户增删改查，个人手敲源码
SpringBoot+Vue+Element-ui前后端分离(增删改查)(八)
热门推荐
qq_40772342的博客
03-06 1万+
本文主要是想通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个增删改查demo，该demo以简单、方便理解的方式来记录前后端结合使用的过程，方便正式开发复杂项目时能提前整体理解流程，demo最终实现的效果如下图: 一，后台 properties配置 server.port=8080 spring.datasource.type=com.alibaba.druid.pool...
前后端分离项目简单实现增删改查
m0_66692837的博客
05-18 530
大家好，我是梦想皮皮，今天带来一篇关于的粗浅的介绍，同时也用到了vue+element也集成了mybatis希望能帮助到大家。
前后端分离 --增删改查，角色权限
wmd13164306712的博客
08-20 969
前后端分离增删改查以及修改权限的操作
un7.5:前后端分离快速实现增删改查。
努力是为了让自己不平庸。。。
07-05 1763
因为前后端分离的便利性，大多数公司都会选择使用前后端分离的方式进行项目的操作，今天，我就来给大家科普一下如何在前后端分离的情况下实现增删改查。
前后端分离的增删改查步骤
qq_66924116的博客
09-16 692
1.1.1导入所有pom依赖，主要包含spring、mybatis、1.5通过http:localhost:8080/book/list。1.2利用逆向生成工具，生成mapper层，mapper.xml。2.1创建SPA项目，改变前端项目端口，启用能够访问。1.1.2 完成框架的整合，对应的配置文件编写。2.2通过引入axios完成后台查询接口的调用。filter:整合中文乱码。2.3依次内推完成增删改查。1.1搭建后端SSM环境。1.1.3与容器进行整合。1.3完成业务层的开发。1.完成后端接口开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值