springBoot+react实现增改查

最新推荐文章于 2023-12-18 22:26:15 发布
最新推荐文章于 2023-12-18 22:26:15 发布
阅读量880 收藏 4
点赞数
文章标签： java javascript 后端 ViewUI
原文链接：https://my.oschina.net/u/3775800/blog/1823682
版权

1、页面查询功能带分页

后端代码：

  /**
     　* @Author Mc
     　* @Description: 根据条件查询角色列表信息
     　* @Date 2018/4/19 10:49
     　*/
    @Override
    public Response<Paging<BvsRole>> findListPage(BvsRole bvsRole){
        try {
            // 调用PageHelper封装方法设置其实分页（拦截器）
            PageHelper.startPage(bvsRole.getPageNo(),bvsRole.getPageSize());
            // 查询角色数据
            List<BvsRole> bvsRoles = bvsRoleDao.findList(bvsRole);
            // 因重名，故全名引入
            com.github.pagehelper.PageInfo pageInfo = com.github.pagehelper.PageInfo.of(bvsRoles);
            // 转化为自己的paging对象，此方法可重写
            Paging<BvsRole> paging = new Paging(pageInfo.getTotal(), bvsRoles);
            // 检查状态
            checkState(!Arguments.isNullOrEmpty(bvsRoles),"find.bvsRole.by.bvsRole.is.null");
            return Response.ok(paging);
        } catch (NullPointerException | IllegalStateException e) {
            log.error("find by key fail bvsRole: {}, cause: {}", bvsRole, getStackTraceAsString(e));
            return Response.fail(e.getMessage());
        } catch (Exception e) {
            log.error("find by key fail bvsRole: {}, cause: {}", bvsRole, getStackTraceAsString(e));
            return Response.fail("find.bvsRole.by.bvsRole.fail");
        }
    }

前端代码：

// JS页面
// post 请求发送对象
export function post(api, params = null) {
  return request
    .post(api)
    .send(params)
    .then(response => checkData(response), error => errorCatch(error));
}
// 查询用户角色
export function getRoles(params) {
  return (dispatch) => {
    dispatch(receiveInit());
    return post('/api/bvsRole/bvsRoleListPage', params==undefined?{}:params).then((data) => {
      dispatch(receiveBvsRoles(data));
    }, () => {
      dispatch(receiveErrors());
    });
  };
}
//jsx页面
// 分页
const PAGE = {
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  showQuickJumper: true,
};
// 分页事件
  handleTableChange(pagination) {
    const { current, pageSize } = pagination;
    const { form, query } = this.props;
    const fieldsValues = form.getFieldsValue();
    query({
      pageNo: current,
      pageSize,
      ...fieldsValues,
    });
    this.setState({
      pagination: {
        current,
        pageSize,
      },
    });
  }

<Table
  columns={columns}
  dataSource={bvsRoles.data}
  loading={bvsRoles.fetching}
  pagination={pagination}
  onChange={
    (paginations) => {
      this.handleTableChange(paginations);
    }
  }
/>

2、钻取方法获取树列表功能

后端代码：

package net.haier.bvs.pub.util;

import io.terminus.common.model.Response;
import io.terminus.common.utils.Arguments;
import lombok.extern.slf4j.Slf4j;
import net.haier.bvs.pub.model.TreeNode;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.Collection;
import java.util.LinkedList;
import java.util.List;
import static com.google.common.base.Preconditions.checkState;
import static com.google.common.base.Throwables.getStackTraceAsString;

@Slf4j
public class TreeUtil {

