现代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
函数使用永久链接字段的编辑值重定向到“发布”路由。
结论
设置永久链接系统的基础非常简单。 棘手的部分是需要考虑的所有其他细节。 以下是一些要考虑的问题:
- 如果用户尝试定义已经为单独页面定义的永久链接,会发生什么情况?
- 定义永久链接时应实施哪种限制? (长度,允许的字符类型等)
- 如何根据博客文章的标题自动创建永久链接,而不是默认使用永久链接中的帖子ID?
这些问题是测试您的知识的好练习。 因此,您可能想在自己的时间内解决它们。 如果您想使用本文中创建的代码, 我已经为您创建了一个存储库 。
From: https://www.sitepoint.com/how-to-add-permalinks-to-a-meteor-project/