JavaWeb：（练习）八、Servlet前端发送数据到后端练习

本文主要是介绍JavaWeb：（练习）八、Servlet前端发送数据到后端练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaWeb：（练习）八、Servlet前端发送数据到后端练习

JavaWeb：（练习）八、Servlet前端发送数据到后端练习
- 1、练习目标
- 2、HTML代码
- 3、CSS代码
- 4、js代码
- 5、数据库设计
- 6、Java-LoginDao
- 7、Java-LoginServlet
- 8、结果测试
- - 1）启动服务器
  - 2）启动前端界面
  - 3）输入错误账号、错误密码
  - 4）输入正确账号、错误密码
  - 5）输入正确账号、正确密码
- 9、代码优化
- - 1）Java-LoginDao
  - 2）Java-LoginServlet
- 10、错误总结

JavaWeb：（练习）八、Servlet前端发送数据到后端练习

1、练习目标

制作一个前端登录界面，制作一个简单的web服务器，连接数据库，验证从前端界面提交的表单数据。

2、HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录</title>
		
		<link href="loginDemo.css" rel="stylesheet" type="text/css" />
		
		<script src="loginDemo.js" type="text/javascript"></script>
		
	</head>
	<body>
		<div class="box">
			<form action="http://127.0.0.1:8080/WebBack/login" method="post" >
				<span class="account_label_class">账户：</span>
				<input type="text" name="account" id="account_id" class="account_class" onblur="accountIsEmpty()" />
				<span id="account_tips_id" class="account_tips_class"></span>
				<div style="clear: left;"></div>
				<br />
				
				<span class="password_label_class">密码：</span>
				<input type="password" name="psw" id="password_id" class="password_class" onblur="passwordIsEmpty()" />
				<span id="password_tips_id" class="password_tips_class"></span>
				<div style="clear: left;"></div>
				<br />
				
				<input type="submit" value="登录" class="submit_button_class" />
			</form>
		</div>
	</body>
</html>

3、CSS代码

*{
	margin: 0;
	padding: 0;
}

body{
	background-image: url(img/login_bg.jpg);
	background-size: 100%;
}
			
.box{
	background-color: whitesmoke;
	width: 400px;
	height: 300px;
	border-radius: 30px;
				
	margin: auto;
	margin-top: 200px;
	text-align: center;
}
			
span,input{
	float: left;
}
			
.account_label_class,.password_label_class{
	margin-top: 40px;
	margin-left: 40px;
}
			
.account_class,.password_class,.account_tips_class,.password_tips_class{
	margin-top: 40px;
	margin-left: 10px;
}
			
.submit_button_class{
	width: 80px;
	height: 40px;
	background-color: skyblue;
	border-radius: 10px;

	margin-left: 160px;
	margin-top: 40px;
}

4、js代码

function accountIsEmpty() {
	var accountObj = document.getElementById("account_id");
	var tipsObj = document.getElementById("account_tips_id");
	if (accountObj.value.length == 0 || accountObj.value.length > 15) {
		tipsObj.style.color = "red";
		tipsObj.style.fontSize = "12px";
		tipsObj.innerHTML = "× 为空或大于十五";
	} else{
		tipsObj.style.color = "green";
		tipsObj.innerHTML = "√";
	}
}

function passwordIsEmpty() {
	var passwordObj = document.getElementById("password_id");
	var tipsObj = document.getElementById("password_tips_id");
	if (passwordObj.value.length == 0 || passwordObj.value.length > 15) {
		tipsObj.style.color = "red";
		tipsObj.style.fontSize = "12px";
		tipsObj.innerHTML = "× 为空或大于十五";
	} else{
		tipsObj.style.color = "green";
		tipsObj.innerHTML = "√";
	}
}

5、数据库设计

在这里插入图片描述

6、Java-LoginDao

package com.ffyc.webback.Dao;

import java.sql.*;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class LoginDao {

    static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
    static final String DB_URL = "jdbc:mysql://127.0.0.1:3306/feifan_test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai";

    // 数据库的用户名与密码，需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "root";

    public static List getElementArray(String key){

        List<String> array = new ArrayList<>();
        Connection conn = null;
        Statement stmt = null;

        try{
            // 注册 JDBC 驱动
//            Class.forName(JDBC_DRIVER);
//            DriverManager.registerDriver(new Driver());

            // 打开链接
            conn = DriverManager.getConnection(DB_URL,USER,PASS);

            // 执行查询
            // 实例化Statement对象
            stmt = conn.createStatement();
            String sql = "SELECT " + key + " FROM usertest";
            ResultSet rs = stmt.executeQuery(sql);

            // 将数据添加进集合中
            while(rs.next()){
                array.add(rs.getString(key));
            }

            // 完成后关闭
            rs.close();
            stmt.close();
            conn.close();
            return array;


        }catch(SQLException se){
            // 处理 JDBC 错误
            se.printStackTrace();
            return array;
        }catch(Exception e){
            // 处理 Class.forName 错误
            e.printStackTrace();
            return array;
        }finally{
            // 关闭资源
            try{
                if(stmt!=null) {
                    stmt.close();
                    return array;
                }
            }catch(SQLException se2){
            }// 什么都不做
            try{
                if(conn!=null) {
                    conn.close();
                    return array;
                }
            }catch(SQLException se){
                se.printStackTrace();
                return array;
            }
        }
    }

}

