欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

ssm+layui 超市管理系统 大学期末作业详解（3）

程序员文章站 2024-01-08 13:27:04
...

界面

登录

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超市管理系统登录</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
.divbackground{
background-image:url("img/background.png");
background-repeat:no-repeat;
background-color:#b8e5f8;
background-size:cover;
width:100%;
height:100vh;
overflow:auto;}
.login{
margin-left: 35%;
margin-right: 35%;
margin-top: 300px;
background-color: white;
padding-right: 20px;
height: 300px;
}
.logintext{
color: #0884FF;
font-size: 40px;
font-weight: 500;
}
.left{
float:left;
margin-left: 50px;
}
.right{
float: right;
}
</style>
</head>

<body>
<div class="divbackground">
 <div class="login">
 <label class="logintext">登录</label>
  <form class="layui-form" action="form" method="post">
   <div class="layui-form-item">
    <label class="layui-form-label">职 位：</label>
    <div class="layui-input-block">
    <select name="type" id="type" lay-verify="" lay-filter="typefil">
    <option value="">请选择你的职位</option>
    <option value="1">管理员</option>
    <option value="2">销售员</option>
    <option value="3">仓储管理员</option>
 </select>
 </div>
 </div>
  <div class="layui-form-item">
   <label class="layui-form-label">账户名：</label>
    <div class="layui-input-block">
      <input type="text" name="account" id="account" required  lay-verify="required" placeholder="请输入账户名" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">密 码：</label>
    <div class="layui-input-block">
      <input type="text" name="pass" id="pass" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    </div>
 <div>
 <div class="left"><a href="newLogin">注册</a></div>
 <div class="right"><a href="mail">忘记密码？</a></div>
 </div>
 <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
  </div>    
  </form>
   <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
//Demo
layui.use(['form','layer','jquery'], function(){
  var form = layui.form;
  var $ = layui.jquery;
  form.on('select(typefil)', function(data){
   console.log(data.elem); //得到select原始DOM对象
   console.log(data.value); //得到被选中的值
   console.log(data.othis); //得到美化后的DOM对象
 }); 
  $('#account').blur(function() {
   var account = $(this).val();
   var type=$('#type').val();

	$.ajax({
   url:'checkName',
   type:'post',
   dataType:'text',
   data:{"account":account,
       "type":type},
   success:function(data){
    if(data=='0'){layer.msg('未选择职位 ');
    $('#account').val("");
    }
    else if (data == '1') {
    } else {
    layer.msg('当前用户名已被占用! ');
    $('#account').val("");
     }
    }
    })
});
  $('#pass').blur(function() {
   var account = $('#account').val();
   var type=$('#type').val();
   var pass= $('#pass').val();
   
   $.ajax({
   url:'checkPass',
   type:'post',
   dataType:'text',
   data:{"account":account,
       "type":type,
      "pass":pass, 
   },
   success:function(data){
    if(data=='0'){
    }
    else if (data == '1') {
    } else {
    layer.msg('密码错误 ');
    $('#pass').val("");
     }
    }
    })  
    });

 //监听提交
  form.on('submit(form)', function(data){
    layer.msg(JSON.stringify(data.field));
    $.ajax({
        url:'check',
        data:data.field,
        dataType: "json",
        type:'POST',
        success:function (data) {
            if (data == '1'){
                location.href = "views/manage.jsp";
            }else{
                layer.msg('登录名或密码错误');
            }
        }
    })
    return false;
  });
});
</script>
 </div>
</div>
</body>
</html>

