它山之石

Tashan stone of

案例
免费获取策划方案多一份参考,总有益处

它山之石

使用Wix代码快速构建动态站点

来源:派臣科技|时间:2019-07-08|浏览:

Wix Code是基于云计算的网站构建器Wix的一个强大的新工具,于2017年12月发布。

使用Wix代码,您可以构建可伸缩的应用程序和web页面。页面甚至可以从内置的数据库集合中提取数据,以实现完全的动态。此外,您可以添加JavaScript来定制您的前端完全。

Wix代码为设计人员提供了一种粒度控制,这种控制直到现在还无法实现,而无需聘请开发人员编写定制站点的脚本。

Wix代码功能

Wix代码使您可以轻松地构建动态站点,并从用户收集数据,所有这些都无需代码;然后它打开code选项,让您获得更多的控制。

构建在现有的Wix编辑器之上,Wix代码站点可以使用与您习惯的相同的拖放过程构建;

运行在安全的托管服务器上,您永远不需要担心服务器管理;

将设计与内容分离开来,您将在数据库集合中维护您的内容,您对数据所做的任何更改都将立即反映在您的站点上;

SEO功能允许你控制你的页面标题,描述,关键字,和图片在社交媒体上使用;

Wix代码提供了一键部署到web的功能,从根本上减少了启动新站点所涉及的工作量。

动态页面

开始使用Wix代码很简单:Wix代码默认不启用,因为它是针对专业用户的,所以首先需要通过“Tools > Developer Tools”选项打开它。

step_1

接下来要做的是设置数据库集合并为站点添加一些数据。Wix将所有这些数据安全地存储在其专用的云服务器上,因此您不必担心如何保证这些数据的安全性。在左侧侧边栏中,单击“Database > Add New Collection”链接并命名集合。您还需要选择集合的类型,对于动态页面,您将选择“站点内容”。

Wix将所有这些数据安全地存储在其专用的云服务器上

Wix代码中的数据库集合就像一个MySQL数据库—或者对于不熟悉数据库的人来说,它们就像一个电子表格。每一列都是一种数据类型,例如名称或电子邮件地址;每一行都是一个条目,在其中指定列的值。

假设您想使用Wix代码创建部门中团队成员的动态列表。您需要一个列来显示姓名、职位名称、照片、分机号和电子邮件地址(Wix代码将为您的每个条目添加一个惟一的ID)。一旦定义了数据,就可以为每个员工添加一行,提供他们的姓名、职位等等。数据库集合是完全灵活的,您可以添加任何需要的代码。

step_2

一旦定义了数据,就可以创建动态页面来显示它。Wix代码允许您创建两种类型的动态页面:数据集合和单独的页面。以我们的团队概要文件为例,您可以创建一个包含所有团队成员列表的类别页面,然后将这些条目链接到每个人的专用页面。设计页面的工作原理与Wix中的标准页面设计一样,惟一的区别是动态设置数据之后,可以设计单个模板页面并动态插入内容,在几分钟内创建数百甚至数千个页面。

将数据同步到页面设计非常简单。只需在页面上选择一个元素,然后使用下拉菜单选择要插入的动态数据。所有这些无需一行代码,都是在直观GUI中设置的。

step_3

如果您有更多的编码经验,那么实际上可以将数据托管到其他地方—只要它公开了一个Wix代码可以访问的API。但是,大多数不想直接将数据输入Wix的用户将从MySQL或Excel导出为CSV,然后使用import向导将其直接导入Wix代码。

动态形式

除了设置动态页面之外,Wix代码还允许您通过创建一个没有数据的数据库集合,并将其连接到站点上的输入字段,从而逆转该过程。通过这种方式,您可以轻松地收集用户数据并将其安全地存储在云中。

step_4

step_5

设置用于收集数据的数据库集合的过程几乎与设置动态页面的过程相同,只是这次将数据库集合的数据类型设置为“Form Submission”。在设计页面时,将添加表单元素,这些元素将向数据库集合提交数据。

同样,Wix代码使这一切成为可能,而不需要一行代码,只需要熟悉的GUI的拖放和属性选择。

自定义交互

动态页面和表单非常强大,但是Wix代码更进一步,它允许您访问运行页面的JavaScript。

您将需要一些JavaScript知识来利用这个特性,但是您会发现代码面板是围绕代码提示构建的,并且包含JSLint反馈,所以您的手在整个过程中都是握着的。

要向页面添加自定义代码,请选择一个元素,并从properties面板中选择一个事件来触发代码——例如onClick事件。完成此操作后,代码面板将在GUI的底部打开,预先填充了JavaScript事件代码,以便您所需要做的就是定义在触发事件时希望发生什么。

Wix提供了几十个超级有用的例子。当然,您会发现全面的文档。然而,因为Wix代码使用JavaScript,所以您可以从整个web中获得灵感。

后端代码

与前端代码一样,Wix代码也具有一些真正强大的后端集成功能。您可以连接到第三方api,利用地理定位等功能的强大功能,并将其直接连接到您自己的站点。

80%用WordPress构建的站点可以用Wix代码在很短的时间内构建

Wix代码使用Node连接到api。js, HTTP, HTTPS, net模块,或自己的wix-fetch模块。当然,如果您正在连接到第三方API,您不希望在前端公开您的访问密钥(特别是如果您为每个请求的API付费)。Wix代码使用Web模块和权限系统解决了这个问题,它们运行在前端代码调用的后端。这是Wix,整个设置和安全连接都为您处理。

现在,这就是事情变得疯狂强大的地方…你实际上可以把你自己网站建设的一部分作为你自己的API公开。假设您想让您的团队成员直接从他们自己的Wix站点更新他们自己的概要文件。使用Wix代码,您可以通过API公开数据库集合,并允许员工编辑访问他们自己的数据(而且只访问他们的数据)。

结论

与大多数站点构建器一样,Wix以前仅限于专业设计师使用;静态站点的需求很低,因此Wix无法与WordPress这样的动态解决方案竞争。Wix代码通过启用设计人员所渴望的那种易于实现的动态代码来改变这种情况。通过这样做,它为成千上万的专业人员打开了前端开发的大门。

当然,Wix代码不足以构建所有的站点,但是80%用WordPress构建的站点可以用Wix代码在很短的时间内构建。Wix Code在为设计人员提供公平的竞争环境,并使他们不必雇佣开发人员来实现他们的设计方面做了令人难以置信的工作。

您现在就可以免费试用Wix代码,只需登录wix.com并注册一个免费试用版即可。

留言

返回顶部

君
重庆网站建设派臣公司