简单的网页SPA与API和MONGOOSE（发行与ID的） [英] Simple web SPA with API and MONGOOSE (issue with id's)
本文介绍了简单的网页SPA与API和MONGOOSE（发行与ID的）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个非常简单AnjularJS SPA连接通过API来猫鼬。该应用程序将只参加一个新成员，显示新的成员，如果我点击列表中的成员的名字，我应该能够在另一个屏幕上编辑的成员。
但是，当我点击一个成员的名字来编辑它，它不给我另一个页面编辑的成员，它就像我不能指定正确的成员进行编辑。当我将鼠标悬停在该成员的名字，我希望看到来自猫鼬该成员的ID，而是我只看到：
本地主机：4000 /＃/会员/（我想我应该会看到（从猫鼬ID）????：本地主机：4000 /＃/会员/ 553778bb92de243be1c61c6d）
我在哪里我的指数的/ ID的??
脚麻下面是我为显示成员名单members.html页，我应该能够移动到新的页面，当我点击会员名称以编辑的成员，但我不能。请参阅{{memb.name |大写}}的...
members.html
＆LT; DIV CLASS =COL-SM-7山坳＆GT;
＆LT; DIV CLASS =CSSTableGenerator＆GT;
＆LT; H2 ALIGN =中心＆GT;注册俱乐部会员＆LT; / H＆GT; ＆LT;表＆gt;
<tr><td>Name</td><td>Address</td><td>Age</td><td>Level</td><td>Able至
游泳＆LT; / TD＆GT;＆LT; TD＆GT;电子邮件和LT; / TD＆GT;＆LT; TD＆GT;注册日期＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; TR NG重复=MEMB中成员＆GT;
＆所述; TD＆GT;
＆LT; A HREF =＃/会员/ {{member._id}}＆GT; {{memb.name |大写}}
＆所述; / A＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
{{memb.address}}
＆LT; / TD＆GT;
＆所述; TD＆GT;
{{memb.age}}
＆LT; / TD＆GT;
＆所述; TD＆GT;
{{memb.level}}
＆LT; / TD＆GT;
＆所述; TD＆GT;
{{memb.swimmer}}
＆LT; / TD＆GT;
＆所述; TD＆GT;
{{memb.email}}
＆LT; / TD＆GT;
＆所述; TD＆GT;
{{memb.regdate}}
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
我APP.JS：
VAR应用= angular.module（对myApp，['ngRoute']）
的app.config（函数（$ routeProvider）{
$ routeProvider
。当（'/会员，
{
控制器：'MembersController'，
templateUrl：./partials/members.html
}）
。当（'/会员/：member_index'，
{
控制器：'MemberDetailController'，
templateUrl：./partials/member_edit.html
}） 。当（'/家'，
{
//控制器：'MembersController'，
templateUrl：./partials/home.html
}）
不然的话（{redirectTo：'/家'}）;
}）
app.factory（'SimpleFactory'，['$ HTTP'，函数（$ HTTP）{ 变种工厂= {};
VAR成员= $ http.get（'/ API /成员） factory.getMembers =功能（）
{
//返回成员;
返回成员= $ http.get（'/ API /会员'）;
} factory.getMember =功能（member_id）{
返回成员[member_id] = $ http.get（'/ API /会员/+
会员ID ）
} factory.addMember =功能（成员）{
返回$ http.post（'/ API /会员，会员）
}
factory.updateMember =功能（member_id，成员）{
返回$ http.put（'/ API /会员/+ member_id，成员）
}
回厂;
}]）
app.controller（'MembersController'，['$范围，SimpleFactory'，
功能（$范围，SimpleFactory）{ SimpleFactory.getMembers（）
.success（函数（成员）{
$ scope.members =成员;
}）;
$ scope.addMember =功能（）
{
VAR成员= {
名称：$ scope.newMember.name，
地址：$ scope.newMember.address，
年龄：$ scope.newMember.age，
位：$ scope.newMember.level，
游泳：$ scope.newMember.swimmer，
电子邮件：$ scope.newMember.email，
regdate：$ scope.newMember.regdate，
} SimpleFactory.addMember（会员）
.success（功能（added_member）
{
$ scope.members.push（added_member）;
$ scope.newMember = {}
}）;
}}]）app.controller（'MemberDetailController'，
['$范围，$位置，$ routeParams'，'SimpleFactory'，
功能（$范围，$位置$ routeParams，SimpleFactory）{
SimpleFactory.getMember（$ routeParams.member._id）。然后（功能（数据）{
$ scope.member = {
指数：$ routeParams.member._id，
细节：data.user
};
}）;
$ scope.updateMember =功能（）{
SimpleFactory.updateMember（$ scope.member._id，$ scope.member.detail）
。然后（功能（数据）{
$ location.path（'/成员）
}）;
};}]）
我INDEX.JS
VAR前preSS =要求（'前preSS'）;
VAR控制器=要求（'./ members.controller'）;VAR路由器=前press.Router（）;router.get（'/'，controller.index）;
router.get（'/：身份证'，controller.show）;
router.post（'/'，controller.create）;
router.put（'/：身份证'，controller.update）;module.exports =路由器;
我MEMBERS.MODEL.JS
VAR猫鼬=要求（'猫鼬'）
VAR模式= mongoose.Schema;
VAR MemberSchema =新模式（{
名称：字符串，
地址：字符串，
年龄：字符串，
级别：字符串，
游泳：字符串，
电子邮件：字符串，
regdate：字符串
}）;module.exports = mongoose.model（成员，MemberSchema）;我MEMBERS.CONTROLLER.JS
VAR _ =要求（'lodash'）
VAR成员=要求（'./ member.model'）;功能的HandleError（RES，ERR）{
返回res.send（500，ERR）;
}//获取成员名单
exports.index =功能（REQ，RES）{
Member.find（函数（ERR，成员）{
如果（ERR）{返回的HandleError（RES，ERR）; }
返回res.json（200名成员）;
}）;
};//创建在数据存储中的新成员。
exports.create =功能（REQ，RES）{
Member.create（req.body，函数（ERR，成员）{
如果（ERR）{返回的HandleError（RES，ERR）; }
返回res.json（201件）;
}）;
};
exports.show =功能（REQ，RES）{
Member.findById（req.params.id，函数（ERR，成员）{
如果（ERR）{返回的HandleError（RES，ERR）; }
返回res.json（200件）; }）;
};//更新数据存储中的现有成员。
exports.update =功能（REQ，RES）{
Member.findById（req.params.id，函数（ERR，成员）{
member.name = req.body.name
member.address = req.body.address
member.age = req.body.age
member.level = req.body.level
member.swimmer = req.body.swimmer
member.email = req.body.email
member.regdate = req.body.regdate
member.save（功能（错误）{
如果（ERR）{返回的HandleError（RES，ERR）; }
返回res.send（200，更新成功）;
}）;
}）;
}任何人都可以在这方面帮助？这是一个简单的应用程序，但我刚学和我完全此刻困在这里！
感谢
解决方案您
在members.html一个标记应绑定到memb._id，而不是members._id。像这样的：＆LT;一个NG-HREF =＃/会员/ {{memb._id}}＆GT; {{memb.name |大写}}＆下; / A＆GT;I am creating a very simple AnjularJS SPA connecting to Mongoose via API. The app will just take in a new member, display the new member and if I click on the members name in the list I should be able to edit the member in another screen.
But when I click on a members name to edit it it does not give me the member on another page to edit, it is like I cannot specify the correct member to edit. When I hover over the member name I expect to see the id from Mongoose for that member but instead I only see:
localhost:4000/#/members/ (I think I should be seeing (with id from Mongoose)???? : localhost:4000/#/members/553778bb92de243be1c61c6d )
Where am I going wrong with my index's / id's??
Here is my members.html page for showing list of members, I should be able to move to new page when I click members name to edit that member but I can't. See "{{memb.name | uppercase}}" below...
members.html
<div class="col-sm-7 col"> <div class="CSSTableGenerator" > <h2 align="center">Registered Club Members</h2> <table> <tr><td>Name</td><td>Address</td><td>Age</td><td>Level</td><td>Able To Swim</td><td>Email</td><td>Registration Date</td></tr> <tr ng-repeat="memb in members" > <td> <a href="#/members/{{member._id}}">{{memb.name | uppercase}} </a> </td> <td> {{memb.address }} </td> <td> {{memb.age }} </td> <td> {{memb.level }} </td> <td> {{memb.swimmer }} </td> <td> {{memb.email }} </td> <td> {{memb.regdate }} </td> </tr> </table> </div> </div>My APP.JS:
var app = angular.module("myApp",['ngRoute']) app.config(function ($routeProvider) { $routeProvider .when('/members', { controller: 'MembersController', templateUrl: './partials/members.html' }) .when('/members/:member_index', { controller: 'MemberDetailController', templateUrl: './partials/member_edit.html' }) .when('/home', { //controller: 'MembersController', templateUrl: './partials/home.html' }) .otherwise({ redirectTo: '/home' }); }) app.factory('SimpleFactory', ['$http', function($http){ var factory = {}; var members = $http.get('/api/members') factory.getMembers = function () { //return members; return members = $http.get('/api/members'); } factory.getMember = function (member_id) { return members[member_id] = $http.get('/api/members/' + member_id ) } factory.addMember = function(member) { return $http.post('/api/members',member) } factory.updateMember = function(member_id,member) { return $http.put('/api/members/' + member_id, member) } return factory; }]) app.controller('MembersController', ['$scope','SimpleFactory', function ($scope,SimpleFactory) { SimpleFactory.getMembers() .success(function(members) { $scope.members = members; }); $scope.addMember = function() { var member = { name: $scope.newMember.name, address: $scope.newMember.address, age : $scope.newMember.age, level : $scope.newMember.level, swimmer : $scope.newMember.swimmer, email : $scope.newMember.email, regdate : $scope.newMember.regdate, } SimpleFactory.addMember(member) .success(function(added_member) { $scope.members.push(added_member); $scope.newMember = { } } ); } }]) app.controller('MemberDetailController', ['$scope','$location','$routeParams','SimpleFactory', function ($scope,$location,$routeParams,SimpleFactory) { SimpleFactory.getMember($routeParams.member._id).then(function(data){ $scope.member = { index : $routeParams.member._id, detail : data.user }; }); $scope.updateMember = function() { SimpleFactory.updateMember($scope.member._id, $scope.member.detail) .then(function(data) { $location.path('/members') }); }; }])My INDEX.JS
var express = require('express'); var controller = require('./members.controller'); var router = express.Router(); router.get('/', controller.index); router.get('/:id', controller.show); router.post('/', controller.create); router.put('/:id', controller.update); module.exports = router;My MEMBERS.MODEL.JS
var mongoose = require('mongoose') var Schema = mongoose.Schema;
var MemberSchema = new Schema({ name: String, address: String, age: String, level: String, swimmer: String, email: String, regdate: String }); module.exports = mongoose.model('members', MemberSchema);My MEMBERS.CONTROLLER.JS
var _ = require('lodash') var Member = require('./member.model'); function handleError(res, err) { return res.send(500, err); } // Get list of members exports.index = function(req, res) { Member.find(function (err, members) { if(err) { return handleError(res, err); } return res.json(200, members); }); } ; // Creates a new member in datastore. exports.create = function(req, res) { Member.create(req.body, function(err, member) { if(err) { return handleError(res, err); } return res.json(201, member); }); }; exports.show = function(req, res) { Member.findById(req.params.id, function (err, member) { if(err) { return handleError(res, err); } return res.json(200, member); }); } ; // Update an existing member in datastore. exports.update = function(req, res) { Member.findById(req.params.id, function (err, member) { member.name = req.body.name member.address = req.body.address member.age = req.body.age member.level = req.body.level member.swimmer = req.body.swimmer member.email = req.body.email member.regdate = req.body.regdate member.save(function (err) { if(err) { return handleError(res, err); } return res.send(200, 'Update successful'); }); }); }Can anyone help with this? It is a simple APP but I am just learning and am completely stuck here at the moment!
Thanks
解决方案Your
atag in members.html should bind tomemb._id, notmembers._id. Like this:<a ng-href="#/members/{{memb._id}}">{{memb.name | uppercase}}</a>
这篇关于简单的网页SPA与API和MONGOOSE（发行与ID的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
