Meteor：使用Iron Router的用户配置文件页面 [英] Meteor: User Profile Page with Iron Router

问题描述

我正在努力使用Iron Router创建用户个人资料页面，该路由器位于 localhost：3000 /：username 。个人资料页面应具有以下特征：

I'm struggling to create a user profile page, using Iron Router, which is located at localhost:3000/:username. The profile page should have the following characteristics:

• 公共视图 - 任何人都可以看到有关用户的基本信息


• 私密视图 - 如果客户在登录时访问自己的个人资料页面，则会显示他或她的敏感用户数据并且具有编辑功能


• 正在加载视图 - 正在提取用户个人资料数据，显示加载屏幕


• 未找到视图 - 如果在URL中输入了无效的用户名，则返回未找到的页面。

• Public view - anyone can see basic information about the user
• Private view - if the client visits his or her own profile page while signed-in, his or her sensitive user data is shown and they have edit capabilities
• Loading view - while the user profile data is being fetched, show a loading screen
• Not found view - if invalid username is entered into the URL, return a not-found page.

公共视图和私有视图应存在于相同的 URL路径中。根据客户端的凭据，他们会看到一个或另一个没有重定向到其他页面。未找到的页面也不应该重定向，这样如果输入无效的用户名，用户仍然可以在浏览器URL栏中看到无效的URL。

The public view and private view should exist at the same URL path. Depending on the client's credentials, they see one or the other without a redirect to a different page. The not found page should also not redirect, this way the user can still see the invalid URL in the browser URL bar if the enter an invalid username.

我的router.js文件：

My router.js file:

this.route('profile', {
    controller: 'ProfileController',
    path: '/:username'
  });

在 ProfileController 中，我正在尝试凑下来：

Within ProfileController, I'm trying to scrape together the following:

• onBeforeAction - 显示加载屏幕;确定用户名是否存在（即如果URL有效）
  
  
  
  • 显示未找到视图，私人配置文件或公共配置文件
  
  
  • onBeforeAction - show loading screen; determine if username exists (aka if URL is valid)
    • Either show not found view, private profile, or public profile

    谢谢！

    推荐答案

    幸运的是，您正在寻找的每个特征都可以在插件中找到，所以你甚至都不会我必须深入定义你自己的钩子。

    Luckyly, every characteristics you are looking for are available as baked in plugins so you won't even have to dive in defining your own hooks.

    请注意我使用 iron：router@1.0.0-pre2 ，这对于跟上最新的东西很重要，目前只有两个小怪癖，我希望很快得到解决。

    Notice that I'm using iron:router@1.0.0-pre2, this is important to keep up with the latest stuff, there are just two minor quirks at the moment that I hope will get fixed soon.

    让我们先来看看用户个人资料发布，以用户名作为参数。

    Let's start with the user profile publication, which take the username as argument.

    server / collections / users.js

    Meteor.publish("userProfile",function(username){
        // simulate network latency by sleeping 2s
        Meteor._sleepForMs(2000);
        // try to find the user by username
        var user=Meteor.users.findOne({
            username:username
        });
        // if we can't find it, mark the subscription as ready and quit
        if(!user){
            this.ready();
            return;
        }
        // if the user we want to display the profile is the currently logged in user...
        if(this.userId==user._id){
            // then we return the corresponding full document via a cursor
            return Meteor.users.find(this.userId);
        }
        else{
            // if we are viewing only the public part, strip the "profile"
            // property from the fetched document, you might want to
            // set only a nested property of the profile as private
            // instead of the whole property
            return Meteor.users.find(user._id,{
                fields:{
                    "profile":0
                }
            });
        }
    });
    

    让我们继续使用个人资料模板，这里没什么特别的，我们会将用户名显示为公共数据，如果我们正在查看私人资料，请显示我们假设存储在 profile.name 中的用户真实姓名。

    Let's continue with the profile template, nothing too fancy here, we'll display the username as public data, and if we are viewing the private profile, display the user real name that we assume is stored in profile.name.

    client / views / profile / profile.html

    <template name="profile">
        Username: {{username}}<br>
        {{! with acts as an if : the following part won't be displayed
            if the user document has no profile property}}
        {{#with profile}}
            Profile name : {{name}}
        {{/with}}
    </template>
    

    然后我们需要在全局路由器配置中为配置文件视图定义路由：

    Then we need to define a route for the profile view in the global router configuration :

    lib / router.js

    // define the (usually global) loading template
    Router.configure({
        loadingTemplate:"loading"
    });
    
    // add the dataNotFound plugin, which is responsible for
    // rendering the dataNotFound template if your RouteController
    // data function returns a falsy value
    Router.plugin("dataNotFound",{
        notFoundTemplate: "dataNotFound"
    });
    
    Router.route("/profile/:username",{
        name:"profile",
        controller:"ProfileController"
    });
    

    请注意 iron：router 现在需要您可以在共享目录中定义路由和路由控制器（通常这是项目根目录下的 lib / 目录），可供客户端和服务器使用。

    Note that iron:router now requires that you define your routes and route controllers in the shared directory (usually this is the lib/ dir at the root of your project) available to both client and server.

    现在最棘手的部分是 ProfileController 定义：

    Now for the trickiest part, the ProfileController definition :

    lib / controllers / profile.js

    ProfileController=RouteController.extend({
        template:"profile",
        waitOn:function(){
            return Meteor.subscribe("userProfile",this.params.username);
        },
        data:function(){
            var username=Router.current().params.username;
            return Meteor.users.findOne({
                username:username
            });
        }
    });
    

    当铁：路由器检测到你'在 RouteController 中重新使用 waitOn 它现在将自动添加默认 loading hook，负责在订阅尚未准备好时呈现 loadingTemplate 。

    When iron:router detects that you're using waitOn in a RouteController it will now automatically add the default loading hook which is responsible for rendering the loadingTemplate while the subscription is not yet ready.

    我会现在解决我在回答问题时谈到的两个小错误。

    I'll address now the two minor bugs I've talked about in the beggining of my answer.

    首先，官方铁：路由器指南（你一定要阅读） http://eventedmind.github.io/iron-router/ 提到您应该传递给 dataNotFound 插件的选项名称是 dataNotFoundTemplate 但截至28-09-2014这不起作用，你需要使用遗留名称 notFoundTemplate ，这可能会在几天内得到修复。

    First, the official iron:router guide (which you should definitely read) http://eventedmind.github.io/iron-router/ mentions that the name of the option you should pass to the dataNotFound plugin is dataNotFoundTemplate but as of 28-09-2014 this won't work, you need to use the legacy name notFoundTemplate, this is likely to get fixed in a matter of days.

    c中我的 data 函数的代码也一样ontroller：我通常使用反直觉语法 Router.current（）。params 来访问路由参数，通常 this.params 本来是合适的常规语法。这是另一个尚未解决的问题。 https://github.com/EventedMind/iron-router/issues/857

    The same goes for the code of my data function in the controller : I've used the counter-intuitive syntax Router.current().params to access the route parameters when normally this.params would have been the appropriate regular syntax. This is another yet-to-be-addressed issue. https://github.com/EventedMind/iron-router/issues/857

    这篇关于Meteor：使用Iron Router的用户配置文件页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！