SSM框架下的二手教材交易系统之用户登录(包括表单提前验证,ajax)

这里写图片描述
用户登录的逻辑:
1.用户填写用户名后,先检验该用户名是否在数据库中存在(用户名唯一),若不存在,则页面显示不存在,需重新输入;若存在,输入密码后验证密码是否正确。
2.验证验证码是否正确。
3.若页面三个元素中有一个错误,页面将阻止表单提交。若无错,则转到主页面。
先贴上表单代码:

<table>
                                <tr>
                                    <td width="50"></td>
                                    <td><label class="error" id="msg"></label>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50">用户名:</td>
                                    <td><input class="input" type="text" name="loginname"
                                        id="loginname" value="${loginForm.username}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20">&nbsp;</td>
                                    <td><label id="loginnameError" class="error"></label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>密 码:</td>
                                    <td><input class="input" type="password" name="loginpass"
                                        id="loginpass" value="${loginForm.password}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20">&nbsp;</td>
                                    <td><label id="loginpassError" class="error"></label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>验证码:</td>
                                    <td><input class="input yzm" type="text" name="verifyCode"
                                        id="verifyCode" value="${loginForm.verifycode}" /> <img
                                        id="vCode" src="user/ValidateCodeAction" /> <a
                                        href="javascript: _change()">换一张</a></td>
                                </tr>
                                <tr>
                                    <td height="20px">&nbsp;</td>
                                    <td><label id="verifyCodeError" class="error"></label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td align="left"><input type="submit" name="submitbtn"
                                        id="submitbtn" class="loginBtn2" value="" onclick="return tosubmit();"/></td>
                                </tr>
                            </table>
                        </form>
  1. 后台查询:dao,service以及mapper文件
    UserDao.java
@Repository
@Transactional
public interface UserDao{

    /*** 检查是否注册***/
    public int checkIfloginname(String loginname);
    /***插入注册成功用户***/
    public void addUser(User user);
    /***查找登录用户密码
     * @throws SQLException ***/
    public String searchPass(String username);

    /***根据用户名和密码查找是否存在
     * @throws SQLException ***/
    public String searchByPass(Map<String,String> map);
    /***根据用户名修改密码
     * @throws SQLException ***/
    public int changePass(String userno,String repassword);
}

UserService.java

public interface UserService {
    /*** 检查是否注册***/
    public int checkIfloginname(String loginname);
    /***插入注册成功用户***/
    public void addUser(User user);
    /***查找登录用户密码
     * @throws SQLException ***/
    public String searchPass(String username);

    /***根据用户名和密码查找是否存在
     * @throws SQLException ***/
    public String searchByPass(Map<String,String> map);
    /***根据用户名修改密码
     * @throws SQLException ***/
    public int changePass(String userno,String repassword);
}

UserServiceImpl.java

@Service
@Transactional
public class BookServiceImpl implements BookService{
    @Autowired
    private BookDao bookdao;

    public Book searchById(String bookno) {
        // TODO Auto-generated method stub
        return bookdao.searchById(bookno);
    }

    public String searchcategory(String categoryno) {
        // TODO Auto-generated method stub
        return bookdao.searchcategory(categoryno);
    }

    public Setprice searchprice(String setpriceno) {
        // TODO Auto-generated method stub
        return bookdao.searchprice(setpriceno);
    }

    public Page<Book> searchByCategory(String categoryNo, int currentPage) {
        // TODO Auto-generated method stub
        return bookdao.searchByCategory(categoryNo, currentPage);
    }

    public Page<Book> searchByBookName(String bookName, int currentPage) {
        // TODO Auto-generated method stub
        return bookdao.searchByBookName(bookName, currentPage);
    }

    public Page<Book> searchByEditor(String editor, int currentPage) {
        // TODO Auto-generated method stub
        return bookdao.searchByEditor(editor, currentPage);
    }

    public Page<Book> searchByTwo(String bookName, String editor,
            int currentPage) {
        // TODO Auto-generated method stub
        return bookdao.searchByTwo(bookName, editor, currentPage);
    }

    public Page<Book> searchByCriteria(List<Expression> list, int currtentPage) {
        // TODO Auto-generated method stub
        return bookdao.searchByCriteria(list, currtentPage);
    }

}

