ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

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

2022-02-22 22:29:59  阅读：142  来源： 互联网

标签：return String 练习 user 发送数据 import password Servlet name


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

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目录下。

标签：return,String,练习,user,发送数据,import,password,Servlet,name
来源： https://blog.csdn.net/qq_44125436/article/details/123078916

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有