jsp+postgresql学习笔记(1)用户登录与注册

前期准备:

  1. tomcat的安装与配置(略)
  2. jdk的安装与配置(略)
  3. eclipse软件安装与配置(略)
  4. webstrom软件或IDEA的安装与配置(大概用了IDEA就不需要eclipse了,但是怎么都没办法调试jsp所以还是放弃了,哈哈哈,tomcat部署https://segmentfault.com/a/1190000006130006)
  5. postgresql+QGIS+uDig+GeoServe安装与配置(略)
  6. tomcat配置postgresql(略)
  7. 土方计算的算法整理(见随笔)
  8. 构建项目测试数据库(用户表users如下所示)注意事项:数据库名、表名、字段名等尽量使用英文字符

jsp+postgresql学习笔记(1)用户登录与注册_第1张图片

 

登录界面-详细过程

1登录界面,jsp连接postgresql数据库

Html中使用表单提交用户名、登录密码等数据,标签中的action表示数据提交给LoadFile.jsp,因为注册按钮需要另外提交给Lodin.jsp,所以注册按钮应在标签之外。

(界面做的比较丑,还没进行美化,此处只附登录

代码,至于样式自己设置就好啦,不再上传了)

Html  登录 代码:

 1     
 2     <div id="load" align="center">
 3         <br><p align="center"><strong>用户登录 strong>p>
 4         <form name="form" action="../jsp/LoadFile.jsp" method="post">
 5             <br><p><strong>工号:strong><input class="inputText" name="num" type="text" placeholder="请输入您的工号!"/>p>
 6             <br><p><strong>密码:strong><input class="inputText" name="userpassword" type="password" placeholder="请输入您的密码!"/>p>
 7             <br><p><input type="submit" class="log" name="submit" value="登录">p>
 8         form>
 9         <br>
10         <p><input class="log" name="login"  type="button"  value="注册" onclick=login();>p>
11         <br>
12     div>
LoadFile.jsp中主要定义了登录行为。
首先连接数据库,url为 jdbc:postgresql://localhost:5432(接口)/EC System (数据库名称);username为数据库所有者(下图为数据库属性页面);password为数据库登录密码。

jsp+postgresql学习笔记(1)用户登录与注册_第2张图片

其次,用户登录。先检测用户输入的用户名是否正确,使用sql语句在数据库表中查询用户名字段,如果用户名正确再检查密码,否则,就输出用户名错误。检查密码时应为逻辑与,即用户名密码同时存在才可以。

本表工号为主键,因此登录时用户名为工号。

LoadFile.jsp 登录 代码
 1 <%@ page contentType = "text/html; charset=utf-8"%>
 2 <%@ page import="java.sql.*"%> 
 3 
 4   
 5   
 6 
 7 
8 <% 9 Class.forName("org.postgresql.Driver"); 10 Connection connect = DriverManager.getConnection("jdbc:postgresql://localhost:5432/EC System","postgres","123569"); 11 /* //登录JDBC链接数据库 */ 12 13 /* load */ 14 String num = request.getParameter("num"); 15 session.setAttribute("username",num); 16 String userpassword = request.getParameter("userpassword"); 17 18 Statement pme = connect.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE); 19 /* //createStatement()创建一个 Statement对象来将 SQL语句发送到数据库。从数据库里面取东西对比 */ 20 String rs = "select * from users where workid = '"+num+"'"; 21 ResultSet s = pme.executeQuery(rs); 22 if(s.next()){ 23 Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE); 24 String sql = "select * from users where workid='"+num+"'and password='"+userpassword+"'"; 25 ResultSet i = stmt.executeQuery(sql); 26 /* //查询返回的结果集 */ 27 if(i.next()){ 28 out.println(""); 29 response.setHeader("refresh","1;url = ../html/NewFile1.html");/* //刷新,一秒跳到其他页面 */ 30 }/* 登录 */ 31 else{ 32 out.println("ERROR"); 33 out.println(""); 34 response.setHeader("refresh","1;url = ../html/EC-Home.html"); 35 } 36 stmt.close(); 37 }else{ 38 out.println("ERROR"); 39 out.println(""); 40 response.setHeader("refresh","1;url = ../html/EC-Home.html"); 41 } 42 43 pme.close(); 44 connect.close(); 45 %> 46
47 48

