概述

这个小项目需要用idea和数据库，没有配置好的同学记得提前去配置

在这个网站中，我设计三个界面，分别是index，form，about，picture。其实主页面展示了一些合工大的图片和自己的一些日常生活和其他界面的连接；form界面介绍了自己的个人信息，包括学号专业等；about是自己的一些关于生活的感悟还有喜欢的电影的介绍，以及关于这部电影的片段；设计了登录界面，连接了后端数据库，如果登陆成功则跳转到picture页面，picture页面有自己的一些照片，还有高中时代的老师，并为这些照片做了一个旋转的动画。其中index和form，picture都添加了自己喜欢的音乐。

整体结构：

前端代码：

Index.jsp

设置主界面，做简单的自我介绍，提供跳转到其他页面的链接

1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2. <html>
3. <head>
4. <title>网站实验课作业</title>
5. <link rel="stylesheet" href="index1.css">
6. </head>
7. <body>
8. <div class="home">
9. <div class="content">
10. <div class="stars"></div>
11. <img style="width: 80vw" class="bgc" src="./img/D.png" width="100%" alt="">
12. <br>
13. <h3 class="title">欢迎来到我的个人网站</h3>
14. <h3 class="titles">今天也要加油鸭</h3>
15. <br>
16. <hr>
17. <img class="icon" src="./img/C1.png" alt="">
18. <div class='ribbon'>
19. <br>
20. <a href='./index.jsp'><span>Home</span></a>
21. <a href='./about.jsp'><span>About</span></a>
22. <a href='./form.jsp'><span>Form</span></a>
23. <a href='login.jsp'><span>好康的</span></a>
24. </div>
25. <hr>
26. </div>
27. <div class="icons">
28. <img class="icons_items_imgs" src="./img/教学楼.png" alt="">
29. <blockquote>教学楼是我们每天必去取经之地</blockquote>
30. <hr>
31. 
32. <img class="icons_items_imgs" src="./img/食堂.png" alt="">
33. <blockquote>每天都要在食堂里面纠结到底吃什么</blockquote>
34. <hr>
35. 
36. <img class="icons_items_imgs" src="./img/朝霞.png" alt="">
37. <blockquote>天空还是一片浅蓝,转眼间东方出现了一道红霞</blockquote>
38. </div>
39. 
40. <audio autoplay="autoplay" id="audio" loop="loop">
41. <source src="./video/music.mp3" type="audio/MP3">
42. </audio>
43. </div>
44. 
45. </body>
46. 
47. <script>
48.     let mucics = document.getElementById('audio')
49.     document.body.addEventListener('mousemove', function() {
50.       setTimeout(() => {
51.         mucics.play();
52.       }, 5000);
53.     }, false);
54. </script>
55. 
56. </html>

index.css

1. body{
2. background-color:antiquewhite;
3. }
4. 
5. .content {
6. width: 80%;
7. margin: auto;
8. }
9. 
10. .icons {
11. width: 80%;
12. margin: auto;
13. }
14. 
15. .introduce {
16. width: 80%;
17. margin: auto;
18. }

about.jsp

描述个人信息，加入视频

