第三章. 业务功能开发
项目结构如下：
3.1 首页功能的开发
用户访问项目首页，首先进入登录页面。
用户登录流程图：
-
我们先写跳转到登录界面，在请求准发到index中如下图所示：
-
由于配置了视图解析器，查看index中写了什么？
-
在login.jsp中内容如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; %> <html> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script> <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { //给整个浏览器窗口添加键盘按下事件 $(window).keydown(function (e) { //如果按的是回车键，则提交登录请求 if(e.keyCode==13){ $("#loginBtn").click(); } }); //给"登录"按钮添加单击事件 $("#loginBtn").click(function () { //收集参数 var loginAct=$.trim($("#loginAct").val()); var loginPwd=$.trim($("#loginPwd").val()); var isRemPwd=$("#isRemPwd").prop("checked"); //表单验证 if(loginAct==""){ alert("用户名不能为空"); return; } if(loginPwd==""){ alert("密码不能为空"); return; } //显示正在验证 $("#msg").text("正在努力验证...."); //发送请求 $.ajax({ url:'settings/qx/user/login.do', data:{ loginAct:loginAct, loginPwd:loginPwd, isRemPwd:isRemPwd }, type:'post', dataType:'json', success:function (data) { if(data.code=="1"){ //跳转到业务主页面 window.location.href="workbench/index.do"; }else{ //提示信息 $("#msg").text(data.message); } }, beforeSend:function () {//当ajax向后台发送请求之前，会自动执行本函数； //该函数的返回值能够决定ajax是否真正向后台发送请求： //如果该函数返回true,则ajax会真正向后台发送请求；否则，如果该函数返回false，则ajax放弃向后台发送请求。 $("#msg").text("正在努力验证...."); return true; } }); }); }); </script> </head> <body> <div style="position: absolute; top: 0px; left: 0px; width: 60%;"> <img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;"> </div> <div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;"> <div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM <span style="font-size: 12px;">©2019 动力节点</span></div> </div> <div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5"> <div style="position: absolute; top: 0px; right: 60px;"> <div class="page-header"> <h1>登录</h1> </div> <form action="workbench/index.html" class="form-horizontal" role="form"> <div class="form-group form-group-lg"> <div style="width: 350px;"> <input class="form-control" id="loginAct" type="text" value="${cookie.loginAct.value}" placeholder="用户名"> </div> <div style="width: 350px; position: relative;top: 20px;"> <input class="form-control" id="loginPwd" type="password" value="${cookie.loginPwd.value}" placeholder="密码"> </div> <div class="checkbox" style="position: relative;top: 30px; left: 10px;"> <label> <c:if test="${not empty cookie.loginAct and not empty cookie.loginPwd}"> <input type="checkbox" id="isRemPwd" checked> </c:if> <c:if test="${empty cookie.loginAct or empty cookie.loginPwd}"> <input type="checkbox" id="isRemPwd"> </c:if> 十天内免登录 </label> <span id="msg" style="color: red"></span> </div> <button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block" style="width: 350px; position: relative;top: 45px;">登录</button> </div> </form> </div> </div> </body> </html> -
启动项目：测试如下：