7、Java-LoginServlet

package com.ffyc.webback.servlet;

import com.ffyc.webback.Dao.LoginDao;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class LoginServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("doGet");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // System.out.println("doPost");
        // 根据 列 得到数据库的表的各列元素的集合
        List<String> names = LoginDao.getElementArray("name");
        List<String> passwords = LoginDao.getElementArray("password");

        // 得到表单数据
        String name = req.getParameter("account");
        String password = req.getParameter("psw");

        // 判断表单数据-账户，是否在数据库中存在
        if(names.contains(name)) {
            System.out.println("账户存在");
        } else {
            System.out.println("账户不存在");
            return;
        }

        // 账户正确，得到数据库中，账户对应的密码索引
        int index = -1;
        for (int i = 0; i < names.size(); i++) {
            if (name.equals(names.get(i))) {
                index = i;
            }
        }


        // 判断密码是否正确
        if ( index == -1 || !( password.equals( passwords.get(index) ) ) ) {
            System.out.println("密码不正确");
            return;
        } else {
            System.out.println("密码正确，登陆成功");
        }

    }
}

8、结果测试

1）启动服务器

在这里插入图片描述

2）启动前端界面

在这里插入图片描述

3）输入错误账号、错误密码

在这里插入图片描述

4）输入正确账号、错误密码

在这里插入图片描述

5）输入正确账号、正确密码

在这里插入图片描述

9、代码优化

上述代码将数据库的数据拿到后端服务器中，在服务器创建了临时列表存储，消耗资源大。优化代码，直接使用SQL查询语句在数据库中查询。

1）Java-LoginDao

package com.ffyc.webback.Dao;

import com.ffyc.webback.model.User;

import java.sql.*;

public class LoginDao {

    static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
    static final String DB_URL = "jdbc:mysql://127.0.0.1:3306/feifan_test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai";

    // 数据库的用户名与密码，需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "root";

    public static User getUserObject(String name, String password){

        Connection conn = null;
        Statement stmt = null;
        User user = null;

        try{

            // 打开链接
            Class.forName(JDBC_DRIVER);
            conn = DriverManager.getConnection(DB_URL,USER,PASS);

            // 执行查询
            // 实例化Statement对象
            stmt = conn.createStatement();
            PreparedStatement ps = conn.prepareStatement("SELECT * FROM usertest WHERE name = ? AND password = ?");
            ps.setObject(1,name);
            ps.setObject(2,password);
            ResultSet rs = ps.executeQuery();


            // 将数据添加进集合中
            while(rs.next()){
                user = new User();
                user.setName(rs.getString("name"));
                user.setPassword(rs.getString("password"));
            }

            // 完成后关闭
            rs.close();
            stmt.close();
            conn.close();
            return user;


        }catch(SQLException se){
            // 处理 JDBC 错误
            se.printStackTrace();
            return user;
        }catch(Exception e){
            // 处理 Class.forName 错误
            e.printStackTrace();
            return user;
        }finally{
            // 关闭资源
            try{
                if(stmt!=null) {
                    stmt.close();
                    return user;
                }
            }catch(SQLException se2){
            }// 什么都不做
            try{
                if(conn!=null) {
                    conn.close();
                    return user;
                }
            }catch(SQLException se){
                se.printStackTrace();
                return user;
            }
        }
    }

}

2）Java-LoginServlet

package com.ffyc.webback.servlet;

import com.ffyc.webback.Dao.LoginDao;
import com.ffyc.webback.model.User;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LoginServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // System.out.println("doGet");
        resp.setContentType("text/html;charset=utf-8");
        // 得到表单数据
        String name = req.getParameter("account_name");
        String password = req.getParameter("password_name");
        User user = LoginDao.getUserObject(name, password);

        if (user == null) {
            resp.getWriter().println("账户或密码错误");
        } else {
            resp.getWriter().println("登陆成功");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // System.out.println("doPost");
        resp.setContentType("text/html;charset=utf-8");
        // 得到表单数据
        String name = req.getParameter("account_name");
        String password = req.getParameter("password_name");
        User user = LoginDao.getUserObject(name, password);

        if (user == null) {
            resp.getWriter().println("账户或密码错误");
        } else {
            resp.getWriter().println("登陆成功");
        }
    }
}

10、错误总结

在部署web服务，使用class.forName创建JDBC驱动时，必须将JDBC驱动添加到项目Web下的lib目录下。

这篇关于JavaWeb：（练习）八、Servlet前端发送数据到后端练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

JavaWeb：（练习）八、Servlet前端发送数据到后端练习

JavaWeb：（练习）八、Servlet前端发送数据到后端练习

JavaWeb：（练习）八、Servlet前端发送数据到后端练习

1、练习目标

2、HTML代码

3、CSS代码

4、js代码

5、数据库设计

6、Java-LoginDao

7、Java-LoginServlet

8、结果测试

1）启动服务器

2）启动前端界面

3）输入错误账号、错误密码

4）输入正确账号、错误密码

5）输入正确账号、正确密码

9、代码优化

1）Java-LoginDao

2）Java-LoginServlet

10、错误总结

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