说明文档
- 前言
-
- 一、环境配置
-
- 技术栈
- 主界面效果图
- 二、二级页面（Java板块）
- 三、后台登陆界面
- 四、对于表单数据校验
- 五、公告功能
- 六、公告对应的表建立
- 七、公告连接数据库与显示
- 结语
前言 审美不好大家不喜勿喷，没有使用任何框架，全凭自己感觉构建但是基本功能可以实现。使用的脚本语言和技术比较老旧，由于CSS渲染的部分很少所以使用的是内部CSS，不是很精通JS主要用它实现简单的界面跳转间弹窗交互
一、环境配置 【JSP|【三剑客+JSP+Mysql+Tomcat】从前到后搭建简易编程导航小网站（期末作业）】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;
}
- "active" href="https://www.it610.com/article/###">首页
- "active1" href="https://www.it610.com/article/zhuce.jsp">请先登陆注册~~
- "java.jsp">Java
- "###">Python
- "###">php
- "###">Go
- "###">Spring全家桶
- "###">Ajax
- "###">数据结构与算法
- "###">前端三剑客
- "###">面试刷题
- "###">数据库
- "###">Go
- "active" href="https://www.it610.com/article/###">退出
"search">
"wdress.html" target="_blank">
文章图片
"wdress.html" target="_blank">
文章图片
"wdress.html" target="_blank">
文章图片
"wdress.html" target="_blank">
文章图片
"announce.html" target="_blank">公告>> "book.html" target="_blank">必读书籍>> "share.html" target="_blank">开源社区>> "skill.html" target="_blank">主流技术>> "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;
}
- "active" href="https://www.it610.com/article/shouye.jsp">首页
- "active1" href="https://www.it610.com/article/zhuce.jsp">你好，Java程序员~~
- "###">Java
- "###">Python
- "###">php
- "###">Go
- "###">Spring全家桶
- "###">Ajax
- "###">数据结构与算法
- "###">前端三剑客
- "###">面试刷题
- "###">数据库
- "###">Go
- "active" href="https://www.it610.com/article/###">退出
"search">
"####" target="_blank">
文章图片
"javabingfa.jsp" target="_blank">
文章图片
"####" target="_blank">
文章图片
"####" target="_blank">
文章图片
"announce.html" target="_blank">公告>> "book.html" target="_blank">必读书籍>> "share.html" target="_blank">开源社区>> "skill.html" target="_blank">主流技术>> "service.html" target="_blank">资源下载>>
三、后台登陆界面 效果图:
(主要涉及到form表单的应用)
文章图片
核心代码：
>
body{
background-image:url(img/2.jpg);
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
后台登陆界面>
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;
}
公告>> 必读书籍>> 开源社区>> 主流技术>> 资源下载>>
>
window.alert("欢迎注册，编程猿！");
设置用户名：
性别：
男
女
设置密码：
确认密码：
学历：
>
就业方向:
Java后端
web前端
C#
python
期望薪资：
备注：
四、对于表单数据校验 主要实现对用户名密码输入合理性的判断
纯JSP脚本：
五、公告功能 效果图：
用户输入内容，存储到数据库后台并且可以进行查看
>
body{
background-image:url(img/88.jpg);
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
公告>
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;
}div.search {
padding: 0 0;
}form {
position: relative;
width: 400px;
margin: 0 auto;
}
.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: 2px 2px;
cursor: pointer;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
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;
}
.list{
font-family: "微软雅黑";
font-size: 20px;
color:white;
}
.list a{
text-decoration: none;
color:white;
}
input[type=text1] {
width: 50%;
height:20%;
padding:0px ;
margin:100px 0;
box-sizing: border-box;
text-align:left;
}
>
window.alert("欢迎光临本站，小猿！");
文章图片
文章图片
文章图片
公告>> 必读书籍>> 开源社区>> 主流技术>> 资源下载>>
六、公告对应的表建立
文章图片
七、公告连接数据库与显示 这里用的是8.0+的jar包，你们连数据库的时候不要版本增差过大否则会版本不兼容而报错
效果展示：
文章图片
核心代码：
采用的是Properties读文件通过JDBC方式连接数据库（记得自己写配置文件）
结语 到这里网站基本设计就完成了，虽然功能比较单一但是却对本学期学过的知识是一个很好的整合和复习，让我对前后端的认识与体会更加深刻，特别是HTML中form表单的使用、CSS修饰HTML元素、利用CSS实现一些简单的特效，其实在学习的过程中我发现CSS学会很简单，但是真正把CSS用好，来实现各种各样的效果，浮动是最难的，这种难度不次于数据结构与算法（个人感觉）。当然还有jsp，jsp就是Java，只是它是一个特别的Java语言，加入了一个特殊的引擎，这个引擎将HTTPServlet这个类的一些对象自动进行初始化好让用户使用，而用户不用再去操心前面的工作，“一次编译到处运行”果然名不虚传，面向对象的特征也使我们对于前台输入的信息可以进行更合理高效的操作。特别是通过JDBC来连接数据库，这真是一个很神奇的事情！通过本次实习，我深深感受到我们平时看到的精美页面背后都是程序员一个又一个复杂的设计。总而言之，web是一个庞大的体系，还没学习的内容有很多，趁现在才大二好好珍惜时间学习技术吧。
路的尽头还是路…
后面还有很长的路要走，现在也准备开始SSM的学习，等以后技术更好我一定会回来把你做的更大更好.
推荐阅读
- HTML+CSS|【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
- 前端|【HTML+CSS+JS】注册页面模板
- 数据库|MySQL 暴跌！
- 数据结构|BigDecimal使用不当，造成P0事故！
- 极致效率，云原生数据库TDSQL-C安身立命的根本
- 数据湖构建—如何构建湖上统一的数据权限
- 现代斗山X瓴羊（“一横四纵“解决方案聚焦中台场景级部署）
- webpack|【webpack】从零开始配置webpack系列(原理篇)
- 计算机网络|【HTTP协议】发展历程