userMappers.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gyt.frame.Dao.UserDao">
    <!-- 1. id (必须配置) id是命名空间中的唯一标识符,可被用来代表这条语句。 一个命名空间(namespace) 对应一个dao接口, 
        这个id也应该对应dao里面的某个方法(相当于方法的实现),因此id 应该与方法名一致 -->
    <!-- 2. parameterType (可选配置, 默认为mybatis自动选择处理) 将要传入语句的参数的完全限定类名或别名, 如果不配置,mybatis会通过ParameterHandler 
        根据参数类型默认选择合适的typeHandler进行处理 parameterType 主要指定参数类型,可以是int, short, long, 
        string等类型,也可以是复杂类型(如对象) -->
    <!-- 3. resultType (resultType 与 resultMap 二选一配置) resultType用以指定返回类型,指定的类型可以是基本类型,可以是java容器,也可以是javabean -->
    <!-- 4. resultMap (resultType 与 resultMap 二选一配置) resultMap用于引用我们通过 resultMap标签定义的映射类型,这也是mybatis组件高级复杂映射的关键 -->
    <!-- 5. flushCache (可选配置) 将其设置为 true,任何时候只要语句被调用,都会导致本地缓存和二级缓存都会被清空,默认值:false -->
    <!-- 6. useCache (可选配置) 将其设置为 true,将会导致本条语句的结果被二级缓存,默认值:对 select 元素为 true -->
    <!-- 7. timeout (可选配置) 这个设置是在抛出异常之前,驱动程序等待数据库返回请求结果的秒数。默认值为 unset(依赖驱动) -->
    <!-- 8. fetchSize (可选配置) 这是尝试影响驱动程序每次批量返回的结果行数和这个设置值相等。默认值为 unset(依赖驱动) -->
    <!-- 9. statementType (可选配置) STATEMENT,PREPARED 或 CALLABLE 的一个。这会让 MyBatis 
        分别使用 Statement,PreparedStatement 或 CallableStatement,默认值:PREPARED -->
    <!-- 10. resultSetType (可选配置) FORWARD_ONLY,SCROLL_SENSITIVE 或 SCROLL_INSENSITIVE 
        中的一个,默认值为 unset (依赖驱动) -->

    <!-- 检查是否注册 -->
    <select id="checkIfloginname" parameterType="String" resultType="int">
        select count(*) as loginnum from Customer where cusName=#{loginname}
    </select>
    <!-- 根据用户名和密码查找是否存在 -->
    <select id="searchByPass" parameterType="String" resultType="String">
        select CustomerNo  from Customer where cusName=#{username}
        and cusPassword=#{password}
    </select>
    <!-- 插入注册成功用户 -->
    <insert id="addUser" parameterType="com.gyt.frame.Vo.User">
        insert into
        Customer(CustomerNo,CusName,cusPassword,sex,stuNo,telephone,address)
        values(#{userno},#{username},#{password},#{sex},#{studentno},#{telephone},#{roomno})
    </insert>

    <!-- 查找登录用户密码 -->
    <select id="searchPass" parameterType="String" resultType="String">
        select cusPassword as password from Customer where cusName=#{username}
    </select>

    <!-- 根据用户名修改密码 -->
    <update id="changePass" parameterType="String">
        update Customer
        set
        cusPassword=#{repassword}
        where customerNo=#{userno}
    </update>
</mapper>

mybatis的mapper配置文件resultType,以后会讲,下面的内容也会出现一些些。

2.对应页面检验数据是否正确的action,页面通过ajax访问。
LoginCheckAction.java

@Controller
@Scope("prototype")
public class LoginCheckAction extends ActionSupport implements RequestAware,SessionAware {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Autowired
    private UserService userservice;
    private Map<String, Object> request;
    private Map<String, Object> session;
    private String loginname;
    private String loginpass;



    public String getLoginname() {
        return loginname;
    }

    public void setLoginname(String loginname) {
        this.loginname = loginname;
    }

    public String getLoginpass() {
        return loginpass;
    }

    public void setLoginpass(String loginpass) {
        this.loginpass = loginpass;
    }

    public void setSession(Map<String, Object> arg0) {
        // TODO Auto-generated method stub
        this.session = arg0;
    }

    public void setRequest(Map<String, Object> arg0) {
        // TODO Auto-generated method stub
        this.request = arg0;
    }

    public UserService getUserservice() {
        return userservice;
    }

    public void setUserservice(UserService userservice) {
        this.userservice = userservice;
    }



    /*** 根据用户名和密码查找是否存在 ***/
    public String execute(){
//      request.setCharacterEncoding("UTF-8");// 解决中文乱码
        HttpServletResponse response = ServletActionContext.getResponse();

//      String username = request.get("loginname").toString();
//      System.out.println("username:"+loginname);
        // System.out.println("aaaaaa"+request.getSession().getId());
//      String password = request.get("loginpass").toString();
//      System.out.println("password:"+loginpass);
        //usermappers.xml中searchByPass需要两个参数,直接传递将有错。
        //所以通过map来传递。
        Map<String,String> map=new HashMap<String,String> ();
        map.put("username", loginname);
        map.put("password", loginpass);
        //通过用户名和密码查找用户编号,若返回值不为空,则证明该用户存在,向页面传递true.
        String str = userservice.searchByPass(map);
        boolean b = false;
        try {
        if (str == null) {
            b = false;
                response.getWriter().print(b);
            response.getWriter().close();
        }
        else{
            b = true;
            response.getWriter().print(b);
        response.getWriter().close();
        }
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "success";

    }


}

重点:
这里写图片描述
3.页面通过ajax验证。

<script type="text/javascript">
    $(function() {
        $("#submitbtn").hover(function() {
            $("#submitbtn").attr("class", "loginBtn1");
        }, function() {
            $("#submitbtn").attr("class", "loginBtn2");
        }

        );
        $(".input").focus(function() {//得到焦点验证
            var labelid = $(this).attr("id") + "Error";
            $("#" + labelid).text("");
            showError($("#" + labelid));

        });
        $(".input").blur(function() {//失去焦点

            var inid = "fun" + $(this).attr("id") + "()";
            eval(inid);
        });
        //选择所有类为errorClass的元素,类选择器,each()遍历
        $(".error").each(function() {
            showError($(this));
        });
        //简单的表面的逻辑验证
        function funloginname() {

            var inid = "loginname";
            var v = $("#" + inid).val();
            if (!v) {
                $("#" + inid + "Error").text("用户名不能为空!");
                showError($("#" + inid + "Error"));
                return false;
            } else if (v.length > 20) {
                $("#" + inid + "Error").text("用户名长度在1-20!");
                showError($("#" + inid + "Error"));
                return false;
            }
            return true;
        }
        function funloginpass() {
            var inid = "loginpass";
            var v = $("#" + inid).val();
            if (!v) {
                $("#" + inid + "Error").text("密码不能为空!");
                showError($("#" + inid + "Error"));
                return false;
            } else if (v.length<2||v.length>10) {
                $("#" + inid + "Error").text("密码长度在2-9!");
                showError($("#" + inid + "Error"));
                return false;

            }
            $.ajax({
                //验证密码是否正确
                url : "/SecondBooks/user/LoginCheckAction",
                data : {
                    method : "execute",
                    loginname : $("#loginname").val(),
                    loginpass : v
                },
                type : "POST",
                dataType : "json",
                async : false,
                cache : false,
                success : function(result) {
                //action传过来的值若为false,则密码错误。
                    if (!result) {
                        $("#" + inid + "Error").text("密码错误!");
                        showError($("#" + inid + "Error"));
                        return false;
                    }
                }

            });
            return true;
        }
        function funverifyCode() {
        //验证验证码是否正确。
            var inid = "verifyCode";
            var v = $("#" + inid).val();
            //简单的逻辑验证
            if (!v) {
                $("#" + inid + "Error").text("验证码不能为空!");
                showError($("#" + inid + "Error"));
                return false;
            } else if (v.length != 4) {
                $("#" + inid + "Error").text("验证码错误!");
                showError($("#" + inid + "Error"));
                return false;

            }
            $.ajax({
                url : "/SecondBooks/user/ValidateCheckAction",
                data : {
                    method : "execute",
                    verifyCode : v
                },
                type : "POST",
                dataType : "json",
                async : false,
                cache : false,
                success : function(result) {
                    if (!result) {
                        $("#" + inid + "Error").text("验证码错误!");
                        showError($("#" + inid + "Error"));
                        return false;
                    }
                }

            });
            return true;

        }
        function showError(ele) {
            var text = ele.text();
            if (text) {
                ele.css("display", "");
            } else {
                ele.css("display", "none");
            }
        }

    });
</script>

注意:jquery的代码想要实现,必须引入js。看图—–
这里写图片描述

4.提交表单。在提交表单之前,应该先判断数据是否有错,若有错,则无法提交。提前验证的代码:

function tosubmit() {
        var bool = true;
        if (!funloginname()) {
            bool = false;
        }
        if (!funloginpass()) {
            bool = false;
        }
        if (!funverifyCode()) {
            bool = false;
        }
        if(bool){
            alert(bool);
            //window.location.href="user/LoginAction";
        document.getElementById("loginForm").submit();

        }
    };

form表单可以通过两种方式来提前验证。
⑴.这里写图片描述
这里写图片描述
⑵.这里写图片描述
这里写图片描述

5.最终登录验证。
LoginAction.java

@Controller
@Scope("prototype")
public class LoginAction extends ActionSupport implements RequestAware,SessionAware,ServletRequestAware{
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Autowired
    private UserService userservice;
    private Map<String, Object> request;
    private Map<String, Object> session;
    private String verifyCode;
    private HttpServletRequest servletrequest;

    public void setSession(Map<String, Object> arg0) {
        // TODO Auto-generated method stub
        this.session = arg0;
    }

    public void setRequest(Map<String, Object> arg0) {
        // TODO Auto-generated method stub
        this.request = arg0;
    }


    public String getVerifyCode() {
        return verifyCode;
    }

    public void setVerifyCode(String verifyCode) {
        this.verifyCode = verifyCode;
    }

    public UserService getUserservice() {
        return userservice;
    }

    public void setUserservice(UserService userservice) {
        this.userservice = userservice;
    }

    public String execute(){
        User formuser = new User();
//      User.class.getFields();
//      request.setCharacterEncoding("UTF-8");// 解决中文乱码
        String verifyCode = request.get("verifyCode").toString();
        System.out.println("LoginAction:"+verifyCode);
        formuser.setVerifycode(verifyCode);

        String username = servletrequest.getParameter("loginname").toString();
        formuser.setUsername(username);
        System.out.println("username:"+username);

//      String username = request.get("loginname").toString();
//      formuser.setUsername(username);
//      System.out.println("username");

        String password = servletrequest.getParameter("loginpass").toString();
        System.out.println("LoginAction:"+password);
        formuser.setPassword(password);
        // String password=new
        // String(request.getParameter("loginpass").getBytes("iso-8859-1"),"utf-8");
        System.out.println(username+" "+password+" "+verifyCode);
        // System.out.println("aaaaaa"+request.getSession().getId());
        if (userservice.checkIfloginname(username)==0) {
            request.put("msg", "该用户不存在!");
            request.put("loginForm", formuser);
//          RequestDispatcher requestDispatcher = request
//                  .getRequestDispatcher("Pages/Ables/User/Login.jsp");
//          requestDispatcher.forward(request, response);
            return "failure";
        } else {
            Map<String,String> map=new HashMap<String,String> ();
            map.put("username", username);
            map.put("password", password);
            String str = userservice.searchByPass(map);
            if (str == null) {
                request.put("msg", "密码错误!");
                request.put("loginForm", formuser);
//              RequestDispatcher requestDispatcher = request
//                      .getRequestDispatcher("Pages/Ables/User/Login.jsp");
//              requestDispatcher.forward(request, response);
                return "failure";
            } else {
                System.out.println("qqqq");
                formuser.setUserno(str);
                session.put("sessionUser", formuser);
                System.out.println("user:" + formuser.getUsername()
                        + formuser.getUserno());
                User user = (User) session.get("sessionUser");
                request.put("username", user.getUsername());
                System.out.println("sessionUser1:" + user.getUserno());
                try {
                    username = URLEncoder.encode(username, "utf-8");
                } catch (UnsupportedEncodingException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                Cookie cookie = new Cookie("loginname", username);
                cookie.setMaxAge(1000 * 60 * 60 * 60 * 10);
//              response.sendRedirect("index.jsp");
                return "success";
            }

        }
    }

    public void setServletRequest(HttpServletRequest arg0) {
        // TODO Auto-generated method stub
        this.servletrequest=arg0;
    }



}

struts.xml就不贴代码了,类似。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值