首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之业务数据(七)

基于Vue和Quasar的前端SPA项目实战之业务数据(七) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之表关系(六)的介绍,元数据设计功能全部实现了,本文主要介绍业务数据的crud...简介 crudapi系统,通过配置表单的方式定义元数据。...="item.value" :options="item.options" /> 对于多对一和一对一(子主方向)使用q-select选择数据。...[listapi] API为/api/business/{name},其中name为对象名称复数形式(兼容对象名称),查询参数如下: 参数 类型 描述 select string 选择查询需要的字段和关联子表...int32 每页数量 字段1 Object 最终转换成mysql=操作符 字段2 Object 最终转换成mysql=操作符 ......

68630

​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之表关系(六)

基于Vue和Quasar的前端SPA项目实战之表关系(六) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,我们已经完成了元数据动态表单设计功能,本文主要介绍表关系功能的实现...简介 crudapi系统,通过表关系(relation)管理将多个表连接起来,支持一对多,多对一,一对一,多对多等关系, 有关表关系基本概念参考之前文章 表关系 ,通过UI配置好表关系后,可以支持主子表的级联操作...", {data: ids} ); } }; export { metadataRelation }; 核心代码 q-select控件 表关系设计页面用到了q-select控件...<q-select class="col-7" outlined v-model="metadataRelation.relationType" :options="relationTypeOptions...package.json 添加@antv/g6依赖 "dependencies": { "@quasar/extras": "^1.0.0", "@antv/g6": "^3.3.6", "

73140
您找到你想要的搜索结果了吗?
是的
没有找到

框架篇-Vue面试题1-为什么 vue 组件的 data 是函数不是对象

vue组件data的属性值是函数,如下所示 export default { data() { // data是一个函数,data: function() {}的简写 return...name: 'itclanCoder', }, }; 当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例 也就是说,很多页面,定义的组件可以复用在多个页面...如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例修改data,都会影响到所有的组件实例 如果data是函数,每次创建一个新实例后,调用data函数,从而返回初始数据的一个全新副本数据对象...Person(); p1.data.name = '川川'; console.log(p1.data.name); // 川川 console.log(p1.data.name); // 川川 挂载原型下属性如果是一个对象...,实例化出来的对象(p1,p2)都指向的是同一份实体 原型下的属性相当于是公有的 修改一个实例对象下的属性,也会造成另一个实例属性跟着改变,这样组件复用的时候,肯定是不行的,那么改成函数就可以了的,如下代码所示

1.9K20

「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之序列号自定义组件(四)

基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实现...,MySQL本身是实现不了的,所以crudapi封装了复杂序列号,支持字符串和数字,自定义格式,也可以设置为时间戳。.../components/CPage"; export default async ({ Vue }) => { Vue.use(cPage); }; 然后,quasar.conf.js里面boot...节点添加cpage,这样Quasar就会自动加载cpage。...boot: [ 'i18n', 'axios', 'cpage' ] 应用 序列号列表通过标签CPage使用 <CPage v-model="pagination" @

89850

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

基于Vue和Quasar的前端SPA项目实战之联合索引(十一) 回顾 通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,关于表单元数据配置相关内容已经实现了,本文主要介绍联合索引功能的实现...简介 联合索引又叫复合索引,如果索引只有一个字段,设置列属性的时候直接设置。如果是多个字段联合索引,就需要单独设置了。这里可以创建普通或唯一两种类型的联合索引,通过下拉框选择多个字段。...newIndexs.push(newIndex); }); let data = { indexs: newIndexs } return data; } 应用 创建和编辑页面引用即可... 保存的表单时候,通过$refs'cIndexListRef'获取索引内容 const...小结 本文主要介绍了联合索引功能,创建和编辑表单元数据时候都可以设置联合索引,索引可以用来优化查询速度,也可以用来唯一性验证,避免数据库插入重复数据。

47340

Java 的协程库 - Quasar

协程,其实就是一个线程,有一个总调度器,对于多个任务,同时只有一个任务执行,但是一旦该任务进入阻塞状态,就将该任务设置为挂起,运行其他任务,在运行完或者挂起其他任务的时候,再检查待运行或者挂起的任务的状态...实际上 Quasar 的实现就是想办法让运行的线程栈停下来,好让 Quasar 的调度器介入,JVM 线程中断的条件只有两个:一个是抛异常;另外一个就是 return。...三、Quasar 配置 首先我们需要在 pom.xml 引入 Quasar 的 jar 包(0.8.0 版本支持 jdk11 或更高的版本): <groupId...\0.7.3\quasar-core-0.7.3.jar 对于 maven 来说,你可以使用插件 maven-dependency-plugin,它会为你的每个依赖设置一个属性,以便在其它地方引用,我们主要想使用...Comsat 并不是一套 web 框架。它并不提供新的 API,只是为现有的技术如 Servlet、JAX-RS、JDBC 等提供 Quasar fiber 的集成。

