首页 > 编程语言> 文章详细

JavaWeb课程设计：用户和商品管理系统

2021-06-18 22:57:54 阅读：173 来源： 互联网

标签：课程设计 false JavaWeb 管理系统 else getElementById var document true

设计要求

使用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();}

效果呈现

在这里插入图片描述需要源码的可以从下面链接获取

标签：课程设计,false,JavaWeb,管理系统,else,getElementById,var,document,true
来源： https://blog.csdn.net/Dae_Lzh/article/details/118034549

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaWeb课程设计：用户和商品管理系统

设计要求

使用工具

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

注册界面

一、表单

二、注册格式检查

三、提交数据库

登录界面

一、表单

二、密码检查

主界面

导航栏与菜单

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

数据表格

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

效果呈现