一、明确目标
1、登录、注册
2、权限树形展示(不同用户登录时,树形菜单会展示出不同的效果)
二、代码以及效果展示:
1、登录、注册 思路如下:
1、写好实体类。(entity)
2、在dao层中写好相应的方法(登录login、注册register方法)
3、然后在子控制器中写好对应的方法。
4、最后到配置文件中xml写好相应路径
1.登录jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>网上书城登录</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>
</head>
<body class="text-center">
<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=login" method="post">
<h1 class="h3 mb-3 font-weight-normal">用户登录</h1>
<label for="name" class="sr-only">账号</label>
<input type="text" id="name" name="name" class="form-control" placeholder="请输入账号" required autofocus>
<label for="pwd" class="sr-only">密码</label>
<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" id="login">登录</button>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
</form>
<script>
$(function () {
<%--$("#login").click(function () {--%>
<%--$.ajax({--%>
<%--url:'${pageContext.request.contextPath}/user.action?methodName=login',--%>
<%--data:"name="+$("#name").val()+"&pwd="+$("#pwd").val(),--%>
<%--success:function (data) {--%>
<%--}--%>
<%--});--%>
<%--});--%>
})
</script>
</body>
</html>
2.注册的jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>网上书城注册</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>
</head>
<body class="text-center">
<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=register" method="post">
<h1 class="h3 mb-3 font-weight-normal">用户注册</h1>
<label for="name" class="sr-only">账号</label>
<input type="text" id="name" name="name" class="form-control" placeholder="请输入账号" required autofocus>
<label for="pwd" class="sr-only">密码</label>
<input type="pa