一个springboot+mybatisplus+vue实现的增删改查加多条件查询加分页

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量2.1k 收藏 8
点赞数 3
分类专栏： 笔记 文章标签： vue.js spring spring boot mybatis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54802008/article/details/122243113
版权

0.一个小Demo 就没有用到其它的技术了

格式如下

在这里插入图片描述

表文件

create table FinancingProduct
(
    id           varchar(50) not null
        primary key,
    risk         int         not null,
    income       varchar(50) not null,
    saleStarting datetime    not null,
    saleEnd      datetime    not null,
    end          datetime    not null
);

在这里插入图片描述

pom配置

  <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--mybatis-plus 是自己开发的，非官方的！-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1.tmp</version>
        </dependency>

        <!--Mysql数据库！-->

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--mybatis-plus一键生成-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>

        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>1.7</version>
        </dependency>
        <!--阿里巴巴下的连接池！-->

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.8</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <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>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.1</version>
        </dependency>
    </dependencies>

application.yml配置


#设置端口号
server:
  port: 8080
#配置数据源
spring:
  datasource:
    username: root
    password: newPassword
    #url中database为对应的数据库名称
    url: jdbc:mysql://IP地址/fina?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
    #连接池
    type: com.alibaba.druid.pool.DruidDataSource
    #释放静态资源
  mvc:
    static-path-pattern: /static/**   #释放静态资源
#mybatis配置
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl    #  数据库中如果有类似 如  user_name 等命名，会将 _后的字母大写，这里是为了和实体类对应
    #配置驼峰命名
    map-underscore-to-camel-case: true
    #映射器位置
  mapper-locations: classpath:mapping/*.xml #映射文件类
  #类型别名包
  type-aliases-package: com.hexu.demo666.entity   #实体类
  type-enums-package: com.hexu.demo666.entity.typeEnum  #枚举类

pagehelper:
  helperDialect: mysql
  reasonable: true  #开启优化，如果开启优化，在分页页码结果没有数据的时候,会显示有数据的页码数据
  supportMethodsArguments: true #是否支持接口参数来传递分页参数，默认false
  pageSizeZero: false #pageSize=0 返回所有
  params: count=countSql

#showSql
logging:
  level:
    com.hexu.springbootdemo02.mapper: debug

1.实体类

Financingproduct类

package com.hexu.demo666.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.hexu.demo666.entity.typeEnum.TypeEnum;
import lombok.Data;
import lombok.EqualsAndHashCode;

import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * <p>
 * 
 * </p>
 *
 * @author hexu
 * @since 2021-12-28
 */
@Data
  @EqualsAndHashCode(callSuper = false)
    @TableName("FinancingProduct")
public class Financingproduct implements Serializable {

    private static final long serialVersionUID = 1L;

    private String id;
	//跟枚举类对应
    private TypeEnum risk;

    private String income;

    @TableField("saleStarting")
    private LocalDateTime salestarting;

    @TableField("saleEnd")
    private LocalDateTime saleend;

    private LocalDateTime end;


}

创建vo

FinancingproductVo类

package com.hexu.demo666.entity.vo;

import lombok.Data;

/**
 * @Classname FinancingproductVo
 * @Description TODO
 * @Author 86176
 * @Date 2021-12-28 9:18
 * @Version 1.0
 **/
@Data
public class FinancingproductVo {
    //条件Id
    private String id;
    //条件类型
    private String risk;
    //页码
    private Integer pageNum = 1;
    //数量
    private Integer pageSize = 3;
}

创建枚举

typeEnum类

package com.hexu.demo666.entity.typeEnum;


import com.baomidou.mybatisplus.annotation.EnumValue;
import com.fasterxml.jackson.annotation.JsonValue;

/**
 * <p>
 * </p>
 *
 * @author yuxiaobin
 * @date 2018/8/31
 */
public enum TypeEnum {


    YI(1, "R1"),
    ER(2, "R2"),
    SAN(3, "R3");

    @EnumValue
    private Integer key;

    @JsonValue
    private String display;

    TypeEnum(Integer key, String display) {
        this.key = key;
        this.display = display;
    }

    public Integer getKey() {
        return key;
    }

    public String getDisplay() {
        return display;
    }
}

2.持久层

创建mapper

FinancingproductMapper类