效果：
nt’).blur(function()：当account input框失去焦点时，将type，account的值向控制器异步发送数据

 @RequestMapping("/checkName")
 @ResponseBody
 public String checkName(@RequestParam("account")String account,@RequestParam("type")String type) {
  System.out.println("checkAccount:"+account+",type="+type);
  if(type.equals(""))
   return "0";
  if(type.equals("1")) {
   if(ms.compareMname(account)) {
    System.out.println("用户名正确");
    return "1";
   }
   else
    return "2";
  }
  else if(type.equals("2")) {
   if(es.compareNmae(account)) {
    System.out.println("用户名正确");
    return "1";
   }
   else
    return "2";
  }
  else if(type.equals("3")) {
   if(ss.compareNmae(account)) {
    System.out.println("用户名正确");
    return "1";
   }
   else
    return "2";
  }
  return "";
 }

checkname根据值是否为空，是否数据库有此用户名return不同值，前台根据不同返回值，删除input值或是放行
重点：当你异步发送数据的控制器必须加上@ResponseBody标签，否则直接被springmvc拦截跳转到名为“1”或“2”或“”.jsp的网页，当你加上@ResponseBody控制器想网页发送json形式的数据，并被网页解析。

 $('#pass').blur(function() {
   var account = $('#account').val();
   var type=$('#type').val();
   var pass= $('#pass').val();
   
   $.ajax({
   url:'checkPass',
   type:'post',
   dataType:'text',
   data:{"account":account,
       "type":type,
      "pass":pass, 
   },
   success:function(data){
    if(data=='0'){
    }
    else if (data == '1') {
    } else {
    layer.msg('密码错误 ');
    $('#pass').val("");
     }
    }
    })  
    });

当id 为pass的input框失去焦点时，向checkPass异步发送数据

 @RequestMapping("/checkPass")
 @ResponseBody
 public String checkPass(@RequestParam("account")String account,@RequestParam("type")String type,@RequestParam("pass")String pass) {
  System.out.println("checkAccount:"+account+",type="+type+",pass:"+pass);
  if(ms.compareMnameAndPass(account, pass)) {
   System.out.println("用户名和密码正确");
   return "1";
  }
  if(es.compareNameAndPass(account, pass)) {
   System.out.println("用户名和密码正确");
   return "1";
  }
  if(ss.compareNameAndPass(account, pass)) {
   System.out.println("用户名和密码正确");
   return "1";
  }
   return "2";
 }

checkPass接受数据，并从service端调用数据检验，正确返回1，错误2

//监听提交
  form.on('submit(form)', function(data){
    layer.msg(JSON.stringify(data.field));
      });

表单提交

@RequestMapping("/form")
 public String form(@RequestParam("type")int t,@RequestParam("account")String account,@RequestParam("pass")String pass,Model model) {
  System.out.println("typ="+t+",acc="+account+",pass="+pass);
  
  switch (t) {
  case 1:
   model.addAttribute("type","管理员");
   break;
  case 2:
   model.addAttribute("type","销售员");
   break;
  case 3:
   model.addAttribute("type","仓储管理员");
   break;
  default:
   break;
  }
  model.addAttribute("account",account);
  
  return "manage";
 }

model.addAttrbute和session的功能相同
跳转到manage.jsp

注册

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超市管理系统注册</title>
<link rel="stylesheet" href="layui/css/layui.css">
 <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <style type="text/css">
.divbackground{
background-image:url("img/background.png");
background-repeat:no-repeat;
background-color:#b8e5f8;
background-size:cover;
width:100%;
height:100vh;
overflow:auto;}
.login{
margin-left: 35%;
margin-right: 35%;
margin-top: 250px;
background-color: white;
padding-right: 20px;
height: 450px;
}
.logintext{
color: #0884FF;
font-size: 40px;
font-weight: 500;
}
</style>
</head>
<body>
 <div class="divbackground">
 <div class="login">
 <label class="logintext">注册</label>
   <div style="padding:30px" id="insertManager">
   <form class="layui-form" action="newLoginController" method="post">
     <div class="layui-form-item">
        <label class="layui-form-label">职 位：</label>
        <div class="layui-input-block">
        <select name="type" id="type" lay-verify="" lay-filter="typefil">
        <option value="">请选择你的职位</option>
        <option value="1">管理员</option>
        <option value="2">销售员</option>
        <option value="3">仓储管理员</option>
     </select>
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-block">
          <input name="name" id="name" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="name">
       </div>
       </div>
       <div class="layui-form-item">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-block">
          <input name="pass" id="pass" class="layui-input" type="text" placeholder="请输入密码" autocomplete="off" lay-verify="pass">
       </div>
       </div>
       <div class="layui-inline">
          <label class="layui-form-label">验证邮箱</label>
          <div class="layui-input-inline">
           <input name="email" id="pass" class="layui-input" type="text" autocomplete="off" lay-verify="email">
          </div>
       </div>
       <div class="layui-form-item">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-block">
          <input name="sex" id="sex" title="男" type="radio" checked="" value="男">
          <input name="sex" id="sex" title="女" type="radio" value="女">
       </div>
       </div>
       <div class="layui-inline">
          <label class="layui-form-label">验证手机</label>
          <div class="layui-input-inline">
           <input name= "phone" id="phone" class="layui-input" type="tel" autocomplete="off" lay-verify="required|phone">
          </div>
       </div>
       </div>     
       <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" type="submit" lay-filter="dosubmit" lay-submit="">立即提交</button>
          <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
      </div>
    </form>    
     </div>
     <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
     <script src="layui/layui.js"></script>
     <script>
     layui.use(['form','layer','jquery'], function(){
       var form = layui.form;
       var $ = layui.jquery;
       //监听提交
       form.on('submit(form)', function(data){         
         return false;
       });  
     });     
     </script>
 </div>
 </div>
</body>
</html>

单纯的注册界面，input的监听纠错全靠lay-verify（layui自带的功能），没有写关于后台查询是否有相同的用户名
因为懒得写了

 @RequestMapping("/newLoginController")
 public String newLoginController(@PathParam("name")String name,@PathParam("pass")String pass,@PathParam("email")String email,@PathParam("sex")String sex,@PathParam("phone")String phone,@RequestParam("type")int t) {
  System.out.println("newlogin："+"type="+t+",name="+name+",pass="+pass+",email="+email+",sex="+sex+",phone="+phone);
  switch (t) {
  case 1:
   Managers m=new Managers(pass, name, email, sex, phone);
   ms.insertSelective(m);
   return "index";
  case 2:
   Employeer e=new Employeer(name,pass, sex, email, phone);
   es.insertSelective(e);
   return "index";
  case 3:
   Store s=new Store(pass, name, email, sex, phone);
   ss.insertSelective(s);
   return "index";
  default:
   break;
  }
  return "index";
 }

注册插入新数据后跳回登录界面

找回密码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>忘记密码怎么办？当然是发邮件啦</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
.divbackground{
background-image:url("img/background.png");
background-repeat:no-repeat;
background-color:#b8e5f8;
background-size:cover;
width:100%;
height:100vh;
overflow:auto;}
.login{
margin-left: 35%;
margin-right: 35%;
margin-top: 300px;
background-color: white;
padding-right: 20px;
height: 300px;
}
.logintext{
color: #0884FF;
font-size: 40px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="divbackground">
 <div class="login">
 <label class="logintext">找回密码</label>
 <form class="layui-form" action="mailover" method="post">
   <div class="layui-form-item">
    <label class="layui-form-label">职 位：</label>
    <div class="layui-input-block">
    <select name="type" id="type" lay-verify="required" lay-filter="typefil">
    <option value="">请选择你的职位</option>
    <option value="1">管理员</option>
    <option value="2">销售员</option>
    <option value="3">仓储管理员</option>
 </select>
 </div>
 </div>
    <div class="layui-inline">
          <label class="layui-form-label">验证邮箱</label>
          <div class="layui-input-inline">
           <input name="email" id="email" class="layui-input" type="text" autocomplete="off" lay-verify="email">
          </div>
          <div class="layui-input-inline">
          <button class="layui-btn layui-btn-warm"  type="button" id="sendEmail" >找回密码</button>
          </div>
       </div>
        <div class="layui-form-item">
      <label class="layui-form-label">验证码：</label>
         <div class="layui-input-block">
           <input type="text" name="yan" id="yan"    placeholder="请输入验证码" autocomplete="off" class="layui-input">
         </div>
        </div>
       <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" type="submit" lay-filter="dosubmit" lay-submit="">找回密码</button>
          <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
      </div>
 
 </form>
 </div>
 </div>
 <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
     <script src="layui/layui.js"></script>
     <script>
     var str;
     layui.use(['form','layer','jquery'], function(){
       var form = layui.form;
       var $ = layui.jquery;
       //监听提交
       form.on('submit(form)', function(data){   
            layer.msg('已发送至邮箱');
         return false;
       });
     $("#sendEmail").click(function(){
      var type=$("#type").val();
      var email=$("#email").val();  
      $.ajax({
        url:'sendmail',
        type:'post',
        dataType:'text',
        data:{"type":type,
            "email":email},
        success:function(data){
         str=data;
          layer.msg("成功发送邮箱");
         }
      })
     });
     $('#yan').blur(function() {
      if(str==$("#yan").val()){
       
      }else{
       layer.msg("验证码错误");
       $("#yan").val("");
      }
     });
     });
     </script>
</body>
</html>

ssm+layui 超市管理系统 大学期末作业详解（3）
通过点击找回密码向sendmail发送请求，通过调用mail向你邮箱发送验证码，返回验证码将验证码赋值给全局变量str，你将验证码输入后，yan比对你的验证码，正确发送密码给你邮箱并跳转登录界面

@RequestMapping("/mail")
 public String mail() {
  return "mail";
 }
 @RequestMapping("/sendmail")
 @ResponseBody
 public String sendmail(@PathParam("type")int type,@PathParam("email")String email) throws Exception {
  System.out.println(email+","+type);
  String verifyCode=RandomString.getRandomString(5);
  ms.sendmail(email, verifyCode);
  return verifyCode;
 }
 @RequestMapping("/mailover")
 public String mailover(@PathParam("type")int type,@PathParam("email")String email,@PathParam("yan")String yan) throws Exception {
  System.out.println(email+","+type);
   Managers m=ms.getpass(email);
   System.out.println(m.toString());
   com.market.utils.mail.sendEmail(email, "您的密码：", m.getPass());
  return "index";
 }
相关标签： 控制器 jquery

上一篇：

下一篇：

推荐阅读