如何将固定链接添加到流星项目-CSDN博客

现代Web应用程序没有理由没有永久链接（也称为“漂亮的URL”）。它们使用户更容易记住，对于SEO十分重要，并且在与Meteor一起使用时，非常易于实现。

为了演示如何创建基本的永久链接系统，我们将构建一个准系统博客应用程序。默认情况下，每个帖子都会有一个包含帖子ID的URL，如下所示： http://localhost:3000/post/pCZLhbwqtGXPdTDMM 。

这是最简单的方法，但是生成的URL并不是很好，因此我们将学习如何用自定义值替换该ID。我们所做的更改将使我们拥有这样的URL： http://localhost:3000/post/hello-world 。

在此过程中，我们还将学习一些其他技巧，这些技巧在使用Meteor构建任何类型的Web应用程序时会派上用场。如果您想使用本文中创建的代码，我已经为您创建了一个存储库。

开始吧！

入门

在新的Meteor项目中，通过运行以下命令安装Iron Router ：

meteor add iron:router

对于初学者，Iron Router是Meteor开发人员中首选的路由软件包，它使我们能够将模板与URL路径相关联。

例如，我们可以创建一个“ home”模板，如下所示：

<template name="home">
    <form>
        <input type="text" name="title" placeholder="Title goes here...">
        <textarea name="content" placeholder="Entry goes here..."></textarea>
        <input type="submit" value="Add Post">
    </form>
</template>

然后是此模板的路由，如下所示：

Router.route('/', function(){
    this.render('home'); 
});

完成后，每当我们访问应用程序的根路径时，都会显示“ home”模板的内容。

写文章

要为我们的应用程序存储博客文章，我们需要创建一个“帖子”集合：

var Posts = new Meteor.Collection('posts');

在isClient条件中，我们将编写语句，一旦提交“ home”模板中的表单，便会向该集合添加数据：

if(Meteor.isClient) {
    Template.home.events({
        'submit form': function(event){
            event.preventDefault();
            var title = event.target.title.value;
            var content = event.target.content.value;
            Posts.insert({
                title: title,
                content: content
            });
        }
    });
}

我们还需要每个帖子都有一个“永久链接”字段，以定义将出现在URL中的值。我想将此字段默认设置为_id字段的值。

为此，请将insert()函数返回的值存储在变量中，然后调用update()函数，如下所示：

var post = Posts.insert({
    title: title,
    content: content
});

Posts.update(
   { _id: post },
   { $set: {permalink: post} }
);

使用此代码，我们可以：

创建一个新帖子。
将帖子的ID存储在名为post的变量中。
更新指定的帖子。
将“永久链接”字段设置为帖子ID的值。

例如，如果您创建了一个帖子，并且其ID为“ pCZLhbwqtGXPdTDMM”，则该帖子的结构将类似于以下内容：

{
    _id: 'pCZLhbwqtGXPdTDMM',
    title: 'Hello World',
    content: 'This is the content...',
    permalink: 'pCZLhbwqtGXPdTDMM'
}

您还可以根据帖子的标题创建一个永久链接，因此，如果帖子标题为“ Hello World”，则永久链接为“ hello-world”，但这超出了本教程的范围。

发布页面

每个博客帖子都需要自己的单独页面。对于初学者来说，这些页面将依赖于帖子的ID，而不是永久链接值（即使这些值与我们刚刚介绍的当前值相同）也是如此。

首先，为这些帖子页面创建一个“帖子”模板：

<template name="post">
    <h1>{{title}}</h1>
    <div class="entry">
        {{content}}
    </div>
</template>

然后创建一条路线：

Router.route('/post/:_id', function(){
    var postId = this.params._id;
    this.render('post', {
        data: function(){
            return Posts.findOne(postId);
        }
    });
});

在此代码中，我们是：

从URL中提取_id字段。
将该值存储在“ postId”变量中。
根据此ID检索文档。

