MEANJS用户配置文件功能
MEANJS user profile functionality
我正在尝试使用meanjs构建一个简单的应用程序。我有两个模块:标准用户模块和帖子模块。我想要实现的是一个用户配置文件页面,它将显示有关特定用户的一些信息,并列出属于该用户的帖子。你可以把它想象成一个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'
});
我创建了一个这样的新视图:
<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
});
};
}
]);
当我尝试为任何用户名打开users/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
时,您必须获得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 }}
....
你可以随心所欲地填写这个文件。我为此视图创建了一个新控制器。正如你所看到的,它的名字是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
。
我希望这能有所帮助。
- 使用javascript配置文件作为handlebas博客模板,但配置不是't工作正常
- 我可以访问量角器配置文件中的参数吗
- 如何从配置文件中设置Angular值
- SoundCloud API-基于系统中的ID创建用户配置文件
- 先在Angular中加载配置文件,然后再加载其他文件
- 正在读取节点中的配置文件
- 检查蒸汽配置文件url是否有效
- 将配置文件文件夹移动到sdcardfirefoxmobile14.0
- 可能有一个javascript和php的配置文件
- 对CommonJS配置文件使用全局变量
- 未从Selenium网络驱动程序中的配置文件接收到正确的值
- 使用AddThis-config-data_ga_property向两个Google Analytics配置文件报告
- 如何使用浏览器“需要”配置文件,但不将此文件包含在捆绑包中
- Webdriver:用于动态禁用/启用JavaScript弹出窗口的Firefox配置文件
- 如何从 Webjar 解析多个 RequireJS 配置文件
- 通过oauth令牌passport.js访问用户配置文件
- mongodb用户配置文件添加输入时出现问题
- 如何使用ian:accounts-ui-botstrap-3根据Meteor中的用户输入设置配置文件字段值
- MEANJS用户配置文件功能
- 编辑配置文件更新功能不起作用