package com.hexu.demo666.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.hexu.demo666.entity.Financingproduct;

/**
 * <p>
 *  Mapper 接口
 * </p>
 *
 * @author hexu
 * @since 2021-12-28
 */
public interface FinancingproductMapper extends BaseMapper<Financingproduct> {

}

3.业务层

创建service

FinancingproductService类

package com.hexu.demo666.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.hexu.demo666.entity.Financingproduct;

/**
 * <p>
 *  服务类
 * </p>
 *
 * @author hexu
 * @since 2021-12-28
 */
public interface FinancingproductService extends IService<Financingproduct> {

}


实现类

package com.hexu.demo666.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.hexu.demo666.entity.Financingproduct;
import com.hexu.demo666.mapper.FinancingproductMapper;
import com.hexu.demo666.service.FinancingproductService;
import org.springframework.stereotype.Service;

/**
 * <p>
 *  服务实现类
 * </p>
 *
 * @author hexu
 * @since 2021-12-28
 */
@Service
public class FinancingproductServiceImpl extends ServiceImpl<FinancingproductMapper, Financingproduct> implements FinancingproductService {

}

4.工具类

ResponseMessage统一返回格式类

ResponseMessage类

package com.hexu.demo666.util;

import java.util.HashMap;
import java.util.Map;

/**
 * <p>项目文档： 响应数据封装</p>
 *
 * @author <a href="https://github.com/laomu/laomu.github.io">大牧</a>
 * @version V1.0
 */
public class ResponseMessage {
    private String errorCode;
    private String errorMsg;
    private Map<String, Object> objectMap = new HashMap<>();

    public String getErrorCode() {
        return errorCode;
    }

    public void setErrorCode(String errorCode) {
        this.errorCode = errorCode;
    }

    public String getErrorMsg() {
        return errorMsg;
    }

    public void setErrorMsg(String errorMsg) {
        this.errorMsg = errorMsg;
    }

    public Map<String, Object> getObjectMap() {
        return objectMap;
    }

    public void setObjectMap(Map<String, Object> objectMap) {
        this.objectMap = objectMap;
    }

    public ResponseMessage addObject(String key, Object value) {
        this.objectMap.put(key, value);
        return this;
    }

    public static ResponseMessage success() {
        ResponseMessage rm = new ResponseMessage();
        rm.setErrorCode("100");
        rm.setErrorMsg("处理成功");
        return rm;
    }

    public static ResponseMessage error() {
        ResponseMessage rm = new ResponseMessage();
        rm.setErrorCode("200");
        rm.setErrorMsg("处理失败");
        return rm;
    }
}

5.控制层

FinancingproductController类

package com.hexu.demo666.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hexu.demo666.entity.Financingproduct;
import com.hexu.demo666.entity.vo.FinancingproductVo;
import com.hexu.demo666.service.FinancingproductService;
import com.hexu.demo666.util.ResponseMessage;
import org.springframework.stereotype.Controller;
import org.springframework.util.Assert;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import java.util.List;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author hexu
 * @since 2021-12-28
 */
@Controller
public class FinancingproductController {

    @Resource
    private FinancingproductService financingproductService;

    /**
     * 根据条件查询
     *
     * @param vo 条件类
     * @return
     */
    @PostMapping("/getAllger")
    @ResponseBody
    public ResponseMessage getAllger(@RequestBody FinancingproductVo vo) {
        //分页设置
        PageHelper.startPage(vo.getPageNum(), vo.getPageSize());
        //进行条件查询
        QueryWrapper<Financingproduct> queryWrapper = new QueryWrapper<>();
        if (vo.getId() != null && !"".equals(vo.getId())) {
            queryWrapper.like("id", vo.getId());
        }
        if (vo.getRisk() != null && !"".equals(vo.getRisk())) {
            queryWrapper.eq("risk", vo.getRisk());
        }
        List<Financingproduct> list = financingproductService.list(queryWrapper);

        PageInfo<Financingproduct> pageInfo = new PageInfo<>(list);
        //统一返回格式
        return ResponseMessage.success().addObject("list", pageInfo);
    }

