JS+Java项目实战(1)--学生登录系统开发

程序员大阳

已于 2022-10-21 10:55:16 修改

阅读量1.4k

点赞数 3

分类专栏： # 零基础JavaWeb 文章标签： java javascript servlet 学生登录系统登录功能

于 2022-10-20 15:47:04 首次发布

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/127426320

版权

零基础JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

0. 前置条件
1. 任务背景
2. 任务目标
3. 相关知识点
4. 任务实操

0. 前置条件

首先需要学习HTML、CSS、JS、Java基础知识。

需要安装前端VSCode、后端JDK/Eclipse、以及数据库MySQL/Navicat，注意MySQL不好安装可以用Maridb替代，他们功能是一样的。

前端代码推荐使用VSCode，但是Eclipse也支持编写前端代码，只是相对没有VSCode好用而已。

1. 任务背景

我们需要开发一个学生使用的登录系统，输入学号+密码，如果输入正确则跳转主页，否则提示失败。

2. 任务目标

前端使用HTML+CSS+JS，后端使用Java，数据库使用MySQL，实现学生登录功能。

3. 相关知识点

主要核心知识点：

使用Ajax将前端的数据发送给Java Servlet处理
使用JDBC访问数据库，判断学号、密码是否正确

4. 任务实操

4.1 创建Java Web项目

打开Eclipse，创建一个Dynamic Web Project，该项目模板即为动态网站项目，可以支持使用Java Servlet来处理前端请求。
在这里插入图片描述
项目名称：StudentLoginSystem，即学生登录系统，然后点击【Finish】。

4.2 使用VSCode打开项目编辑前端页面

此时可以用Eclipse开发，也可以将项目导入VSCode进行编辑，此时我们选择VSCode。

打开VSCode，点击【文件】-【将文件夹添加到工作区…】
在这里插入图片描述
添加后效果如下：

4.3 开发前端页面

分析下需求，我们开发登录页面，那么界面只需要提供学号、密码输入框和登录按钮即可。

我们的前端页面要放到StudentLoginSystem/src/main/webapp下，这是项目结构要求的网页放置位置。

按照标准，我们需要开发login.html、login.css、login.js，分别用来放置HTML内容、CSS样式、JS脚本代码。

添加后项目结构如下：
在这里插入图片描述
先编写HTML内容部分，放置学号、密码输入框及登录按钮：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>学生登录</title>
    <link rel="stylesheet" href="./login.css">
</head>

<body>
    <!-- 首先我们应该把整个登录区域定义为一个组件，因为是一个表单，所以可以用form表示 -->
    <div class="form">
        <h2>欢迎使用学生登录系统</h2>
        <div>
            <label for="code">学号: </label>
            <input type="text" id="code">
        </div>
        <div>
            <label for="password">密码: </label>
            <input type="password" id="password">
        </div>
        <div>
            <input type="button" value="登录" class="btn">
        </div>
    </div>
    <script src="./login.js"></script>
</body>

</html>

然后编写CSS部分

* {
    margin: 0;
    padding: 0;
}

/* 所有的样式影响只限于组件(form)，在组件之外样式不受干扰 */
.form {
    width: 400px;
    background-color: rgb(228, 242, 226);
    border: 1px solid rgb(189, 192, 186);
    border-radius: 8px;
    margin: 200px auto;
    text-align: center;
}

.form div {
    margin-top: 32px;
}

.form .btn {
    margin-bottom: 12px;
    width: 120px;
    height: 28px;
    border-radius: 8px;
}

此时前端页面效果已完成，预览如下：
在这里插入图片描述

4.4 使用JS处理登录事件

首先给按钮增加点击事件btnLogin，如下：

<input type="button" value="登录" class="btn" onclick="btnLogin()">

然后处理登录事件如下：

// 登录
function btnLogin() {
    // 获取网页输入
    var code = document.getElementById("code").value;
    var password = document.getElementById("password").value;
    // 判断输入合法
    if (code == "" || password == "") {
        alert("用户名和密码都不能为空！");
        return;
    }
    // 向后端传递参数(使用ajax)
}

