Question

Noob在这里。我正在一个JSP项目中，教职人员可以通过输入表单输入有关新实习的详细信息，并且数据将存储在MySQL表中。现在，我想编写一些代码，每条记录都会显示在主页上，并由教职员工提交详细信息。我找到了通过表格显示它的代码，但是我希望它以格式化的方式显示（例如卡片或类似的东西），我该怎么做？

StudentLogin.jsp-门户的第一页。（现在，它只有一个标题，但是在正文中，将显示新添加的实习生。）

       <div class="topnav">
        <a class="none" id="aa">Internship Portal</a> 
        <a class="active"
            href="#home">Home</a> <a href="#contact">Contact</a> <a
            href="#contact">Page3</a>
        <div class="topnav-right">
            <a href="#about">About</a>
            <button class="btn btn-primary" id="button1" data-toggle="modal"
                data-target="#myModal">Login</button>
        </div>
    </div>
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Login</h4>
                </div>
                <div class="modal-body">
                    <div class="center">
                   <!-- form -->
                        <form action="DisplayData" method="post">
                            <div class="input-container">
                                <i class="fa fa-user icon"></i> <input class="input-field"
                                    type="text" placeholder="Username" name="username" required />
                            </div>
                            <div class="input-container">
                                <i class="fa fa-key icon"></i> <input class="input-field"
                                    type="password" placeholder="Password" name="password" required />
                            </div>
                            <a href="index1.jsp"><button type="button" id="btn">Login</button></a>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

index1.jsp-第二页，学院可以在其中上传新的实习数据

<html>
<head>
    <title>Internship Portal</title>
    <link href="img/student.png" rel="icon">
    <link rel = "stylesheet" href="portal/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
    <div class = "portal-title">
        SSGMCE Internship Portal
    </div>
    <div class="container-form">
        <div class = "wrap-form">
            <form class="internship-form" method="post" action="Login1" >
                <div class="internship-form-title">
                    Add An Internship
                </div>
                <div class="wrap-input" style= "padding-top: 20px">
                    <div class="internship-label-title">
                    Type of Internship
                    </div>
                    <input class="wrap-input" type="radio" name ="type" value= "work-from-home" />
                    Work From Home
                    <input class="wrap-input" type="radio" name= "type" value= "in-office" />
                    In Office
                </div>
                <div>
                    <div class="internship-label-title">
                    Company
                    </div>
                    <input class="input" type="text" placeholder="Name of the company" name="company" required/>
                </div>
                    <div class="internship-label-title">
                    Location
                    </div>
                <input class="input" type="text" placeholder="Location of the company" name="location"required/>
                <div>
                    <div class="internship-label-title">
                    Technology
                    </div>
                    <input class="input" type="text" placeholder="Technologies involved" name="technology"required/>
                </div>
                <div>
                    <div class="internship-label-title">
                    Duration
                    </div>
                    <input class="input" type="text" placeholder="Duration of Internship" name="duration" required/>
                </div>
                <div>
                    <div class="internship-label-title">
                    Stipend
                    </div>
                    <input class="input" type="text" placeholder="Stipend per month" name="stipend" required/>
                </div>
                <div class="wrap-input" style= "padding-top: 7px;"> 
                    <input class="add-btn" type="submit" name = "submit" value="Add to Portal" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>

单击Submit（提交）按钮后，数据将保存在MySQL数据库中，并将用户重定向到首页，即StudentLogin.jsp

现在，我们遇到的问题是如何在第一页上以卡片形式显示此数据。

如何在JSP中以我们希望的方式（不同于表）将数据从MySQL数据库显示到HTML页面？

0 个答案: