wix本地数据_Wix代码数据库和数据建模

本文详细介绍了Wix Code的数据库功能,包括如何填充集合、使用外部数据库、设置数据挂钩,以及如何根据内容创建动态页面。通过艺术学校案例展示了如何建模数据,如收集模式、ID字段和主字段、参考领域。此外,还讨论了如何利用Wix Code创建主从页面和动态展示内容,以提高网站的数据管理和用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

wix本地数据

本文是与Wix合作创建的。 感谢您支持使SitePoint成为可能的合作伙伴。

Wix Code的很酷的功能之一就是能够将您网站的设计和布局与其内容分开。 这意味着您可以在数据库中创建和维护信息,然后让页面以您喜欢的任何方式动态检索和显示此信息。

让我们深入研究Wix Code数据库的功能,包括可以存储的信息类型,使用代码处理数据的方式以及如何在网站上动态显示信息。

在整篇文章中,我们将使用艺术学校的简化示例来存储和显示有关其课程和老师的信息。

Wix代码数据库

像所有数据库一样,Wix代码数据库由单独的表组成,我们称其为collections 。 在我们的艺术学校示例中(见下图),我们有两个集合,每个集合用于课程和教师。

艺术学校

您可以根据需要创建任意数量的集合,并使用几乎无限量的数据填充它们。 强大的权限模型意味着您可以完全控制谁可以访问您的信息以及他们可以使用它做什么。

您可以直接在实时数据中工作,实时数据是访问者在查看您的页面时看到的信息。 您还可以使用Sandbox数据,因此可以尝试一些东西而不会影响您的实时站点。 您可以随时在它们之间进行同步。

填充集合

您可以使用几个选项来填充您的收藏集。 您可以直接在Wix Content Manager中手动将数据输入实时数据或沙盒数据。

如果您是Excel的王牌,则可以在Excel(或您喜欢的任何电子表格程序)中完成所有工作,将工作表另存为CSV文件,然后将其导入到Wix Code数据库中。 实际上,您可以通过这种方式,架构和所有方式来创建整个集合。 您可以导入到实时数据或沙盒数据。

您也可以将Wix数据导出到CSV文件。 如果确保包含内置ID系统字段,则可以修改电子表格中的内容,然后将其重新导入到Wix代码数据库中,以便更新每条记录或我们称为项目的内容。

第三种选择是构建一个表单来捕获用户输入并将其存储在数据库中。

使用外部数据库

如果某个地方已有数据库,您可能会想不想在Wix中重新创建它。 好消息是您不必这样做。 只要您的数据库公开API,就可以从Wix站点访问它。

对于简单的应用程序,您可以使用wix-fetch模块 (标准JavaScript Fetch API的实现)来通过HTTP请求访问外部数据库,并在Wix网站页面中使用该数据。

您还可以将wix-fetch模块与另一个Wix模块wix-router配对,该模块可以控制传入请求的路由。 使用这两个模块提供的功能,您可以创建SEO友好型动态页面,这些页面根据用于访问它们的URL显示不同的数据。

例如,您可以设计一个可以由您网站的所有成员使用的成员资料页面。

使用wix-router和wix-fetch,您可以编写代码以从配置文件页面的传入请求中提取信息,查询外部数据库以检索该页面的信息,然后将该数据注入到配置文件页面中。 您甚至可以使用wix-users模块为页面添加安全性。

因此,如果您创建另一个页面供用户更新其个人资料页面,则可以检查谁在尝试访问该页面,并且仅允许用户更新自己的个人资料。

数据挂钩

免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

您可以使用wix-data API将钩子添加到集合的操作上。

例如,在我们的教师集合中,我们有两个单独的字段:名和姓。 为了使在页面上显示名称更加容易,我们还希望有一个将两个名称结合在一起的字段。 为此,我们可以向添加到插入动作的Teachers集合中添加一个beforeInsert钩子,该钩子插入insert动作,读取名字和姓氏字段的内容,然后将它们连接起来并填充“全名”字段。

建模数据

既然我们已经介绍了数据库本身,那么让我们谈谈在Wix Code数据库中对数据建模的方法。

收集模式

像所有数据库一样,每个集合都有一个架构来定义其字段。 支持所有标准字段类型,包括文本,图像,布尔值,数字,日期和时间以及富文本格式。

还有一个专门为URL设计的字段类型。 它会自动将URL格式化为可添加到页面中的可单击链接。 例如,您学校的老师可以提供其作品集网站的URL,您可以在其动态页面上包括该链接。

您还可以使用文档字段类型来存储各种文件类型。 您可以允许用户下载存储在您的馆藏中的文件(例如每门课程的阅读列表)或上传自己的文件。

ID字段和主字段