1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2. <html>
3. <head>
4. <title>我的信息</title>
5. <link rel="stylesheet" href="about1.css">
6. </head>
7. 
8. <body>
9. <div class="about">
10. <h3 class="about_tit">要不断的努力，才能成为更好的自己</h3>
11. <img class="about_bgc" src="./img/下载.png" alt="">
12. <div class='ribbon'>
13. <a href='./index.jsp'><span>Home</span></a>
14. <a href='./about.jsp'><span>About</span></a>
15. <a href='./form.jsp'><span>Form</span></a>
16. <br>
17. </div>
18. <hr>
19. <div class="me">
20. <img class="me_img" src="./img/OIP-C1.jpg" alt="">
21. <span class="me_tit animate ">我是一名大二的学生，平时爱好看看书，浏览网页资料，学习一下新知识，为以后毕业做些小打算。跟大多数人一样，对未来些许迷茫，当忽然之间脑海里闪现出来一些关于几年前的某个片段时，会情不自禁的回想那个时候的自己，
22.         关于那个曾经的所有点点滴滴也渐渐浮现出一些画面，突然拼命的想要去找一点在那个记忆点里的某些东西，寻找的过程中脑海里的思绪早已沉溺在回忆里面，忘了的还有那些忘不了的感触在这一刻全都涌了出来，我觉得最后寻找的结果或许已不重要了，因为这突如其来想要寻找的一些东西的念头，让自己突然变得好安静，莫名的思绪蔓延开来了，它又带我回到了现在已经体会不到的那种怦然心动的时候，仿佛打开了老旧的抽屉，里面装满了当初的成长，青涩，遗憾与那一种想起来会不禁忽然笑出来的感觉，可能想笑的是那时的自己，又或许是笑那带有遗憾结尾的时光，怀念真好。
23.                 又一年即将过去了，生活一如既往的推着自己往前走，在行人眼里穿梭，而不时会回头看看的，还是那个仿佛不知在追逐着什么的自己，此刻的空气很好，它不会留下痕迹。
24. </span>
25. </div>
26. <div >
27. <br>
28. <hr>
29. <span>
30.            这是我喜欢的一系列电影，《哈利波特》。这部电影为我们描绘了一个奇幻的魔法世界，有隐身衣，魔杖，有复活石，有一切一切我们幻想中魔法世界的东西。赫敏聪颖，罗恩勇敢，哈利坚韧，
31.                 他们共同学习，冒险，并在最后打败了伏地魔，为巫师界带来了光明与和平。下面是哈利和蛇怪搏斗的片段。
32. </span>
33. </div >
34. 
35. <div class = "videos">
36. <video width="800" height="500" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="./video/QQ~1.mp4"></video>
37. 
38. </div>
39. 
40. 
41. 
42. <div style="margin-top: 300px"></div>
43. </div>
44. </body>

about.css

1. body{
2. background-color:antiquewhite;
3. }
4. 
5. .about {
6. width: 80%;
7. margin: auto;
8. }
9. 
10. .videos{
11. width: 80%;
12. margin: auto;
13. }

form.jsp

绘制表单

1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2. <html>
3. <head>
4. <title>表格</title>
5. <link rel="stylesheet" href="form.css">
6. </head>
7. <body>
8. <div class="from">
9. <img class="bgc" src="./img/dfg.png" alt="无法找到">
10. <hr>
11. <div class="submit">
12. <span class="form_title">个人信息</span>
13. <div class="form_input">
14. <span>姓名：</span>
15. <input class="inputs" type="text" value="晓依">
16. </div>
17. <div class="form_input">
18. <span>班级:</span>
19. <input class="inputs" type="text" value="合工大软件工程20-4">
20. </div>
21. <div class="form_input">
22. <span>学号：</span>
23. <input class="inputs" type="text" value=“2020214523”>
24. </div>
25. <div class="form_input">
26. <span>系部：</span>
27. <input class="inputs" type="text" value="软件工程系">
28. </div>
29. <div class="form_input">
30. <span>课程名称：</span>
31. <input class="inputs" type="text" value="网页设计与制作">
32. </div>
33. 
34. <br>
35. <div class="btn_submit">
36. <a href="./index.jsp" class="back"><button class="home_href">首页</button></a>
37. </div>
38. </div>
39. </div>
40. 
41. </div>
42. <audio autoplay="autoplay" id="audio" loop="loop">
43. <source src="./video/sea.mp3" type="audio/MP3">
44. </audio>
45. </div>
46. <script>
47.     let mucics = document.getElementById('audio')
48.     document.body.addEventListener('mousemove', function() {
49.         setTimeout(() => {
50.             mucics.play();
51.         }, 2000);
52.     }, false);
53. </script>
54. </body>
55. 
56. </html>

form.css

1. * {
2. margin: 0;
3. padding: 0
4. }
5. 
6. .from {
7. overflow: hidden;
8. position: relative;
9. }
10. 
11. .bgc {
12. width: 100%;
13. }
14. 
15. .submit {
16. position: absolute;
17. z-index: 9;
18. left: 0;
19. top: 0;
20. right: 0;
21. bottom: 0;
22. margin: auto;
23. margin-top: 150px;
24. width: 500px;
25. height: 500px;
26. background: rgba(255, 255, 255, 0.2);
27. border-radius: 10px;
28. color: #fff;
29. display: flex;
30. flex-direction: column;
31. }
32. 
33. .form_title {
34. text-align: center;
35. margin-top: 40px;
36. font-size: 18px;
37. }
38. 
39. .form_input {
40. padding: 0 30px;
41. box-sizing: border-box;
42. display: flex;
43. margin-top: 20px;
44. }
45. 
46. .inputs {
47. height: 40px;
48. width: 300px;
49. border-radius: 5px;
50. border: none;
51. background-color: #eee;
52. color: #666;
53. padding-left: 20px;
54. }
55. 
56. .form_input span {
57. width: 85px;
58. align-self: center;
59. }
60. 
61. .btn_submit {
62. align-self: center;
63. }
64. 
65. .btn {
66. border: none;
67. width: 80px;
68. height: 40px;
69. color: #fff;
70. border-radius: 5px;
71. background: #999;
72. margin-top: 40px;
73. }
74. 
75. .btn:hover {
76. background: #666;
77. }
78. 
79. .back {
80. margin-left: 10px;
81. }
82. 
83. .home_href {
84. border: none;
85. width: 80px;
86. height: 40px;
87. color: #fff;
88. border-radius: 5px;
89. background: #FFD204;
90. }

