My First Website page

@author SYSUJasonFZQ

登录界面.png

1、工具：

①前端：HTML+CSS+JS

②后端：Tomcat 10+Servlet || phpstorm

③项目开发工具：Eclipse(Java EE IDE) Java运行环境：jdk 15

④数据库：Mysql+Navicat 11.2

2、项目的目录结构：

项目结构图.png

Mysql表单结构：

表单结构.png

3、前端代码：

practice.jsp：

<%@ page language="java" contentType="text/html ; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html"
    xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>教师履历系统</title>

<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet"
    href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

</head>
<body>

    <div class="outer_box">
        <div class="filterImg">
            <div class="text">欢迎登陆教师履历系统</div>
            <div class="login_box">
                <h1>
                    <img src="../img/user1.jpg" alt="">
                </h1>
                <form action="/login2/LoginServlet" name="form1" method="post"
                    onkeypress="if(event.keyCode==13) return false"
                    onsubmit="return mycheck(form1)">

                    <p>
                        <i class="fa fa-user"></i> <input type="text" value="工号"
                            onfocus="if(value=='工号')value=''" onblur="if(!value)value='工号'"
                            name="account" id="username">
                    </p>

                    <p>
                        <i class="fa fa-lock"></i> <input type="text" value="登录密码"
                            onfocus="if(value=='登录密码')value=''"
                            onblur="if(!value)value='登录密码'" name="code" id="password">
                    </p>

                    <p class="logIn_btn" id="error">
                        <button type="submit" value="Login" id="dl"
                            style="color: #FFA6B5FF; border: none; 
                            font-size: 20px; padding-left: 5px; background-color: transparent"
                            onclick="mycheck(form1)">Login</button>
                    </p>
                </form>

                <div>
                    <span>立即注册</span><span>忘记密码</span>
                </div>

            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        function mycheck(form1) {
            if (form1.account.value == "工号" || form1.acount.value == "") {
                alert("账号不能为空")
                return false;
            }
            if (form1.code.value == "登录密码" || form1.code.value == "") {
                alert("请输入密码！")
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

style.css：

* {
  margin: 0px;
  padding: 0px;
  color: #fff;
}

input {
  border: none;
}
.filterImg {
  width: 100%;
  height: 100%;
  background-image: url('../img/user1.jpg');
  background-size: 100% 100%;
  text-align: center;
  line-height: 100%;
  font-family: "Adobe 黑体 Std R";
}
.outer_box {
  width: 100%;
  position: relative;
  height: calc(100vh);
}


.login_box {
  width: 320px;
  height: 400px;
  border: 1px solid #fff;
  background-color: rgba(189, 156, 156, 0.233);
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.login_box h1 {
  width: 100%;
  height: 112px;
  margin: 34px 0px;
  text-align: center;
}

.login_box h1 img{
  width: 90px;
  height: 90px;
  border-radius: 55px;
  padding: 10px;
  box-shadow: 0px 0px 5px #fff;
  border: 1px solid #fff;
}


.login_box p {
  /* width: 100%; */
  width: 260px;
  height: 35px;
  margin: 30px 30px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 27px;
}

.login_box i {
  font-size: 20px;
  padding-left: 5px;
}
input {
  width: 200px;
  height: 35px;
  padding-left: 20px;
  border: 0;
  background-color: transparent;
  outline: none;
}



.logIn_btn {
  color: rgb(255, 166, 181);
  background-color: rgba(255, 255, 255, 0.863);
}


.login_box div {
  width: 260px;
  font-size: 12px;
  margin: 0px 30px;
  display: flex;
  justify-content: space-between;
}

.text{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%,-10%);
  color: white;
  font-size: 3vw;
}
.loginInfo{
  width:100%;
  height: 100%;
  left:50%;
  top:50%;
  font-size:235px;
  background-size: 100% 100%;
  text-align: center;
}

4、后端代码：

userDao接口类：

package controller.dao;

import java.sql.Connection;

import user.User;

public interface userDao {
    User login(Connection conn, User user) throws Exception;

}

userDaolmpl：

package controller.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import user.User;

public class userDaoImpl implements userDao {

    public User login(Connection conn, User user) throws Exception {
        User resultUser = null;
        String sql = "select * from users where binary 账号=? and binary 密码=?";
        //由于mysql没设置区分大小写，所有sql语句就使用了binary进行大小写的区分
        PreparedStatement pstatement = conn.prepareStatement(sql);
        pstatement.setString(1, user.getUserName());
        pstatement.setString(2, user.getPassword());
        ResultSet resultSet = pstatement.executeQuery();
        if (resultSet.next()) {
            resultUser = new User();
            resultUser.setUserName(resultSet.getString("账号"));
            resultUser.setPassword(resultSet.getString("密码"));
        }
        return resultUser;
    }
}

数据库驱动与释放：

package controller.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class jdbcUtil {
    private String url = "jdbc:mysql://localhost:3306/mysql?useSSL=false&characterEncoding=utf-8&allowPublicKeyRetrieval=true&serverTimezone=UTC";
    private String username = "";
    private String password = ""; //填写你的账号和密码啊

    public Connection getConnection()
            throws SQLException, InstantiationException, IllegalAccessException, ClassNotFoundException {

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
           /*com.mysql.jdbc.Driver 是 mysql-connector-java 5中的
            com.mysql.cj.jdbc.Driver 是 mysql-connector-java 6以及以上中的
           */
        } catch (Exception e) {
            e.printStackTrace();
        }
        Connection conn = null;
        try {
            conn = DriverManager.getConnection(url, username, password);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }

    public void close(ResultSet resultSet) throws Exception {
        if (resultSet != null) {
            resultSet.close();
        }
    }

    public void close(Statement statement) throws Exception {
        if (statement != null) {
            statement.close();
        }
    }

    public void close(Connection conn) throws Exception {
        if (conn != null) {
            conn.close();
        }//释放
    }

}

JsonResult类：接受并处理Json文件

package controller.dao;

public class JsonResult {
    private int type;
    private String errors;

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public String getError() {
        return getError();
    }

    public void setError(String errors) {
        this.errors = errors;
    }
}

登录界面的Servlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;

import controller.dao.jdbcUtil;
import controller.dao.userDao;
import controller.dao.userDaoImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import user.User;

@WebServlet(name = "LoginServlet", urlPatterns = { "/LoginServlet" })
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("account");
        String password = request.getParameter("code");
        System.out.println(username);
        System.out.println(password);

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        if (username != null && password != null) {
            byte[] bytes = username.getBytes("ISO-8859-1");
            username = new String(bytes, "utf-8");
            System.out.println(username);

            jdbcUtil db = new jdbcUtil();

            User user = new User(username, password);
            userDao dao = new userDaoImpl();
            try {
                Connection conn = db.getConnection();
                if (dao.login(conn, user) != null) {
                    request.getSession().setAttribute("user", user);
                    response.sendRedirect("html/success.jsp");
                } else {
                    out.println("<h1>用户名或者密码错误，验证失败</h1>");
                    out.println("<h2>3秒以后跳转回登录界面</h2>");
                    response.setHeader("Refresh", "3;url=html/practice.jsp");
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                out.close();
            }
        }

    }
}

以及，lib包中要导入mysql-connector-java-8.0.16.jar驱动

第一次写是用php写的啊，代码很简单

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">"
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link ref="stylesheet" href="./css/style.css">
    <title>登录界面</title>
</head>
<body>

<?php
$uid=@$_POST['account'];
$pwd=@$_POST['code'];
$con=@mysqli_connect("localhost",$uid,$pwd,"mysql");
if($con){
    echo "<div class='filterImg'>
            <div class='text'>登陆成功</div>
           </div>";
    echo "<br/>";
}
else{
    echo "<p><style='text-align: center'>账号或密码错误</p>";
    echo ""
    @die(print_r(mysqli_error($con),true));
}
?>
<div>
    <form action="practice.php" method="post">
        <button type="submit">返回主页</button>
    </form>
</div>

</body>>

javaweb程序的地址困扰了我很久，因为debug过程中不知道是地址的问题还是程序的问题，最后还是解决了。
jQuery没套用到，可以看到源代码中导入了jQuery的script，但是代码中并没有实现。
JetBrain获取学生免费账号整了我挺久。因为之前整了一半就没注册下去了，最后才发现用的我qq邮箱获取的free account。
学习的顺序是前端从html->css->js，后端从php->java。java代码理解起来肯定会比较难，但是发现好像ldf已经讲过了，可惜我当时没听。
列一些参考的东西吧：
细节方面的配置很费时间。具体的内容我大体已经忘个干净。如果你有问题，或许你可以提问，我再回复。我的代码也不是最好的，还请各位大佬多多指教。