跳至主要內容

完善权限等功能

学长敲代码原创大约 5 分钟教程javaweb

完善权限等功能

退出登录

在右上角的退出登录按钮上添加跳转链接 ${pageContext.request.contextPath}/logout

package com.hello.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * 用于登出的Servlet
 */
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");// 设置编码，否则从前端获取参数乱码
        req.getSession().invalidate();
        req.getRequestDispatcher("/login.jsp").forward(req, resp);
    }
}

登录检查（Filter）

没有登录的用户，不可以访问系统

package com.hello.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;

/**
 * 没有登录的用户，不可以访问
 */
@WebFilter(urlPatterns = {"/index.jsp", "/clazz/*", "/student/*"})
public class LoginFilter implements Filter {
  @Override
  public void init(FilterConfig filterConfig) {
    System.out.println("LoginFilter init....");
  }
  @Override
  public void destroy() {
    System.out.println("LoginFilter destroy....");
  }
  @Override
  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    Object user = req.getSession().getAttribute("user");
    if (user == null) {
      req.getRequestDispatcher("/login.jsp").forward(req, response);
    }else {
      chain.doFilter(request, response);
    }
  }
}

角色权限

在页面中，学生可以查看班级信息，但是我们不想让学生拥有增删改功能，可以用c:if标签，把学生不能看的藏起来

<c:if test="${sessionScope.role == 'admin'}">
只有管理员可以看到的内容...
</c:if>

以上做法虽然学生没法看到操作按钮，但是仍然有风险，用户可以通过url直接访问页面！

要从后端的源头遏制用户非法访问！写一个方法供权限判断

    public static boolean hasPermission(HttpServletRequest req,HttpServletResponse resp,boolean isAjax,String... roles) throws ServletException, IOException {
        Object role = req.getSession().getAttribute("role");
        List<String> roleList = Arrays.asList(roles);
        if(role == null || !roleList.contains(role)){
            if(!isAjax){
                req.getRequestDispatcher("/login.jsp").forward(req, resp);
            }else{
                resp.getWriter().write(ApiResult.json(false,"无权限！"));
            }
            return false;
        }
        return true;
    }

个人中心、修改密码

右上角的笔下光年字眼，改成显示用户名 或者 姓名

${sessionScope.role == 'admin'? sessionScope.user.username:sessionScope.user.name}

如果是学生角色，我们给他添加 修改个人信息、修改密码 的功能。管理员这里就不做了有兴趣的可以自己动手实操！

  • 首先用<c:if 标签，将个人信息和修改密码功能仅限学生使用
  • 接着在笔下光年里面的选一个模态框来做个人信息修改和密码修改

修改个人信息、修改密码功能代码：

<c:if test="${sessionScope.role == 'student'}">
    <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel1">个人中心</h4>
                </div>
                <form id="studentPersonal" action="${pageContext.request.contextPath}/student-personal?r=edit" method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>学号</label>
                            <input required readonly class="form-control" type="text" name="sno"
                                   value="${sessionScope.user.sno}">
                        </div>
                        <div class="form-group">
                            <label>姓名</label>
                            <input required class="form-control" type="text" name="name"
                                   value="${sessionScope.user.name}">
                        </div>
                        <div class="form-group">
                            <label>电话</label>
                            <input maxlength="11" class="form-control" type="number" name="tele"
                                   value="${sessionScope.user.tele}">
                        </div>
                        <div class="form-group">
                            <label>入学时间</label>
                            <input class="form-control js-datepicker m-b-10" type="text" name="enterdate" placeholder="yyyy-mm-dd"
                                   value="${sessionScope.user.enterdate}" data-date-format="yyyy-mm-dd"/>
                        </div>
                        <div class="form-group">
                            <label>年龄</label>
                            <input class="form-control" type="number" name="age" value="${sessionScope.user.age}">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <div class="col-xs-12">
                                <div class="radio">
                                    <label for="example-radio1">
                                        <input <c:if test="${sessionScope.user.gender=='m'}">checked</c:if>
                                               type="radio" id="example-radio1" name="gender" value="m">男
                                    </label>
                                </div>
                                <div class="radio">
                                    <label for="example-radio2">
                                        <input <c:if test="${sessionScope.user.gender=='w'}">checked</c:if>
                                                type="radio" id="example-radio2" name="gender" value="w">女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>详细地址</label>
                            <textarea class="form-control" name="address">${sessionScope.user.address}</textarea>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel2">新消息</h4>
                </div>
                <form id="studentPassword" action="${pageContext.request.contextPath}/student-personal?r=pwd" method="post">
                    <div class="modal-body">
                        <input readonly class="form-control" type="hidden" name="sno" value="${sessionScope.user.sno}">
                        <div class="form-group">
                            <label>旧密码</label>
                            <input required class="form-control" type="password" name="oldPwd">
                        </div>
                        <div class="form-group">
                            <label>新密码</label>
                            <input required class="form-control" type="password" name="newPwd">
                        </div>
                        <div class="form-group">
                            <label>重复新密码</label>
                            <input required class="form-control" type="password" name="newPwd2">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</c:if>

事件代码

<c:if test="${sessionScope.role == 'student'}">
<script type="text/javascript">
    $(function () {
        //修改个人信息
        $('#studentPersonal').on('submit', function(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            lightyear.loading('show');
            // 序列化表单数据
            var formData = $(this).serialize();
            // 使用AJAX发送数据
            $.ajax({
                type: 'POST',
                url: $(this).attr("action"),
                data: formData,
                success: function(response) {
                    if(response.success){
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'success', 500);
                    }else{
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'danger', 1000);
                    }
                },
                error: function(xhr, status, error) {
                    lightyear.loading('hide');
                    lightyear.notify("请求失败", 'danger', 1000);
                }
            });
        });
        $('#studentPassword').on('submit', function(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            // 序列化表单数据
            var formData = $(this).serialize();
            lightyear.loading('show');
            // 使用AJAX发送数据
            $.ajax({
                type: 'POST',
                url: $(this).attr("action"),
                data: formData,
                success: function(response) {
                    if(response.success){
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'success', 500);
                    }else{
                        lightyear.loading('hide');
                        lightyear.notify(response.message, 'danger', 1000);
                    }
                },
                error: function(xhr, status, error) {
                    lightyear.loading('hide');
                    lightyear.notify("请求失败", 'danger', 1000);
                }
            });
        });
    });
</script>
</c:if>

_js.jsp

实操时发现，由于在header.jsp中需要使用jquery等js资源，因为js都放在页面最后面加载了，所以这里控制台报错了

怎么解决？

第一种：把这段header.jsp 的js代码，粘贴到所有用到了header.jsp的页面上。

麻烦！

第二种：把所有的js资源都放在head标签里面加载好，header.jsp就可以直接用了

缺点，用户体验好感降低，用户界面的加载要等待js加载完才能加载。

抽取一个公共的js资源库 _js.jsp，将所有公共的js资源以及刚刚的事件代码放进去

阶段结尾

至此，Javaweb+mysql的简单学生信息管理系统就已经完成了，在本次的教程的基础上

你可以进行功能拓展，如添加教师、课程、选课

订做课设

你也可以 联系学长 订做课设,最快一两小时即可完成！

联系学长 可订做Java、C#、C++、数据库、Vue、SpringBoot、SSM
Copyright © 2025 学长敲代码