注册界面Html代码

 1   
 2   <div id="login" align="center">
 3     <p align="center"><strong>用户注册 strong>p>
 4     <form action="../jsp/Login.jsp" method="post" onsubmit = "return validate();">
 5       <table frame=void width=800px border="1" align="center">
 6         <tr>
 7           <td class="td1"><strong>姓名:strong>td>
 8           <td class="td2"><input id="name" name="name" type="text"  class="inputText" placeholder="请输入您的真实姓名!" onfocus="YHMonfocu()" onblur="YHMonblus()" required/><span id="YHMerror">span>td>
 9         tr>
10         <tr>
11           <td  class="td1"><strong>工号:strong>td>
12           <td  class="td2"><input id="workid" name="workid" type="text"  class="inputText" placeholder="请输入您的工号!" onfocus="GHMonfocu()" onblur="GHMonblus()" required/><span id="GHMerror">span>td>
13         tr>
14         <tr>
15           <td  class="td1"><strong>职务:strong>td>
16           <td  class="td2">
17               <select id="position" name="position"   onfocus="ZWMonfocu()" onblur="ZWMonblus()" required>
18                   <option value="" style="display: none;color: #555">请选择您的职务!option>
19                   <option value="VIP" >负责人option>
20                   <option value="GIP" >普通成员option>
21               select>
22               <span id="ZWMerror">span>
23           td>
24         tr>
25         <tr>
26           <td  class="td1"><strong>密码:strong>td>
27           <td  class="td2"><input id="password" name="password" type="password"  class="inputText" placeholder="请输入您的密码!" onfocus="MMonfocu()" onblur="MMonblus()" required/><span id="MMerror">span>td>
28         tr>
29         <tr>
30           <td  class="td1"><strong>再次输入密码:strong>td>
31           <td  class="td2"><input id="confirmPassword" name="confirmPassword" type="password"  class="inputText" placeholder="请确认您的密码!" onfocus="QRMMonfocu()" onblur="QRMMonblus()" required/><span id="QRMMerror">span>td>
32           
33         tr>
34         <tr>
35             <td  class="td1">  td>
36             <td  class="td2">
37                 <input type="submit" name="submit" class="submitBtn" value="注册" >
38             td>
39           
40         tr>
41       table>
42     form>
43   div>