2.5K31

我用这9个小技巧封装Vue组件,老大都夸我’封得好‘

组件是前端框架的基本构建块。把它们设计得更好会使我们的应用程序更容易改变和理解。在这节课,分享一下在过去几年中工作中学到的 9 个技巧。 1....对于插槽,可以直接在文本中使用标记,不是组件解析它。 3. 将该组件与触发它的因素分组 有时有两个独立的组件某种情况下一起使用。...为了让它变得更好,我们必须让 items 通过它们的id不是index 来访问,因为 index 是不可靠的,可以改变。例如,如果你添加一个支持通过拖放来重新排列items 的功能呢?...如果你使用的是外部库,如 Vuetify 或Quasar,那么你就不必担心这个问题--这些组件设计时就考虑到了这一点。 9....宽度也是如此。如果用户想让该组件具有响应性,他们必须覆盖其宽度和最大宽度。 因此,通过不在组件内部设置宽度和边距,总是给用户这种控制是有意义的。

79430

「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)

技术选型 Vue 目前主流的三大前端框架分别是Angular、React、Vue。其中Angular适合大型项目,React的JSX语法个人觉得不是很好。...参数选择如下: [创建Quasar] 运行项目 cd crudapi-admin-web npm install quasar dev 可以package.json里面添加scripts脚本 "scripts...附demo演示 crudapi后台管理页面,框架采用Vue,控件库为Quasar,形式为SPA单页面应用。...主要功能:元数据管理,序列号管理,表关系设置,业务数据crud增删改查等。...[table] 表单对应不同的对象 [table] 表关系图显示不同对象之间的关系 [customer] 业务数据操作 官网地址:https://crudapi.cn 测试地址:https://demo.crudapi.cn

1K80

「免费开源」基于Vue和Quasar的前端SPA项目系统实战之拖拽表单定制(十六)

基于Vue和Quasar的前端SPA项目实战之拖拽表单定制(十六) 回顾 通过前一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,实现了元数据动态表单设计功能,支持常见的数据类型和索引...UI界面 [formbuilder] 页面构建 [runtime] 运行时 代码 说明 采用开源框架vuesortable,基于vue的实现排序,支持拖拽。...页面构建分为左右三个部分,左边为候选字段,中间为需要显示的字段,右边可以针对每个字段单独设置一些属性,比如宽度等。...'password' : 'text'" v-model="formElement.column.value" > <template v-slot:append v-if...基于主流的开源框架,拥有自主知识产权,支持二次开发。

79830

干货 | 携程基于Quasar协程的NIO实践

基于epoll的NIO框架Netty一些框架级别的应用已经得到了广泛使用,但在快速迭代的业务系统的应用依然有一定的局限性。...Quasar框架AsyncCompletionStage.get内部完成的工作相当于,HttpClient返回的future上注册回调,回调的内容是“IO操作完成后通知调度器唤醒协程”,这样将NIO异步回调全部操作封装在协程调度器..., Exception e); } 这种情况,可以使用者自己创建ComplatableFuture,回调设置其状态,并调用AsyncCompletionStage.get等待这个future。...线程的执行过程可能切换,协程的调度每个执行线程上是串行的,协程持有的锁在不包含挂起操作时,会在占用线程执行完毕直到退出同步块为止,不会发生锁失效的情况。...新线程不是新协程中使用挂起方法时,会出现同样的问题。

1.6K30

协程和Java实现

因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线程数量越多,协程的性能优势就越明显。...第二大优势就是不需要多线程的锁机制,因为只有一个线程,也不存在同时写变量冲突,协程控制共享资源不加锁,只需要判断状态就好了,所以执行效率比多线程高很多。...早期版本的Go编译器并不能很智能的发现和利用多核的优势,即使我们的代码创建了多个goroutine,但实际上所有这些goroutine都允许同一个CPU上,一个goroutine得到时间片执行的时候其它...java协程的实现 早期,JVM上实现协程一般会使用kilim,不过这个工具已经很久不更新了,现在常用的工具是Quasar本文章会全部基于Quasar来介绍。...Quasar是怎么实现Fiber的 其实Quasar实现的coroutine的方式与Go语言很像,只不过前者是使用框架来实现,go语言则是语言内置的功能。

1.9K41

十款热门的Vue.js工具和库