4.5 使用ajax传递登录参数

从前端页面向后端java传递参数时，对于初学者来说，需要避免的是一个参数、一个参数的传递。

其实此处是【学生】这个整体在登录，我们应该是向后端传递一整个学生对象，当然使用JSON把对象序列化成字符串以便传输即可。故代码如下：

// 登录
function btnLogin() {
    // 获取网页输入
    var code = document.getElementById("code").value;
    var password = document.getElementById("password").value;
    // 判断输入合法
    if (code == "" || password == "") {
        alert("用户名和密码都不能为空！");
        return;
    }
    // 定义要传输的学生对象
    var student = {
        code: code,
        password: password,
    };
    // 使用ajax向java后台传输对象
    var httpRequest = new XMLHttpRequest();// 定义负责传输的对象
    httpRequest.open("POST", "/StudentLoginSystem/LoginServlet", true);//请求地址为StudentLoginSystem项目的LoginServlet路径
    httpRequest.setRequestHeader("Content-type", "application/json");//以json格式传输数据
    httpRequest.send(JSON.stringify(student));//发送数据，注意将对象序列化为字符串后发送
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {//正常响应的时候
            alert(httpRequest.responseText);// 弹窗显示返回内容
        }
    };
}

4.6 新建Java类接收请求

大家注意，之前js代码中，我们请求的后端路径为/StudentLoginSystem/LoginServlet，具体代码是：

httpRequest.open("POST", "/StudentLoginSystem/LoginServlet", true);//请求地址为StudentLoginSystem项目的LoginServlet路径

什么意思呢，其实就是请求StudentLoginSystem项目的LoginServlet路径。

那么Java可以使用@WebServlet来匹配这个路径。

@WebServlet("/LoginServlet")
public class LoginServlet {
	
}

因为@WebServlet("/LoginServlet")里面的路径，跟前端请求的路径/LoginServlet匹配，所以ajax请求就会由上面的Java类处理。

4.7 接收ajax请求的内容信息

正常接收前端的请求，其实是比较复杂的，但是可以利用Java的继承机制来简化这个过程。

好比人类可以继承祖先传下来直立行走等技能，Java类可以继承HttpServlet传下来的接收Http请求的技能。

因为JS代码httpRequest.open("POST", "/StudentLoginSystem/LoginServlet", true)中使用POST方式来传递参数，所以Java中对应使用doPost来处理该请求。

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {// 继承HttpServlet来获得处理Http请求的能力
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 此处处理Post请求
	}
}

具体的处理方法如下：

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 此处处理Post请求
		System.out.println("LoginServlet.doPost");
		// 设置编码。不然传汉字会乱码
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/json;charset=utf-8");
		// 接收前端传过来的json字符串
		BufferedReader reader = req.getReader();
		String str = reader.readLine();
		// 将json字符串转换为对象
		Student student = JSON.parseObject(str, Student.class);
		System.out.println("前台传递的学号:" + student.getCode());
		System.out.println("前台传递的密码:" + student.getPassword());
	}

此处需要注意的是，我们使用Student对象来对应前端传递的对象信息，两个对象内容要对应：

public class Student {
	private String code;
	private String password;
	// 省略get set
}

还有，前端传过来的是json字符串，我们需要借助fastjson这样的类库，来将字符串转换为对象。

可以从https://mvnrepository.com/搜索fastjson后下载jar包，然后放到项目的src/main/webapp/WEB-INF/lib下使其生效。

4.8 向前端返回处理结果

正常情况，我们需要进入数据库查询学号、密码是否匹配，此处我们先简化为固定的学号001，密码123456正确，其他错误。

		if (student.getCode().equals("001") && student.getPassword().equals("123456")) {
			resp.getWriter().write("登录成功");
		} else {
			resp.getWriter().write("登录失败");
		}