使用 Velo 自定义会员专区

Ascend

Ascend 是一个完整的营销与客户管理套件，通过提供 SEO 工具以及社交和营销集成，帮助您与客户互动并吸引更多受众。

它提供诸如与网站访客进行实时聊天、创建并发送品牌化发票以收取产品和服务费用、电子邮件营销、对网站行为自动响应等多种功能！

内容管理器

通过内容管理器，您可以更高效地管理网站内容。该工具允许您将内容组织成集合，并将其连接到编辑器中的各种元素，以在网站上显示内容或接收表单提交。

如何添加内容管理器？

集合

内容集合是存储网站内容的地方。这些内容可以是您创建的，也可以是来自网站访客的信息，或者两者兼有。内容以网格布局存储，由行（项目）和列（字段）组成。

创建新集合时，您可以选择预设集合或从零开始。同时还需要设置集合的权限。这些权限定义了谁可以访问该集合，从而决定您对该集合能执行的操作。

创建用于存储会员信息的集合

通过创建内容集合，轻松管理网站内容。您可以在其中存储大量内容，包括您创建的内容或访客提交的内容。通过将集合连接到如重复器等网站元素，即可在网站上展示这些内容。

创建内容集合的步骤

1. 在编辑器中进入内容管理器，点击编辑器左侧的“内容管理器”图标。
2. 点击 创建新集合。
3. 为集合输入名称。
4. 点击 这个内容集合是用于什么目的？ 下拉菜单，选择 #concept=permission#权限#concept#。
5. 点击 同时创建必要的页面... 开关，启用或禁用与此集合关联的动态页面。
6. 点击 创建集合。

您也可以随时更新现有集合的权限。

创建自定义登录页面

在我们的示例中，我们为会员专门设置了一个登录页面。但您也可以将此页面的内容添加到任意页面，甚至在所有页面上显示。

注意： 由于我们使用了专用的登录页面，因此需要将以下代码添加到页面的代码面板中。如果您希望在所有页面上显示这些元素，则需将以下代码添加到 masterPage.js 文件中，该文件位于 Velo 侧边栏的 全局（站点） 区域。

我们的登录页面设计非常简单，包含两个按钮：

• 第一个按钮用于登录或登出，具体取决于当前用户是否已登录。
• 第二个按钮用于跳转至会员个人资料页面，仅对已登录用户显示。

代码

登录页面的代码分为四个部分：

• 使用的 API 导入
• 页面加载时的 onReady 事件处理器
• 登录按钮的 onClick 事件处理器，用于执行以下任一操作：
  • 登录用户，并在首次登录时可能向“会员”集合中创建新条目
  • 注销已登录的用户
• 个人资料按钮的 onClick 事件处理器，用于引导会员跳转至其个人资料页面。

我们使用了以下 API：

• wix-users：获取当前用户信息，并实现用户的登录与登出。
• wix-data：用于查询和插入“会员”集合中的数据。
• wix-location：用于页面跳转。

导入代码如下：

1import wixUsers from 'wix-users';
2import wixData from 'wix-data';
3import wixLocation from 'wix-location';

当登录页面加载时，我们需要根据用户状态设置按钮。

• 如果用户已登录，应将登录按钮标签设为 登出，并显示 我的资料 按钮。
• 如果用户未登录，应将登录按钮标签设为 登录，并隐藏 我的资料 按钮。

onReady() 的代码如下：

1$w.onReady( () => {
2  if(wixUsers.currentUser.loggedIn) {
3    $w("#loginButton").label = "Logout";
4    $w("#profileButton").show();
5  } else {
6    $w("#loginButton").label = "Login";
7    $w("#profileButton").hide();
8  }
9} );

页面的大部分逻辑集中在登录按钮的 onClick 事件处理器中。

在事件处理器中，我们需要完成以下操作：

• 如果用户已登录并点击按钮：
  • 注销用户。
  • 将按钮标签改为 登录。
  • 隐藏 我的资料 按钮。
• 如果用户未登录并点击按钮：
  • 提示用户登录。
  • 查询“会员”集合，检查是否存在当前用户的条目。
    • 如果不存在，则创建一条新条目。
  • 将按钮标签改为 登出。
  • 显示 我的资料 按钮。

我们通过选择登录按钮，在属性面板中为 onClick 事件添加事件处理器。

然后添加事件处理器代码，如下所示：