每个集合都有一个_ID字段,该字段是该表的主键。 集合还具有一个主字段(由锁定图标指示),它是每个项目的显示键。

使用参考字段创建联接时(请参阅下一节),这些值来自主字段。 当然,引用本身使用_ID字段。 如果计划使用参考字段,则最好确保存储在主字段中的数据是唯一的。

ID栏

参考领域

参考字段可在集合架构本身中定义的集合之间创建连接。 这类似于关系数据库中的外键。

每个参考字段都指向一个特定的集合。 集合中每个项目的引用字段中显示的值取自引用集合的主字段的值。

参考领域

在我们的示例中,我们在“课程”集合中创建了一个参考字段,该参考字段指向“教师”集合,以便我们可以指示由谁来教每个班级。

参考字段的优点是三方面的。 首先,由于它们的值直接来自引用的集合,因此它们有助于维护数据完整性。 其次,它们有助于消除重复数据,众所周知,重复数据是良好数据库设计的敌人。 第三,当我们创建页面布局时,引用字段使我们可以访问引用的集合以及正在使用的主集合中的信息。 这使我们可以创建主从页面,例如每位老师教授的所有课程的列表。

根据内容创建页面

当然,存储和维护数据很好,但是拥有网站的真正意义在于向访问者显示内容。 因此,让我们谈谈它与Wix Code一起工作的方式。

回到我们艺术学校的例子。 我们有两种不同类型的信息:课程和教师。 因此,您可以从设计页面布局开始,以显示有关每门课程的所有信息。 然后,您可能需要创建一个主从页面,其中列出了您所有的老师及其所教课程。

设置动态页面

使用Wix代码创建动态页面时,首先定义URL,该URL将控制页面可以显示的内容。 一些URL可以指定一个项目,而其他URL可以指定项目的整个类别(例如某个级别的所有课程)。

您可以通过从集合中选择一个或多个字段来设置URL模式。 您可以用来显示每门课程的一种URL模式可以是https://…/ Courses /

。每次生成不同的页面时,该字段都将替换为要检索的项目的实际标题。因此,一个课程页面的URL将为https://…/ Courses / Art-History,而另一个课程页面的URL将为https://…/ Courses / Intro-to-Painting。

然后,您在编辑器中设计页面布局,在页面上放置不同的元素,并将要用于显示动态数据的元素连接到集合中的字段。 您可以使用文本元素,图像,按钮,条带以及各种多项目元素,例如中继器,表格和画廊。 如果您希望某些项目(例如标题)保持静态,请不要连接它们。

下图显示了“课程”页面的动态页面布局在编辑器中的外观示例。 方括号表示此内容是动态的。

动态页面布局

实际的动态页面可能看起来像这样。

动态页面

注意两个页面的布局如何相同。 但是,某些元素的内容已被我们数据库中有关课程的信息所取代。 每个页面的页面背景也不同。 容器框甚至会自动放大,以包含“艺术史”课程的较大课程说明。

特别注意每个课程的老师的姓名和照片在页面上的显示方式,即使有关每个教师的详细信息与课程数据存储在单独的集合中。 这是因为我们使用参考字段将“课程”和“教师”集合连接在一起,这使我们可以访问有关每门课程的特定教师的信息。

最后,请注意页面URL对于每个页面如何唯一。 本质上,每个页面都是唯一的。 Wix Code会自动为我们创建它们。 如果我们将新课程添加到集合中,则会自动为其创建一个页面。

主从页面

使用Wix代码可以做的另一件很酷的事情是创建主从页面。 例如,您可以创建一个页面作为索引,以列出您学校中的所有老师以及每个人教的课程。 这将需要从多个集合(课程和教师)中获取信息,然后由其老师过滤课程,以便仅显示相关课程。

我们的数据库集合以多对一的结构设置; 每个老师都有很多课程。 上面我们展示了每门课程及其各自的老师,而现在我们采取相反的方法,并展示了每位老师及其所有课程。

下面是使用转发器的带有主从信息的索引页的示例。

索引页

由于中继器既连接到我们的教师集合又连接到我们的课程集合,因此它可以动态显示两个集合中的信息。 每个转发器项目中的嵌入式表格元素均显示每个老师所教课程的列表。

摘要

我们已经介绍了有关Wix代码数据库的一些高级信息,以及它提供的一些功能,这些功能可用于存储数据,处理数据以及向访问者动态显示数据。 我们还说明了如何创建您的收藏集并进行关联时,部分地由您做出的决定来控制可用的选项。 在开始创建Wix代码数据库之前,最好花点时间考虑一下拥有的信息种类以及显示方式,以便最有效地对数据建模。

翻译自: https://www.sitepoint.com/the-wix-code-database-and-data-modeling/

wix本地数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值