易居主页点击登录跳转登录页面

易居主页点击登录跳转登录页面

UserController 中代码修改为

@Controller
@RequestMapping("user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("login.do")
    @ResponseBody
    public String login(@Param(value = "username") String username,
                        @Param(value = "password") String password){
        if ("123".equals(username)&&"123".equals(password)){
            return "success";
        }
        return "fail";
    }

    @RequestMapping("login1.do")
    @ResponseBody
    public String login1(@Param(value = "username") String username,
                        @Param(value = "password") String password){
        JSONObject jsonObject=new JSONObject();
        if ("123".equals(username)&&"123".equals(password)){
            jsonObject.put("result","1");
        }else {
            jsonObject.put("result","2");
        }
        return jsonObject.toString();
    }

    @RequestMapping("login2.do")
    @ResponseBody
    public String login2(@Param(value = "phone") String phone,
                         @Param(value = "password") String password){
        JSONObject jsonObject=new JSONObject();
        UserInfo user=userService.findUserByPhone(phone);
        if (user==null){
            jsonObject.put("result","0");
        }else if (!password.equals(user.getPassword())){
            jsonObject.put("result","1");
        }else {
            jsonObject.put("result","2");
        }
        return jsonObject.toString();
    }
}

新建接口IUserDao 接口中添加方法findUserByPhone

public interface IUserDao {
    UserInfo findUserByPhone(String phone);
}

Service新建接口IUserService 接口中也添加方法findUserByPhone

public interface IUserService {
    UserInfo findUserByPhone(String phone);
}

UserService中代码

@Service
public class UserService implements IUserService {

    @Autowired
    private IUserDao userDao;

    @Override
    public UserInfo findUserByPhone(String phone) {
        return userDao.findUserByPhone(phone);
    }
}

UserInfo中代码

package com.yiju.bean;

public class UserInfo {

    public UserInfo() {
    }
    public UserInfo(int userId, String nickname, String truename, int gender, String city, long createTime) {
        this.userId = userId;
        this.nickname = nickname;
        this.truename = truename;
        this.gender = gender;
        this.city = city;
        this.createTime = createTime;
    }

    private int userId; //用户id
    private String phone; //用户手机号,用于登录
    private String password; //密码
    private String email; //邮箱
    private String nickname; //昵称
    private String truename; //真实姓名
    private int gender; //性别 0:男 1:女
    private String province; //省份
    private String city; //城市
    private int isDelete; //是否删除 0:未删除 1:已删除
    private long createTime; //创建时间
    private long updateTime; //更新时间

    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getTruename() {
        return truename;
    }

    public void setTruename(String truename) {
        this.truename = truename;
    }

    public int getGender() {
        return gender;
    }

    public void setGender(int gender) {
        this.gender = gender;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public int getIsDelete() {
        return isDelete;
    }

    public void setIsDelete(int isDelete) {
        this.isDelete = isDelete;
    }

    public long getCreateTime() {
        return createTime;
    }

    public void setCreateTime(long createTime) {
        this.createTime = createTime;
    }

    public long getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(long updateTime) {
        this.updateTime = updateTime;
    }

    @Override
    public String toString() {
        return "UserInfo{" +
                "userId=" + userId +
                ", phone='" + phone + '\'' +
                ", password='" + password + '\'' +
                ", email='" + email + '\'' +
                ", nickname='" + nickname + '\'' +
                ", truename='" + truename + '\'' +
                ", gender=" + gender +
                ", province='" + province + '\'' +
                ", city='" + city + '\'' +
                ", isDelete=" + isDelete +
                ", createTime=" + createTime +
                ", updateTime=" + updateTime +
                '}';
    }
}

UserController 中代码

@Controller
@RequestMapping("user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("login.do")
    @ResponseBody
    public String login(@Param(value = "username") String username,
                        @Param(value = "password") String password){
        if ("123".equals(username)&&"123".equals(password)){
            return "success";
        }
        return "fail";
    }

    @RequestMapping("login1.do")
    @ResponseBody
    public String login1(@Param(value = "username") String username,
                        @Param(value = "password") String password){
        JSONObject jsonObject=new JSONObject();
        if ("123".equals(username)&&"123".equals(password)){
            jsonObject.put("result","1");
        }else {
            jsonObject.put("result","2");
        }
        return jsonObject.toString();
    }

    @RequestMapping("login2.do")
    @ResponseBody
    public String login2(@Param(value = "phone") String phone,
                         @Param(value = "password") String password){
        JSONObject jsonObject=new JSONObject();
        UserInfo user=userService.findUserByPhone(phone);
        if (user==null){
            jsonObject.put("result","0");
        }else if (!password.equals(user.getPassword())){
            jsonObject.put("result","1");
        }else {
            jsonObject.put("result","2");
        }
        return jsonObject.toString();
    }
}

mapper包中新建jsp文件UserInfoMapper
UserInfoMapper中代码

<?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.yiju.dao.IUserDao">

<select id="findUserByPhone" parameterType="String" resultType="com.yiju.bean.UserInfo">
    select * from tb_user where phone=#{phone}
</select>

</mapper>

baseHead中代码修改为

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>页头</title>
    <!--    下面是几个导入的包-->
    <link type="text/css" href="${pageContext.request.contextPath}/css/css.css" rel="stylesheet" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/js.js"></script>
</head>
<body>

<!--头部最上方的框-->
<div class="header">
    <div class="width1190">
        <div class="fl" style="font-size: 14px">您好，欢迎来到<a href="${pageContext.request.contextPath}/index.jsp">易居住房信息平台！</a></div>
        <div class="fr">
            <a href="${pageContext.request.contextPath}/pages/login.jsp" style="font-size: 14px" target="_blank"><strong>登录</strong></a> |
            <a href="#" style="font-size: 14px" target="_blank"><strong>注册</strong></a>
            <a  style="font-size: 14px">欢迎使用</a>　|
            <a href="#" style="font-size: 14px" target="_blank"><strong>个人中心</strong></a> |
            <a href="#" style="font-size: 14px"><strong>退出</strong></a> |
            <a href="javascript:;" onclick="" style="font-size: 14px">加入收藏</a> |
            <a href="javascript:;" onclick="" style="font-size: 14px">设为首页</a>
        </div>
        <div class="clears"></div>
    </div><!--width1190/-->
</div>
<!--头部最上方的框-->

</body>
</html>

pages中新建jsp文件login
login中代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>欢迎登录 — 易居住房交易平台</title>

    <%--导入CSS文件--%>
    <link type="text/css" href="../css/css.css" rel="stylesheet"/>
    <%--<link type="text/css" href="css/buttonStyle.css" rel="stylesheet" />--%>

    <%--导入JS文件--%>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="../js/wer.js"></script>
    <%--<script src="js/signup.js"></script>--%>
</head>


<body>

<%--加入头部--%>
<jsp:include page="basehead.jsp"></jsp:include>

<!--Logo栏和手机号栏-->
<div class="logo-phone">
    <div class="width1190">

        <table align="center" width="100%">
            <tr>
                <td>
                    <h1 class="logo"><a href="../index.jsp"><img src="../images/logo.png" width="163" height="59"/></a>
                    </h1>
                </td>

                <td align="center">
                    <div class="phones"><strong>000-0000000</strong></div>
                    <div class="clears"></div>
                </td>
            </tr>
        </table>
    </div><!--width1190/-->
</div><!--logo-phone/-->
<!--Logo栏和手机号栏-->

<hr width="1280px">

<!--注册-->
<div class="content">
    <div class="width1190">
        <div class="reg-logo">