login.jsp

1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2. <html>
3. <head>
4. <title>用户登录</title>
5. </head>
6. <body>
7. <div style="text-align: center"/>
8. <form action="login" method="post" id = "loginForm"/>
9.         姓名：<input type="text" name="uname" id="uname" value="${messageModel.object.my_name}"> <br>
10.         密码：<input type="password" name="upwd" id="upwd" value="${messageModel.object.my_password}"> <br>
11. <span id ="msg" style="font-size: 12px;color: red">${messageModel.msg}</span> <br>
12. <button type="submit" id="loginBtn">登录</button>
13. <a href="./index.jsp" ><button type="button" >返回</button></a>
14. </form>
15. </div>
16. 
17. </body>
18. 
19. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
20. <script src="login.js"></script>
21. 
22. </html>

login.js

做前台的校验后再将数据发送至后台

1. $("#loginBtn").click(function(){
2.     var uname = $("#uname").val();
3.     var upwd = $("#upwd").val();
4. 
5.     console.log(1);
6. 
7. if(isempty(uname)){
8.         $("#msg").html("不为空值");
9. return;
10.     }
11. if(isempty(upwd)){
12.         $("#msg").html("不为空值");
13. return;
14.     }
15. 
16.     var formData = $('loginForm').serialize(); //取表单值 并进行序列化；此时formData已经是乱码了
17.     formData = decodeURIComponent(formData,true);//一次转码
18.     formData = encodeURI(encodeURI(formData)); //两次转码
19. 
20.     console.log(2);
21. 
22.     $.ajax({
23. type:'post',
24. data:formData,//form表单数据集
25.         url:'/login',
26.         success:function(){
27. //alert("保存成功！");
28.         }
29.     });
30. 
31.     console.log(3);
32. // $("loginForm").submit();
33. 
34. });
35. 
36. function isempty(str){
37. if(str == null || str.trim()==''){
38. return true;
39.     }
40. return false;
41. }

picture.jsp

设置了旋转特效

1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2. 
3. <!doctype html>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <title>旋转扑克</title>
8. <link rel="stylesheet" href="picture.css">
9. <style>
10.     *{ margin:0; padding:0;}
11.     .pkBox{
12.       width:258px;
13.       height:360px;
14.       position:relative;
15.       margin:200px auto;}
16.     .pkBox > img{
17.       width:100%;
18.       height:100%;
19.       position:absolute;
20. left:0;
21. top:180px;
22.       transition:transform 2s;
23.       transform-origin:right top;}
24.     .pkBox:hover >img:nth-of-type(1){  //想想这些重复的可以用什么好的方法替换呢
25.     transform:rotate(30deg);}
26.     .pkBox:hover >img:nth-of-type(2){
27.       transform:rotate(60deg);}
28.     .pkBox:hover >img:nth-of-type(3){
29.       transform:rotate(90deg);}
30.     .pkBox:hover >img:nth-of-type(4){
31.       transform:rotate(120deg);}
32.     .pkBox:hover >img:nth-of-type(5){
33.       transform:rotate(150deg);}
34.     .pkBox:hover >img:nth-of-type(6){
35.       transform:rotate(180deg);}
36.     .pkBox:hover >img:nth-of-type(7){
37.       transform:rotate(210deg);}
38.     .pkBox:hover >img:nth-of-type(4){
39.       transform:rotate(240deg);}
40.     .pkBox:hover >img:nth-of-type(8){
41.       transform:rotate(270deg);}
42.     .pkBox:hover >img:nth-of-type(9){
43.       transform:rotate(300deg);}
44.     .pkBox:hover >img:nth-of-type(10){
45.       transform:rotate(330deg);}
46.     .pkBox:hover >img:nth-of-type(11){
47.       transform:rotate(360deg);}
48. </style>
49. </head>
50. 
51. <body>
52. <div class='ribbon'>
53. <br>
54. <a href='./index.jsp'><span>Home</span></a>
55. <a href='./about.jsp'><span>About</span></a>
56. <a href='./form.jsp'><span>Form</span></a>
57. </div>
58. <div class="pkBox">
59. <img src="./img/OIP-C4.png" alt="">
60. <img src="./img/pi.png" alt="">
61. <img src="./img/C1.png" alt="">
62. <img src="./img/pi.png" alt="">
63. <img src="./img/pi1.jpg" alt="">
64. <img src="./img/老师.jpeg" alt="">
65. <img src="./img/老师" alt="">
66. <img src="./img/学校.jpg" alt="">
67. <img src="./img/pi.png" alt="">
68. <img src="./img/pi.png" alt="">
69. <img src="./img/pic.png" alt="">
70. </div>
71. 
72. </div>
73. <audio autoplay="autoplay" id="audio" loop="loop">
74. <source src="./video/音乐.mp3" type="audio/MP3">
75. </audio>
76. </div>
77. <script>
78.   let mucics = document.getElementById('audio')
79.   document.body.addEventListener('mousemove', function() {
80.     setTimeout(() => {
81.       mucics.play();
82.     }, 2000);
83.   }, false);
84. </script>
85. </body>
86. <script>alert("欢迎来到我的照片墙");</script>
87. </html>