1export function loginButton_click(event) { 
2  // 用户已登录
3  if(wixUsers.currentUser.loggedIn) {
4    // 注销用户
5    wixUsers.logout()
6    // 更新按钮状态
7    $w("#loginButton").label = "Login";
8    $w("#profileButton").hide();
9  }
10  // 用户未登录
11  else {
12    let userId;
13    let userEmail;
14  
15    // 提示用户登录
16    wixUsers.promptLogin( {"mode": "login"} )
17      .then( (user) => {
18        userId = user.id;
19        return user.getEmail();
20      } )
21      .then( (email) => {
22        // 检查集合中是否存在该用户的条目
23        userEmail = email;
24        return wixData.query("Members")
25          .eq("_id", userId)
26          .find();
27      } )
28      .then( (results) => {
29        // 如果未找到用户条目
30        if (results.items.length === 0) {
31          // 创建新条目
32          const toInsert = {
33            "_id": userId,
34            "email": userEmail
35          };
36          // 将条目插入集合
37          wixData.insert("Members", toInsert)
38            .catch( (err) => {
39              console.log(err);
40            } );
41        }
42        // 更新按钮状态
43        $w("#loginButton").label = "Logout";
44        $w("#profileButton").show();
45      } )
46      .catch( (err) => {
47        console.log(err);
48      } );
49  }
50}

当点击个人资料按钮时，我们使用事件处理器将会员引导至其个人资料页面。

我们通过选择个人资料按钮，在 属性与事件 面板中为 onClick 事件添加处理器。

然后添加事件处理器代码，如下所示：

1export function profileButton_click(event) {
2  wixLocation.to(`/Members/${wixUsers.currentUser.id}`); 
3}

API 列表

本文中使用的 API 如下。如需了解更多，请参阅 API 参考。

• wix-users：获取当前用户信息，并实现用户登录与登出。
• wix-data：用于查询和插入集合数据。
• wix-location：用于页面导航。

创建动态个人资料页面

动态个人资料页面的数据是在用户首次登录网站时生成的。用户可随时查看和更新自己的个人资料。

注意： 用户登录与登出功能仅在查看已发布网站时才能完全生效。您无法在预览模式下完整测试会员个人资料页面。

要创建会员个人资料页面，我们需要构建：

• 一个会员集合
• 一个个人资料页面
• 一个更新页面
• 一个登录页面

我们假设您熟悉以下概念：

• 数据库集合
• 集合权限
• 页面权限
• 动态项目页面
• 数据集模式
• 数据绑定

会员集合

我们首先创建一个名为 会员 的集合，用于存储所有会员数据。集合中的每个条目代表一位会员。

为了限制访问权限，确保会员只能查看和更新自己的信息，我们将“会员”集合的权限设置为 自定义使用，并选择以下选项：

• 谁可以读取此集合的内容？—— 站点会员作者
• 谁可以向此集合创建内容？—— 站点会员
• 谁可以更新此集合的内容？—— 站点会员作者
• 谁可以删除此集合的内容？—— 管理员

该集合可以包含您所需的任何会员信息。在此示例中，我们使用以下字段：

个人资料页面

接下来，我们创建一个用于显示用户个人资料的页面。这是一个连接到“会员”集合的动态项目页面。由于是动态项目页面，我们需要选择一个字段添加到 URL 中，以唯一标识每位会员。此处我们使用系统自动生成的会员 ID 作为唯一标识。

页面的 URL 如下：

[]

由于我们仅用于显示数据，因此将动态数据集的模式设置为 只读。

同时，通过 页面设置 的 权限 选项卡，将页面权限设为 仅会员，以确保只有已登录用户才能访问该页面。

页面本身使用元素来展示用户个人资料中的信息。在我们的示例中，即使用文本元素，并通过页面的动态数据集连接到“会员”集合中的字段。

最后，我们添加一个按钮元素。在创建更新页面后，我们将连接该按钮的链接，使其跳转至当前用户的更新页面。

当会员查看其个人资料页面时，会看到类似如下内容：

创建动态更新个人资料页面

更新页面与个人资料页面非常相似。它也是一个连接到“会员”集合的动态项目页面，并同样使用会员 ID 作为唯一标识字段。但由于不能在同一站点上有两个相同 URL 的页面，我们在 URL 中添加了 Update，使其变为如下形式：

由于我们在此页面上既显示数据又允许用户编辑数据，因此将动态数据集的模式设为 读写。

再次通过 页面设置 的 权限 选项卡，将页面权限设为 仅会员，以确保只有已登录用户才能访问该页面。

此次页面设计包含用于显示和编辑用户资料信息的元素。在我们的示例中，使用了下拉框、文本输入框和文本区域。所有这些元素均通过页面的动态数据集连接到“会员”集合中的字段。

最后，我们添加一个提交按钮，用于提交修改后的数据。我们通过 连接到数据 按钮完成连接，如下所示：

当会员查看其更新页面时，会看到如下内容：

现在我们已经创建了更新页面，可以返回个人资料页面，连接 更新 按钮。

我们通过 连接到数据 按钮完成连接，如下所示：