(Spring+SpringMVC+MyBatis)SSM中软实习第九天——角色控制页面和ajax异步请求

最新推荐文章于 2022-03-12 18:48:23 发布
最新推荐文章于 2022-03-12 18:48:23 发布
阅读量322 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123056/article/details/96827306
版权 
   在昨天实现springsecurity鉴权和分页等功能后，对页面进行修改优化，使用户名在前端显示，根据用户的不同权限显示不同的操作列表。并补充学习ajax相关知识。
   注意导入sql后修改数据库配置文件，我的MySql端口是3306

一、页面的修改
效果图如下，zhangsan是管理员权限，lisi是普通用户
用户管理界面

修改aside.jsp
头部引入

<%@taglib prefix=“security” uri=“http://www.springframework.org/security/tags” %>
1
然后在“在线”上加用户名

1 2 3

把用户管理包裹起来，代码如下

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” isELIgnored=“false”%>
<%@taglib prefix=“security” uri=“http://www.springframework.org/security/tags” %>

header.jsp

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” isELIgnored=“false”%>
<%@taglib prefix=“security” uri=“http://www.springframework.org/security/tags” %>

二、ajax应用，批量删除
导入js包，里面有

先在user-list.jsp中写好批量删除的页面和相关js函数以及ajax请求

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” isELIgnored=“false”%>
<%@taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>

