「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之联合索引(十一)

简介: 本文主要介绍联合索引功能的实现。联合索引又叫复合索引,如果索引只有一个字段,在设置列属性的时候直接设置。如果是多个字段联合索引,就需要单独设置了。这里可以创建普通或唯一两种类型的联合索引,通过下拉框选择多个字段。当然如果索引只有一个字段,也可以通过联合索引功能进行设置。

基于Vue和Quasar的前端SPA项目实战之联合索引(十一)

回顾

通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,关于表单元数据配置相关内容已经实现了,本文主要介绍联合索引功能的实现。

简介

联合索引又叫复合索引,如果索引只有一个字段,在设置列属性的时候直接设置。如果是多个字段联合索引,就需要单独设置了。这里可以创建普通或唯一两种类型的联合索引,通过下拉框选择多个字段。当然如果索引只有一个字段,也可以通过联合索引功能进行设置。

UI界面

索引管理
索引管理

核心代码

由于在创建和编辑表单元数据时候都用到了联合索引功能,所以封装成组件component,名称为CIndexList,这样可以复用,避免代码冗余。

CIndexList组件

CIndexList
CIndexList

通过getData方法获取索引内容

getData() {
  let newIndexs = [];
  this.table.indexs.forEach(function(item){
      const newIndexLines = [];
      item.columns.forEach(function(column){
        newIndexLines.push({
          column: {
            id: column.id,
            name: column.name
          }
        })
      });

      const newIndex = {
        id: item.id,
        isNewRow: item.isNewRow,
        caption: item.caption,
        description: item.description,
        indexStorage: item.indexStorage,
        indexType: item.indexType,
        name: item.name,
        indexLines: newIndexLines
      }

      newIndexs.push(newIndex);
  });

  let data = {
    indexs: newIndexs
  }

  return data;
}

应用

在创建和编辑页面中引用即可

<CIndexList ref="cIndexListRef" v-model="table"></CIndexList>

保存的表单时候,通过$refs['cIndexListRef']获取索引内容

const ref = this.$refs['cIndexListRef'];
const data = ref.getData();

例子

createindex
创建表单时候,点击“联合索引”按钮,弹出对话框设置页面,添加3个联合索引。

createtable
保存表单之前,可以看到“联合索引”按钮括号里面的个数变成了3。

updateindex
创建成功后,编辑表单打开联合索引页面可以再次编辑联合索引。

phpmyadmin
打开phpmyadmin管理页面,最终确定表和索引都创建成功了。

小结

本文主要介绍了联合索引功能,在创建和编辑表单元数据时候都可以设置联合索引,索引可以用来优化查询速度,也可以用来唯一性验证,避免数据库中插入重复数据。下一篇文章会介绍数据库逆向,在数据库表单已经存在的基础上,通过数据库逆向功能,快速生成元数据,不需要一行代码,我们就可以得到已有数据库的基本crud功能,包括API和UI。类似于phpmyadmin等数据库UI管理系统,但是比数据库UI管理系统更灵活,更友好。

demo演示

官网地址:https://crudapi.cn
测试地址:https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因,GitHub可能速度慢,改成访问Gitee即可,代码同步更新。

目录
相关文章
|
5天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
5天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
10天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
17天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
52 4
|
5天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
12天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
18天前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
72 0
|
JavaScript 前端开发 数据管理
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之动态表单(五)
本文主要介绍了元数据中动态表单设计功能,支持常见的数据类型和索引,然后实现了动态表单的crud增删改查功能。
347 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之动态表单(五)
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9