网络知识 娱乐 【三剑客+JSP+Mysql+Tomcat】从前到后搭建简易编程导航小网站(期末作业)
说明文档
- 前言
- 一、环境配置
-
- 主界面效果图
- 二、二级页面(Java板块)
- 三、后台登陆界面
- 四、对于表单数据校验
- 五、公告功能
- 六、公告对应的表建立
- 七、公告连接数据库与显示
- 结语
前言
审美不好大家不喜勿喷,没有使用任何框架,全凭自己感觉构建但是基本功能可以实现。使用的脚本语言和技术比较老旧,由于CSS渲染的部分很少所以使用的是内部CSS,不是很精通JS主要用它实现简单的界面跳转间弹窗交互
一、环境配置
1.JDK版本:jdk1.8.0_301
2.Tomcat版本:9.0.0.M26
3.MySQL版本:8.0.0.11
4.jar包:8.0.29
5.编辑器:Notepad++
6.浏览器:Chrome
技术栈
HTML+CSS+JS+JSP+MySQL+Tomcat
主界面效果图
首页面
有些区块代码里写了超链接,用的###填充拿去交作业的话可以自己改成相应的链接
核心代码:
body{
background-image:url(img/88.jpg);
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
编程导航学习网站
div{
text-align:center;
color:white;
font-size:18;
font-weight:900;
}
.button {
background-color:#555555;
border-radius: 4px;
transition-duration: 0.4s;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
background: rgba(222,222,2220,2222.3);
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
li a.active1 {
color: red;
background-color: #4CAF50;
}
.list{
position: left;
top: 500px;left: 1380px;font-family: "微软雅黑";
font-size: 20px;color:white;}
.list a {
text-decoration: none;
color:white;
}
* {
box-sizing: border-box;
}
div.search {
padding: 0 0;
}
form {
position: relative;
width: 400px;
margin: 0 auto;
}
input,button {
border: none;
outline: none;
}
.search input {
width: 100%;
height: 42px;
padding-left: 13px;
border: 2px solid #c5464a;
border-radius: 19px;
background: transparent;
}
.search button {
height: 42px;
width: 42px;
cursor: pointer;
position: absolute;
background: #c5464a;
border-radius: 0 19px 19px 0;
width: 60px;
right: 0;
}
.search button:hover {
background-color: #c7585c;
}
.search button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
- <a class="active" href="###">首页
- <a class="active1" href="zhuce.jsp">请先登陆注册~~
- <a href="java.jsp">Java
- <a href="###">Python
- <a href="###">php
- <a href="###">Go
- <a href="###">Spring全家桶
- <a href="###">Ajax
- <a href="###">数据结构与算法
- <a href="###">前端三剑客
- <a href="###">面试刷题
- <a href="###">数据库
- <a href="###">Go
<li style="float:right"><a class="active" href="###">退出
<div class="search">
<form action="" method="post">
<input placeholder="请输入..." name="keyword" type="text">
<button type="submit">
window.alert("欢迎光临本站,小猿!");
<table border="0" bordercolor="black" cellspacing="20" align="right">
<td rowspan="2"><a href="wdress.html" target="_blank"><img src="img/13.jpg" width="240px" height="480px">
<td rowspan="2" colspan="2"><a href="wdress.html" target="_blank"><img src="img/17.jpg" width="480px" height="480px">
<a href="wdress.html" target="_blank"><img src="img/14.jpg" width="240px" height="240px"> |
<td rowspan="2"><a href="wdress.html" target="_blank"> <marquee direction="down"><img src="img/11.jpg" width="240px" height="320px">
<img src="img/9.jpg" width="240px" height="240px"> |
<table class="list" border="1" bgcolor="green" bordercolor="white"cellpadding="5">
<a href="announce.html" target="_blank">公告>> |
<a href="book.html" target="_blank">必读书籍>> |
<a href="share.html" target="_blank">开源社区>> |
<a href="skill.html" target="_blank">主流技术>> |
<a href="service.html" target="_blank">资源下载>> |
二、二级页面(Java板块)
效果图:
这里的每个图片都有链接跳转
核心代码:
body{
background-image:url(img/88.jpg);
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Java专栏
div{
text-align:center;
color:white;
font-size:18;
font-weight:900;
}
.button {
background-color:#555555;
border-radius: 4px;
transition-duration: 0.4s;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
background: rgba(222,222,2220,2222.3);
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
li a.active1 {
color: red;
background-color: #4CAF50;
}
.list{
position: left;
top: 500px;left: 1380px;font-family: "微软雅黑";
font-size: 20px;color:white;}
.list a {
text-decoration: none;
color:white;
}
* {
box-sizing: border-box;
}
div.search {
padding: 0 0;
}
form {
position: relative;
width: 400px;
margin: 0 auto;
}
input,button {
border: none;
outline: none;
}
.search input {
width: 100%;
height: 42px;
padding-left: 13px;
border: 2px solid #c5464a;
border-radius: 19px;
background: transparent;
}
.search button {
height: 42px;
width: 42px;
cursor: pointer;
position: absolute;
background: #c5464a;
border-radius: 0 19px 19px 0;
width: 60px;
right: 0;
}
.search button:hover {
background-color: #c7585c;
}
.search button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
- <a class="active" href="shouye.jsp">首页
- <a class="active1" href="zhuce.jsp">你好,Java程序员~~
- <a href="###">Java
- <a href="###">Python
- <a href="###">php
- <a href="###">Go
- <a href="###">Spring全家桶
- <a href="###">Ajax
- <a href="###">数据结构与算法
- <a href="###">前端三剑客
- <a href="###">面试刷题
- <a href="###">数据库
- <a href="###">Go
<li style="float:right"><a class="active" href="###">退出
<div class="search">
<form action="" method="post">
<input placeholder="请输入..." name="keyword" type="text">
<button type="submit">
window.
alert("欢迎光临本站,小猿!");
<table border=
"0" bordercolor=
"black" cellspacing=
"20" align=
"right">
<td rowspan="2"><a href="####" target="_blank"><img src="img/20.jpg" width="240px" height="480px">
<td rowspan="2" colspan="2"><a href="javabingfa.jsp" target="_blank"><img src="img/26.jpg" width="480px" height="480px">
<a href="####" target="_blank"><img src="img/22.jpg" width="240px" height="240px"> |
<td rowspan="2"><a href="####" target="_blank"> <marquee direction="down"><img src="img/23.jpg" width="240px" height="320px">
<img src="img/24.jpg" width="240px" height="240px"> |
<table class=
"list" border=
"1" bgcolor=
"green" bordercolor=
"white"cellpadding=
"5">
<a href="announce.html" target="_blank">公告>> |
<a href="book.html" target="_blank">必读书籍>> |
<a href="share.html" target="_blank">开源社区>> |
<a href="skill.html" target="_blank">主流技术>> |
<a href="service.html" target="_blank">资源下载>> |
三、后台登陆界面
效果图:
(主要涉及到form表单的应用)
核心代码:
<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<style>
body{
background-image:url(img/2.jpg);
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
<body>
<h1 style="background-color:hsl(39, 100%, 50%)" align=center>后台登陆界面</h1>
<style>
div{
text-align:center;
color:black;
font-size:18;
font-weight:900;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
background: rgba(222,222,2220,0.3);
}
.button {
background-color:#555555;
border-radius: 4px;
transition-duration: 0.4s;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
li a.active1 {
color: red;
background-color: #4CAF50;
}
</style>
<ul>
<li><a class="active" href="shouye.jsp">首页</a></li>
<li><a class="active1" href="###">登陆注册中~~</a></li>
<li><a href="###">JAVA</a></li>
<li><a href="###">Python</a></li>
<li><a href="###">php</a></li>
<li><a href="###">Go</a></li>
<li><a href="###">Spring全家桶</a></li>
<li><a href="###">Ajax</a></li>
<li><a href="###">数据结构与算法</a></li>
<li><a href="###">前端三剑客</a></li>
<li><a href="###">面试刷题</a></li>
<li><a href="###">Go</a></li>
<li><a href="###">数据库</a></li>
<li style="float:right"><a class="active" href="###">退出</a></li>
</ul>
</table>
<table class="list" border="1" bgcolor="green" bordercolor="white"cellpadding="5">
<tr><td><a href="announce.html" target="_blank">公告>></a></td></tr>
<tr><td><a href="book.html" target="_blank">必读书籍>></a></td></tr>
<tr><td><a href="share.html" target="_blank">开源社区>></a></td></tr>
<tr><td><a href="skill.html" target="_blank">主流技术>></a></td></tr>
<tr><td><a href="service.html" target="_blank">资源下载>></a></td></tr>
</table>
<script>
window.alert("欢迎注册,编程猿!");
</script>
<div>
<form method="get" action="login.jsp">
设置用户名:<br>
<input type="text" name="beginNum" value="请输入用户名" maxlength="10" size="40" ><br><br>
性别:
<input type="radio" name="sexy" value="男" checked="true">男
<input type="radio" name="sexy" value="女" >女<br><br>
设置密码:<br>
<input type="text" name="endNum" value="请输入密码" maxlength="10" size=