基于JSP+Bootstrap+MySQL的“我与家乡”网页设计_bootstrap网页设计报告

作者：代码领袖开发者 | 2024-01-30 19:58:31

踩

bootstrap网页设计报告

个人与家乡展示管理平台
目录
个人与家乡展示管理平台 1
文件说明 1

数据库备份文件为根目录下的 hometown.sql，用户名密码等已删去 1
根目录下 myWeb 文件夹为 IntelliJ IDEA 项目文件 1
个人介绍界面已将与个人隐私有关的部分删除，有需要请自己添加 1
技术与详情介绍 1
用到的技术 1
课设内容 1
实现方法（源码示例） 3
因为前端几乎一样，前端以用户登录为例 8
实体层以用户为例 10
JSP 部分 11
CSS 部分 12
科研实体层 12
科研 DAO 层 13
科研 Servlet 层 15
科研前端，表格显示与查询部分 16
科研前端：增删改表单部分 17
美食实体层 20
美食 DAO 层 21
美食 Servlet 层 24
美食前端：美食卡片展示部分 24
美食前端：美食管理表单部分 26
留言信息实体 28
留言回复实体 28

前端
1.欢迎页面（首页）：实现照片的轮播，以及其他功能的链接等。
2.个人简介：个人情况的简单介绍界面，根据个人兴趣设计。
3.个人技能管理：本文转载自http://www.biyezuopin.vip/onews.asp?id=15091科研情况，学习成绩，开发技能，获奖其他（可根据自己的喜好分类）。最好把这些做成下拉菜单的进行选择。
4.家乡简介：家乡情况的简单介绍，根据个人兴趣设计。
5.特色介绍：主要从美食、美景、风土人情等几方面进行介绍，但不局限于此，根据自己的喜好进行设计。
6.用户留言：设置留言板，游客可以留言，并能实现回复功能。
后端
1.用户管理：包括管理员和游客（游客可以注册，注册之后可以进行留言），管理员管理整个后端的信息
2.技能管理：这部分包括了下拉菜单中涉及的科研情况管理，学习成绩等管理，开发技能管理等。管理指 Web 界面实现（增删改查等工作）
3.家乡特色介绍：这部分主要在 Web 界面进行对美食、美景、风土人情的管理，实现增删改查等功能。
4.留言管理：可以实现留言的管理。管理同上。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="com.dao.CheckLogDAO, com.entity.LogStatus" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>个人与家乡展示管理平台</title>

    <!-- Custom fonts for this template-->
    <link href="static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
            rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="static/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="static/css/photos.css" rel="stylesheet">

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

        <!-- Sidebar - Brand -->
        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.jsp">
            <div class="sidebar-brand-icon rotate-n-15">
                <i class="fas fa-laugh-wink"></i>
            </div>
            <div class="sidebar-brand-text mx-3">我与家乡</div>
        </a>

        <!-- Divider -->
        <hr class="sidebar-divider my-0">

        <!-- Nav Item - Dashboard -->
        <li class="nav-item active">
            <a class="nav-link" href="index.jsp">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>欢迎页</span></a>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider">

        <!-- Heading -->
        <div class="sidebar-heading">
            个人
        </div>

        <!-- Nav Item - Pages Collapse Menu -->
        <li class="nav-item">
            <a class="nav-link" href="selfIntro.jsp">
                <i class="fas fa-fw fa-cog"></i>
                <span>个人简介</span>
            </a>
        </li>

        <!-- Nav Item - Utilities Collapse Menu -->
        <li class="nav-item">
            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
               aria-expanded="true" aria-controls="collapseUtilities">
                <i class="fas fa-fw fa-wrench"></i>
                <span>个人技能管理</span>
            </a>
            <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
                 data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <h6 class="collapse-header">方向:</h6>
                    <a class="collapse-item" href="science.jsp">科研情况</a>
                    <a class="collapse-item" href="study.jsp">学习成绩</a>
                    <a class="collapse-item" href="develop.jsp">开发技能</a>
                    <a class="collapse-item" href="reward.jsp">获奖</a>
                </div>
            </div>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider">

        <!-- Heading -->
        <div class="sidebar-heading">
            家乡
        </div>

        <!-- Nav Item - Charts -->
        <li class="nav-item">
            <a class="nav-link" href="hometown.jsp">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>家乡简介</span></a>
        </li>

        <!-- Nav Item - Pages Collapse Menu -->
        <li class="nav-item">
            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
               aria-expanded="true" aria-controls="collapsePages">
                <i class="fas fa-fw fa-folder"></i>
                <span>特色介绍</span>
            </a>
            <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <h6 class="collapse-header">南京特色:</h6>
                    <a class="collapse-item" href="food.jsp">美食</a>
                    <a class="collapse-item" href="scene.jsp">美景</a>
                    <a class="collapse-item" href="custom.jsp">风土人情</a>
                </div>
            </div>
        </li>


        <!-- Divider -->
        <hr class="sidebar-divider">

        <!-- Heading -->
        <div class="sidebar-heading">
            留言板
        </div>

        <!-- Nav Item - Tables -->
        <li class="nav-item">
            <a class="nav-link" href="messageBoard.jsp">
                <i class="fas fa-fw fa-table"></i>
                <span>用户留言</span></a>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider d-none d-md-block">

        <!-- Sidebar Toggler (Sidebar) -->
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>
        </div>

        <!-- Sidebar Message -->
        <div class="sidebar-card">
            <img class="sidebar-card-illustration mb-2" src="static/img/undraw_rocket.svg" alt="">
            <p class="text-center mb-2"><strong>个人家乡管理展示平台</strong> 是我为java高级应用课设而开发的平台！访问更多代码，请点击： </p>
            <a class="btn btn-success btn-sm" href="https://blog.csdn.net/xiangQiAtCSDN">访问我的博客!</a>
        </div>

    </ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>


                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">

                    <div class="topbar-divider d-none d-sm-block"></div>

                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <%
                                CheckLogDAO dao = new CheckLogDAO();
                                List<LogStatus> list = dao.readLogStatus();
                                for (LogStatus ls : list) {
                            %>
                            <span class="mr-2 d-none d-lg-inline text-gray-600 small">
                <%=ls.getName()%>
              </span>
                            <%}%>
                            <img class="img-profile rounded-circle"
                                 src="static/img/undraw_profile.svg">
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                             aria-labelledby="userDropdown">
                            <a class="dropdown-item" href="login.jsp">
                                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                访客注册/登录/切换账号
                            </a>
                            <a class="dropdown-item" href="loginAdmin.jsp">
                                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                管理员登录/切换账号
                            </a>
                            <div class="dropdown-divider"></div>
                            <form method="post" action="ServletLogout">
                                <button class="dropdown-item" type="submit" data-toggle="modal">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    退出登录
                                </button>
                            </form>

                        </div>
                    </li>

                </ul>

            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">欢迎页</h1>
                </div>

                <%--        <div align="center">--%>
                <div class="screen">
                    <marquee scrollamount="10" direction="left" width="1000" height="500" onmouseover="this.stop();"
                             onmouseout="this.start();">
                        <img src="static/img/nj2.jpg" width="1000" height="500"/>
                        <img src="static/img/nj3.jpg" width="1000" height="500"/>
                        <img src="static/img/custom1.jpg" width="1000" height="500"/>
                        <img src="static/img/scene3.jpg" width="1000" height="500"/>
                        <img src="static/img/scene4.jpg" width="1000" height="500"/>
                    </marquee>
                </div>
                <%--        </div>--%>


            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright &copy; 曹泽昊 2021</span>
                </div>
            </div>
        </footer>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Bootstrap core JavaScript-->
<script src="static/vendor/jquery/jquery.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="static/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="static/js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="static/vendor/chart.js/Chart.min.js"></script>

<!-- Page level custom scripts -->
<script src="static/js/demo/chart-area-demo.js"></script>
<script src="static/js/demo/chart-pie-demo.js"></script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288