Vue 3 企业级项目实战课
杨文坚
前阿里前端 Leader,前腾讯 IMWeb 团队高级前端工程师
6908 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 47 讲
实战篇 (19讲)
Vue 3 企业级项目实战课
15
15
1.0x
00:00/00:00
登录|注册

24|后台搭建数据源:如何设计运营搭建页面的数据结构?

你好,我是杨文坚。
前两节课,我们学习了物料的“资源管理”和“数据管理”,一起构成了我们课程运营搭建平台的物料功能维度。
不知道你没有想过,在运营搭建平台中,对物料进行资源和数据管理后,要怎么预览物料效果呢?如果能预览物料效果,那能不能进一步自定义物料的效果,比如通过传入自定义的数据,来控制物料的显示内容或者操作功能?
答案当然是可以的,那怎么具体实现物料效果的预览和自定义呢?我们开始今天的学习。

实现思路分析

对我们课程的运营搭建平台项目来说,用到的物料,其实就是 Vue.js 组件。
如果要让组件实现预览效果,可以直接把组件单独当做应用来运行。
如果要自定义物料显示效果,就要做两方面支持,一方面是物料的 Vue.js 组件在开发的时候,必须支持通过 Props 来自定义控制部分内容,另一方面,在组件运行的时候,支持通过 Props 传入自定义的数据,让物料组件根据代码逻辑,展现出自定义效果。
搭建页面,是通过一个个物料组装而成的,页面的数据,其实就是物料的数据。所以,页面的数据也就是物料的数据,页面的数据结构,也就是物料的数据结构。
同时,在同一个页面上,我们还可以多次使用同一物料的 Vue.js 组件,传入不同的 Props 数据,来重复使用同一个物料,达到不同的渲染效果。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了如何设计运营搭建页面的数据结构,以及实现物料效果的预览和自定义的方法。作者首先提出了实现思路分析,指出物料的数据结构即为“物料数据源”,用于给物料提供自定义的数据,让物料根据组件代码逻辑渲染自定义内容。文章介绍了“JSON Schema”概念,用于统一描述组件的Props数据格式,以及如何根据组件Props的TypeScript数据类型自动生成JSON Schema。通过具体的代码案例,读者可以了解如何使用JSON Schema来描述组件的Props数据格式,以及如何通过动态表单来生成JSON数据。此外,文章还详细介绍了如何生成物料数据源JSON Schema,并将其与物料静态资源一起管理,以及基于JSON Schema生成动态表单和隔离渲染物料Vue.js组件的方法。总的来说,本文深入浅出地介绍了如何设计运营搭建页面的数据结构,为读者提供了技术上的指导和实践思路。同时,文章还提出了思考题,引发读者对技术的深入思考。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Vue 3 企业级项目实战课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(1)

  • 最新
  • 精选
  • Mr.杨
    有个问题,/public/cdn 这个/cdn是怎么来的。看正常路径不是/public/@my/各种物料.js css吗

    作者回复: 您好,这个 /cdn 是通过脚本按需从 monorepo的子项目@my/mock-cdn同步过来的。主要是模拟cdn的静态资源文件。

    2023-02-27归属地:北京
收起评论
显示
设置
留言
1
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部