数据 - AdminLTE2定制版 
  <!-- 页面头部 -->
  <jsp:include page="header.jsp"></jsp:include>
  <!-- 页面头部 /-->

  <!-- 导航侧栏 -->
  <jsp:include page="aside.jsp"></jsp:include>
  <!-- 导航侧栏 /-->

  <!-- 内容区域 -->
  <div class="content-wrapper">

     <!-- 内容头部 -->
     <section class="content-header">
     <h1>
        用户管理 <small>全部用户</small>
     </h1>
     <ol class="breadcrumb">
        <li><a href="#"><i
              class="fa fa-dashboard"></i> 首页</a></li>
        <li><a
           href="#">用户管理</a></li>

        <li class="active">全部用户</li>
     </ol>
     </section>
     <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content"> <!-- .box-body -->
        <div class="box box-primary">
           <div class="box-header with-border">
              <h3 class="box-title">列表</h3>
           </div>

           <div class="box-body">

              <!-- 数据表格 -->
              <div class="table-box">

                 <!--工具栏-->
                 <div class="pull-left">
                    <div class="form-group form-inline">
                       <div class="btn-group">
                          <button type="button" class="btn btn-default" title="新建"
                                onclick="location.href='${pageContext.request.contextPath}/pages/user-add.jsp'" >
                             <i class="fa fa-file-o"></i> 新建
                          </button>
                          
                          <button type="button" class="btn btn-default" title="刷新" onclick="deleteAll()">
                             <i class="fa fa-refresh"></i> 删除
                          </button>
                       </div>
                    </div>
                 </div>
                 <form action="#"
                      method="post">
                    <div class="col-md-4 data1">
                       <input type="text" class="form-control" name="name"
                             placeholder="cname" value="">
                    </div>
                    <button type="submit" class="btn bg-maroon">搜索</button>
                 </form>
                 <!--工具栏/-->

                 <!--数据列表-->
                 <table id="dataList"
                    class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                       <tr>
                          <th class="" style="padding-right: 0px"><input
                             id="selall" type="checkbox" class="icheckbox_square-blue">
                          </th>
                          <th class="sorting_asc">ID</th>
                          <th class="sorting_desc">用户名</th>
                          <th class="sorting_asc sorting_asc_disabled">密码</th>
                          <th class="text-center">操作</th>
                       </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="user" items="${pageInfos.list}">
                          <tr>
                             <td><input name="ids" type="checkbox" value="${user.id}"></td>
                             <td>${user.id}</td>
                             <td>${user.name}</td>
                             <td>${user.password}</td>
                             <td class="text-center">
                                <a href="${pageContext.request.contextPath}/user/toUpdate.do?id=${user.id}" class="btn bg-olive btn-xs">更新</a>
                                <a href="${pageContext.request.contextPath}/user/delete.do?id=${user.id}" class="btn bg-olive btn-xs">删除</a>
                                <a href="#" class="btn bg-olive btn-xs">添加角色</a>
                             </td>
                          </tr>
                       </c:forEach>
                    </tbody>
                    <!--
                        <tfoot>
                        <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                        </tr>
                        </tfoot>-->
                 </table>
                 <!--数据列表/-->

              </div>
              <!-- 数据表格 /-->

           </div>
           <!-- /.box-body -->
              <div class="box-tools pull-right">
                 <ul class="pagination">
                    <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pageNum-1}&size=5">上一页</a></li>
                    <c:forEach begin="1" end="${pageInfos.pages}" var="pageNum">
                       <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageNum}&size=5">${pageNum}</a></li>
                    </c:forEach>
                    <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pageNum+1}&size=5">下一页</a></li>
                    <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pages}&size=5" aria-label="Next">尾页</a></li>
                 </ul>
              </div>

           </div>
           <!-- /.box-footer-->

        <!--</div>-->

        </section>
        <!-- 正文区域 /-->

     </div>
     <!-- @@close -->
     <!-- 内容区域 /-->

     <!-- 底部导航 -->
     <footer class="main-footer">
     <div class="pull-right hidden-xs">
        <b>Version</b> 1.0.8
     </div>
     <strong>Copyright &copy; 2014-2017 <a
        href="http://www.itcast.cn">研究院研发部</a>.
     </strong> All rights reserved. </footer>
     <!-- 底部导航 /-->

  </div>

  <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
  <script>
     $.widget.bridge('uibutton', $.ui.button);
  </script>
  <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="../plugins/raphael/raphael-min.js"></script>
  <script src="../plugins/morris/morris.min.js"></script>
  <script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
  <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
  <script src="../plugins/knob/jquery.knob.js"></script>
  <script src="../plugins/daterangepicker/moment.min.js"></script>
  <script src="../plugins/daterangepicker/daterangepicker.js"></script>
  <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
  <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
  <script
     src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
  <script
     src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
  <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
  <script src="../plugins/fastclick/fastclick.js"></script>
  <script src="../plugins/iCheck/icheck.min.js"></script>
  <script src="../plugins/adminLTE/js/app.min.js"></script>
  <script src="../plugins/treeTable/jquery.treetable.js"></script>
  <script src="../plugins/select2/select2.full.min.js"></script>
  <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
  <script
     src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
  <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
  <script
     src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
  <script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
  <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
  <script src="../plugins/ckeditor/ckeditor.js"></script>
  <script src="../plugins/input-mask/jquery.inputmask.js"></script>
  <script
     src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
  <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
  <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
  <script src="../plugins/chartjs/Chart.min.js"></script>
  <script src="../plugins/flot/jquery.flot.min.js"></script>
  <script src="../plugins/flot/jquery.flot.resize.min.js"></script>
  <script src="../plugins/flot/jquery.flot.pie.min.js"></script>
  <script src="../plugins/flot/jquery.flot.categories.min.js"></script>
  <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
  <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
  <script>
     $(document).ready(function() {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
           locale : 'zh-CN'
        });
     });

     // 设置激活菜单
     function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
           liObj.parent().parent().addClass("active");
           liObj.addClass("active");
        }
     }

     $(document)
           .ready(
                 function() {

                    // 激活导航位置
                    setSidebarActive("admin-datalist");

                    // 列表按钮 
                    $("#dataList td input[type='checkbox']")
                          .iCheck(
                                {
                                   checkboxClass : 'icheckbox_square-blue',
                                   increaseArea : '20%'
                                });
                    // 全选操作 
                    $("#selall")
                          .click(
                                function() {
                                   var clicks = $(this).is(
                                         ':checked');
                                   if (!clicks) {
                                      $(
                                            "#dataList td input[type='checkbox']")
                                            .iCheck(
                                                  "uncheck");
                                   } else {
                                      $(
                                            "#dataList td input[type='checkbox']")
                                            .iCheck("check");
                                   }
                                   $(this).data("clicks",
                                         !clicks);
                                });
                 });
  </script>
