[英]MEANJS user profile functionality
我正在尝试使用meanjs构建一个简单的应用程序。 我有2个模块:标准用户模块和posts模块。 我想要实现的是一个用户个人资料页面,它将显示有关特定用户的一些信息以及属于该用户的列表帖子。 您可以将其视为推特个人资料页面。 我认为这也是最好/用户/用户名形状的网址结构。 但我对这一切都很新,现在卡住了。 这是我到目前为止所做的:
我将这些行添加到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'
});
我创建了一个像这样的新视图:
<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>
最后我创建了一个新的客户端控制器:
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
});
};
}
]);
当我尝试打开任何用户名的用户/用户名页面时,它只给我主要的主页。 任何想法有什么不对或缺少什么? 提前致谢。
我终于明白了,我想在此详细介绍解决方案。 我不确定这是最好的方法,但这就是我的方式。 欢迎任何建议。 开始吧。
由于我们要使用.../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
时,您必须获得正确的用户ID帖子的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 }}
....
您可以根据需要填写此文件。 我为这个视图创建了一个新的控制器。 正如您所看到的,它的名称是ViewProfileController
。 我有一个findUser
函数来完成这项工作。 这是控制器代码:
'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!');
});
}
);
};
}
]);
我没有为帖子创建新的角度路线。 正如您所看到的,我使用了AJAX请求来提取帖子。 我已经考虑了其他选项,例如创建指令等。最后,我发现这种方式最舒服。
就这样。 现在您可以打开视图文件view-profile.client.view
并开始装饰。 您可以在那里访问我们的ourUser
和用户userPosts
。 此个人资料页面的URL为: .../users/username
。
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.