结果，如果帖子的ID为“ pCZLhbwqtGXPdTDMM”，则可以通过URL http://localhost:3000/post/pCZLhbwqtGXPdTDMM访问该http://localhost:3000/post/pCZLhbwqtGXPdTDMM 。

您不需要URL的“ / post”部分，可以使用以下命令更改路由代码以删除URL的这一部分：

Router.route('/:_id', function(){
    var postId = this.params._id;
    this.render('post', {
        data: function(){
            return Posts.findOne(postId);
        }
    });
});

进行此更改后，同一帖子页面的URL将变为http://localhost:3000/pCZLhbwqtGXPdTDMM 。

编辑“永久链接”字段

我们即将为应用程序添加永久链接支持，但首先，让我们编写代码来编辑“永久链接”字段。为此，我们需要通过添加“永久链接”字段来更新“发布”模板。我们还将向周围的div元素添加一个contentEditable属性。使用此属性，我们将能够直接在页面内编辑永久链接字段，尽管我们需要构建使之起作用的逻辑。模板的结果代码如下所示：

<template name="post">
    <h1>{{title}}</h1>
    <div class="permalink" contenteditable="true">{{permalink}}</div>
    <div class="entry">
        {{content}}
    </div>
</template>

要创建前面提到的业务逻辑，请创建一个事件，该事件允许用户编辑“永久链接”元素的值，然后按“返回”键以将该值保存到数据库。创建此类事件的代码如下所示：

Template.post.events({
    'keypress .permalink': function(event, template){
        var permalink = template.find('.permalink').innerHTML;
        if(event.which === 13){
            event.preventDefault();
            Posts.update({_id: this._id}, {$set: {permalink: permalink}});
            event.target.blur();
        }
    }
});

运作方式如下：

当用户在专注于具有permalink类的元素上同时按下键时，将触发keypress事件。
使用template.find函数检索“永久链接”字段的内容，并将其存储在“永久链接”变量中。
如果按下“返回”键，则“永久链接”变量中的值将保存到数据库中，并覆盖旧值。

完成最后一步后，用户界面将如下所示：

流星永久链接

添加永久链接支持

到目前为止，我们已经设置了几乎所有需要的代码。但是，要使永久链接按计划工作，您必须按以下方式更改处理路由的代码：

Router.route('/post/:permalink', function(){
    var permalinkValue = this.params.permalink;
    this.render('post', {
        data: function(){
            return Posts.findOne({permalink: permalinkValue});
        }
    });
});

在这里，发生了一些事情：

路径路径包含“永久链接”参数而不是“ _id”参数。
除了使用“ postId”变量，我们还有一个“ permalinkValue”变量。
对findOne函数进行了修改，使其根据permalink字段而不是_id字段的值进行搜索。

结果，URL http://localhost:3000/post/pCZLhbwqtGXPdTDMM将不再起作用，但http://localhost:3000/post/hello-world将起作用。

整洁，不是吗？

更改固定链接

目前，如果用户更改页面的永久链接，则该页面将中断。我们可以解决此问题，以便在修改永久链接后，立即将用户重定向到新路由。

为此，请在帖子的路线中添加一个“名称”参数：

Router.route('/post/:permalink', function(){
    var permalinkValue = this.params.permalink;
    this.render('post', {
        data: function(){
            return Posts.findOne({permalink: permalinkValue});
        }
    });
}, {
    name: 'post'
});

然后添加一个Router.go功能的keypress事件：

Template.post.events({
    'keypress .permalink': function(event, template){
        var permalink = template.find('.permalink').innerHTML;
        if(event.which == 13){
            event.preventDefault();
            Posts.update({_id: this._id}, {$set: {permalink: permalink}});
            event.target.blur();
            Router.go('post', {permalink: permalink});
        }
    }
});

在这里，我们使用此Router.go函数使用永久链接字段的编辑值重定向到“发布”路由。