添加流星链接代码

现代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} }
);

使用此代码，我们可以：

1. 创建一个新帖子。
2. 将帖子的ID存储在名为post的变量中。
3. 更新指定的帖子。
4. 将“永久链接”字段设置为帖子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>

免费学习PHP！

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

原价$ 11.95 您的完全免费

免费获得这本书

然后创建一条路线：

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

在此代码中，我们是：

1. 从URL中提取_id字段。
2. 将该值存储在“ postId”变量中。
3. 根据此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();
}
}
});

运作方式如下：

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

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

添加永久链接支持

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

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

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

1. 路径路径包含“永久链接”参数而不是“ _id”参数。
2. 除了使用“ postId”变量，我们还有一个“ permalinkValue”变量。
3. 将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函数使用永久链接字段的编辑值重定向到“发布”路由。

结论

设置永久链接系统的基础非常简单。 棘手的部分是需要考虑的所有其他细节。 以下是一些要考虑的问题：

• 如果用户尝试定义已经为单独页面定义的永久链接，会发生什么情况？
• 定义永久链接时应实施哪种限制？ （长度，允许的字符类型等）
• 如何根据博客文章的标题自动创建永久链接，而不是默认使用永久链接中的帖子ID？

这些问题是测试您的知识的好练习。 因此，您可能想在自己的时间内解决它们。 如果您想使用本文中创建的代码， 我已经为您创建了一个存储库 。

翻译自: https://www.sitepoint.com/how-to-add-permalinks-to-a-meteor-project/

添加流星链接代码