如何在perl CGI文件中正确呈现HTML表

时间：2016-05-05 00:35:56

标签： html perl cgi

所以我使用perl CGI在我的perl代码中从数组创建一个表。我也在我的perl文件中实现了HTML。我在浏览器上打印了内容，但是它打印在网页的HTML部分之上。我希望它更低，以便它将显示在.pl文件的实际HTML部分中。为了更好地理解，我将发布它在浏览器上加载的截图。

enter image description here

这是我打印出这些数据的perl代码.. 

 #!/usr/bin/perl -w

    use CGI qw/:standard/;
    use strict;
    use warnings;
    use JSON qw( decode_json );
    use LWP::Simple 'get'; 
    use Data::Dumper; 

    print "content-type:text/html; charset=utf-8\n\n";

    my @sessionArr;
    my @classArr;
    my @timeArr;
    my @adminArr;
    my @profArr;
    my @descArr;

    my $i = 0;

    my $myURL = "leaving URL out";

    my $json = get($myURL);
    die "Could not get $myURL!" unless defined $json;

    my $decoded_json = decode_json ($json);

    my @sessionID = @{ $decoded_json->{'items'} };
    foreach my $d ( @sessionID ) {
     $sessionArr[$i] = $d->{"sessionID"};
     $i = $i + 1;
    }

    $i = 0;

    my @class = @{ $decoded_json->{'items'} };
    foreach my $d ( @class ) {
     $classArr[$i] = $d->{"classField"};
     $i = $i + 1;
    }

    $i = 0;


    my @time = @{ $decoded_json->{'items'} };
    foreach my $d ( @time ) {
      $timeArr[$i] = $d->{"startTimeField"};
      $i = $i + 1;
    }

    $i = 0;

    my @usrcreater = @{ $decoded_json->{'items'} };
    foreach my $d ( @usrcreater ) {
      $adminArr[$i] = $d->{"leader"};
      $i = $i + 1;
    }

    $i = 0;

    my @professor = @{ $decoded_json->{'items'} };
    foreach my $d ( @professor ) {
      $profArr[$i] = $d->{"professorField"};
      $i = $i + 1;
    }

    $i = 0;




    my @description = @{ $decoded_json->{'items'} };
    foreach my $d ( @description ) {
      $descArr[$i] = $d->{"descriptionField"};
      $i = $i + 1;
    }

    $i = 0;

    foreach my $p ( @description ) {
       $i = $i +1;
    }

    foreach my $i (0..$#sessionArr) {
        print "<tr>\n";
        print " ";
        foreach my $ra (\@sessionArr, \@classArr, \@timeArr, \@adminArr, \@profArr, \@descArr) {
            print "<td>$ra->[$i]</td>\n"
        }
        print "<h2></tr></h2>\n";
    }


    print qq(<!DOCTYPE html><head></head><body>


    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <title>AU Study Sessions</title>

        <link href="../css/bootstrap.css" rel="stylesheet">

        <link href="../css/main.css" rel="stylesheet">

        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->

        <link rel="shortcut icon" href="../images/favicon.png">
        <script src="../js/pace.js"></script>

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div class="preloader"></div>

        <! -- ******************** MASTHEAD SECTION ******************** -->    
        <main id="top" class="masthead" role="main">
            <div class="container">
                <div class="logo"> <a href="http://a3jjddh.com/"><img src="../images/aulogo2.png" alt="logo"></a>
                </div>

                <h1>View Study Sessions</h1>

    <table> 
<-- *****This is where i want my table to be displayed -->


    </table> 


    <br>
    <br>
    <a href="http://website.com"> Add a Study Session</a>

                    <!--<a href="index.html#explore" class="scrollto">
                    <p>SCROLL DOWN TO EXPLORE</p>
                    <p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
                    </a> -->
            </div><! --/container -->
        </main><! --/main -->


        <! -- ******************** FOOTER SECTION ******************** -->  
        <div class="container" id="explore">



            <div class="section-title">
                <h2>With Adelphi Study Sessions Website</h2>
                <h4>You will be able to do the following</h4>
            </div>

            <section class="row features">
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_01.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>View Study Groups</h3>
                            <p>See the most up to date study sessions taking place on our garden city campus.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->

                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_02.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>Add and create new study sessions</h3>
                            <p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->

                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_03.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>See description of session</h3>
                            <p>The student who creates the study session will give a short description about what the study session will cover.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->

                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail"> 
                        <img src="../images/service_04.png" alt="analytics-icon">
                        <div class="caption">
                            <h3>Available on campus</h3>
                            <p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
                        </div>
                    </div><! --/thumbnail -->
                </div><! --/col-sm-6-->
            </section><! --/section -->







    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/easing.js"></script>
    <script src="../js/nicescroll.js"></script> 


    </body>);

