设计要求

使用JavaWeb写一个管理系统，可以进行登录注册，对MySQL数据库中的用户和商品信息进行管理。

使用工具

IDEA、MySQL Workbench、LayUI框架

需要源码的可以从下面链接获取

UserSystemZIP.zip

注册界面

一、表单

HTML的form表单。onblur()是输入框失去焦点时执行的函数。

<form id="Form" method="POST" action="register">
        <div class="form-item">
            <div class="form-title">用户名</div>
            <input type="text" name="Name" id="name-input" onblur="checkName()">

        </div>
        <div id="name-errMsg"></div>   <!--用于显示错误信息 -->


        <div class="form-item">
            <div class="form-title">密码</div>
            <input type="password" name="Pwd" id="pwd-input1" onblur="checkPwd1()">
        </div>
        <div id="pwd-errMsg1"></div>


        <div class="form-item">
            <div class="form-title">重复密码</div>
            <input type="password" name="Pwd2" id="pwd-input2" onblur="checkPwd2()">
        </div>
        <div id="pwd-errMsg2"></div>

        <div class="form-item">
            <div class="form-title">昵称</div>
            <input type="text" name="NickName" id="nickName-input" onblur="checkEmail()">
        </div>
        <div id="nickName-div"></div>

        <div class="form-item">
            <div class="form-title">电话号码</div>
            <input type="number" name="Tel" id="tel-input" onblur="checkTel()" >
        </div>
        <div id="tel-errMsg"></div>


        <div class="form-item">
            <div class="form-title">邮箱</div>
            <input type="text" name="Email" id="email-input" onblur="checkEmail()">
        </div>
        <div id="email-errMsg"></div>

        <div class="form-item">
            <div class="form-title">住址</div>
            <input type="text" name="Address" id="address-input" onblur="checkEmail()">
        </div>
        <div id="address-div"></div>

        <div id="submit-div">
            <div id="submit-left">

            </div>
            <div id="submit-mid">
                <button type="submit" id="Submit">注册</button>
            </div>
            <div id="submit-right">
                <a href="LoginPage.jsp" id="login">已有账号，前往登录</a>
            </div>
        </div>
    </form>

二、注册格式检查

注册格式检查需要检查：