            <form method="post" action="" class="zcform">
                <table align="center" cellpadding="100px" cellspacing="10px">
                    <tr>
                        <td align="right">
                            <label class="one" for="phone">手机号码：</label>
                        </td>
                        <td colspan="2">
                            <input id="phone" name="phone" type="text" class="required" value placeholder="请输入您的手机号"/>
                        </td>
                    </tr>
                    <tr>
                        <td><br></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="one" for="password">登录密码：</label>
                        </td>
                        <td colspan="2">
                            <input id="password" name="password" type="password"
                                   class="{required:true,rangelength:[8,20],}" value placeholder="请输入登录密码"/>
                        </td>
                    </tr>
                    <tr>
                        <td><br></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="one" for="verifyCode">验证码：</label>
                        </td>
                        <td>
                            <input id="verifyCode" name="verifyCode" type="text" class="required" value
                                   placeholder="请输入验证码"/>
                        </td>
                        <td>
                            <div id="v_container" style="width: 180px;height: 45px;"></div>
                            <%--<a>　</a><button type="button" class="sendVerifyCode" id="btn" name="btn" style="width: 180px;height: 45px">点击获取验证码</button><a>　</a>--%>
                        </td>
                    </tr>
                    <tr>
                        <td><br></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <input class="submit" type="button" value="立即登录"/>
                            <%--<input class="sub-btn" type="button" value="立即注册"/>--%>
                        </td>
                    </tr>
                </table>
            </form>
            <div class="reg-logo-right">
                <h3>如果您没有账号，请</h3>
                <%--FIXME 这里跳转至【注册页面】--%>
                <a href="/user/signpage.do" class="logo-a" target="_self">立即注册</a>

                <br>

                <h3>忘记密码？ 请</h3>
                <%--FIXME 这里跳转至【找回密码页面】--%>
                <a href="#" class="logo-a" target="_self">找回密码</a>

            </div><!--reg-logo-right/-->
            <div class="clears"></div>
        </div><!--reg-logo/-->
    </div><!--width1190/-->
</div><!--content/-->

<%--加入页脚--%>
<jsp:include page="basefoot.jsp"></jsp:include>

</body>
<script type="text/javascript">
    var verifyCode = new GVerify("v_container");
    $(function () {
        $(".submit").on("click", function () {
            var phone = $("input[name=phone]").val();
            var password = $("input[name=password]").val();
            var code = $("input[name=verifyCode]").val();
            if (phone == "") {
                alert("请输入手机号码!");
                return;
            }
            if (password == "") {
                alert("密码不能为空!");
                return;
            }
            if (code == "") {
                alert("验证码不能为空!");
                return;
            }
            if (!verifyCode.validate(code)) {
                alert("验证码错误");
                return
            } else {
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/login2.do",
                    type: "post",
                    dataType: "json",
                    data: {
                        phone: phone,
                        password: password
                    },
                    success: function (data) {
                        if (data.result == "0") {
                            alert("该用户还未注册");
                        } else if (data.result == "1") {
                            alert("密码错误");
                        } else {
                            window.location.href = "${pageContext.request.contextPath}/index.jsp"
                        }
                    }
                })
            }
        })
    })
</script>
</html>

复制webapp包中login1.jsp 粘贴到同个包里 名字修改为login2.jsp
将login1中代码复制粘贴到login2中就行
代码如下

<%--
  Created by IntelliJ IDEA.
  User: 虫仔0621
  Date: 2019/10/22
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="">
    用户名：<input name="username" type="text" id="username">
    密码：<input name="password" type="text" id="password">
    <input type="button" onclick="login()" value="登入">
</form>

</body>
<script type="text/javascript">
    function login() {
        var username1=$("#username").val();
        var password1=$("#password").val();
        alert(username1+password1);
        $.ajax({
            url:"${pageContext.request.contextPath}/user/login1.do",
            type:"post",
            dataType:"json",
            data:{
                username:username1,
                password:password1
            },
            success:function (data) {
                if(data.result=="1"){
                    alert("登入成功");
                }else {
                    alert("登入失败");
                }

            }
        })
    }