    /**
     * 根据Id删除
     *
     * @param id
     * @return
     */
    @GetMapping("/deleteById/{id}")
    @ResponseBody
    public ResponseMessage deleteById(@PathVariable Integer id) {
        Assert.notNull(id, "不能为null");
        boolean b = financingproductService.removeById(id);
        return b ? ResponseMessage.success() : ResponseMessage.error();
    }

    /**
     * 增加
     * @param financingproduct
     * @return
     */
    @PostMapping("/addAll")
    @ResponseBody
    public ResponseMessage addAll(@RequestBody Financingproduct financingproduct) {
        boolean save = financingproductService.save(financingproduct);
        return save ? ResponseMessage.success() : ResponseMessage.error();
    }

    /**
     * 根据Id查询
     *
     * @param id
     * @return
     */
    @PostMapping("/getById/{id}")
    @ResponseBody
    public ResponseMessage getById(@PathVariable Integer id) {
        Assert.notNull(id, "不能为null");

        Financingproduct byId = financingproductService.getById(id);
        return ResponseMessage.success().addObject("list", byId);
    }

    /**
     * 根据Id修改
     * @param financingproduct
     * @return
     */
    @PostMapping("/updateById")
    @ResponseBody
    public ResponseMessage updateById(@RequestBody Financingproduct financingproduct) {
        boolean b = financingproductService.updateById(financingproduct);
        return b ? ResponseMessage.success() : ResponseMessage.error();
    }
    //以下是跳转
    @RequestMapping("/in")
    public String index() {
        return "index";
    }

    @RequestMapping("/update")
    public String update() {
        return "update";
    }

    @RequestMapping("/add")
    public String add() {
        return "add";
    }

}

前端

前端index页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <!--条件查询-->
    产品代码  <input type="text" v-model="vo.id">
    风险评级<select v-model="vo.risk">
    <option value="">请选择</option>
    <option value="1">R1</option>
        <option value="2">R2</option>
        <option value="3">R3</option>
    </select>
    <input type="button" @click="btm()" value="搜索">
<!--渲染页面-->
    <table border="2">
        <tr>
            <td>产品代码</td>
            <td>风险评级</td>
            <td>预期收益</td>
            <td>起始日</td>
            <td>截止日</td>
            <td>到期日</td>
            <td>操作</td>
        </tr>
        <tr v-for="fina in list1.list">
            <td>{{fina.id}}</td>
            <td>{{fina.risk}}</td>
            <td>{{fina.income}}</td>
            <td>{{finasalestarting}}</td>
            <td>{{fina.saleend}}</td>
            <td>{{fina.end}}</td>
            <td @click="del(fina.id)">删除</td>
            <td @click="upe(fina.id)">修改</td>
        </tr>
    </table>
    <a href="/add">增加</a>
    <!--分页操作-->
    <span>{{list1.pageNum}} / {{list1.pages}}</span>
    <span @click="page(list1.nextPage)">下一页</span>
    <span @click="page(list1.prePage)">上一页</span>
    <span><input type="text" size="2" v-model="aaa"><input type="button" value="Go" @click="page(aaa)"></span>
    <span @click="page(1)">第一页</span>
    <span @click="page(list1.pages)">最后一页</span>
</div>
<script type="text/javascript"  src="/static/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/static/vue.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script>
 var arr = new Vue({
     el: "#div",
     data() {
         return {
             /*获取后端传来的数据*/
             list1: [],
             //获取条件参数
             vo: {},
         }
     },
     mounted() {
         /*初始化*/
         this.list();
     },
     methods: {
         list() {
             axios.post("/getAllger", this.vo).then(res => {
                 if (res.data.errorCode === "100") {
                     this.list1 = res.data.objectMap.list
                 }
             })
         },
         /*删除*/
         del(id) {
             alert(id)
             axios.get("/deleteById/" + id).then(data => {
                 if (data.data.errorCode === "100") {
                     alert("删除成功")
                     this.list();
                 }
             })
         },
         /*分页*/
         page(id) {
             this.vo.pageNum = id;
             this.list()
         },
         //修改页面
         upe(id) {
             location.href = "/update?id=" + id;
         },
         /*条件查询*/
         btm() {
             arr.list();
         }
     }
 })
</script>
</body>
</html>

add页面

add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    产品代码<input type="text" v-model="financingproduct.id">
    风险评级<select v-model="financingproduct.risk">
    <option value="R1">R1</option>
    <option value="R2">R2</option>
    <option value="R3">R3</option>