3 个答案:

答案 0 :(得分：2)

您的代码似乎首先为表格（print s）生成标记，然后为网页的其余部分生成HTML。如果是这种情况，以下内容可能会有用。

这是“网页”的HTML，带有表格。当在浏览器中显示时，这将显示表格以及其他内容，无论以何种方式设置格式和样式。

<!DOCTYPE html>
<!-- metadata: links, styling, etc -->
<body>
<!-- ... some HTML ... -->
<table>
<tr>  <td>a</td> <td>A</td> </tr>
<tr>  <td>b</td> <td>B</td> </tr>
</table>
<!-- ... more HTML ... -->
</body>
</html>

您可以通过逐行执行print "<!DOCTYPE html>\n"等来从Perl生成此文本。

然而，这是其他的东西

<table>
<tr>  <td>a</td> <td>A</td> </tr>
<tr>  <td>b</td> <td>B</td> </tr>
</table>

<!DOCTYPE html>
<!-- metadata: head, links, styling, etc -->
<body>    
<!-- ... some HTML ... -->
<!-- ... more HTML ... -->
</body>
</html>

当在浏览器中抛出此内容时，网页样式和其他元素都不会应用于表格。浏览器只会在清教徒表格布局中显示数据a A和b B，然后是（预期的其余部分）网页。 （此外，在您的代码中，我没有看到打印出<table>标记，因此我希望浏览器显示一行a A b B。）

这似乎发生在您的代码中。它首先打印表格，然后打印实际页面。所以它从第二个例子生成上面的标记。更改您的程序，以便表格的HTML标记（print生成的）放在HTML的其余部分中，您需要放置表格。

我希望这会有所帮助。有关详细信息，或者如果不符合标记，请显示您的HTML及其制作方式。

鉴于问题是使用完整代码更新的，这是一个简单的修复，只需要很小的改动。请注意，这不是对如何生成HTML的评论，也不是建议以这种方式编写HTML。

打印表格数据后，将使用

生成页面的HTML 
print qq(<!DOCTYPE html><head></head><body>
    ... HTML markup goes for screenfuls ...
 </body>);

您正在使用qq运算符，这是形成双引号字符串的通用方法。它也可以使用()以外的分隔符，因此您可以说qq{...}等。perlop

表格的一部分 
Customary Generic   Meaning       Interpolates
    ''      q{}     Literal         no
    ""     qq{}     Literal         yes
    ``     qx{}     Command         yes*
           qw{}     Word list       no
...
    <<EOF           here-doc        yes*
    * unless the delimiter is ''.

请参阅完整表格和其他内容的链接。

所以你的代码与

几乎相同 
print "<!DOCTYPE html><head></head><body>

<head>
  ...
</body>";

除了在这个版本中你必须在文本的任何地方转义双引号。另一种方法是使用 here-doc 。

qq运算符会插入变量并包含换行符。这意味着上面的确是

print "<!DOCTYPE html><head></head><body>\n";
print "\n";
print "<head>\n";
# ...
print "</body>\n";

我希望现在情况很清楚。您的qq(...)只发送一个非常长的字符串（带换行符），HTML文本 - 相当于print每行分别。您需要将表生成代码插入到此中。

这是一种更改代码的简单方法。这不是一个好的代码，但它应该对你拥有的东西做最少的改变。将您的qq分成两部分。第一个qq(...);将HTML打印到表格中。然后打印表（移动打印它的代码）。然后打印另一个qq(...);。