picture.js

提示欢迎词

alert("欢迎来到我的照片墙");

picture.css

设置背景色

1. body{
2. background-color:antiquewhite;
3. }

后端代码：

mine中

GetSqlSession：

测试程序是否连接个人数据库

1. package mine;
2. 
3. import org.apache.ibatis.io.Resources;
4. import org.apache.ibatis.session.*;
5. 
6. import java.io.IOException;
7. import java.io.InputStream;
8. 
9. 
10. public class GetSqlSession {
11. public static SqlSession createSqlSession() {
12. SqlSessionFactory sqlSessionFactory = null;
13. InputStream input = null;
14. SqlSession session = null;
15. 
16. 
17. try {
18. String resource = "./mybatis_config.xml";
19.             input = Resources.getResourceAsStream(resource);
20.             sqlSessionFactory = new SqlSessionFactoryBuilder().build(input);
21.             session = sqlSessionFactory.openSession();
22. return session;
23.         } catch (IOException e) {
24.             e.printStackTrace();
25. return null;
26.         }
27.     }
28. public static void main(String[] args){
29.         System.out.println(1);
30.         System.out.println(createSqlSession());
31.     }
32. }

StringUtil

这里封装我们要用到的函数

1. package mine;
2. 
3. public class StringUtil {
4. public static boolean isempty(String str){
5. if(str == null || "".equals(str.trim())){
6. return true;
7.         }
8. return false;
9.     }
10. }

Text

为测试我们的程序是否连接session用的

1. package mine;
2. 
3. 
4. import org.apache.ibatis.session.SqlSession;
5. 
6. import java.sql.Connection;
7. 
8. /**
9.  * Created by Martin17 on 2017/3/16.
10.  */
11. public class Text {
12. public static void main(String[] args){
13.         SqlSession session= GetSqlSession.createSqlSession();
14. 
15.         UserMapper userMapper=session.getMapper(UserMapper.class);
16. 
17. user a = userMapper.queryUserByName("渠浩渺");
18.         System.out.println(a);
19.     }
20. }

User“

创建用户类

1. package mine;
2. 
3. public class user {
4. private String my_password;
5. private String my_name;
6. 
7. public String getMy_password() {
8. return my_password;
9.     }
10. 
11. public void setMy_password(String my_password) {
12. this.my_password = my_password;
13.     }
14. 
15. public String getMy_name() {
16. return my_name;
17.     }
18. 
19. public void setMy_name(String my_name) {
20. this.my_name = my_name;
21.     }
22. }

UserMapper

创建接口类，定义接口

1. package mine;
2. 
3. public interface UserMapper {
4. public user queryUserByName(String userName);
5. }

UserMapper.xml

mybatis映射文件，连接到数据库，根据名字，做数据的筛选

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
3. 
4. <mapper namespace="mine.UserMapper">
5. 
6. <select id="queryUserByName" parameterType="String" resultType="mine.user">
7.         select * from text where my_name = #{userName}
8. </select>
9. </mapper>

mine2