</select>
    预期收益<input type="text" v-model="financingproduct.income">
    起始日<input type="datetime-local" v-model="financingproduct.salestarting">
    截止日<input type="datetime-local" v-model="financingproduct.saleend">
    到期日<input type="datetime-local" v-model="financingproduct.end">
    <input type="button" @click="add()" value="提交">
    <p>{{financingproduct}}</p>
</div>
<script type="text/javascript" src="/static/vue.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script>
    new Vue({
        el: "#div",
        data: {
            /*获取绑定对象*/
            financingproduct: {},
        },
        mounted() {

        },
        methods: {
            add() {
                axios.post("/addAll", this.financingproduct).then(res => {
                    if (res.data.errorCode === "100") {
                        alert("增加成功")
                        location.href = "/in"
                    }
                })
            }
        }
    })

</script>
</body>
</html>

update页面

update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <!--条件查询-->
    产品代码<input type="text" v-model="financingproduct.id">
    风险评级<select v-model="financingproduct.risk">
    <option value="R1">R1</option>
    <option value="R2">R2</option>
    <option value="R3">R3</option>
            </select>
    预期收益<input type="text" v-model="financingproduct.income">
    起始日<input type="text" v-model="financingproduct.salestarting">
    截止日<input type="text" v-model="financingproduct.saleend">
    到期日<input type="text" v-model="financingproduct.end">
    <input type="button" @click="upeById()" value="提交">
</div>
<script type="text/javascript" src="/static/vue.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script>
    new Vue({
        el: "#div",
        data: {
            //用来接收绑定的数据
            financingproduct: {},
        },
        mounted() {
            //初始化渲染
            this.getById();
        },
        methods: {
            getById() {
                // 获得id
                var arr = location.href.split("?id=")
                var id = arr[1];
                alert(id)
                axios.post("/getById/" + id).then(res => {
                    if (res.data.errorCode === "100") {
                        this.financingproduct = res.data.objectMap.list;
                    }
                })
            },
            upeById() {
                axios.post("/updateById", this.financingproduct).then(res => {
                    if (res.data.errorCode === "100") {
                        alert("修改成功")
                        location.href = "/in"
                    }
                })
            }
        }
    })

</script>
</body>
</html>

前后端分离跨域为解决

