2024.5.23

代码行数：305行

博客数：1篇

今天写了一下登录的servlet代码，顺带着登录注册的JavaScript代码：

 1 package com.example.three;
 2 
 3 import java.sql.*;
 4 
 5 public class JDBC {
 6     String url = "jdbc:mysql://localhost:3306/test";
 7     private static String username = "root";
 8     private static String password = "123456";
 9 
10     public Connection getConnection() throws ClassNotFoundException, SQLException {
11         Class.forName("com.mysql.jdbc.Driver");
12         Connection connection = DriverManager.getConnection(url, username, password);
13         return connection;
14     }
15 
16     public void insert(String tusername,String tphone,String tpassword) throws SQLException, ClassNotFoundException {
17         String sql="insert into threelogin(user,phone,password,number) value(?,?,?,?)";
18         PreparedStatement ps1=getConnection().prepareStatement(sql);
19         ps1.setString(1,tusername);
20         ps1.setString(2,tphone);
21         ps1.setString(3,tpassword);
22         ps1.setString(4,"0");
23         ps1.executeUpdate();
24 
25         System.out.println(tpassword);
26 
27         ps1.close();
28         getConnection().close();
29     }
30 
31     public String select(String tphone,String tpassword) throws SQLException, ClassNotFoundException {
32         String sql="select * from threelogin where phone = '"+tphone+"' and password = '"+tpassword+"'";
33         Statement statement=getConnection().createStatement();
34         ResultSet res=statement.executeQuery(sql);
35         while(res.next()){
36             System.out.println(res.getString("user"));
37             return res.getString("user");
38         }
39         System.out.println(tpassword);
40         return null;
41     }
42 
43 
44 
45 }
 1 package com.example.three;
 2 
 3 import java.io.*;
 4 import java.sql.SQLException;
 5 
 6 import jakarta.servlet.http.*;
 7 import jakarta.servlet.annotation.*;
 8 
 9 import com.google.gson.Gson;