今天的这篇文章笔者从这些工具的实用性、有效性、独特性选了这十款工具和库,不是依据Github受欢迎程度或星级,有些你已经很熟悉了并在使用,有些还比较陌生,好了,让我来一起看下这十款热门的工具和库。...它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注撰写应用上,不必花好几天去纠结配置的问题。...store包含四个部分: state – 应用的数据内容对象 getters – 定义获取state数据的相关方法 mutations – 定义操作state的数据的相关方法 actions – Action...类似于 mutation,不同在于:Action 提交的是 mutation,不是直接变更状态;Action 可以包含任意异步操作。...07 Quasar https://quasar.dev/ Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建: 响应式网站 PWA(Progressive

3K20

Java学习笔记-全栈-web开发-24-Vue

vue通过框架提供的指令实现数据双向绑定,我们只需要关注业务逻辑,不需要直接操作DOM元素。...最重要的是,其实vue实例的msg也被修改了 v-model实现了表单元素和model数据的双向绑定 但是v-model只能用于表单元素,如果将其使用到其他标签上,则v-model就是自定义指令了...10(不是从0到9) 注意 建议给每个v-for都加上:key,且key不绑定默认生成的index 因为: <!...(注意不是给template的根节点给id) 声明Vue.component,绑定template的ID vue实例绑定的el中使用template <!...,因此可以直接创建组件对象 var login={ template:'组件对象' } 7.3 组件的data和methods 首先是data,注意,组件的存在是为了提高复用性,data

1.2K20

java协程框架quasar和kotlin的协程

接下来要分享的这个开源项目,正是解决了java只能使用多线程模型开发高并发应用的窘境,使得java也能像Go语言那样使用协程的语义开发了。...而且上面多线程编程时,并没有指定线程池的大小,实际开发是绝不允许的。一般我们会设置一个固定大小的线程池,因为线程资源是宝贵,线程多了费内存还会带来线程切换的开销。...上面的场景设置200个固定大小线程池时。结果也是可预见的达到了50多秒。这个结果足以证明协程编程ko线程编程了。...反观协程,基于固定的几个线程调度,可以轻松实现百万级的协程处理,而且内存稳稳的。 后记 最后,博主以为Quasar只是一个框架层面的东西,所以就又去看了下同样是jvm语言的kotlin的协程。...而且当我把同样的代码放到Quasar的时候,Quasar直接抛io异常了,说明Quasar还并不能轻松支持这个场景。

33730

9个不错的前端开源项目

无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业,学习新的概念和语言/框架是跟上快速变化的必要条件。...为了帮助你2020年成为前端大师,我收集了9个不同的项目,每个项目都有不同的主题和不同的JavaScript框架或库作为技术栈,您可以构建它们并将它们添加到学习计划。...您将学到什么 本教程,您将学习如何利用Gatsby构建出色的博客,以便在使用React和GraphQL的同时编写自己的文章。...您应该已经配置了可运行Android Studio / Xcode的Cordova设置。如果没有,该教程中将有一个指向Quasar网站的链接,在那里他们向您展示了如何进行设置。...技术栈和功能 Quasar Vue Cordova WaveSurfer UI Components 一个小项目,展示了Quasar构建移动应用程序方面的强大功能。

6.1K30

以常见业务为中心的Vue面试题,真香!

,为路由对象的path属性设置/:id 8.如何获取传过来的动态参数 组件,使用router对象的params.id,如route.params.id 9.vue-router有哪几种导航的钩子 有三种...使用vuex,要引入store,并注入vue.js组件组件内部可以通过$store访问store对象;使用场景,单页应用,用于组件之间的通信,如音乐播放,登录状态管理,加入购物车等 vuex可以说是一种开发模式或框架...15.vue.js中常用的4种指令 v-if判断对象是否隐藏;v-for循环渲染;v-bind绑定一个属性;v-model实现数据双向绑定 v-if循环中实现v-model数据的双向绑定: 有时需要创建...包裹动态组件时,会缓存不活动的组件实例,不是销毁它们。是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链。...,不是使整个页面跳转到router-view定义组件渲染的位置,要进行页面跳转,要将页面渲染到根组件内。

11.4K30

Vue.js笔试题解决业务中常见问题

,为路由对象的path属性设置/:id 8.如何获取传过来的动态参数 组件,使用router对象的params.id,如route.params.id 9.vue-router有哪几种导航的钩子 有三种...使用vuex,要引入store,并注入vue.js组件组件内部可以通过$store访问store对象;使用场景,单页应用,用于组件之间的通信,如音乐播放,登录状态管理,加入购物车等 vuex可以说是一种开发模式或框架...15.vue.js中常用的4种指令 v-if判断对象是否隐藏;v-for循环渲染;v-bind绑定一个属性;v-model实现数据双向绑定 v-if循环中实现v-model数据的双向绑定: 有时需要创建...包裹动态组件时,会缓存不活动的组件实例,不是销毁它们。是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链。...,不是使整个页面跳转到router-view定义组件渲染的位置,要进行页面跳转,要将页面渲染到根组件内。

12.5K10
领券