# Print HTML up to where the table needs to be
print qq(<!DOCTYPE html><head></head><body>
         ... 
            <h1>View Study Sessions</h1>
);

# Now generate markup for the table
print "<table>\n";
foreach my $i (0..$#sessionArr) {
    # rest of table-data printing code
}
print "</table>\n";

# Now resume generating the rest of your HTML
print qq(
<br>
<br>
<a href="http://website.com"> Add a Study Session</a>
... rest of your HTML
</body>
);

请注意：这不是好代码。很难审查，修改，扩展和维护。我仍然建议您先执行此操作，以便及时查看页面的生成方式。然后伸出手，找到一种更好的方法来生成Perl代码中的HTML。我没有使用模块，所以不能推荐任何模块，但是那里有很多。

答案 1 :(得分：1)

对于HTML输出的排序存在一个很大的问题，我确信如果从命令行运行程序，你可以看到

您的代码所做的第一件事是使用

发送HTTP标头 
print "content-type:text/html; charset=utf-8\n\n";

那应该没关系

然后从互联网上获取一些JSON数据并对其进行解码。该数据必须是哈希数组，您可以将其解压缩到六个单独的数组中。这是不必要的，但它没有任何害处，如果您不熟悉Perl参考，我可以理解您选择这样做

在你的循环开始之后

 foreach my $i (0..$#sessionArr) {

打印多个<tr>元素，每个元素包含六个<td>项，其内容来自六个数组

你的CGI代码在Content-Type HTTP标头后发送回客户端。不是<html>或<body>甚至是<table>。这有点不对，但即使如此，您的浏览器也会做到最好并显示缺少元素默认的信息

然后您发送文档类型声明以及您放置的页面的其余部分

and below here is just html 
---this section is where im trying to get the data to display

这与Perl代码的其余部分一样重要，以及我要求查看的内容

您的Perl程序将按照您打印的顺序发送文本。我们不知道在适当的<tr>中插入您的<table>元素。正如我所说，您应该能够通过从命令行运行代码来查看代码产生的内容

通常的解决方案是使用模板模块。 Template是最重要的，但还有很多其他

当然，您可以按照正确的顺序在您的程序中分散print个语句，但这会使您的代码更难以理解

我希望有帮助

答案 2 :(得分：1)

这是一个重写，使用Template Toolkit（“TT”）来构建HTML页面并包含来自JSON的数据

原始HTML存在许多问题。标签是不平衡的，并且您在体内只有头部元素。我无法保证这会解决所有问题，但我无法再发现任何错误。您应该小心保持HTML缩进，以便您可以更轻松地发现不平衡的标记。它还避免了对结束标记进行评论的必要性

我已经包含了一段代码，向您展示如何更轻松地从每个哈希列表中提取相同字段的数组。这些变量未被使用，因此一旦您理解了该课程，请删除该代码

Template Toolkit的模板通常保存在单独的.tt文件中。在这种情况下，我使用了DATA文件句柄，因为它更符合您编写原始代码的方式。但请记住，TT模板可能包含引用其他单独文件的include语句。例如，您可以将页脚部分放在外部文件中，然后在主模板中放置[% INCLUDE footer.tt %]。但这是为了未来

请注意，Template Toolkit允许您直接访问Perl数据结构。模板需要使用的任何内容都必须在process方法调用的第二个参数中传递。在这种情况下，我已通过{ json => $decoded_json }，以便TT现在可以使用json标识符来引用您已下载的哈希值。在模板中，json.items现在是数据数组（可以json.items.0，json.items.1等方式访问），在这里我写了[% FOREACH item IN json.items %]来声明一个新的TT变量{{ 1}}并依次将它分配给item数组的每个元素

我希望所有这一切都很清楚

items

输出

#!/usr/bin/perl

use utf8;
use strict;
use warnings 'all';

use CGI qw/:standard/;
use JSON qw( decode_json );
use LWP;
use Template;

use Data::Dumper; 

use constant JSON_URL => 'http://example.com/json';

### This code uses a literal JSON data item. The live code should
### fetch the real data from the JSON_URL. The code to do this
### is here but has been commented out

=comment
my $json = do {
    my $ua = LWP::UserAgent->new;
    my $resp = $ua->get(JSON_URL);
    unless ( $resp->is_success ) {
        die sprintf "Could not retrieve JSON data: %s", $resp->status_line;
    }
    $resp->decoded_content;
};
=cut

my $json = <<END;
{
    "items": [
        {
            "sessionID":        "session1",
            "classField":       "class1",
            "startTimeField":   "start1",
            "leader":           "leader1",
            "professorField":   "prof1",
            "descriptionField": "desc1"
        },
        {
            "sessionID":        "session2",
            "classField":       "class2",
            "startTimeField":   "start2",
            "leader":           "leader2",
            "professorField":   "prof2",
            "descriptionField": "desc2"
        }
    ]
}
END

my $decoded_json = decode_json($json);


### Note that these variables are unused. This is just an example
### of a better way to extract a list of values from an array of hashes
### Please remove this code before deploying

my $items = $decoded_json->{items};

my @sessionArr = map { $_->{sessionID} } @$items;
my @classArr   = map { $_->{classField} } @$items;
my @timeArr    = map { $_->{startTimeField} } @$items;
my @adminArr   = map { $_->{leader} } @$items;
my @profArr    = map { $_->{professorField} } @$items;
my @descArr    = map { $_->{descriptionField} } @$items;

### All that needs to be done its to use CGI to print the HTTP
### header and invoke Template Toolkit to build an HTML page that
### includes the data from the JSON hash

print CGI->header(
    -type    => 'text/html',
    -charset => 'utf-8',
);

my $tt = Template->new;

$tt->process(\*DATA, { json => $decoded_json } );

__DATA__
<!DOCTYPE html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>AU Study Sessions</title>

    <link href="../css/bootstrap.css" rel="stylesheet">

    <link href="../css/main.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

    <link rel="shortcut icon" href="../images/favicon.png">
    <script src="../js/pace.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>

</head>

<body>

    <div class="preloader"></div>

    <!-- ******************** MASTHEAD SECTION ******************* -->

    <main id="top" class="masthead" role="main">
        <div class="container">
            <div class="logo">
                <a href=""><img src="../images/aulogo2.png" alt="logo"></a>
            </div>

            <h1>View Study Sessions</h1>);

            <table>

            [% FOREACH item IN json.items %]
            <tr>
                <td>[% item.sessionID %]</td>
                <td>[% item.classField %]</td>
                <td>[% item.startTimeField %]</td>
                <td>[% item.leader %]</td>
                <td>[% item.professorField %]</td>
                <td>[% item.descriptionField %]</td>
            </tr>
            [% END %]

            <br/>
            <br/>

            <a href=""> Add a Study Session</a>

            <!--
            <a href="index.html#explore" class="scrollto">
                <p>SCROLL DOWN TO EXPLORE</p>
                <p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
            </a>
            -->

        </div> <!-- class="container" -->
    </main>

    <!-- ******************** FOOTER SECTION ******************** -->  

    <div class="container" id="explore">

        <div class="section-title">
            <h2>With Adelphi Study Sessions Website</h2>
            <h4>You will be able to do the following</h4>
        </div>

        <section class="row features">

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_01.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>View Study Groups</h3>
                        <p>See the most up to date study sessions taking place on our garden city campus.</p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_02.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>Add and create new study sessions</h3>
                        <p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_03.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>See description of session</h3>
                        <p>The student who creates the study session will give a short description about what the study session will cover.</p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_04.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>Available on campus</h3>
                        <p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
                    </div>
                </div>
            </div>

        </section>

        <script src="../js/jquery.js"></script>
        <script src="../js/bootstrap.js"></script>
        <script src="../js/easing.js"></script>
        <script src="../js/nicescroll.js"></script>

    </div> <!-- class="container" id="explore" -->

</body>

</html>
相关问题
最新问题