• 用户名：不能包含特殊字符
• 密码：不能包含特殊字符
• 重复密码一致性检查
• 电话号码：十一位数字
• 邮箱：格式检查

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
        //定义变量控制是否能提交
        //Enable为true表示格式正确 ， Empty为false表示不为null或空字符串
        var nameEnable  = false;
        var nameEmpty   = true;

        var pwdEnable   = false;
        var pwd1Empty   = true;
        var pwd2Empty   = true;

        var telEnable   = false;
        var telEmpty    = true;

        var emailEnable = false;
        var emailEmpty  = true;

        //判断字符串是否为null或空字符串 ""
        function CheckEmpty(ss){
            return ss == null || ss === "";
        }


        //检查用户名，不能出现特殊字符
        function checkName(){
            //失去焦点（光标）后执行的事件函数
            var inputName = document.getElementById("name-input").value;

            var pattern = new RegExp("[` ~!@#$^&*()%=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");


            if(!CheckEmpty(inputName)){
                nameEmpty = false;

                if(pattern.test(inputName)){  //包含特殊字符
                    document.getElementById("name-errMsg").innerHTML = "用户名格式错误，不能包含特殊字符！"
                    document.getElementById("name-input").style = "border:2px solid red;"
                    nameEnable = false;
                }else{
                    document.getElementById("name-errMsg").innerHTML = "  "
                    document.getElementById("name-input").style = "border:0px;"
                    nameEnable = true;
                }
            }else{
                nameEmpty = true;
            }


        }

        //检查密码，
        function checkPwd1(){
            var inputPwd_1 = document.getElementById("pwd-input1").value;
            var inputPwd_2 = document.getElementById("pwd-input2").value;


            if(!CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = false;

                if(inputPwd_1 != inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "两次密码不相同，请检查！";
                    document.getElementById("pwd-input1").style = "border:2px solid red;"
                    document.getElementById("pwd-input2").style = "border:2px solid red;"
                    pwdEnable = false;
                }
                if(inputPwd_1 == inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "  ";
                    document.getElementById("pwd-input1").style = "border:0px;"
                    document.getElementById("pwd-input2").style = "border:0px;"
                    pwdEnable = true;
                }

            }else if(!CheckEmpty(inputPwd_1) && CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = true;
            }else if(CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = true;
                pwd2Empty = false;
            }else{
                pwd1Empty = true;
                pwd2Empty = true;
            }
        }

        //检查重复密码，是否相同
        function checkPwd2(){
            var inputPwd_1 = document.getElementById("pwd-input1").value;
            var inputPwd_2 = document.getElementById("pwd-input2").value;


            if(!CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = false;

                if(inputPwd_1 != inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "两次密码不相同，请检查！";
                    document.getElementById("pwd-input1").style = "border:2px solid red;"
                    document.getElementById("pwd-input2").style = "border:2px solid red;"
                    pwdEnable = false;
                }
                if(inputPwd_1 == inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "  ";
                    document.getElementById("pwd-input1").style = "border:0px;"
                    document.getElementById("pwd-input2").style = "border:0px;"
                    pwdEnable = true;
                }

            }else if(!CheckEmpty(inputPwd_1) && CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = true;
            }else if(CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = true;
                pwd2Empty = false;
            }else{
                pwd1Empty = true;
                pwd2Empty = true;
            }

        }

        //检查电话号码，是否全是数字，是否为十一位
        function checkTel(){
            var inputTel = document.getElementById("tel-input").value;
            var flag = true;

            if (!CheckEmpty(inputTel)){
                telEmpty = false;

                if (!(/^1[3456789]\d{9}$/.test(inputTel))) {
                    // 格式错误
                    flag=false;
                }
                if(!flag){
                    document.getElementById("tel-errMsg").innerHTML = "手机号格式错误，请检查！"
                    document.getElementById("tel-input").style = "border:2px solid red;"
                }else{
                    document.getElementById("tel-errMsg").innerHTML = "   ";
                    document.getElementById("tel-input").style = "border:0px;"

                }

                telEnable = flag;
            }else{
                telEmpty = true;
            }


        }

        //检查邮箱格式
        function checkEmail(){
            var inputEmail = document.getElementById("email-input").value;
            var flag = true;
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

            if(!CheckEmpty(inputEmail)){
                emailEmpty = false;
                //调用正则验证test()函数
                if(!reg.test(inputEmail)){
                    flag = false;
                }
                if(!flag){
                    document.getElementById("email-errMsg").innerHTML = "邮箱格式不正确，请检查！"
                    document.getElementById("email-input").style = "border:2px solid red;"
                }else{
                    document.getElementById("email-errMsg").innerHTML = "   "
                    document.getElementById("email-input").style = "border:0px;"
                }

                emailEnable = flag;
            }else{
                emailEmpty = true;
            }


        }


        $(document).ready(function () {
            $("#name-input").focus();
            //全局检查并判断是否可以提交
            $("#Submit").click(function () {
                if(nameEmpty){
                    document.getElementById("name-input").style = "border:2px solid red;"
                    alert("请输入用户名！");
                    return;

                }else if(pwd1Empty){
                    document.getElementById("pwd-input1").style = "border:2px solid red;"
                    alert("请输入密码！");
                    return;

                }else if(pwd2Empty){
                    document.getElementById("pwd-input2").style = "border:2px solid red;"
                    alert("请再次输入密码！");
                    return;

                }else if(telEmpty){
                    document.getElementById("tel-input").style = "border:2px solid red;"
                    alert("请输入电话号码！");
                    return;

                }else if(emailEmpty){
                    document.getElementById("email-input").style = "border:2px solid red;"
                    alert("请输入邮箱！");
                    return;

                }else if(!nameEnable){
                    return;
                }else if(!pwdEnable){
                    return;
                }else if(!telEnable){
                    return;
                }else if(!emailEnable){
                    return;

                }

                $("#Form").submit();


            });

        });

    </script>

三、提交数据库

从注册页面获得参数，并提交数据到数据库。这是JavaWeb的基础，就不详细解释了。

登录界面

一、表单

HTML的form表单。和注册页面的类似，从数据库查找数据并验证密码。

二、密码检查

• 验证成功，使用Session传递用户User类型变量

• 验证失败，返回登录界面并保留输入的用户名

