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中使用表单提交用户名、登录密码等数据，<from>标签中的action表示数据提交给LoadFile.jsp，因为注册按钮需要另外提交给Lodin.jsp，所以注册按钮应在<from>标签之外。

（界面做的比较丑，还没进行美化，此处只附登录<div>代码，至于样式自己设置就好啦，不再上传了）

Html  登录 代码：

     <!-- -3.1-登录-->
     <div id="load" align="center">
         <br><p align="center"><strong>用户登录 </strong></p>
         <form name="form" action="../jsp/LoadFile.jsp" method="post">
             <br><p><strong>工号:</strong><input class="inputText" name="num" type="text" placeholder="请输入您的工号！"/></p>
             <br><p><strong>密码:</strong><input class="inputText" name="userpassword" type="password" placeholder="请输入您的密码！"/></p>
             <br><p><input type="submit" class="log" name="submit" value="登录"></p>
         </form>
         <br>
         <p><input class="log" name="login"  type="button"  value="注册" onclick=login();></p>
         <br>
     </div>

LoadFile.jsp中主要定义了登录行为。
首先连接数据库，url为 jdbc:postgresql://localhost:5432（接口）/EC System （数据库名称）；username为数据库所有者（下图为数据库属性页面）；password为数据库登录密码。

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

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

LoadFile.jsp 登录 代码

 <%@ page contentType = "text/html; charset=utf-8"%>
 <%@ page import="java.sql.*"%>
 <html>
   <head>
   </head>
 <body>
 <div style=text-align:center>
     <%
     Class.forName("org.postgresql.Driver");
     Connection connect = DriverManager.getConnection("jdbc:postgresql://localhost:5432/EC System","postgres","123569");
     /* //登录JDBC链接数据库 */

     /* load */
     String num = request.getParameter("num");
     session.setAttribute("username",num);
     String userpassword = request.getParameter("userpassword");

     Statement pme = connect.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
     /* //createStatement()创建一个 Statement对象来将 SQL语句发送到数据库。从数据库里面取东西对比 */
     String rs = "select * from users where workid = '"+num+"'";
     ResultSet s = pme.executeQuery(rs);
     if(s.next()){
         Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
         String sql = "select  *  from users where workid='"+num+"'and password='"+userpassword+"'";
         ResultSet i = stmt.executeQuery(sql);
             /* //查询返回的结果集 */
         if(i.next()){
             out.println("<script language = 'javaScript'> alert('登录成功！');</script>");
             response.setHeader("refresh","1;url = ../html/NewFile1.html");/* //刷新，一秒跳到其他页面 */
             }/* 登录 */
             else{
                 out.println("ERROR");
                 out.println("<script language = 'javaScript'> alert('密码错误，请重新登录！');</script>");
                 response.setHeader("refresh","1;url = ../html/EC-Home.html");
             }
         stmt.close();
     }else{
         out.println("ERROR");
         out.println("<script language = 'javaScript'> alert('用户名不存在，请重新输入！');</script>");
         response.setHeader("refresh","1;url = ../html/EC-Home.html");
     }

     pme.close();
     connect.close();
 %>
 </div>
 </body>
 <html>

注册界面Html代码

   <!-- -3.1-登录-->
   <div id="login" align="center">
     <p align="center"><strong>用户注册 </strong></p>
     <form action="../jsp/Login.jsp" method="post" onsubmit = "return validate();">
       <table frame=void width=800px border="1" align="center">
         <tr>
           <td class="td1"><strong>姓名:</strong></td>
           <td class="td2"><input id="name" name="name" type="text"  class="inputText" placeholder="请输入您的真实姓名！" onfocus="YHMonfocu()" onblur="YHMonblus()" required/><span id="YHMerror"></span></td>
         </tr>
         <tr>
           <td  class="td1"><strong>工号:</strong></td>
           <td  class="td2"><input id="workid" name="workid" type="text"  class="inputText" placeholder="请输入您的工号！" onfocus="GHMonfocu()" onblur="GHMonblus()" required/><span id="GHMerror"></span></td>
         </tr>
         <tr>
           <td  class="td1"><strong>职务:</strong></td>
           <td  class="td2">
               <select id="position" name="position"   onfocus="ZWMonfocu()" onblur="ZWMonblus()" required>
                   <option value="" style="display: none;color: #555">请选择您的职务！</option>
                   <option value="VIP" >负责人</option>
                   <option value="GIP" >普通成员</option>
               </select>
               <span id="ZWMerror"></span>
           </td>
         </tr>
         <tr>
           <td  class="td1"><strong>密码:</strong></td>
           <td  class="td2"><input id="password" name="password" type="password"  class="inputText" placeholder="请输入您的密码！" onfocus="MMonfocu()" onblur="MMonblus()" required/><span id="MMerror"></span></td>
         </tr>
         <tr>
           <td  class="td1"><strong>再次输入密码:</strong></td>
           <td  class="td2"><input id="confirmPassword" name="confirmPassword" type="password"  class="inputText" placeholder="请确认您的密码！" onfocus="QRMMonfocu()" onblur="QRMMonblus()" required/><span id="QRMMerror"></span></td>
           <!--  //建立表格显示登录界面 -->
         </tr>
         <tr>
             <td  class="td1">  </td>
             <td  class="td2">
                 <input type="submit" name="submit" class="submitBtn" value="注册" >
             </td>
           <!-- //设置登录的按钮跳转界面 -->
         </tr>
       </table>
     </form>
   </div>

