我有一个实习项目，要求我使用 MEAN 堆栈开发一个简单的应用程序，我将尝试简要解释我做了什么以及我需要帮助的地方。
这将是我的应用程序的起始页。
将有两个相关方使用该应用程序。
其中一个让我们称之为creator，看到一个类似于上图的画面，在输入框上引入一个特定的数字，然后生成一个像上图这样的矩阵。只有创建者可以看到此屏幕。
创建矩阵后，创建者将能够向预定义的用户列表发送电子邮件，其中包含指向用户(使用该应用程序的第二感兴趣方)能够添加内容的页面的链接到上面矩阵的每个单元格。然后，一旦所有单元格上都有内容，用户将按下“提交”按钮，该按钮应将填充的矩阵保存并存储到 MongoDB 数据库中，我可以从中查询结果并执行一些统计分析。
我现在有两(三)个问题:
1) 我首先使用 SVG 图形仅使用 HTML+Javascript 开发了这个矩阵，因为它对我来说简单且更直观；
2) 然后我尝试将 HTML+Javascript 版本转换为 AngularJS，原因有两个:
2.1 - 如果我已经在使用 MEAN 堆栈的一个组件，我认为将它与 MongoDB 集成会很容易；
2.2 - 矩阵可以存储在 JSON 中或更准确地说，我可以将一系列 JSON.parse("string that represents a line of the matrix") 字符串添加到矩阵中而不是只需将 SVG 字符串附加到单个巨大的 SVG 图片中；
3) 在 AngularJS 中(也许我做错了什么)我无法获得所需的行为，因为有些东西不起作用(即，在 if/else 语句中，一些分支不起作用)，我会很快显示下面的代码。
在所有这些解释之后，我的问题只有两个:
首先:
我在下面的代码中做错了什么？
JS:
var app = angular.module('app', []);
var RectangleDim=30;
app.controller('MainCtrl', function($scope) {
$scope.graph = {'width': 5000, 'height': 5000};
$scope.circles = [
/* JSON.parse("{\"x\": 85, \"y\": 20, \"r\":15}"),
{"x": 20, "y": 60, "r":20},
{"x": 18, "y": 10, "r":40} */
];
$scope.draw=function(val)
{
// val = document.getElementById("NumQuest").value;
return JSON.parse('{\"cx\":'+val+', "cy": 20, "r":30}');
// $scope.circles.push(JSON.parse('{\"x\":'+val+', "y": 220, "r":30}'));
};
$scope.rectangles = [
// {'x':220, 'y':220, 'width' : 300, 'height' : 100},
// {'x':520, 'y':220, 'width' : 10, 'height' : 10},
];
$scope.DrawRect=function(xpos,ypos) {
return JSON.parse('{\"x\":' + xpos + ', \"y\":' + ypos + ', \"width\":' + RectangleDim + ', \"height\":' + RectangleDim+ ', \"style\":\"fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)\"'+ '}');
};
$scope.Debug=function(desiredNo){
desiredNo=document.getElementById("NumQuest").value;
for(var i = 0;i < RectangleDim*desiredNo+desiredNo;i++){
$scope.rectangles.push($scope.DrawRect(i+RectangleDim+1,40));
}
};
$scope.DrawLineOdd=function(desiredNo,lineNo,pozY){
var pozX = lineNo*RectangleDim;
var aux = 2*Math.floor(Math.sqrt(desiredNo))-1-2*lineNo;
for (var j = 0; j < aux; j++) {
$scope.rectangles.push($scope.DrawRect(pozX, pozY));//$scope.DrawRect(pozX, pozY);
pozX += RectangleDim;
}
//return aux;
};
$scope.DrawMatrixPerfectProgression=function(desiredNo) {
desiredNo=document.getElementById("NumQuest").value;
var line=0;
var pozy=0;
while(line<Math.floor(Math.sqrt(desiredNo))) {
$scope.DrawLineOdd(desiredNo, line, pozy);
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
}
//document.getElementById('tablePrint').innerHTML = finalTable;
};
$scope.DrawLineEven=function(desiredNo, lineNo, pozY){
var pozX = lineNo*RectangleDim;
//var pozY = lineno*20;
var aux = 2*Math.floor(Math.sqrt(desiredNo))-2*lineNo;
for (var j = 0; j < aux; j++) {
$scope.rectangles.push($scope.DrawRect(pozX, pozY));
pozX += RectangleDim;
}
//return aux;
};
$scope.DrawMatrixEvenProgression=function(desiredNo) {
desiredNo=document.getElementById("NumQuest").value;
var line=0;
var pozy=0;
while(line<Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)) {
$scope.DrawLineEven(desiredNo, line, pozy);
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
}
//document.getElementById('tablePrint').innerHTML = finalTable;
};
$scope.AddExtraRectangles=function(desiredNo) {
desiredNo = document.getElementById("NumQuest").value;
var arg1 = desiredNo - ( Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
var arg2 = desiredNo-(Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
var OptimalLeftOver = Math.min( arg1 ,arg2 );
//We add two rectangles per row: one at the beginning one at the end
//we start with the row below the first one
var line;
var pozy;
var pozx1, pozx2;
var nRectLine_i;
if(OptimalLeftOver===arg1){
line=1;//1st line is skipped
pozy=RectangleDim;
pozx1 = 0;
while(OptimalLeftOver>0) {
nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-1-2*line;
pozx2 = (line-1)*RectangleDim+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
$scope.rectangles.push($scope.DrawRect(pozx1,pozy));
OptimalLeftOver-=1;
if(OptimalLeftOver>0) {
$scope.rectangles.push($scope.DrawRect(pozx2, pozy));
OptimalLeftOver -= 1;
}
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
pozx1=RectangleDim*line - RectangleDim;
}
//document.getElementById('tablePrint').innerHTML = finalTable;
}
else {
line=1;//1st line is skipped
pozy=RectangleDim;
pozx1 = 0;
while(OptimalLeftOver>0) {
nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-2*line;
pozx2 = RectangleDim*(line-1)+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
$scope.rectangles.push($scope.DrawRect(pozx1,pozy));
OptimalLeftOver-=1;
if(OptimalLeftOver>0) {
$scope.rectangles.push($scope.DrawRect(pozx2, pozy));
OptimalLeftOver -= 1;
}
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
pozx1=RectangleDim*line - RectangleDim;
}
//document.getElementById('tablePrint').innerHTML = finalTable;
}
};
$scope.DrawMatrix=function(desiredNo)
{
/* Chooses optimal leftover number based on the progression formulas.
Attempts to minimize the work of the designer of the response form without
making too much assumptions */
desiredNo = document.getElementById("NumQuest").value;
var arg1 = desiredNo - ( Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
var arg2 = desiredNo - (Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
var OptimalLeftOver = Math.min( arg1 ,arg2 );
//document.getElementById("val").innerHTML = 'There are '+OptimalLeftOver+' questions missing!'+ arg1+ '___'+arg2;
//console.log(arg1);
if(OptimalLeftOver===arg1){
desiredNo = document.getElementById("NumQuest").value;
$scope.DrawMatrixPerfectProgression(desiredNo);
$scope.AddExtraRectangles(desiredNo);
}
else {
desiredNo = document.getElementById("NumQuest").value;
$scope.DrawMatrixEvenProgression(desiredNo);
$scope.AddExtraRectangles(desiredNo);
}
};
}
);
angular.bootstrap(document.getElementById('body'), ["app"]);
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
</head>
<div id="body">
<div ng-controller="MainCtrl">
<label>Num questões:</label>
<input Id="NumQuest" class="span3" style="margin: 0pt auto;" type="text" placeholder="Num questões..." data-provide="typeahead" data-items="1"
/>
<p><button ng-click="DrawMatrixPerfectProgression(NumQuest)">Draw</button></p>
<svg ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}">
<circle ng-repeat="circle in circles"
ng-attr-cx="{{circle.cx}}"
ng-attr-cy="{{circle.cy}}"
ng-attr-r="{{circle.r}}">
</circle>
<rect ng-repeat="rect in rectangles"
ng-attr-x="{{rect.x}}"
ng-attr-y="{{rect.y}}"
ng-attr-width="{{rect.width}}"
ng-attr-height="{{rect.height}}"
ng-attr-style="{{rect.style}}"
>
</rect>
</svg>
</div>
</div>
<!-- <svg ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}">
</svg> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="js/main.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
第二个问题:
有什么好的方法可以改进这一点，使我更容易将 MongoDB 添加到这个小项目中吗？
其次，我正在使用 IDE WebStorm 10 设计所有代码。如果我需要支持 MongoDB/Node.JS 和所有其他服务器端代码依赖项，我是否应该在普通项目下添加更多 JS 源文件树？或者创建单独的文件？
如您所见，我对网页设计和网页项目仍是新手，但我渴望学习!
引用:
仅使用 SVG+ Inner.HTML 方法的旧 JS 代码:
/* Handle all the cases specifically:
Perfect square number
Ending with two squares - N² + N
Missing a number of squares equal to the number of squares of a given line
Other cases
*/
var beginSVG = '<svg width=\"3072\" height=\"3720\">';
//var endSVG = '</svg>';
var finalTable = beginSVG;
var RectangleDim=30;
function GetRectangle(xOffset, yOffset) {
var beginRect = '<rect';
var xOffSet = ' x=\"'+xOffset+'\"';
var yOffSet = ' y=\"'+yOffset+'\"';
var dim = 'width=\"'+RectangleDim+'\" \height=\"'+RectangleDim+'\" ';
var style = ' style=\"fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)\" /> \' ';
return beginRect+xOffSet+yOffSet+dim+style;
}
//This is to be used with the function DrawRectangleToAdd which specifies the rectangles that are to be added to fullfill the entire questionnaire
function GetRectangleToAdd(xOffset, yOffset) {
var beginRect = '<rect';
var xOffSet = ' x=\"'+xOffset+'\"';
var yOffSet = ' y=\"'+yOffset+'\"';
var dim = 'width=\"'+RectangleDim+'\" \height=\"'+RectangleDim+'\" ';
var style = ' style=\"fill:rgb(25,2,255);stroke-width:3;stroke:rgb(1,0,0)\" /> \' ';
return beginRect+xOffSet+yOffSet+dim+style;
}
function DrawMatrixClear() {
finalTable=beginSVG;
document.getElementById('tablePrint').innerHTML = finalTable;
}
function DrawRect(xpos,ypos){
finalTable += GetRectangle(xpos,ypos);
}
//To be used with an array that specifies the positions of the rectangles to add
function DrawRectangleToAdd(xpos,ypos){
finalTable += GetRectangleToAdd(xpos,ypos);
}
//line 0 is the largest line
function DrawLineOdd(desiredNo, lineno, pozY){
// var lineTab=beginSVG;
var i = lineno;
var pozX = i*RectangleDim;
//var pozY = lineno*20;
var aux = 2*Math.floor(Math.sqrt(desiredNo))-1-2*i;
for (var j = 0; j < aux; j++) {
DrawRect(pozX, pozY);
pozX += RectangleDim;
}
return aux;
}
function DrawMatrixPerfectProgression(desiredNo) {
var line=0;
var pozy=0;
while(line<Math.floor(Math.sqrt(desiredNo))) {
var teste = DrawLineOdd(desiredNo, line, pozy);
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
}
document.getElementById('tablePrint').innerHTML = finalTable;
}
function DrawLineEven(desiredNo, lineno, pozY){
// var lineTab=beginSVG;
var i = lineno;
var pozX = i*RectangleDim;
//var pozY = lineno*20;
var aux = 2*Math.floor(Math.sqrt(desiredNo))-2*i;
for (var j = 0; j < aux; j++) {
DrawRect(pozX, pozY);
pozX += RectangleDim;
}
return aux;
}
function DrawMatrixEvenProgression(desiredNo) {
var line=0;
var pozy=0;
while(line<Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)) {
var teste = DrawLineEven(desiredNo, line, pozy);
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
}
document.getElementById('tablePrint').innerHTML = finalTable;
}
function AddExtraRectangles(desiredNo) {
var arg1 = desiredNo - ( Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
var arg2 = desiredNo-(Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
var OptimalLeftOver = Math.min( arg1 ,arg2 );
//We add two rectangles per row: one at the beginning one at the end
//we start with the row below the first one
var line;
var pozy;
var pozx1, pozx2;
var nRectLine_i;
if(OptimalLeftOver===arg1){
line=1;//1st line is skipped
pozy=RectangleDim;
pozx1 = 0;
while(OptimalLeftOver>0) {
nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-1-2*line;
pozx2 = (line-1)*RectangleDim+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
DrawRectangleToAdd(pozx1,pozy);
OptimalLeftOver-=1;
if(OptimalLeftOver>0) {
DrawRectangleToAdd(pozx2, pozy);
OptimalLeftOver -= 1;
}
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
pozx1=RectangleDim*line - RectangleDim;
}
//document.getElementById('tablePrint').innerHTML = finalTable;
}
else
{
line=1;//1st line is skipped
pozy=RectangleDim;
pozx1 = 0;
while(OptimalLeftOver>0) {
nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-2*line;
pozx2 = RectangleDim*(line-1)+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
DrawRectangleToAdd(pozx1,pozy);
OptimalLeftOver-=1;
if(OptimalLeftOver>0) {
DrawRectangleToAdd(pozx2, pozy);
OptimalLeftOver -= 1;
}
//document.getElementById("val").innerHTML = teste;
line += 1;
pozy+=RectangleDim;
pozx1=RectangleDim*line - RectangleDim;
}
//document.getElementById('tablePrint').innerHTML = finalTable;
}
}
function DrawMatrix(desiredNo) {
/* Chooses optimal leftover number based on the progression formulas.
Attempts to minimize the work of the designer of the response form without
making too much assumptions
*/
var arg1 = desiredNo - ( Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
var arg2 = desiredNo - (Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
var OptimalLeftOver = Math.min( arg1 ,arg2 );
document.getElementById("val").innerHTML = 'There are '+OptimalLeftOver+' questions missing!'+ arg1+ '___'+arg2;
console.log(arg1);
if(OptimalLeftOver===arg1){
DrawMatrixPerfectProgression(desiredNo);
AddExtraRectangles(desiredNo);
}
else {
DrawMatrixEvenProgression(desiredNo);
AddExtraRectangles(desiredNo);
}
}
PS:是的，我读过这个问题:Using AngularJs and MongoDB/Mongoose ,
但它并没有真正消除我的疑虑，我认为这不是我需要的。
我需要的是学习如何在/src 项目文件夹中将组件连接在一起以及最佳实践!
最佳答案
嗯，通常没有通过 mongo 和 angular 的直接连接。 它通过 Angular Node 连接(通过 Angular 服务与 express(基于 Node 的)端点对话)——express 中的回调调用 mongoose，这是 Node 和 mongo 之间的典型连接。 下载 mean.io - 查看文章包并尝试从 Angular View / Controller /服务(在 packages/articles/public/中)跟踪回调，以及它们如何调用 packages/articles/server 中的快速路由和回调... 祝你好运。
关于javascript - 连接 MEAN 堆栈的 A 和 M 组件 - 需要提示和指导，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31903861/
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只
我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121
我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？
require"socket"server="irc.rizon.net"port="6667"nick="RubyIRCBot"channel="#0x40"s=TCPSocket.open(server,port)s.print("USERTesting",0)s.print("NICK#{nick}",0)s.print("JOIN#{channel}",0)这个IRC机器人没有连接到IRC服务器，我做错了什么？ 最佳答案 失败并显示此消息::irc.shakeababy.net461*USER:Notenoughparame
我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO
我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night
修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息；但是，我遇到了一堵又一堵砖墙。据我所知，主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是，当我尝试抓取该iframe时，它是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具，这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据，也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它，但它仍然不存在)。发生这种情况是因为