MessageModel

创建消息模型

1. package mine2;
2. 
3. public class MessageModel {
4. private Integer code = 1;
5. private String msg = "成功";
6. private Object object;
7. 
8. public Integer getCode() {
9. return code;
10.     }
11. 
12. public void setCode(Integer code) {
13. this.code = code;
14.     }
15. 
16. public String getMsg() {
17. return msg;
18.     }
19. 
20. public void setMsg(String msg) {
21. this.msg = msg;
22.     }
23. 
24. public Object getObject() {
25. return object;
26.     }
27. 
28. public void setObject(Object object) {
29. this.object = object;
30.     }
31. }

UserServlet

接收客户端参数，做出判断，跳转到相应的界面

1. package mine2;
2. 
3. import javax.servlet.ServletException;
4. import javax.servlet.annotation.WebServlet;
5. import javax.servlet.http.HttpServlet;
6. import javax.servlet.http.HttpServletRequest;
7. import javax.servlet.http.HttpServletResponse;
8. import java.io.IOException;
9. 
10. @WebServlet("/login")
11. public class UserServlet extends HttpServlet {
12. 
13. private UserService userService = new UserService();
14. 
15. @Override
16. protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
17. System.out.println(1);
18. 
19.         request.setCharacterEncoding("utf-8");
20. String uname = request.getParameter("uname");
21. String upwd = request.getParameter("upwd");
22. 
23. if(uname==null) {System.out.println(1);}
24. 
25. MessageModel messageModel = userService.userLogin(uname,upwd);
26. 
27. if(messageModel.getCode()==1){
28.             request.getSession().setAttribute("user",messageModel.getObject());
29.             response.sendRedirect("picture.jsp");
30.         }else {
31.             request.setAttribute("messageModel",messageModel);
32.             request.getRequestDispatcher("login.jsp").forward(request,response);
33.         }
34. 
35.     }
36. 
37. }

UserService

接收前端传来的数据，做非空判断，调用dao层查询方法，查询信息，判断用户对象是否存在，返回消息模型对象

1. package mine2;
2. 
3. import mine.GetSqlSession;
4. import mine.StringUtil;
5. import mine.UserMapper;
6. import mine.user;
7. import org.apache.ibatis.session.SqlSession;
8. 
9. public class UserService {
10. public MessageModel userLogin(String uname, String upwd) {
11. 
12.         MessageModel messageModel = new MessageModel();
13. 
14.         user u = new user();
15.         u.setMy_password(upwd);
16.         u.setMy_name(uname);
17.         messageModel.setObject(u);
18. 
19. if(StringUtil.isempty(uname) || StringUtil.isempty(upwd)){
20.             messageModel.setCode(0);
21.             messageModel.setMsg("不为空");
22. return messageModel;
23.         }
24. 
25.         SqlSession session= GetSqlSession.createSqlSession();
26.         UserMapper userMapper=session.getMapper(UserMapper.class);
27.         user user = userMapper.queryUserByName(uname);
28. 
29. if (user==null){
30.             messageModel.setCode(0);
31.             messageModel.setMsg("用户名错误");
32. return messageModel;
33.         }
34. 
35. if (!upwd.equals(user.getMy_password())){
36.             messageModel.setCode(0);
37.             messageModel.setMsg("用户密码错误");
38. return messageModel;
39.         }
40. 
41.         messageModel.setObject(user);
42. 
43. return messageModel;
44.     }
45. }

mybatis_config,xml

配置文件，要与数据库的内容相匹配（放到scr根目录下）

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
3. "http://mybatis.org/dtd/mybatis-3-config.dtd">
4. <configuration>
5. <properties resource="mysql.properties"/>
6. 
7. <environments default="development">
8. <environment id="development">
9. <transactionManager type="JDBC" />
10. <dataSource type="POOLED">
11. <property name="driver" value="${driver}"/>
12. <property name="url" value="${url}"/>
13. <property name="username" value="${user}"/>
14. <property name="password" value="${password}"/>
15. </dataSource>
16. </environment>
17. </environments>
18. 
19. <mappers>
20. <package  name="mine"/>
21. </mappers>
22. </configuration>

mysql.properties

包含个人数据库密码，地址等，登录数据库时使用

1. driver=com.mysql.cj.jdbc.Driver
2. url=jdbc:mysql://localhost:3306/try?severTimezone=UTC&useSSl=false&characterEncoding=UTF-8
3. user=root
4. password=123

设计一个属于自己的网站

概述