loadsql.js注册信息校检代码

 /* JavaScript校验要求：
     1.每一项都必须填写内容或者做出选择，不能存在空项；+++++++++
     2.姓名：不为空+++++++
     3.职业：GIP/VIP
     3.工号：只能包含英文字母大小写和数字，长度为8个字符；++++++++
     3.密码：必须包含英文字母大小写和数字，长度为8个字符；++++++
     4.确认密码：必须与密码相同；
     5.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。++++++*/
 // 姓名name
 var registerbtn = document.getElementById("submit");
 var Name_state = false;
 var workid_state = false;
 var position_state = false;
 var password_state = false;
 var confirmPassword_state = false;

 function YHMonblus(){
     var name = document.getElementById("name");
     if(name.value.length==0){
         console.log(name.value);
         document.getElementById('YHMerror').innerText="请输入您的真实姓名！";
         Name_state = false;
     }
     else {
         document.getElementById('YHMerror').innerText ="";
         Name_state = true;
     }
     checkform();
 }
 function YHMonfocu(){
     document.getElementById('YHMerror').innerText ="";
 }
 /*工号workid*/
 function GHMonblus(){
     var workid=document.getElementById("workid");
     // var reN =/^\d{6,18}$/;
     var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{8}$/;
     if(workid.value==""){
         document.getElementById('GHMerror').innerText="请输入您的工号！";
         workid_state = false;
     }
     else if(workid.value.length != 8){
         console.log(workid.value);
         document.getElementById('GHMerror').innerText="格式错误,长度应为8个字符！";
         workid_state = false;
     }
     else if(!re.test(workid.value)){
         document.getElementById('GHMerror').innerText="格式错误,必须包含英文字母和数字！";
         workid_state = false;
     }
     else {
         document.getElementById('GHMerror').innerText ="";
         workid_state = true;
     }
     checkform();
 }
 function GHMonfocu(){
     document.getElementById('GHMerror').innerText ="";
 }
 // 职务position
 function ZWMonblus(){
     var position = document.getElementById("position");
     console.log(position.value);
         if(position.value==""){
             document.getElementById('ZWMerror').innerText="请选择您的职务！";
             position_state = false;
     }
     else {
             document.getElementById('ZWMerror').innerText ="";
             position_state = true;
     }
     checkform();
 }
 function ZWMonfocu(){
     document.getElementById('ZWMerror').innerText ="";
 }
 //密码password
 function MMonblus(){
     var password=document.getElementById("password");
     var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{8}$/;
     // var reg=/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
     if(password.value==""){
         document.getElementById('MMerror').innerText="请输入密码！";
         password_state = false;
     }
     else if(password.value.length != 8){
         document.getElementById('MMerror').innerText="格式错误,密码长度为8位！";
         password_state = false;
     }

     else if(!re.test(password.value)){
         document.getElementById('MMerror').innerText="格式错误,必须包含英文字母和数字！";
         password_state = false;
     }
     else {
         document.getElementById('MMerror').innerText ="";
         password_state = true;
     }
     checkform();
 }
 function MMonfocu(){
     document.getElementById('MMerror').innerText ="";
 }

 //    确认密码confirmPassword
 function QRMMonblus(){
     var password=document.getElementById("password");
     var confirmPassword=document.getElementById("confirmPassword");
     if(confirmPassword.value==""){
         document.getElementById('QRMMerror').innerText="请输入确认密码！";
         confirmPassword_state = false;
     }
     else if(password.value != confirmPassword.value){
         document.getElementById('QRMMerror').innerText="两次密码输入不一致！";
         confirmPassword_state = false;
     }
     else {
         document.getElementById('QRMMerror').innerText ="";
         confirmPassword_state = true;
     }
     checkform();
 }
 function QRMMonfocu(){
     document.getElementById('QRMMerror').innerText ="";
 }

 function checkform() {
     if (!(Name_state && workid_state && position_state && password_state && confirmPassword_state)) {
         registerbtn.setAttribute("disabled", "");
         $("#submit").removeClass("readySubmit");
     } else {
         registerbtn.removeAttribute("disabled");
         $("#submit").addClass("readySubmit");
     }
 }
 function validate() {
     return confirm("确定提交注册信息?");
 }

Login.jsp 注册 代码

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

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

 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <%@ page import="java.sql.*"%>
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 </head>
 <body>
 <%
 /* //createStatement()创建一个 Statement对象来将 SQL语句发送到数据库。从数据库里面取东西对比 */
 /* login */

 Class.forName("org.postgresql.Driver");
 Connection connect = DriverManager.getConnection("jdbc:postgresql://localhost:5432/EC System","postgres","123569");
 /* load */
 String sql = "insert into users (name,password,workid,position) values (?,?,?,?)";
 PreparedStatement stmt=connect.prepareStatement(sql);
 request.setCharacterEncoding("UTF-8");
 String name = request.getParameter("name");/* 使用 request.getParameter() 方法来获取表单参数的值 */
 String password = request.getParameter("fipassword");
 String workid = request.getParameter("workid");
 String position = request.getParameter("position");
 stmt.setString(1,name);
 stmt.setString(2,password);
 stmt.setString(3,workid);
 stmt.setString(4,position);
 int n=stmt.executeUpdate();
     if(n==1){
         out.println("TRUE");
         out.println("<script language = 'javaScript'> alert('注册成功，请重新登录！');</script>");
         response.setHeader("refresh","1;url = ../html/EC-Home.html");
     }else{
         out.println("ERROR");
         out.println("<script language = 'javaScript'> alert('注册失败，请按要求填写信息，重新注册！');</script>");
         response.setHeader("refresh","1;url = ../html/Login.html");
     }
 stmt.close();
 connect.close();
 %>
 </body>
 </html>