loadsql.js注册信息校检代码

  1 /* JavaScript校验要求:
  2     1.每一项都必须填写内容或者做出选择,不能存在空项;+++++++++
  3     2.姓名:不为空+++++++
  4     3.职业:GIP/VIP
  5     3.工号:只能包含英文字母大小写和数字,长度为8个字符;++++++++
  6     3.密码:必须包含英文字母大小写和数字,长度为8个字符;++++++
  7     4.确认密码:必须与密码相同;
  8     5.如果用户没有按照以上要求输入信息,则当光标离开该项时,在该项的右侧用红色字体给出相应的提示信息。++++++*/
  9 // 姓名name
 10 var registerbtn = document.getElementById("submit");
 11 var Name_state = false;
 12 var workid_state = false;
 13 var position_state = false;
 14 var password_state = false;
 15 var confirmPassword_state = false;
 16 
 17 function YHMonblus(){
 18     var name = document.getElementById("name");
 19     if(name.value.length==0){
 20         console.log(name.value);
 21         document.getElementById('YHMerror').innerText="请输入您的真实姓名!";
 22         Name_state = false;
 23     }
 24     else {
 25         document.getElementById('YHMerror').innerText ="";
 26         Name_state = true;
 27     }
 28     checkform();
 29 }
 30 function YHMonfocu(){
 31     document.getElementById('YHMerror').innerText ="";
 32 }
 33 /*工号workid*/
 34 function GHMonblus(){
 35     var workid=document.getElementById("workid");
 36     // var reN =/^\d{6,18}$/;
 37     var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{8}$/;
 38     if(workid.value==""){
 39         document.getElementById('GHMerror').innerText="请输入您的工号!";
 40         workid_state = false;
 41     }
 42     else if(workid.value.length != 8){
 43         console.log(workid.value);
 44         document.getElementById('GHMerror').innerText="格式错误,长度应为8个字符!";
 45         workid_state = false;
 46     }
 47     else if(!re.test(workid.value)){
 48         document.getElementById('GHMerror').innerText="格式错误,必须包含英文字母和数字!";
 49         workid_state = false;
 50     }
 51     else {
 52         document.getElementById('GHMerror').innerText ="";
 53         workid_state = true;
 54     }
 55     checkform();
 56 }
 57 function GHMonfocu(){
 58     document.getElementById('GHMerror').innerText ="";
 59 }
 60 // 职务position
 61 function ZWMonblus(){
 62     var position = document.getElementById("position");
 63     console.log(position.value);
 64         if(position.value==""){
 65             document.getElementById('ZWMerror').innerText="请选择您的职务!";
 66             position_state = false;
 67     }
 68     else {
 69             document.getElementById('ZWMerror').innerText ="";
 70             position_state = true;
 71     }
 72     checkform();
 73 }
 74 function ZWMonfocu(){
 75     document.getElementById('ZWMerror').innerText ="";
 76 }
 77 //密码password
 78 function MMonblus(){
 79     var password=document.getElementById("password");
 80     var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{8}$/;
 81     // var reg=/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
 82     if(password.value==""){
 83         document.getElementById('MMerror').innerText="请输入密码!";
 84         password_state = false;
 85     }
 86     else if(password.value.length != 8){
 87         document.getElementById('MMerror').innerText="格式错误,密码长度为8位!";
 88         password_state = false;
 89     }
 90 
 91     else if(!re.test(password.value)){
 92         document.getElementById('MMerror').innerText="格式错误,必须包含英文字母和数字!";
 93         password_state = false;
 94     }
 95     else {
 96         document.getElementById('MMerror').innerText ="";
 97         password_state = true;
 98     }
 99     checkform();
100 }
101 function MMonfocu(){
102     document.getElementById('MMerror').innerText ="";
103 }
104 
105 //    确认密码confirmPassword
106 function QRMMonblus(){
107     var password=document.getElementById("password");
108     var confirmPassword=document.getElementById("confirmPassword");
109     if(confirmPassword.value==""){
110         document.getElementById('QRMMerror').innerText="请输入确认密码!";
111         confirmPassword_state = false;
112     }
113     else if(password.value != confirmPassword.value){
114         document.getElementById('QRMMerror').innerText="两次密码输入不一致!";
115         confirmPassword_state = false;
116     }
117     else {
118         document.getElementById('QRMMerror').innerText ="";
119         confirmPassword_state = true;
120     }
121     checkform();
122 }
123 function QRMMonfocu(){
124     document.getElementById('QRMMerror').innerText ="";
125 }
126 
127 function checkform() {
128     if (!(Name_state && workid_state && position_state && password_state && confirmPassword_state)) {
129         registerbtn.setAttribute("disabled", "");
130         $("#submit").removeClass("readySubmit");
131     } else {
132         registerbtn.removeAttribute("disabled");
133         $("#submit").addClass("readySubmit");
134     }
135 }
136 function validate() {
137     return confirm("确定提交注册信息?");
138 }

Login.jsp 注册 代码

原理,将注册信息在js中检查,符合标准后,传入jsp,插入数据库,检索成功即可注册成功,否则返回重新注册。

调试多次,发现,插入数据时与查询数据代码并不类似。

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%@ page import="java.sql.*"%> 
 4 
 5 
 6 
 7 
 8 Insert title here
 9 
10 
11 <%
12 /* //createStatement()创建一个 Statement对象来将 SQL语句发送到数据库。从数据库里面取东西对比 */
13 /* login */
14  
15 Class.forName("org.postgresql.Driver"); 
16 Connection connect = DriverManager.getConnection("jdbc:postgresql://localhost:5432/EC System","postgres","123569");
17 /* load */
21 String sql = "insert into users (name,password,workid,position) values (?,?,?,?)";
22 PreparedStatement stmt=connect.prepareStatement(sql);
23 request.setCharacterEncoding("UTF-8");
24 String name = request.getParameter("name");/* 使用 request.getParameter() 方法来获取表单参数的值 */
25 String password = request.getParameter("fipassword");  
26 String workid = request.getParameter("workid");
27 String position = request.getParameter("position"); 
28 stmt.setString(1,name);
29 stmt.setString(2,password);
30 stmt.setString(3,workid);
31 stmt.setString(4,position);
32 int n=stmt.executeUpdate();
33     if(n==1){
34         out.println("TRUE");
35         out.println("");
36         response.setHeader("refresh","1;url = ../html/EC-Home.html");            
37     }else{
38         out.println("ERROR");
39         out.println("");
40         response.setHeader("refresh","1;url = ../html/Login.html");            
41     }
42 stmt.close();
43 connect.close();
44 %>
45 
46 

 

转载于:https://www.cnblogs.com/Haiszu/p/10541131.html

你可能感兴趣的:(jsp+postgresql学习笔记(1)用户登录与注册)