前期准备：
- tomcat的安装与配置（略）
- jdk的安装与配置（略）
- eclipse软件安装与配置（略）
- webstrom软件或IDEA的安装与配置（大概用了IDEA就不需要eclipse了，但是怎么都没办法调试jsp所以还是放弃了，哈哈哈，tomcat部署https://segmentfault.com/a/1190000006130006）
- postgresql+QGIS+uDig+GeoServe安装与配置（略）
- tomcat配置postgresql（略）
- 土方计算的算法整理（见随笔）
- 构建项目测试数据库（用户表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>