宁波实习记录（八）——页面显示修改及ajax相关

在昨天的基础上对页面做出修改，使用户名在前端显示，根据用户的不同权限显示不同的操作列表。然后就是补充学习ajax相关知识

至此项目完成，完整代码见源代码
注意导入sql后修改数据库配置文件，我的MySql端口是3305，一般默认是3306

一、页面的修改

效果图如下，zhangsan是管理员权限，lisi是普通用户


修改aside.jsp
头部引入

<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

然后在“在线”上加用户名

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

<%@ 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" %>



   
    
      数据 
      中软ETC用户管理系统
   
   
   

      
       Toggle navigation
      

      

         


            
  
               
               
            
               

                  
                  


                  
                  

                     

                        修改密码
                     
                     

                        注销
                     
                  
               

         
      
   

二、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"%>



































   
   




   


      
      
      

      
      
      

      
      


         
         

         

            用户管理 全部用户
         
         

            
 首页
            
用户管理

            
全部用户
         
         
         

            
            
 
            

               

                  
列表
               

               


                  
                  


                     
                     

                        

                           

                              
                                  新建
                              
                              
                              
                                  删除
                              
                           
                        
                     
                     

                        

                           
                        
                        搜索
                     
                     

                     
                     
                              

                        

                           

                              

                              
                              
ID
                              
用户名
                              
密码
                              
操作
                           
                        
                        

                            

                                 

                                 
${user.id}
                                 
${user.name}
                                 
${user.password}
                                 

                                    更新
                                    删除
                                    添加角色
                                 
                              
                           
                        
                        
                     
                     

                  
                  

               
               
                  

                     

                        
首页
                        
上一页
                        
                           
${pageNum}
                        
                        
下一页
                        
尾页
                     
                  

               
               

            

            
            

         
         
         

         
         

         

            Version 1.0.8
         
         Copyright © 2014-2017 研究院研发部.
          All rights reserved. 
         

      

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

在IUserInfoDao中定义deleteAll方法

void deleteAll(List list);

在UserMapper.xml实现方法

    delete from userinfo where id in
    
        #{id}
    

在IUserInfoService中定义方法

void deleteAll(List list);

在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

到此为止实现了所有功能啦