/**
 * @Classname CorsConfig
 * @Description TODO
 * @Author 86176
 * @Date 2021-12-18 9:30
 * @Version 1.0
 **/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
                .maxAge(3600);
    }
}
静电环限制了我的自由
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用springboot，mybatis-plus和vue的简单增删改查
m0_64600800的博客
09-30 970
使用springboot，mybatis-plus和vue的简单增删改查
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
使用springboot+vue+mybatis-plus+element ui做一个简单的增删改查
一起来探讨功能测试和自动化测试
02-11 2985
tips： 本人刚学编程 纯纯的小白一个，内容不算好，但是可以值得借鉴；我本来也就打算用文章复习一下刚学的知识；如果内容不好，勿喷。 题外话： 做这个增删改查的时候可费了我大把大把的时间，刚开始学难免明知有坑还是要往里面跳，但这也不是个坏事，写代码不就是一遍一遍地去尝试，写的多了，踩得坑多了，你的知识你的认知就会越来越丰富。 刚开始写这个增项改查的时候，不会写就去网上查各种例子，例子很多，五花八门，愣是一个也看不懂，看的我是脑子嗡嗡的，以至于后面有一段时间就感觉脑袋很沉，转不动了，有没有刚学编程的同
Mysql+MybatisPlus+Vue实现基础增删改查CRUD
来都来了
01-30 1364
数据库 设计数据库 设计五个字段，主键id自动增长且不可为空 create table if not exists `user` ( `id` bigint(20) primary key auto_increment comment '主键id', `username` varchar(255) not null comment '用户名', `sex` char(1) not null comment '性别', `phone`
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
10-19
主要介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue+mybatis-plus实现条件查询
forgetmetoo的博客
09-25 2680
1 需求 对于数据的增删改查，一般都是先查询一个list，然后进行查询、编辑或删除操作，list的查询一般采用分页查询。 我们经常需要动态的根据前端上送的查询条件，过滤筛选出指定的结果，如下图所示，本例需要根据服务编号、服务名称、框架版本作为条件进行查询： 2 理论 2.1 框架 本例中前端采用基于element-ui的vue框架，后端框架采用springboot+mybati...
springboot+vue+mybtais 实现增删改查页面（二），带分页操作。vue前端页面，前后端分离项目
unique_sir的博客
12-12 668
springboot+vue+mybtais 实现增删改查页面（二），带分页操作。vue前端页面，前后端分离项目
springboot_MyBatisPlus_条件查询
weixin_41812346的博客
03-26 432
而第二种方式Book::getName，若Book类中无getName 方法，则编译不过，从而避免上述运行错误。第一种方式"name"，若错写成"nmae"之类，book表没有 对应字段，运行将会出错，Book::getName 是book->book.getName() 写法的简化。lqw.like(Book::getName,"平凡");qw.like("name","平凡");Book::getName 方式。
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
springboot+vue+bootstrap实现用户增删改查
12-19
在本项目中，"springboot+vue+bootstrap"的组合被用来实现一个基本的用户管理功能，包括用户信息的增加、删除、修改和查询。这是一个常见的Web应用开发场景，涉及后端服务处理与前端界面展示的协同工作。下面将详细...
mybatis-plus QueryWrapper自定义查询条件的实现
08-24
主要介绍了mybatis-plus QueryWrapper自定义查询条件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
springboot+vue+element增删改查Demo
05-24
springboot+vue+element增删改查Demo 集成了： 1. ​ restful接口定义 2. ​ 增删改查定义，路径参数定义 3. ​ 跨域处理 4. ​ 参数校验 5. ​ 异常拦截 6. ​ swagger文档 7. ​ 测试用例 8. ​ logback...
基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL
03-24
后端使用SpringBoot+MybatisPlus+MySQL实现,主要包括CourseController、StudentController、CourseService、StudentService等,实现课程CRUD、学生CRUD等接口。 前端使用Vue+ElementUI实现,主要包括Course.vue、...
SpringBoot+Querydsl 框架，大大简化复杂查询操作
weixin_44421461的博客
05-17 366
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！每天14:00更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析...
springboot整合mybatisplus（条件查询）
weixin_64035133的博客
03-03 351
【代码】springboot整合mybatisplus（条件查询）
MyBatis+Vue实现条件查询
kerouacs的博客
06-21 386
利用MyBatis <if test>，实现简单表格的条件查询 数据库构建字段： 1.Dao层
springBoot+mybatisplus+vue前后端分离的增删改查+分页模糊查询
qq_63064991的博客
12-08 1782
毫无保留，可能有你需要的，编写不易，看看我玩的java吧
vue+springboot+mybatis多条件查询（一）
star的博客
03-07 2711
#远程搜索 在输入框输入内容时会在下拉框中显示相关内容，使用element-ui的<el-autocomplete>组件。 前端vue代码如下： <el-form-item label="物料编码"> <el-autocomplete v-model="searchSupplyNumber" :fetch-su...
vue ref和reactive区别
最新发布
灰海
08-25 568
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
springboot、mybatisplus +vue实现增删改查
05-25
好的，针对你的问题，我可以给你讲一下基于SpringBoot和MyBatisPlus开发的Vue增删改查的实现方式。 首先，在SpringBoot中，我们可以通过Spring Data JPA和MyBatisPlus这两个框架来实现数据持久化操作。Spring Data JPA是一种基于注解的继承机制，可以让我们很方便地操作数据库。而MyBatisPlus则是一种基于MyBatis的增强工具，可以在一定程度上简化MyBatis的开发流程。 在具体的实现中，我们可以通过使用MyBatisPlus提供的代码生成器，自动生成数据访问层（Dao）和实体类（Entity），可以省去很多手写代码的繁琐过程。同时，我们也可以根据需要，手动编写Mapper接口和对应的XML文件，进行自定义的操作。 对于前端框架Vue的使用，我们可以先使用VueCLI搭建一个基本的前端工程，然后可以选择使用VueRouter进行路由管理和使用Vuex进行数据状态管理。在具体的页面实现中，我们可以使用Axios等工具进行后端交互，实现增删改查等基本操作。 以上就是基于SpringBoot和MyBatisPlus的Vue增删改查实现方式。希望能够对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值