</script>
</html>

main中代码修改为

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>易居住房信息平台</title>

    <!--    下面是几个导入的包-->
    <link type="text/css" href="css/css.css" rel="stylesheet"/>
    <link type="text/css" href="css/searchInputStyle.css" rel="stylesheet"/>
    <link type="text/css" href="css/searchReset.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery2.min.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <!--    上面是几个导入的包-->

    <%--轮播图的CSS--%>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #adv {
            /*margin:110px auto;*/
            width: 1190px;
            position: relative;
        }

        #adv li {
            display: none;
        }

        #adv .show {
            display: block;
        }

        #next, #prev {
            position: absolute;
            top: 45%;
            cursor: pointer;
            transition: all .5s;
            opacity: .7;
        }

        #next:hover, #prev:hover {
            transform: scale(1.1);
            opacity: 1;
        }

        #prev {
            left: 10px;
            height: 15%;
        }

        #next {
            right: 10px;
            height: 15%;
        }
    </style>

    <%
        String path = request.getRequestURI();
        String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path;
    %>
    <base href="<%=basePath%>">
</head>
<body>
<jsp:include page="/pages/basehead.jsp"></jsp:include>
<!--头部最上方的框-->

<!--Logo栏和手机号栏-->
<div class="logo-phone">
    <div class="width1190">
        <table align="center" width="100%">
            <tr>
                <td>
                    <h1 class="logo"><a href="main.jsp"><img src="images/logo.png" width="163" height="59"/></a></h1>
                </td>
                <td>
                    <div class="searchbox">
                        <div class="mod_select">
                            <div class="select_box">
                                <span class="select_txt">房屋</span>
                            </div>
                        </div>
                        <%--FIXME 这里是搜索栏，需要实现相应的模糊搜索功能 --%>
                        <form action="#" >
                            <input type="text" name="house_title" id="searchPlaceholder" class="import" placeholder="请输入搜索信息">
                            <input type="submit" value="搜   索" class="btn-search">
                        </form>
                    </div>
                </td>
                <td align="center">
                    <div class="phones"><strong>000-00000000</strong></div>
                    <div class="clears"></div>
                </td>

            </tr>
        </table>
    </div><!--width1190/-->
</div><!--logo-phone/-->
<!--Logo栏和手机号栏-->

<!--导航栏-->
<div class="list-nav">
    <div class="width1190">
        <ul class="nav">
            <li><a href="${pageContext.request.contextPath}/index.jsp">首页</a></li>
            <li><a href="#">新房</a></li>
            <li><a href="#">二手房</a></li>
            <li><a href="#">租房</a></li>
            <li class="zhiding"><a href="#">指定购房</a></li>
            <li><a href="${pageContext.request.contextPath}/pages/housePost1.jsp">发布房源</a></li>
            <li><a href="#">公告中心</a></li>
            <li><a href="#">关于我们</a></li>
            <div class="clears"></div>
        </ul><!--nav-->
        <div class="clears"></div>
    </div><!--width1190-->
</div><!--list-nav-->
<!--导航栏End-->

<br>

<!--广告轮播栏-->
<div class="width1190">
    <ul id="adv">
        <li style="display: block;"><img src="images/lunbotu/fang1.jpg" alt="" id="pic"></li>
        <img src="images/lunbotu/l.png" id="prev" alt="" onclick="showPre()">
        <img src="images/lunbotu/r.png" id="next" alt="" onclick="showNext()">
    </ul>
</div>
<%--广告轮播栏End --%>

