JavaWeb:(练习)八、Servlet前端发送数据到后端练习
2022/2/23 9:53:49
本文主要是介绍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前端发送数据到后端练习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)