    private static final String TREEID = "getTreeId";
    private static final String TREENAME = "getTreeName";
    private static final String PARENTID = "getParentId";
    /**
    　* @Author Mc
    　* @Description: 通过树列表
    　* @Date 2018/5/14 15:29
      * @param roots 根级数据
      * @param allData 所有数据
    　*/
    public static <T> Response<List<TreeNode>> getTree(List<T> roots , List<T> allData){

        List<TreeNode> nodes = new ArrayList<TreeNode>();
        try {
            // 选中树节点时不返回任何数据
            // if(!"0".equals(this.id)) return null;

            // 构建树结构
            LinkedList<T> list = listToLinkedList(allData);
            // 循环寻找子节点
            roots.forEach(t -> {
                TreeNode treeNode = buildNode(t);
                buildTree(list, treeNode);
                nodes.add(treeNode);
            });
            // 校验返回值
            checkState(!Arguments.isNullOrEmpty(nodes),"find.nodes.by.nodes.is.null");
            return Response.ok(nodes);
        } catch (NullPointerException | IllegalStateException e) {
            log.error("find by key fail nodes: {}, cause: {}", nodes, getStackTraceAsString(e));
            return Response.fail(e.getMessage());
        } catch (Exception e) {
            log.error("find by key fail nodes: {}, cause: {}", nodes, getStackTraceAsString(e));
            return Response.fail("find.nodes.by.nodes.fail");
        }
    }

    /**
     　* @Author Mc
     　* @Description: listToLinkedList
     　* @Date 2018/5/5 16:08
     　*/
    private static <T> LinkedList<T> listToLinkedList(List<T> allData){
        if(allData instanceof LinkedList)
            return (LinkedList<T>)allData;
        LinkedList<T> result = new LinkedList<T>();
        allData.forEach( r -> result.add(r));
        return result;
    }

    /**
     　* @Author Mc
     　* @Description: 创建TreeNode对象
     　* @Date 2018/5/5 17:54
     　*/
    private static <T> TreeNode buildNode(T t) {
        // 树对象的创建
        TreeNode treeNode = new TreeNode();
        try {
            // 获取泛型T的Class对象，反向的调用get方法，获取数据
            Class listClass = t.getClass();
            // 获取get()方法
            Method treeId = listClass.getMethod(TREEID);
            Method treeName = listClass.getMethod(TREENAME);
            // 调用get()方法
            treeNode.setKey(treeId.invoke(t) != null ? treeId.invoke(t).toString() : null);
            treeNode.setTitle(treeName.invoke(t) != null ? treeName.invoke(t).toString() : null);
        } catch (IllegalAccessException | InvocationTargetException | NoSuchMethodException e) {
            e.printStackTrace();
            log.error("find by key fail treeNode: {}, cause: {}", treeNode, getStackTraceAsString(e));
        }
        return treeNode;
    }

    /**
     　* @Author Mc
     　* @Description: 构建资源树
     　* @Date 2018/5/4 17:57
     　*/
    private static <T> void buildTree(LinkedList<T> allDate,TreeNode parentNode){
        if(allDate.isEmpty() || parentNode == null) return;
        Collection<TreeNode> children = parentNode.getChildren();
        if(children == null) parentNode.setChildren(new ArrayList<TreeNode>());
        Long parentNodeId = Long.valueOf(parentNode.getKey());
        try {
            // 获取泛型T的Class对象，反向的调用get方法，获取数据
            Class listClass = allDate.getFirst().getClass();
            // 获取get()方法
            Method treeId = listClass.getMethod(TREEID);
            Method parentId = listClass.getMethod(PARENTID);
            // 调用get()方法
            allDate.forEach((T r) ->{
                // 设置该资源的直接子元素-剔除自身
                try {
                    if(parentNodeId.equals(parentId.invoke(r) != null ? Long.valueOf(parentId.invoke(r).toString()) : null)
                            && !parentNodeId.equals(treeId.invoke(r)!= null ? Long.valueOf(treeId.invoke(r).toString()) : null)){
                        TreeNode treeNode = buildNode(r);
                        parentNode.getChildren().add(treeNode);
                    }
                    // 从列表中删除父节点
                    if(parentNodeId.equals(treeId.invoke(r) != null ? Long.valueOf(treeId.invoke(r).toString()) : null)){
                        r = (T) new LinkedList<T>();
                        return;
                    }
                } catch (IllegalAccessException | InvocationTargetException e) {
                    e.printStackTrace();
                }
            });
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        }
        // 对子节点遍历
        parentNode.getChildren().forEach(c->buildTree(allDate,c));
    }    
}

前端代码：

