javascript - MEANJS 用户配置文件功能

Question

我正在尝试使用 meanjs 构建一个简单的应用程序。我有 2 个模块:标准用户模块和帖子模块。我想要实现的是一个用户个人资料页面，它将显示有关特定用户的一些信息并列出属于该用户的帖子。您可以将其视为 Twitter 个人资料页面。我认为这也是最好的/users/username 形状的 url 结构。但我对这一切还很陌生，现在卡住了。这是我到目前为止所做的:

我将这些行添加到 users.server.routes.js 中:

app.route('/api/users/:userName').get(users.userByUsername);

app.param('userName', users.userByUsername);

像这样向服务器控件添加了一个函数:

exports.userByUsername = function(req, res, next, username) {
    User.findOne({
        username: username
    }).exec(function(err, user) {
        if (err) return next(err);
        if (!user) return next(new Error('Failed to load User ' + username));
        req.profile = user;
        next();
    });
};

我将这部分添加到 users.client.routes.js

state('view.profile', {
                url: '/users/:username',
                templateUrl: 'modules/users/views/view-profile.client.view.html'
            });

我创建了一个这样的新 View :

<section class="row" data-ng-controller="ViewProfileController" ng-init="findUser()">
    <div class="col-xs-offset-1 col-xs-10 col-md-offset-4 col-md-4">
        ...        

    </div>
</section>

最后我创建了一个新的客户端 Controller :

angular.module('users').controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
    function($scope, $http, $location, Users, Authentication, $stateParams) {
        $scope.user = Authentication.user;


        $scope.findUser = function () {

             $scope.ourUser = Users.get({
                username: $stateParams.username
            });

        };
    }
]);

当我尝试打开任何用户名的用户/用户名页面时，它只会给我主页。任何想法有什么问题或缺少什么？提前致谢。

Answer 1

我终于弄明白了，我想在这里详细说明解决方案。我不确定这是最好的方法，但我就是这样做的。欢迎提出任何建议。让我们开始吧。

由于我们要使用.../user/username URL 结构，我们首先需要将这些行添加到users.server.route.js 文件中。

app.route('/api/users/:username').get(users.read);
app.param('username', users.userByUsername);

现在我们必须将我们的 userByUsername 中间件添加到 users.profile.server.controller.js 中:

/*
* user middleware
* */
exports.userByUsername = function(req, res, next, username) {
User.findOne({
    username: username
}, '_id displayName username created profileImageURL tagLine').exec(function(err, user) {
    if (err) return next(err);
    if (!user) return next(new Error('Failed to load User ' + username));
    req.user = user;
    next();
});
};

您的集合中可能没有tagLine 字段，或者您可能有其他自定义字段。因此，请记住更改该部分并包含或排除所需的字段。切勿将那部分留空。因为，出于安全原因，您不想获取所有用户信息，包括电子邮件、密码哈希等。任何登录用户只需知道用户名即可获取此信息。

此时当我们在浏览器的地址栏中输入.../api/users/username时，我们必须得到正确的json。这很好，但我们还想获得属于该用户的帖子。所以我们需要为帖子做这样的事情。

我将这一行添加到 posts.server.routes.js:

app.route('/api/posts/of/:userid').get(posts.listOf);

...这部分到posts.server.controller.js:

exports.listOf = function(req, res) { Post.find( { user: req.params.userid }).sort('-created').exec(function(err, posts) {
if (err) {
    return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
    });
} else {
    res.jsonp(posts);
}
});
};

现在，当您在地址栏中键入 .../api/posts/of/userid 时，您必须获得正确的 userid 帖子的 json。

因此下一步是执行客户端工作，并连接到 REST 端点。

打开 users.client.routes.js 并添加:

state('users', {
            url: '/users/:username',
            templateUrl: 'modules/users/views/view-profile.client.view.html'
        });

模板 Url 指向新创建的 html 文件，我想将其用于用户个人资料页面。所以在 client/views 文件夹下创建这个文件:

<div class="col-md-12" data-ng-controller="ViewProfileController" data-ng-init="findUser()">
...
{{ ourUser }}
<hr />
{{ userPosts }}
....

你可以随意填写这个文件。我为此 View 创建了一个新 Controller 。如您所见，它的名称是 ViewProfileController。我有一个 findUser 函数来完成这项工作。这是 Controller 代码:

'use strict';

angular.module('users').controller('ViewProfileController', ['$scope', '$http', '$location', 'Users', 'Authentication', '$stateParams', 
function($scope, $http, $location, Users, Authentication, $stateParams) {
    $scope.user = Authentication.user;

    $scope.findUser = function () {

       $scope.ourUser = Users.get({
            username: $stateParams.username
        }).$promise.then( function(ourUser) {
               var userPostsPromise = $http.get('api/posts/of/' + ourUser._id);
               userPostsPromise.success(function(data) {
                   $scope.userPosts=data;
                   $scope.ourUser=ourUser;
               });
               userPostsPromise.error(function() {
                   alert('Something wrong!');
               });
           }
       );
    };

}
]);

我没有为帖子创建新的 Angular 路线。如您所见，我使用 AJAX 请求来提取帖子。我考虑过其他选项，例如创建指令等。最后，我发现这种方式最舒服。

就是这样。现在您可以打开您的 View 文件 view-profile.client.view 并开始装饰。您可以在那里访问 ourUser 和 userPosts。此个人资料页面的 URL 是:.../users/username。

希望对您有所帮助。