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如下所示）注意事项：数据库名、表名、字段名等尽量使用英文字符

 

登录界面-详细过程

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为数据库登录密码。

其次，用户登录。先检测用户输入的用户名是否正确，使用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 
 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