一.效果图
二.登陆页面实现
1.页面展示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<head>
<title>Title</title>
<%--引入资源--%>
<%--引入easyUI资源--%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/themes/icon.css">
<%--一定要先 引入jquery --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:auto;margin-top: 220px;height: 240px;width: 500px">
<%--展示错误的提示信息--%>
<c:if test="${not empty msg}">
<font size="4" color="red">${msg}</font>
</c:if>
<%-- 把session中的 msg属性移除掉--%>
<c:remove var="msg" scope="session"></c:remove>
<div id="p" class="easyui-panel" title="ting域后台管理系统"
style="width:300px;height:220px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:false,
collapsible:false,minimizable:false,maximizable:false">
<%--表单--%>
<form id="loginForm" action="${pageContext.request.contextPath}/admin/login.do" method="post">
<div style="text-align: center;margin-top: 20px">
<label id="aname">用户名:</label>
<input class="easyui-textbox" type="text" name="aname"/></div>
<div style="text-align: center;margin-top: 20px"><label id="apwd">密 码:</label>
<input class="easyui-passwordbox" type="text" name="apwd"/></div>
<div style="text-align: center;margin-top: 20px">
<a id="btnLogin" href="javascript:void(0)" class="easyui-linkbutton" style="margin-right: 20px"
data-options="iconCls:'icon-ok'">登陆</a>
<input class="easyui-checkbox" data-options="labelPosition:'after'" name="fruit" label="记住密码"
style="margin-left: 20px">
</div>
</form>
</div>
</div>
</body>
</html>
2.页面数据的提交
1).给登录按钮添加点击事件,向后台提交数据
用 $("#loginForm").submit()提交
<script>
/*********登录功能*********/
$(function () {
//给登录按钮添加点击事件,向后台提交数据
$("#btnLogin").click(function () {
//提交数据
$("#loginForm").submit();
})
})
</script>
3.服务器代码的实现
思路:
1)用方法参数接收页面提交过来的用户名和密码,查询数据库用户名,密码是否正确
用到的service层方法是:getOne(queryWrapper),里面需要传入条件对象
QueryWrapper<Admin> queryWrapper=new QueryWrapper<>();
queryWrapper.eq("aname",aname).eq("apwd",apwd);
Admin admin = adminService.getOne(queryWrapper);
2)如果正确,把用户存到session中,并重定向到主页,不正确,则带着错误转发到登录页面
Controller页面:
@Controller
@RequestMapping("/admin")
public class AdminController {
@Autowired
private IAdminService adminService;
@RequestMapping("login")
public String login(String aname, String apwd, HttpSession session){
QueryWrapper<Admin> queryWrapper=new QueryWrapper<>();
queryWrapper.eq("aname",aname).eq("apwd",apwd);
Admin admin = adminService.getOne(queryWrapper);
if(admin!=null){
//成功,保存到session,并跳转到主页
session.setAttribute("admin",admin);
return "redirect:/main.jsp";
}else {
//失败,则用session保存信息,并转发到登录页面
session.setAttribute("msg","用户名或者密码有误");
return "forward:/login.jsp";
}
}
}