个人中心
gpt4 book ai didi

javascript - 连接 MEAN 堆栈的 A 和 M 组件 - 需要提示和指导

转载 作者：可可西里 更新时间：2023-11-01 10:42:57 25 4
gpt4 key购买 nike

我有一个实习项目，要求我使用 MEAN 堆栈开发一个简单的应用程序，我将尝试简要解释我做了什么以及我需要帮助的地方。

Start page

这将是我的应用程序的起始页。

将有两个相关方使用该应用程序。

其中一个让我们称之为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/

25 4 0
文章推荐： windows - 对文件夹中的每个文件运行命令，然后保存输出
文章推荐： mongodb - Mongoose :自定义_id是否需要声明为索引并且是唯一的
文章推荐： windows - 事件目录自定义身份验证
文章推荐： vb.net - 断开 iTunes COM
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com