js：

// 查询资源
export function findResource() {
  return (dispatch) => {
    dispatch(receiveInit());
    post('/api/resourceInfo/resourceTree',{}).then((data) => {
      dispatch(receiveResourceTree(data));
    }, () => {
      dispatch(receiveErrors());
    });
  };
}
// 赋值资源树数据
export function receiveResourceTree(treeDate) {
  return {
    type: RECEIVE_ADDROLE,
    payload: {
      fetching: false,
      treeDate,
    },
  };
}

jsx：

import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
// 展开树事件
  onExpand = (expandedKeys) => {
    console.log('onExpand', arguments);
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }
  // 勾选树事件
  onCheck = (checkedKeys) => {
    console.log('onCheck', checkedKeys);
    this.setState({ checkedKeys });
  }
  // 选择树事件
  onSelect = (selectedKeys, info) => {
    console.log('onSelect', info);
    this.setState({ selectedKeys });
  }
  // 数据加载事件
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  }

<Row>
  {addRole.treeDate.length ? 
    <Tree
      checkable
      onExpand={this.onExpand}
      expandedKeys={this.state.expandedKeys}
      autoExpandParent={this.state.autoExpandParent}
      onCheck={this.onCheck}
      checkedKeys={this.state.checkedKeys}
      onSelect={this.onSelect}
      selectedKeys={this.state.selectedKeys}
      >
      {this.renderTreeNodes(addRole.treeDate)}
    </Tree>
  : 'loading tree'}
</Row>

3、新增&编辑功能

后端代码：

   /**
     　* @Author Mc
     　* @Description: 新增角色功能
     　* @Date 2018/4/19 16:06
     　*/
    @Override
    public Response<Boolean> saveBvsRole(BvsRole bvsRole) {
        try {
            boolean success = false;
            // 根据isNewRcord和id判断新增还是修改
            if(bvsRole.getId() == null || bvsRole.getIsNewRecord()){
                // 新增操作
                bvsRole.setId(bvsRoleDao.getRoleId());
                bvsRole.setGmtCreate(new Date());
                bvsRole.setGmtModified(new Date());
                checkNotNull(bvsRole, "bvsRole.is.empty");
                success = bvsRoleDao.create(bvsRole);
                // 新增RoleResource表数据
                bvsRoleDao.createRoleResource(bvsRole);
            }else{
                // 编辑操作
                bvsRole.setGmtModified(new Date());
                success = bvsRoleDao.update(bvsRole);
                // 编辑下先全部删除RoleResource表数据
                bvsRoleDao.deleteRoleResource(bvsRole.getId());
                // 然后新增RoleResource表数据
                bvsRoleDao.createRoleResource(bvsRole);
            }
            checkState(success, "create.bvsRole.fail");
            return Response.ok(Boolean.TRUE);
        } catch (NullPointerException e) {
            log.error("failed to create bvsRole({}) , caused: {}", bvsRole, getStackTraceAsString(e));
            return Response.fail(e.getMessage());
        } catch (Exception e) {
            log.error("failed to create bvsRole({}) , caused: {}", bvsRole, getStackTraceAsString(e));
            return Response.fail("create.role.fail");
        }

前端代码：

// 新增角色 js页面
export function createRole(param) {
  return (dispatch) => {
    dispatch(receiveInit());
    return post('/api/bvsRole/saveBvsRole', param).then((data) => {
      dispatch(receiveAddroles({data}));
      return Promise.resolve(data);
    }, () => {
      dispatch(receiveErrors());
      return Promise.reject(null);
    });
  };
}
// jsx页面

  // 新增页面跳转
  handleAdd(e) {
    e.preventDefault();
    browserHistory.push('/addRole');
  }
  // 编辑事件
  editRole(e, id) {
    e.preventDefault();    
    browserHistory.push(`/addRole?id=${id}&isNewRecord=false`);
  }

componentWillMount (){
    const { location,resource,findById } = this.props;  
    // 如果编辑的话查询数据
    if(location.query.isNewRecord === "false"){
      // 赋值路由传值
      this.setState({
        isNewRecord: location.query.isNewRecord,
        id: location.query.id,
      });
      // 执行完findById后能获取到数据
      findById(location.query).then(
        () => { 
          const {addRole, form } = this.props;
          form.setFieldsValue(addRole.bvsRole);
          this.setState({
            checkedKeys: addRole.checkTree,
            expandedKeys: addRole.checkTree,
          });}
      );
      }
    // 调用树资源方法
    resource();
  }

// 提交方法
  handleSubmit(e) {
    e.preventDefault();
    const { form, createRole } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }else{
        const fieldsValues = form.getFieldsValue();
        const values = {
          ...fieldsValues,
          createBy:'mc',
          lastModifiedBy:'mc',
          pageNo: PAGE.current,
          pageSize: PAGE.pageSize,
          pagingFlag : 0,
          checkedKeys: this.state.checkedKeys,
          isNewRecord: this.state.isNewRecord,
          id: this.state.id,
        };
        this.props.createRole(values).then((msg) => {
          if (msg && msg.success == true) {
            notification.success({
              message: '操作成功',
              description: `${values.isNewRecord == true ? '新增' : '编辑'}角色成功!`,
            });
            browserHistory.goBack();
          }else{
            notification.error({
              message: '操作失败',
              description: `${values.isNewRecord == true ? '新增' : '编辑'}角色失败!`,
            });
          }
        });
      }     
    });
    this.setState({
      pagination: {
        ...PAGE,
      },
    });
  }

