在本教程中，我们将从头开始构建一个笔记应用（类似于 Evernote），并将其部署到 Firefox OS！查看 在线演示。

一个持久化笔记应用需要一个地方来存储所有用户的笔记（这样其他人就无法读取）。为此，我们将使用我自己的后端解决方案，称为 Sproute。Sproute 是一个托管的 Web 框架，用于快速构建动态 Web 应用。

首先使用唯一的子域 创建一个帐户，然后通过 http://<mysubdomain>.sproute.io/admin 访问仪表板。您必须使用与注册 Sprotue 相同的详细信息登录。

模型

在 Sproute 中，有一个名为 模型 的概念。模型定义了我们应用中的动态数据，并具有用于数据完整性的属性。创建一个名为 notes 的新模型，并使用以下字段和属性

• body：文本，必填，最小值：1
• sharing：文本，允许的值：public, private，默认值：private

为笔记填写模型表单

body 字段将存储笔记的内容。sharing 字段将指定笔记是否可以被其他人（通过直接链接）查看，或者仅供所有者查看。这些是我们需要定义的所有数据，其他所有内容都由 内置字段 涵盖。

列出笔记

我们需要一种方法来列出用户可用的笔记。这可以通过页面来完成。页面是包含嵌入式 模板标签 的 HTML，用于检索和处理数据。

打开 index 页面。这是人们查看您的空间时的主页。我们将在此处列出笔记。添加以下内容

{{ get /data/notes?sort=_lastUpdated,desc as notes }}

所有数据都通过 HTTP 接口 检索，因此 {{ get }} 标签必须使用 URL。上面的请求正在为登录的用户检索所有笔记，并将结果存储在一个名为 notes 的变量中。我们使用查询参数按最后修改时间（下划线表示内置字段）对结果进行排序。

让我们在列表中显示每个笔记

    {{ each notes as note }}
        

        {{ word note.body 0 5 }}
        
    {{ / }}

{{ word }} 模板标签将从正文内容中提取前 5 个单词。我们链接到一个尚未创建的页面，其 URL 为 /view/<id>。note._id 是一个内置的唯一标识符。

在“index”页面中添加上述代码

创建笔记

在为笔记创建 view 页面之前，让我们创建一个用于创建笔记的新页面。创建一个名为 create 的新页面。添加以下 HTML

    

    

        Private
        Public
    
    Create Note

很简单！如上所述，所有数据都通过 HTTP 接口检索和修改。这意味着我们可以使用简单的 HTML 表单来创建一个新笔记。goto 查询参数将把用户重定向到该 URL。

因为这是一个新页面，我们需要创建一个新路由，以便该页面可访问。一个 路由 是请求 URL 的模式，如果匹配，则会呈现一个页面。索引页面已经存在一个路由。点击路由并创建一个新的路由，内容如下

• 路由：/create，页面：create。

到“create”页面的新路由

用户登录和注册

用户帐户内置于 Sproute 中，但我们仍然需要创建一个注册和登录页面。值得庆幸的是，这也是一个简单的 HTML 表单，因此创建一个名为 users 的新页面并添加以下内容

Login

    
        
Username:
        
    
    
        
Password:
        
    
    Login

您可以通过复制登录表单并将操作属性替换为 /api/register 来在同一页面上添加注册表单。创建两个新的路由，内容如下

• 路由：/login，页面：users
• 路由：/register，页面：users

查看和更新笔记

之前我们创建了一个查看笔记的链接。这也将是我们允许用户修改笔记的地方。创建一个名为 view 的新页面并添加以下内容

{{ get /data/notes/_id/:params.id?single=true admin as note }}

{{ if note.sharing eq private }}
    {{ if note._creator neq :session.user._id }}
        {{ error This note is private }}
    {{ / }}
{{ / }}


    
{{note.body}}
    

       Private
       Public
    
    Update Note

我们发出请求以获取传递到 URL 中的笔记的数据（通过 params 对象）。查询参数 single=true 将只返回对象而不是一个项目集合。admin 将使用指定的用户类型运行请求。接下来，我们检查笔记是否为私有。如果是，则如果用户不是创建者，则抛出错误。

更新表单与创建表单非常相似。我们只需要将操作更改为更新与 URL 中的 _id 匹配的笔记。

此页面需要一个稍微复杂的路由。我们需要在路由中使用占位符，以便 /view/anything 仍然匹配 view 页面并将 anything 存储在变量中。

创建一个具有以下内容的路由

• 路由：/view/:id，页面：view

现在您可以看到 params.id 来自哪里。params 是路由中所有占位符及其匹配值的object。

权限

Sproute 的最后一个重要概念是 权限。权限就像路由一样，请求的 URL 与模式匹配，但它不是指向页面，而是针对所需的 用户类型 进行验证。

点击权限并添加以下内容

• 方法：GET，路由：/data/notes，用户：Owner
• 方法：GET，路由：/data/notes/*，用户：Owner

这将确保列出的唯一笔记是用户创建的笔记（即所有者）。由于第二个权限，我们需要将 {{ get }} 请求作为 admin 运行，否则即使笔记是公开的，它也会对所有人（除了管理员和创建者）失败。

添加检索笔记的权限

Firefox OS 支持

Sproute 可以通过创建一个包含 托管应用 的页面非常轻松地支持 Firefox OS 上的 清单 JSON 数据 和路由：/manifest.webapp。

创建一个名为 manifest 的新页面，内容如下

{
    "name": "{{self.name}}",
    "description": "A persistent notes app",
    "launch_path": "/",
    "icons": {
        "128": "/absolute/path/to/icon"
    }
}

创建一个路由，其模式为 /manifest.webapp，指向清单页面。

我们完成了！通过使用指向清单的链接（http://notes.sproute.io/manifest.webapp）在 应用管理器 中测试此功能。Sproute 是开源的，并在 GitHub 上 根据 Mozilla 公共许可证 v2 发布，因此您可以克隆存储库以进行私有托管。

移动设备宽度下的笔记应用