在开始之前，请确保您了解 google requires 的含义，尤其是 pretty 和 ugly 网址的使用。现在让我们看看实现：
客户端
在客户端，您只有一个 html 页面，它通过 AJAX 调用与服务器动态交互。这就是SPA的意义所在。客户端中的所有a 标签都是在我的应用程序中动态创建的，稍后我们将了解如何使这些链接对服务器中的 google 机器人可见。每个这样的a 标签都需要能够在href 标签中有一个pretty URL，这样google 的机器人才能抓取它。您不希望在客户端单击时使用 href 部分（即使您确实希望服务器能够解析它，我们稍后会看到），因为我们可能不想要一个新页面加载，只是为了进行 AJAX 调用，获取一些数据以显示在页面的一部分并通过 javascript 更改 URL（例如使用 HTML5 pushstate 或 Durandaljs）。因此，我们既有 google 的 href 属性，也有 onclick 属性，当用户点击链接时，它会完成这项工作。现在，由于我使用push-state，我不想在 URL 上添加任何#，所以典型的a 标记可能如下所示：
<a href="http://www.xyz.com/#!/category/subCategory/product111" onClick="loadProduct('category','subCategory','product111')>see product111...</a>
“类别”和“子类别”可能是其他短语，例如电器商店的“通信”和“电话”或“计算机”和“笔记本电脑”。显然会有许多不同的类别和子类别。如您所见，链接直接指向类别、子类别和产品，而不是指向特定“商店”页面的额外参数，例如http://www.xyz.com/store/category/subCategory/product111。这是因为我更喜欢更短更简单的链接。这意味着我不会有与我的“页面”之一同名的类别，即“关于”。
如何通过AJAX（onclick部分）加载数据我就不说了，在google上搜索一下，有很多很好的解释。这里我要提到的唯一重要的事情是，当用户单击此链接时，我希望浏览器中的 URL 看起来像这样：
http://www.xyz.com/category/subCategory/product111。这是没有发送到服务器的 URL！请记住，这是一个 SPA，客户端和服务器之间的所有交互都是通过 AJAX 完成的，根本没有链接！所有“页面”都在客户端实现，并且不同的 URL 不会调用服务器（服务器确实需要知道如何处理这些 URL，以防它们被用作从另一个站点到您站点的外部链接，我们稍后会在服务器端部分看到这一点）。现在，这被杜兰达尔处理得很好。我强烈推荐它，但如果您更喜欢其他技术，也可以跳过这部分。如果您确实选择了它，并且您也像我一样使用 MS Visual Studio Express 2012 for Web，您可以安装 Durandal Starter Kit，然后在 shell.js 中使用如下内容：
define(['plugins/router', 'durandal/app'], function (router, app) {
return {
router: router,
activate: function () {
router.map([
{ route: '', title: 'Store', moduleId: 'viewmodels/store', nav: true },
{ route: 'about', moduleId: 'viewmodels/about', nav: true }
])
.buildNavigationModel()
.mapUnknownRoutes(function (instruction) {
instruction.config.moduleId = 'viewmodels/store';
instruction.fragment = instruction.fragment.replace("!/", ""); // for pretty-URLs, '#' already removed because of push-state, only ! remains
return instruction;
});
return router.activate({ pushState: true });
}
};
});
这里有一些重要的事情需要注意：
- 第一条路由（带有
route:''）用于其中没有额外数据的URL，即http://www.xyz.com。在此页面中，您使用 AJAX 加载一般数据。这个页面实际上可能根本没有a 标签。您需要添加以下标签，以便 google 的机器人知道如何处理它：
<meta name="fragment" content="!">。这个标签将使 google 的机器人将 URL 转换为 www.xyz.com?_escaped_fragment_=，我们稍后会看到。
- “关于”路由只是指向您可能希望在 Web 应用程序中使用的其他“页面”的链接的示例。
- 现在，棘手的部分是没有“类别”路线，并且可能有许多不同的类别 - 没有一个具有预定义的路线。这就是
mapUnknownRoutes 的用武之地。它将这些未知路线映射到“商店”路线，并删除任何“！”如果它是由 google 的搜索引擎生成的 pretty URL，则来自 URL。 'store' 路由获取 'fragment' 属性中的信息并进行 AJAX 调用以获取数据、显示数据并在本地更改 URL。在我的应用程序中，我不会为每个此类调用加载不同的页面；我只更改与此数据相关的页面部分，并在本地更改 URL。
- 注意
pushState:true，它指示 Durandal 使用推送状态 URL。
这就是我们在客户端所需要的。它也可以通过散列 URL 实现（在 Durandal 中，您只需删除 pushState:true 即可）。更复杂的部分（至少对我来说......）是服务器部分：
服务器端
我在服务器端使用MVC 4.5 和WebAPI 控制器。服务器实际上需要处理 3 种类型的 URL：由 google 生成的 URL - pretty 和 ugly 以及与客户端浏览器中显示的格式相同的“简单”URL。让我们看看如何做到这一点：
漂亮的 URL 和“简单”的 URL 首先被服务器解释为试图引用一个不存在的控制器。服务器看到类似http://www.xyz.com/category/subCategory/product111 的内容并查找名为“类别”的控制器。因此，在web.config 中，我添加了以下行以将它们重定向到特定的错误处理控制器：
<customErrors mode="On" defaultRedirect="Error">
<error statusCode="404" redirect="Error" />
</customErrors><br/>
现在，这会将 URL 转换为类似：http://www.xyz.com/Error?aspxerrorpath=/category/subCategory/product111。我希望将 URL 发送到将通过 AJAX 加载数据的客户端，所以这里的技巧是调用默认的“索引”控制器，就好像不引用任何控制器一样；我通过在所有 'category' 和 'subCategory' 参数之前向 URL 添加 哈希来做到这一点；散列 URL 不需要任何特殊控制器，除了默认的“索引”控制器，数据被发送到客户端，然后删除散列并使用散列后的信息通过 AJAX 加载数据。这是错误处理程序控制器代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Routing;
namespace eShop.Controllers
{
public class ErrorController : ApiController
{
[HttpGet, HttpPost, HttpPut, HttpDelete, HttpHead, HttpOptions, AcceptVerbs("PATCH"), AllowAnonymous]
public HttpResponseMessage Handle404()
{
string [] parts = Request.RequestUri.OriginalString.Split(new[] { '?' }, StringSplitOptions.RemoveEmptyEntries);
string parameters = parts[ 1 ].Replace("aspxerrorpath=","");
var response = Request.CreateResponse(HttpStatusCode.Redirect);
response.Headers.Location = new Uri(parts[0].Replace("Error","") + string.Format("#{0}", parameters));
return response;
}
}
}
但是 Ugly URLs 呢？这些是由谷歌的机器人创建的，应该返回包含用户在浏览器中看到的所有数据的纯 HTML。为此，我使用phantomjs。 Phantom 是一个无头浏览器，做浏览器在客户端所做的事情——但在服务器端。换句话说，Phantom 知道（除其他外）如何通过 URL 获取网页，解析它，包括运行其中的所有 javascript 代码（以及通过 AJAX 调用获取数据），并将反映的 HTML 返回给您DOM。如果您使用的是 MS Visual Studio Express，您可能希望通过此link 安装幻像。
但首先，当一个丑陋的 URL 被发送到服务器时，我们必须捕获它；为此，我在“App_start”文件夹中添加了以下文件：
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace eShop.App_Start
{
public class AjaxCrawlableAttribute : ActionFilterAttribute
{
private const string Fragment = "_escaped_fragment_";
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var request = filterContext.RequestContext.HttpContext.Request;
if (request.QueryString[Fragment] != null)
{
var url = request.Url.ToString().Replace("?_escaped_fragment_=", "#");
filterContext.Result = new RedirectToRouteResult(
new RouteValueDictionary { { "controller", "HtmlSnapshot" }, { "action", "returnHTML" }, { "url", url } });
}
return;
}
}
}
这也是在“App_start”中从“filterConfig.cs”调用的：
using System.Web.Mvc;
using eShop.App_Start;
namespace eShop
{
public class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
filters.Add(new AjaxCrawlableAttribute());
}
}
}
如您所见，“AjaxCrawlableAttribute”将丑陋的 URL 路由到名为“HtmlSnapshot”的控制器，这是这个控制器：
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace eShop.Controllers
{
public class HtmlSnapshotController : Controller
{
public ActionResult returnHTML(string url)
{
string appRoot = Path.GetDirectoryName(AppDomain.CurrentDomain.BaseDirectory);
var startInfo = new ProcessStartInfo
{
Arguments = String.Format("{0} {1}", Path.Combine(appRoot, "seo\\createSnapshot.js"), url),
FileName = Path.Combine(appRoot, "bin\\phantomjs.exe"),
UseShellExecute = false,
CreateNoWindow = true,
RedirectStandardOutput = true,
RedirectStandardError = true,
RedirectStandardInput = true,
StandardOutputEncoding = System.Text.Encoding.UTF8
};
var p = new Process();
p.StartInfo = startInfo;
p.Start();
string output = p.StandardOutput.ReadToEnd();
p.WaitForExit();
ViewData["result"] = output;
return View();
}
}
}
关联的view很简单，就一行代码：
@Html.Raw( ViewBag.result )
正如您在控制器中看到的，幻象在我创建的名为seo 的文件夹下加载了一个名为createSnapshot.js 的javascript 文件。这是这个 javascript 文件：
var page = require('webpage').create();
var system = require('system');
var lastReceived = new Date().getTime();
var requestCount = 0;
var responseCount = 0;
var requestIds = [];
var startTime = new Date().getTime();
page.onResourceReceived = function (response) {
if (requestIds.indexOf(response.id) !== -1) {
lastReceived = new Date().getTime();
responseCount++;
requestIds[requestIds.indexOf(response.id)] = null;
}
};
page.onResourceRequested = function (request) {
if (requestIds.indexOf(request.id) === -1) {
requestIds.push(request.id);
requestCount++;
}
};
function checkLoaded() {
return page.evaluate(function () {
return document.all["compositionComplete"];
}) != null;
}
// Open the page
page.open(system.args[1], function () { });
var checkComplete = function () {
// We don't allow it to take longer than 5 seconds but
// don't return until all requests are finished
if ((new Date().getTime() - lastReceived > 300 && requestCount === responseCount) || new Date().getTime() - startTime > 10000 || checkLoaded()) {
clearInterval(checkCompleteInterval);
var result = page.content;
//result = result.substring(0, 10000);
console.log(result);
//console.log(results);
phantom.exit();
}
}
// Let us check to see if the page is finished rendering
var checkCompleteInterval = setInterval(checkComplete, 300);
我首先要感谢Thomas Davis 提供了我从中获得基本代码的页面:-)。
你会注意到这里有一些奇怪的东西：phantom 不断地重新加载页面，直到checkLoaded() 函数返回 true。这是为什么？这是因为我的特定 SPA 进行了多次 AJAX 调用以获取所有数据并将其放置在我页面上的 DOM 中，并且在将 DOM 的 HTML 反射返回给我之前，幻影无法知道所有调用何时完成。我在这里所做的是在最后的 AJAX 调用之后添加一个<span id='compositionComplete'></span>，这样如果这个标签存在，我就知道 DOM 已经完成。我这样做是为了响应 Durandal 的 compositionComplete 事件，请参阅 here 了解更多信息。如果这在 10 秒内没有发生，我放弃（最多只需要一秒钟）。返回的 HTML 包含用户在浏览器中看到的所有链接。该脚本将无法正常工作，因为 HTML 快照中确实存在的 <script> 标记未引用正确的 URL。这也可以在 javascript 幻像文件中进行更改，但我认为这不是必需的，因为 HTML snapshort 仅由 google 用于获取 a 链接而不是运行 javascript；这些链接 do 引用了一个漂亮的 URL，如果事实上，如果您尝试在浏览器中查看 HTML 快照，您将收到 javascript 错误，但所有链接都将正常工作并将您定向到服务器一次这次再次使用漂亮的 URL 获取完整的工作页面。
就是这个。现在服务器知道如何处理漂亮和丑陋的 URL，在服务器和客户端都启用了推送状态。所有丑陋的 URL 都使用 phantom 以相同的方式处理，因此无需为每种类型的调用创建单独的控制器。
您可能希望更改的一件事是不要进行一般的“类别/子类别/产品”调用，而是添加一个“商店”，以便链接看起来像：http://www.xyz.com/store/category/subCategory/product111。这将避免我的解决方案中的问题，即所有无效的 URL 都被视为实际上是对“索引”控制器的调用，我认为这些可以在“存储”控制器中处理，而无需添加到 web.config我在上面展示了。