欢迎指正错误！

转载于:https://my.oschina.net/u/3775800/blog/1823682

chihuiba6790
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【React工作记录九十七】前后端springboot+vue+实现部门的增删改功能记录
geyaoisnice的博客
04-05 93
我是歌谣 微信公众号关注前端小歌谣带你进入前端巅峰交流群。
spring-boot react redux增删改查
编码小栈
11-01 1028
环境准备 以spring-boot react一步一步实现增删改查 组件化为基础代码,在gis分支的基础上，创建一个redux分支，来集成redux组件，实现增删改查 检出代码 git clone https://gitee.com/qinaichen/react-crud.git cd react-crud 切换分支 git checkout gis 创建redux分支 git...
spring-boot react一步一步实现增删改查 组件化
编码小栈
10-31 1123
在 spring-boot react一步一步实现增删改查 中，用一个组件实现了表格和表单功能，所以现在需要将其拆分成组件独立出来 拆分表格 创建Table.js import React, {Component} from 'react' class Table extends Component { render() { return ( ...
SpringBoot实现增删改查（curd）功能（非常详细）
m0_64245578的博客
12-18 2603
数据库表结构（user表）
【开发篇】10分钟快速上手spring boot+react登录前后端分离
Mind_programmonkey的博客
08-16 4748
【开发篇】10分钟快速上手spring boot+react登录前后端分离 之前的预备知识： 10分钟快速上手git与github 10分钟快速上手springboot 10分钟快速springboot+react前后端分离 10分钟快速上手springboot+mybatis增删改查 本次将带来前后端分离的spring boot+react的登录demo。 接下来，让我们在学习的海洋中畅游吧！！！ 一、前后端分离 1.1 前后端分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控
spring boot+react 前后端分离实现增删改查
11-29
本文将深入探讨如何使用React作为前端框架，Spring Boot作为后端微服务框架，结合MySQL数据库来实现一个完整的增删改查功能。 **React** 是Facebook开发的一个JavaScript库，用于构建用户界面，尤其适合构建单页面...
springboot+maven增删查demo
10-12
为了实现增删查功能，项目可能会包含一系列的RESTful API，这些API遵循HTTP协议，通过GET、POST、PUT、DELETE等方法操作资源。例如，GET用于查询，POST用于创建新记录，PUT用于更新记录，DELETE用于删除记录。 6. ...
SpringBoot+React+Mysql+Mybatis+Restful风格接口，前后端分离实现健康管理系统.zip
最新发布
03-09
在本项目中，后端通过提供Restful接口，如GET、POST、PUT、DELETE等，与前端进行通信，完成数据的增删改查操作。这种方式使得接口清晰易懂，利于前后端解耦。 代码结构方面，`lesson.sql`应该是数据库初始化脚本，...
spring-boot react如何一步一步实现增删改查
08-26
Spring Boot React 实现增删改查详解 本文主要介绍了如何使用 Spring Boot 和 React 实现增删改查的功能。本文将从 Maven 依赖、数据库配置、Spring Boot 配置、React 实现等方面详细讲解实现增删改查的步骤。 ...
spring-boot 整合 前端框架 React 增删改查(附源码)
程序员小刘
02-20 907
看了很多 关于 SpringBoot 增删改查 的文章 ，但是 React 前端框架这块似乎没什么人玩，一般都是Vue进行整合 ，所以想写一篇关于 React 整合 SpringBoot 增删改查的项目。
【React学习】React中如何发送请求？
zx1041561837的博客
07-26 2370
在React中，我们选择axios发送请求。
【React】单纯使用React实现增删改查
qq_46105844的博客
08-04 4490
这篇文章适合初学者，简单利用 table 实现了增删改查功能。 这次的代码直接导入即可使用，简单上手，加油~~~~~~今天的内容就到这里啦，之后学到的会继续分享。
react初体验之表格增删改查，新增与编辑为公共的弹窗组件（父子组件传值，修改数据）
CuiCui_web的博客
07-03 5027
本实文主要是用react+elementUI实现一个后台管理系统中最常见的功能，表格（增删改查、分页）； 新增和修改弹窗是一个公共的子组件。接口是用node（express）实现，可以看下一篇文章（node+mysql分栏中）。 1、 父组件中 先引入要使用的组件及方法 import React, { Component } from "react"; import axios from 'axios'; // 引入axios import { Table,Button, MessageBox, Messa
如何将堆栈跟踪转换为字符串？
p15097962069的博客
12-08 1198
将Throwable.getStackTrace()的结果转换为描述堆栈跟踪的字符串的最简单方法是什么？
springboot 实现增删改查CRUD
hupei
03-24 2661
springboot 实现增删改查CRUD 环境：jdk1.8 / mysql5.7 / springboot实现书籍增删改查的demo 第一步、准备数据库创建表 DROP TABLE IF EXISTS `book`; CREATE TABLE `book` ( `id` int(20) NOT NULL AUTO_INCREMENT COMMENT 'id', `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT
将异常(getStackTrace)转化成String
arthur.dy.lee的专栏
01-10 7397
将异常(getStackTrace)转化成String
SpringBoot全局异常统一处理
HuHao_CSDN的博客
03-23 837
目标: 对运行时发生的异常进行统一处理 处理自定义异常 Validator统一异常封装 Assert的异常统一封装 一:定义异常统一返回的格式规范: import com.techsun.industry.common.enums.ResultCode; import lombok.AllArgsConstructor; import lombok.Builder; impo...
Get StackTrace as String
acuna1的专栏
10-28 437
public static String getStackTrace(Throwable throwable) {            Writer writer = new StringWriter();            PrintWriter printWriter = new PrintWriter(writer);           throwable.printStack
开发工具篇第八讲：阿里云OSS对象存储服务
Jet_qi的博客
03-10 2530
阿里云对象存储服务（Object Storage Service，简称 OSS），具有与平台无关的RESTful API接口，您可以在任何应用、任何时间、任何地点存储和访问任意类型的数据，在我们公司用于上传图片，访问图片 文章目录1、相关概念2、快速接入3、常见问题4、原理分析5、自助工具6、OSS使用踩坑 review 1、相关概念 1、存储类型（Storage Class） OSS按数据存储场景从热到冷提供标准、低频访问、归档三种存储类型。其中标准存储类型提供高可靠、高可用、高性能的对象存储服务，.
springboot项目集成react实现增删改查操作
10-23
通过以上步骤，我们就可以在Spring Boot项目中集成React，实现增删改查的操作。前端使用React构建用户界面，发送HTTP请求到后端的Spring Boot项目中，后端根据请求的类型进行相应的数据操作，再将结果返回给前端进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值