在IUserInfoDao中定义deleteAll方法

void deleteAll(List list);
1
在UserMapper.xml实现方法

delete from userinfo where id in #{id} 在IUserInfoService中定义方法

void deleteAll(List list);
1
在UserInfoService中实现

@Override
public void deleteAll(List list) {
userInfoDao.deleteAll(list);
}
在UserInfoController中控制

其中一定要记得加上@ResponseBody以保证返回的是json格式，否则前端判断的时候会认为删除失败滴

@RequestMapping(“deleteAll.do”)
@ResponseBody
public String deleteAll(String userlist){
String[] strs=userlist.split(",");
List ids=new ArrayList<>();
for(int i=0;i<strs.length;i++){
ids.add(Integer.parseInt(strs[i]));
}
userInfoService.deleteAll(ids);
return “”;
}

csdn199771
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mvc的简单登录包含（form表单登录，ajax的异步登录）
qq_39545900的博客
10-10 513
mvc的简单登录包含（form表单登录，ajax的异步登录） 三种登录方式 @{ Layout = null; } @model ADCC_biaopei.Models.StudentViewModel <!DOCTYPE html> <link href="~/ScrYang/layui-v2.5.5/layui-v2.5.5/layui/css/layui.css"...
springmvc＋spring＋mybatis实现用户登录功能（上）
08-30
主要为大家详细介绍了springmvc＋spring＋mybatis实现用户登录功能，比较基础的学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
中软实习第八天：使用ssm框架实现简单数据库的增删改查（实现数据的分页）
CaiYuan_1998的博客
07-02 279
简介：本文用来记录本人在宁波中软国际实习的第八天所学习到的东西，在上次搭建的框架的基础上，今天主要的内容是实现查询信息的同时将多行信息进行分页处理。 之前显示的查询结果显示在一个页面之上，如果查询到的结果很多的话，显示出来看着就不太舒服了，所以这次的内容主要是将数据分页。 首先要做的是导入jar包： 1.在pom文件中加入下列语句： <depende...
菜鸟级springmvc＋spring＋mybatis整合开发用户登录功能（下）
weixin_34244102的博客
09-09 144
昨天介绍了mybatis与spring的整合，今天我们完成剩下的springmvc的整合工作。 要整合springmvc首先得在web.xml中配置springmvc的前端控制器DispatcherServlet，它是springmvc的核心，为springmvc提供集中访问点，springmvc对页面的分派与调度功能主要靠它完成。 在我们之前配置的web.xml中加入以下springmvc的...
ssm+ajax使用于学习ajax的新手案例
03-31
ssm+ajax新手适用 验证用户名是否存在 可以参照这个demo
Spring+SpringMVC+Mybatis框架整合例子(SSM) 下载
07-21
Spring、SpringMVC和Mybatis是Java开发中最常用的三大开源框架，它们的整合使用，通常被称为SSM框架。这个框架组合提供了完整的后端服务解决方案，包括依赖注入（DI）、面向切面编程（AOP）、模型-视图-控制器（MVC...
Java基于Spring+SpringMVC+MyBatis实现的学生信息管理系统源码.zip
05-04
Java基于Spring+SpringMVC+MyBatis实现的学生信息管理系统源码，SSM+Vue的学生管理系统。 Java基于Spring+SpringMVC+MyBatis实现的学生信息管理系统源码，SSM+Vue的学生管理系统。 Java基于Spring+SpringMVC+...
spring+springMVC+mybatis（ssm框架）在线商城电子商务系统实战开发教程
06-15
今天发布的是一款由jsp+ssm（spring+springMVC+mybatis）+mysql实现的在线商城系统的完整源码和详细开发教程，本系统配有完整的源码、45讲视频开发教程、数据库文件、项目素材等详细材料。这里强调一点，本系统是在...
Spring+SpringMVC+Mybatis框架整合例子——亲测可用.zip
02-17
SSM框架整合是Java开发中常见的技术栈，包括Spring、SpringMVC和Mybatis三个核心组件。这个压缩包提供了一个已经验证过的整合示例，帮助开发者理解和实践这三大框架的协同工作。 首先，Spring框架是Java企业级应用...
基于Spring+SpringMVC+Mybatis架构的博客系统.zip
04-29
基于Spring+SpringMVC+Mybatis架构的博客系统：博客管理、图表数据、日志分析、访问记录、图库管理、资源管理、友链通知等。良好的页面预加载，无限滚动加载，文章置顶，博主推荐等。提供 用户端+管理端 的整套系统...
超市订单管理系统——SSM实现
04-05
使用SSM框架实现的超市订单管理系统，内有注释，功能全部实现
springmvc + jquery + ajax + json 异步传递数据
09-26
springmvc jquery ajax json 异步传递数据 springmvc异步传递请求 已包含全部源代码实现 把jar包放入 然后新建文件 配置xml ！！！！！ 全部资源
中软国际(Spring培训PPT)
05-05
绝对真实的中软国际(Spring培训PPT)，内容不错哦！
Spring+SpringMVC+Mybatis+AdminLTE(BootStrap) +Shiro整合项目
11-23
帮助新手同学搭建了一个开发环境，项目用maven管理。集成了Spring4.0.6，SpringMvc，Mybatis3.2.7重要的是集成了目前比较流行的前端框架AdminLTE。并且对AdminLTE首页进行了框架式的处理。欢迎下载使用。
实习-SSM分页的实现
我的博客
07-16 194
实习-SSM分页的实现1.Pom文件中导入jar包：2.修改applicationContext文件3.修改前端的aside.jsp页面4.修改service层的findAll方法5.修改controller层的findAll方法6.修改前端页面 1.Pom文件中导入jar包： 在pom文件中加入下列语句： <!-- 分页插件 --> <dependency> ...
基于Spring+SpringMVC+MyBatis开发的用户角色管理系统（Demo）
Shedddd的博客
03-12 2102
整个项目以Spring、SpringMVC以及MyBatis基础配置进行开发。
ASP.NET MVC学习之Ajax（完结）
weixin_34221112的博客
05-30 190
一.前言 通过上面的一番学习，大家一定收获不少。但是总归会有一个结束的时候，但是这个结束也意味着新的开始。 如果你是从事ASP.NET开发，并且也使用了第三方控件，那么一定会觉得ASP.NET开发ajax十分的简单，而ASP.NET MVC学习到现在页面都是刷新的，所以这节就是ASP.NET MVC的最后一节，通过这节的学习我们将能够实现通过ajax提交表单，下面我们开始继续学习。   二...
基于springmvc+mysql+mybatis实现用户登陆功能
oscaryxy
03-13 4283
    最近在学习springmvc框架，每天的学习过程中颇有一些收获，打算写一篇博客记录一下，也希望能帮到同样在学这个的人。一：Springmvc1:SpringMVC的组成结构：（1）前端控制器（DispatcherServlet）：用于接受用户请求；（2）处理器映射器（HandleMapping）：根据URL去查找处理器，在代码中用Controller来表示处理器的相关代码实现；（3）处理器...
基于spring mvc+bootstrap 集成的返利平台 新增内容-自动对接京东数据
浮萍之乡
05-14 163
本系统基于最新版的spring mvc+adminlte构成，使用ant来做打包工具。在系统中，大量使用了开源的代码，再次特别感谢这些开源工作者。 后端使用了 spring mvc mybatis，目前没有使用spring boot,spring cloud，后期改版会引入这些框架； 前端使用了 adminlte, bootstrap, bootstrap table,colorpicker,datepicker,laydate,layer,select2,ueditor,wave,fileupload
SSM框架整合详解：Spring+SpringMVC+MyBatis
"本文是关于SSM框架的整合教程，主要涵盖了Spring、SpringMVC和MyBatis三个组件的详细整合过程。" SSM框架整合是Java Web开发中常见的技术栈，它结合了Spring框架的核心功能，SpringMVC的 MVC 设计模式，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值