`
jiasudu1649
  • 浏览: 724531 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

vue仿odata通用增删改查

 
阅读更多

 

 

1 列表  
  listApiEntity

this.params.entityName = "FinanceRateCondtion";    //必填,表名称
      this.params.orderBy ="-baseId";   //必填,排序字段
      var inputFields = {};
      inputFields["noConditionFind"] = "Y"; //必填 如果为N则不执行查询.
 

     inputFields.xxx = xxx;    //查询,
      inputFields.xxx_op = xxx;  //查询条件;

如greaterThanEqualTo,lessThanEqualTo,notEqual 等等.不写这个值则默认为等于
      ......
      this.params.inputFields = inputFields;
      this.initTableData(this.$api.listApiEntity,this.params);

 2 新建  
  createApiEntity     var inputFields = {};
      inputFields["baseId"]= "10000";    //主键,可以不填,不填则后台自动产生
      inputFields["baseTypeId"]= xxxx;   //非主键字段,
      ......
      this.dataInfo.inputFields = inputFields;
      this.dataInfo.entityName = "FinanceRateCondtion";  //表名称
      this.saveDataInfo(state,this.$api.createApiEntity,this.dataInfo , "list");
      //返回的数据中的outputFields 包含了所有字段,按需使用
 3  修改  
   updateApiEntity    var inputFields = {};
      inputFields["baseId"]= "10000";    //主键
      inputFields["baseTypeId"]= xxxx;   //非主键字段,
      ......
      this.dataInfo.inputFields = inputFields;
      this.dataInfo.entityName = "FinanceRateCondtion";  //表名称
      this.updateDataInfo(state,this.$api.updateApiEntity,this.dataInfo , "list");
      //返回的数据中的outputFields 包含了所有字段,按需使用 
 4  删除  
   deleteApiEntity  var inputFields = {};
      inputFields["baseId"]= "10000";    //主键
      this.dataInfo.inputFields = inputFields;
      this.dataInfo.entityName = "FinanceRateCondtion";  //表名称
      axios.post(this.$api.deleteApiEntity,this.dataInfo).then(res => {
this.loading = false;
          }).catch(err => {
          this.loading = false;
        });
 5  根据主键查询一条数据  
   getApiEntity     var inputFields = {};
      inputFields["baseId"]= "10001";   //主键
      this.dataInfo.inputFields = inputFields;
      this.dataInfo.entityName = "FinanceRateCondtion";
      axios.post(this.$api.getApiEntity,this.dataInfo).then(res => {
            this.loading = false;
            this.inputFields = res.body.outputFields; 
      }).catch(err => {
            this.loading = false;
      });






   



   


   

   


  


 

分享到:
评论

相关推荐

    node+vue前后端分离增删改查

    在现代Web开发中,前后端分离的架构设计已经成为主流,其中“Node+Vue前后端分离增删改查”是一个典型的示例。这个项目利用Node.js(搭配Express框架)作为后端服务器,处理数据请求和业务逻辑,而Vue.js(配合...

    vue文件源代码增删改查

    在这个"vue文件源代码增删改查"的主题中,我们将深入探讨如何在Vue.js项目中实现CRUD(创建、读取、更新和删除)操作,结合SpringBoot后端服务和数据库交互。 首先,让我们从Vue.js的角度出发。在Vue应用中,CRUD...

    springboot+vue+element增删改查Demo

    springboot+vue+element增删改查Demo 集成了: 1. ​ restful接口定义 2. ​ 增删改查定义,路径参数定义 3. ​ 跨域处理 4. ​ 参数校验 5. ​ 异常拦截 6. ​ swagger文档 7. ​ 测试用例 8. ​ logback...

    Vs Code Vue实现增删改查

    本教程将重点讲解如何使用Visual Studio Code(简称Vs Code)这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先,我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架,它具有轻量级...

    基于SpringBoot+Vue实现增删改查和分页查询DEMO(源码+数据库)

    springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO(源码+数据库) 技术栈 数据库:MySQL 后端框架:SpringBoot+Spring Data JPA 前端框架:Vue-ElementUI

    对vue + elementUI的表格常规增删改查优化封装

    对vue + elementUI的表格常规增删改查优化封装

    springboot+vue+elementui实现增删改查和分页查询

    在本项目中,"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI,这三个组件分别在后端、前端和UI设计方面发挥关键作用,...

    springboot+vue+bootstrap实现用户增删改查

    在本项目中,"springboot+vue+bootstrap"的组合被用来实现一个基本的用户管理功能,包括用户信息的增加、删除、修改和查询。这是一个常见的Web应用开发场景,涉及后端服务处理与前端界面展示的协同工作。下面将详细...

    vue表格增删改查

    "vue表格增删改查"这个主题,是Vue.js应用中的一个常见场景,通常涉及到数据展示、用户交互以及后端通信等多个方面。在这个项目中,我们将深入探讨Vue.js如何实现表格的动态渲染、数据操作和用户界面的实时更新。 ...

    Vue链接后台数据库的增删改查

    在.NET 模式下,Vue 可以与后端数据库进行交互,实现数据的增删改查功能。这通常涉及到API接口的创建、Vue组件的设计以及HTTP请求的处理。 首先,我们需要在.NET环境中搭建一个API服务器。这个API接口负责处理前端...

    基于SpringBoot+Vue实现增删改查和分页查询DEMO(源码+数据库)作业

    springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO(源码+数据库)技术栈数据库:MySQL 后端框架:SpringBoot+Spring Data JPA 前端框架:Vue-ElementUI

    vue实现表格增删改查效果的实例代码.docx

    Vue 实现表格增删改查效果的实例代码 Vue 框架是当前最流行的前端框架之一,它提供了强大的功能来实现复杂的交互式用户界面。本文将介绍如何使用 Vue 实现表格增删改查效果的实例代码。 知识点 1:数据绑定 在 ...

    springboot+vue-cli脚手架开发-实现用户增删改查(前端脚手架代码)

    以上就是"springboot+vue-cli脚手架开发-实现用户增删改查(前端脚手架代码)"的主要知识点。在实际开发过程中,还需要根据具体需求进行定制,例如添加分页、搜索、排序等功能,以及优化用户体验和性能。

    前后端 spring+vue 实现后台系统的增删改查

    注意啊,这个项目只能实现增删改查功能,以及基本的分页功能,之后的登录,注册跳转到后台还有点问题(尽情期待)

    vue自动化创建简单的模块,简单的table查询增删改查页面

    总的来说,通过结合Vue.js的组件化特性与plop的自动化生成能力,我们可以快速构建出具有查询、增删改查功能的表格页面,大大提高了开发效率。这只是一个基础示例,实际项目中可能还需要考虑错误处理、数据格式化、UI...

    SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查

    在本项目中,我们主要利用SpringBoot框架与Thymeleaf模板引擎,结合传统的SSM(Spring、SpringMVC、MyBatis)架构以及前端Vue.js技术,来实现一个基本的增删改查功能。这是一个典型的后端服务与前端交互的示例,适合...

    Vue实现的增删改查

    在Web开发中,"增删改查"(CRUD)是基础且重要的功能,Vue.js 提供了丰富的工具和方法来实现这些操作。下面我们将详细探讨如何在Vue.js中实现增删改查,以及相关的模糊查询。 1. **Vue实例**:在Vue应用中,首先...

    node+vue+mysql前后端分离增删改查

    本项目“node+vue+mysql前后端分离增删改查”就是实现这一模式的一个实例,利用Node.js(通过Express框架)、Vue.js、MySQL数据库以及Bootstrap和jQuery来构建一个基础的CRUD(Create, Read, Update, Delete)应用。...

    SpringBoot Vue 图书增删改查.zip

    《SpringBoot与Vue结合实现图书增删改查的深度解析》 在当今的Web开发领域,SpringBoot和Vue.js已经成为非常流行的开发框架。SpringBoot以其轻量级、快速开发的特点,成为了后端开发的首选,而Vue.js则以其易学易用...

    Vue2.0 V1.1版本 增删改查功能,全选单选与取消全选选项,使用localStorage本地存储数据和watch深度监听

    Vue2.0 V1.0的增删改查功 全选单选与取消全选选项, 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习,父传子 子传孙 子传父 传值等学习,全选...

Global site tag (gtag.js) - Google Analytics