public class Login extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
        throws IOException {
        //获取登陆的用户名和密码
        String loName = request.getParameter("Name");
        String loPwd = request.getParameter("Pwd");

        String userName;
        String res; //返回的信息，若登陆成功则返回空字符串，若登陆失败返回错误信息
        try {

            //获取用户账号列表
            List<User> userList = User_dataList.get();

            //遍历
            for (User userItem : userList) {
                //用于登录失败后用户名不消失
                if (userItem.getName().equals(loName)) {
                    if(userItem.getPwd().equals(loPwd)){
                        //匹配成功
                        //创建Session并携带用户信息的参数loginUser
                        HttpSession session = request.getSession();
                        session.setAttribute("loginUser", userItem);
                        //跳转至个人信息界面，
                        request.getRequestDispatcher("Main.jsp").forward(request, response);
                    }else{
                        //匹配失败，密码错误
                        userName = userItem.getName();
                        res = "账号或密码错误，请检查！";

                        request.setAttribute("res",res);
                        request.setAttribute("userName",userName);

                        request.getRequestDispatcher("LoginPage.jsp").forward(request ,response);
                    }


                }
            }

            //匹配失败，返回错误信息
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

主界面

导航栏与菜单

将MySQL数据库的数据渲染到LayUI数据表格中

数据表格

LayUI数据表格中的删除和修改操作事件对应的js代码为

table.on('tool(test)', function(obj){
   //tool 是工具的事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
   
	if(obj.event === 'del'){
	//修改操作
   //obj为点击的数据对象，包含name,tel等属性

	} 
   else if(obj.event === 'edit'){
   //修改操作
     	
   }

（1）删除操作

if(obj.event === 'del'){
	var delName = obj.data.name;
	//在执行obj.del()执行前将要删除的用户名存储 并用于URL参数
	//因为不确定执行obj.del()后是否会被释放而导致找不到数据
   layer.confirm('删除成功', function(index){
      obj.del();
      layer.close(index);
   });
   window.location.href= 'delUser?delName=' + delName;
   //window.location.href = 'url'   JS跳转页面的方法之一
   //delUser为Servlet的url ， delName为要删除的用户的用户名
} 

（2）修改操作

首先读清楚LayUI官方文档中关于弹窗layer.prompt(option ,yes)的使用

• title：弹窗的标题

• value：输入框的值，可以设定初始值

• form：输入框类型

• yes：回调函数function(value , index ,elem){} 获取输入框的value值执行操作

由于修改数据需要修改的字段名和修改的值两个数据，layer.prompt()弹出层又无法设定两个输入框。所以我在第一个弹窗的回调函数中再增加一个弹窗，以获取两个数据。

if(obj.event === 'edit'){

layer.prompt({
   //输入字段名的弹窗
   formType: 0,
   value: '',
   title:'请输入修改字段名'
   }, function(value, index ,elem){
      var field = value; //中文字段名
   	var fieldName = value;
      var oldValue = ''; //原值
   
   	//通过输入的中文字段名判断是数据库中的哪个字段，并在obj对象中获取该字段的原值
      if(field === '用户名')   { field = 'name'; oldValue = obj.data.name;}
      else if(field === '电话'){ field = 'tel'; oldValue = obj.data.tel;}
      else if(field === '邮箱'){ field = 'email'; oldValue = obj.data.email;}
      else if(field === '昵称'){ field = 'nickName'; oldValue = obj.data.nickName;}
      else if(field === '住址'){ field = 'address'; oldValue = obj.data.address;}

      //修改字段的值弹窗
      layer.prompt({
         formType: 0,
         value: oldValue,  //将默认值设置为原来的值
         title: '将'+fieldName+'修改为'
      },function (value, index, elem){

         window.location.href=
            'updateUser?updateField='+field   //字段名
            +'&updateValue='+value    //修改的值
            +'&updateId='   +obj.data.id.toString();
            // 跳转到Servlet服务器进行修改，数据表中id作为主键，修改数据需要id值
            // 这里最将int类型的obj.data.id转换成字符串类型
         layer.close(index);
      })

      console.log(value,index,elem);
      layer.close(index);
      });

}

将左侧菜单与主题内容对应

1、通过jQuery和JS函数实现：定义一个对象类型的变量menusStatus，表示每个菜单内容是否显示

var menusStatus = {
    //初始状态
    indexShow : true,       //首页
    userTableShow : false,  //用户表格
    page2Show : false,
    page3Show : false
}

2、定义一个函数FreshMenusStatus()，根据menusStatus对象各个内容的状态来判断是否需要显示，若有内容增加需要在该函数中多加一组if-else判断。

function FreshMenusStatus(){
    //根据menusStatus对象中的值来判断元素是否显示

    if(menusStatus.indexShow){ $("#indexPage").show();}
    else { $("#indexPage").hide();}

    if(menusStatus.userTableShow){ $("#userTable-div").show();}
    else{ $("#userTable-div").hide();}

    if(menusStatus.page2Show){ $("#page2").show();}
    else { $("#page2").hide();}
}

3、这里需要再定义一个函数setStatusAllHide()（后面会用到），作用是将menusStatus中的状态（值）全部置为false。

function setStatusAllHide(){    //设置所有元素状态隐藏    for (var key in menusStatus){        menusStatus[key] = false;    }}

4、对菜单指定的元素编写点击事件，这里使用jQuery中的click方法。这样就可以实现点击某个菜单并在主体内容中只显示指定的元素。

$("#userTableMenu").click(function (){     setStatusAllHide();   					//将状态全部置为false     menusStatus.userTableShow = true ; 	//再将点击的元素对应的状态设置为true     FreshMenusStatus();   					//刷新状态});

注意：页面加载完成时也别忘了来一个FreshMenusStatus()

window.onload =function (){  //页面加载完成获取状态	FreshMenusStatus();}

效果呈现

需要源码的可以从下面链接获取