<%--展示主页推荐栏--%>
<div class="content">
    <div class="width1190">
        <%--【新房推荐】--%>
        <%--FIXME 这里添加跳转事件--%>
        <h2 class="title"><a style="color:#F1323B">❤</a>新房推荐<a href="${pageContext.request.contextPath}/house/findHouse.do?houseType=0">更多&gt;&gt;</a></h2>
        <div class="index-fang-list">
            <%--FIXME 这里使用Foreach循环，从数据库读取房屋信息 --%>
            <c:forEach items="${newHouses}" var="nh">

                <dl>
                    <dt><a href="${pageContext.request.contextPath}/house/findHouseById.do?houseId=${nh.houseId}"><img src="http://image.cxhit.com/${nh.houseHeadimg}" width="286"
                                                                                                                       height="188"/></a></dt>
                    <dd>
                        <h3><a href="${pageContext.request.contextPath}/house/findHouseById.do?houseId=${nh.houseId}">${nh.houseTitle}</a></h3>
                        <div class="hui">${nh.houseLayout} | ${nh.houseArea} | ${nh.houseDecorate}</div>
                    </dd>
                </dl>
            </c:forEach>

            <div class="clears"></div>
        </div><!--index-fang-list/-->
        <%----%>

        <%--旧房推荐--%>
        <h2 class="title"><a style="color:#F1323B">❤</a>二手房推荐 <a
                href="#">更多&gt;&gt;</a></h2>
        <div class="index-fang-list">
            <c:forEach items="${oldHouse}" var="oh">
            <dl>
                <dt><a href="${pageContext.request.contextPath}/house/findHouseById.do?houseId=${oh.houseId}"><img src="http://image.cxhit.com/${oh.houseHeadimg}" width="286" height="188"/></a></dt>
                <dd>
                    <h3><a href="${pageContext.request.contextPath}/house/findHouseById.do?houseId=${oh.houseId}">${oh.houseTitle}</a></h3>
                    <div class="hui"${oh.houseLayout} | ${oh.houseArea} | ${oh.houseDecorate}</div>
        </dd>
        </dl>
        </c:forEach>
        <div class="clears"></div>
    </div><!--index-fang-list/-->

    <%--【二手房推荐】--%>
    <h2 class="title"><a style="color:#F1323B">❤</a>租房推荐 <a
            href="#">更多&gt;&gt;</a></h2>
    <div class="index-ershou">

        <%--左侧栏--%>
        <div class="in-er-left">
            <a href="#"><img src="images/fangt1.jpg" width="380" height="285"/></a>
            <div class="in-er-left-text"><strong class="fl">闵行南方发的撒的发的司法</strong><strong
                    class="fr alignRight">¥2841</strong></div>
        </div><!--in-er-left/-->

        <%--右侧栏--%>
        <div class="in-er-right">
            <c:forEach items="${rentHouses}" var="rh">
                <dl>
                    <dt><a href="${pageContext.request.contextPath}/house/findHouseById.do?houseId=${rh.houseId}"><img
                            src="http://image.cxhit.com/${rh.houseHeadimg}"
                            style="width: 150px; height: 115px;" width="150" height="115"/></a></dt>
                    <dd>
                        <h3>
                            <a href="${pageContext.request.contextPath}/house/findHouseById.do?houseId=${rh.houseId}">${rh.houseTitle}</a>
                        </h3>
                        <br>
                        <div class="in-er-right-text">
                                ${rh.houseAddress}
                        </div>
                        <div class="price">¥<strong>${rh.housePrice}/${rh.priceUnit}</strong></div>
                    </dd>
                    <div class="clears"></div>

                </dl>
            </c:forEach>
            <div class="clears"></div>

        </div><!--in-er-right/-->
        <div class="clears"></div>
    </div><!--index-ershou/-->
    <%--【二手房推荐END】--%>

</div><!--width1190/-->
</div><!--content/-->

<!--这是页脚-->
<jsp:include page="pages/basefoot.jsp"></jsp:include>

</body>
</html>

代码完成后实现效果如下
不输入手机号点击登录会出现弹出框
不输入密码会出现推弹出框
输入的验证码不正确则会弹出框
手机号和密码输入正确后点击立即登录就能跳转到index页面