网络知识 娱乐 【三剑客+JSP+Mysql+Tomcat】从前到后搭建简易编程导航小网站(期末作业)

【三剑客+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=