10 import com.google.gson.JsonObject;
11 
12 @WebServlet(name="register-servlet" ,value="/register-servlet")
13 public class registerservlet extends HttpServlet {
14     private static final long serialVersionUID = 1L;
15 
16     JDBC jdbc=new JDBC();
17     public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
18 
19         // 设置响应内容类型
20         response.setContentType("application/json");
21 
22         // 从请求中读取 JSON 数据
23         JsonObject requestData = new Gson().fromJson(request.getReader(), JsonObject.class);
24 
25         String name=requestData.get("user").getAsString();
26         String phone=requestData.get("phone").getAsString();
27         String password=requestData.get("pass").getAsString();
28 
29         System.out.println(name+phone+password);
30 
31         try {
32 //            Class.forName("com.mysql.jdbc.Driver");
33 //            Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false", "root", "123456");
34 //
35 //            String sql="insert into threelogin(user,phone,password) value(?,?,?)";
36 //            PreparedStatement ps1=connection.prepareStatement(sql);
37 //            ps1.setString(1,name);
38 //            ps1.setString(2,phone);
39 //            ps1.setString(3,password);
40 //            ps1.executeUpdate();
41 //
42 //            ps1.close();
43 //            connection.close();
44             jdbc.insert(name,phone,password);
45 
46             // 构建响应数据
47             JsonObject responseData = new JsonObject();
48             responseData.addProperty("message", "注册成功，请登录！");
49 
50             // 将响应数据写回前端
51             PrintWriter out = response.getWriter();
52             out.print(responseData.toString());
53             out.flush();
54 
55             return;
56         } catch (ClassNotFoundException e) {
57             throw new RuntimeException(e);
58         } catch (SQLException e) {
59             throw new RuntimeException(e);
60         }
61 
62 //        try {
63 //            jdbc.insert(name,phone,password);
64 //        } catch (SQLException e) {
65 //            throw new RuntimeException(e);
66 //        } catch (ClassNotFoundException e) {
67 //            throw new RuntimeException(e);
68 //        }
69 
70 
71 //        // 设置响应内容类型
72 //        response.setContentType("application/json");
73 //
74 //        // 从请求中读取 JSON 数据
75 //        JsonObject requestData = new Gson().fromJson(request.getReader(), JsonObject.class);
76 //
77 //        // 获取前端发送的参数
78 //        String param1 = requestData.get("param1").getAsString();
79 //        String param2 = requestData.get("param2").getAsString();
80 //
81 //        // 在控制台中打印参数
82 //        System.out.println("param1: " + param1);
83 //        System.out.println("param2: " + param2);
84 //
85 //        // 构建响应数据
86 //        JsonObject responseData = new JsonObject();
87 //        responseData.addProperty("message", "Received parameters successfully");
88 //
89 //        // 将响应数据写回前端
90 //        PrintWriter out = response.getWriter();
91 //        out.print(responseData.toString());
92 //        out.flush();
93 
94 
95 
96     }
97 
98 }
 1 // 检查是否存储了账号密码
 2       document.addEventListener("DOMContentLoaded", function() {
 3         var rememberedUsername = localStorage.getItem("username");
 4         var rememberedPassword = localStorage.getItem("password");
 5         var rememberMeCheckbox = document.getElementById("rememberMe");
 6 
 7         if (rememberedUsername && rememberedPassword) {
 8           document.getElementById("loginphone").value = rememberedUsername;
 9           document.getElementById("loginpass").value = rememberedPassword;
10           rememberMeCheckbox.checked = true;
11         }
12       });
13 
14       document.getElementById("loginbox").addEventListener("submit",async function (event) {
15         event.preventDefault();//阻止表单默认提交行为
16 
17         //获取表单数据
18         var formData = new FormData(this);
19 
20         var tphone=document.getElementById("loginphone").value;
21         var tpass=document.getElementById("loginpass").value;
22         var rememberme=document.getElementById("rememberme");
23 
24         if(rememberme.checked){
25           localStorage.setItem("loginphone",tphone);
26           localStorage.setItem("loginpass",tpass);
27         }else{
28           localStorage.removeItem("loginphone");
29           localStorage.removeItem("loginpass");
30         }
31 
32         //发送POST请求到后端
33         const response = await fetch('login-servlet', {
34           method: 'POST',
35           headers: {
36             'Content-Type': 'application/json' // 根据您的需要设置适当的 Content-Type
37 // text/plain：纯文本格式。
38 // text/html：HTML 格式。
39 // application/json：JSON 格式。
40 // application/xml：XML 格式。
41 // multipart/form-data：用于表单提交中的数据，通常用于文件上传。
42 // image/jpeg、image/png、image/gif：图片格式。
43 // audio/mpeg、audio/ogg：音频格式。
44 // video/mp4、video/mpeg：视频格式。
45           },
46           body: JSON.stringify({
47             // 设置您要发送的参数
48             phone: tphone,
49             pass: tpass,
50             // 添加更多参数，根据您的需求
51           })
52 
53         });
54 
55         // 检查是否收到了响应
56         if (!response.ok) {
57           alert('登录失败，用户名或密码错误！');
58           return;
59         }
60 
61         // 解析响应的 JSON 数据
62         const responseData =await response.json();
63         alert("登录成功，欢迎来到青藏铁路！");
64         console.log(responseData.message);
65         document.getElementById("loginregister-button").innerHTML=responseData.message;
66 
67         changePage('home');
68 
69         // checkRequestAndParams();
70       });
 1 document.getElementById("registerbox").addEventListener("submit",async function (event) {
 2         event.preventDefault();//阻止表单默认提交行为
 3 
 4         //获取表单数据
 5         var formData = new FormData(this);
 6 
 7         //实现确认密码功能
 8         var password = document.getElementById("pass1").value;
 9         var confirmpassword = document.getElementById("pass2").value;
10 
11         console.log(password);
12         console.log(confirmpassword);
13         if (password !== confirmpassword) {
14           alert("两次输入的密码不匹配！");
15           return;
16         }
17 
18         //实现确认协议功能
19         var agree=document.getElementById("agree");
20         if(!agree.checked){
21           alert("请查看协议并确认!");
22           return;
23         }
24 
25         //发送POST请求到后端
26         const response = await fetch('register-servlet', {
27           method: 'POST',
28           headers: {
29             'Content-Type': 'application/json' // 根据您的需要设置适当的 Content-Type
30 // text/plain：纯文本格式。
31 // text/html：HTML 格式。
32 // application/json：JSON 格式。
33 // application/xml：XML 格式。
34 // multipart/form-data：用于表单提交中的数据，通常用于文件上传。
35 // image/jpeg、image/png、image/gif：图片格式。
36 // audio/mpeg、audio/ogg：音频格式。
37 // video/mp4、video/mpeg：视频格式。
38           },
39           body: JSON.stringify({
40             user: document.getElementById("user").value, // 设置您要发送的参数
41             phone: document.getElementById("phone").value,
42             pass: document.getElementById("pass1").value,
43             // 添加更多参数，根据您的需求
44           })
45 
46         });
47 
48         // 检查是否收到了响应
49         if (!response.ok) {
50           alert('注册失败，用户名重复，请重新输入!');
51           return;
52         }
53 
54         // 解析响应的 JSON 数据
55         const responseData = response.json();
56         alert("注册成功，请登录！");
57 
58 
59         // checkRequestAndParams();
60       });
61       // 创建一个函数来发送网络请求并检查参数
62       async function checkRequestAndParams() {
63         try {
64           // 发送 POST 请求到 Servlet 的 URL
65           const response = await fetch('register-servlet', {
66             method: 'POST',
67             headers: {
68               'Content-Type': 'application/json' // 根据您的需要设置适当的 Content-Type
69             },
70             body: JSON.stringify({
71               param1: document.getElementById("pass1").value, // 设置您要发送的参数
72               param2: 'value2',
73               // 添加更多参数，根据您的需求
74             })
75           });
76 
77           // 检查是否收到了响应
78           if (!response.ok) {
79             throw new Error('Network response was not ok');
80           }
81 
82           // 解析响应的 JSON 数据
83           const responseData = await response.json();
84 
85           // 在控制台中打印响应数据
86           console.log(responseData);
87 
88           // 在这里添加任何其他逻辑以处理响应数据
89         } catch (error) {
90           console.error('Error occurred:', error);
91         }
92       }

 

posted @ 2024-05-23 17:30  贾贾鱼  阅读(7)  评论(0)    收藏  举报