黑马程序员最全SSM框架用户角色案例(SSM整合版)

墨蓝 2023-09-28 13:54 12阅读 0赞

## SSM框架用户角色案例 ##

##### 学习视频链接: [黑马程序员最全SSM框架教程|Spring+SpringMVC+MyBatis全套教程(spring+springmvc+mybatis)][SSM_Spring_SpringMVC_MyBatis_spring_springmvc_mybatis] #####

##### 完整代码链接： [https://github.com/HaiLei-Fly/SSM\_Test][https_github.com_HaiLei-Fly_SSM_Test] #####

### 1、原生JavaWeb对应MVC架构 ###

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写

JavaWeb阶段, MVC的实现主要是用以下方式:

*  M(Model) : pojo(实体类), 业务层(项目中被命名为service包), dao(JDBC, Druid)等
 *  V(View) : JSP , HTML
 *  C(Controller) : Servlet

### 2、SSM框架对应MVC架构 ###

M(Model) : dao层(mapper层)和service层就是MVC中的M层 -> dao层(mapper层)是MyBatis做的事 , Spring会控制service层

V(View) : jsp和html组成了MVC的V(View)层, 负责进行数据展示 -> SpringMVC建立起V和C的桥梁

C(Controller) : Controller包下对应的MVC的C(Controller)层,包中是servlet -> SpringMVC做的事

Spring就是整合SpringMVC和MyBatis, 同时控制Service层

**开发的B/S架构的系统, 一般流程：**  
用户 -> 访问前端 -> 前端和Controller交互 -> Controller调用Service -> Service调Dao -> Dao连接数据库

**设计模式规则：**  
数据库 -> Dao层 -> Service层 -> Controller层 -> 前端

### 3、功能介绍 ###

案例功能：

*  用户登录（账号密码登录）
 *  用户表和角色表的增删改查（多对多）

### 4、工程准备 ###

#### 4.1 所需环境 ####

MySQL 8.0.22  
JDK 11.0.10  
MAVEN 3.6.0  
Navicat 16  
IDEA 2021.3.3

**配置pom.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>org.example</groupId>
        <artifactId>ssm_test</artifactId>
        <version>1.0-SNAPSHOT</version>
        <packaging>war</packaging>
    
        <name>ssm_test Maven Webapp</name>
        
        <url>http://www.example.com</url>
    
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <maven.compiler.source>11</maven.compiler.source>
            <maven.compiler.target>11</maven.compiler.target>
        </properties>
    
        
        
        <dependencies>
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>5.0.5.RELEASE</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jdbc</artifactId>
                <version>5.0.5.RELEASE</version>
            </dependency>
            
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-test</artifactId>
                <version>5.0.5.RELEASE</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context</artifactId>
                <version>5.0.5.RELEASE</version>
            </dependency>
            
            <dependency>
                <groupId>org.aspectj</groupId>
                <artifactId>aspectjweaver</artifactId>
                <version>1.8.7</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-tx</artifactId>
                <version>5.0.5.RELEASE</version>
            </dependency>
    
            
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>javax.servlet-api</artifactId>
                <version>3.0.1</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>javax.servlet.jsp</groupId>
                <artifactId>javax.servlet.jsp-api</artifactId>
                <version>2.2.1</version>
                <scope>provided</scope>
            </dependency>
    
            
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis</artifactId>
                <version>3.4.5</version>
            </dependency>
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis-spring</artifactId>
                <version>1.3.1</version>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>8.0.25</version>
            </dependency>
            <dependency>
                <groupId>c3p0</groupId>
                <artifactId>c3p0</artifactId>
                <version>0.9.1.2</version>
            </dependency>
    
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.12</version>
            </dependency>
            <dependency>
                <groupId>jstl</groupId>
                <artifactId>jstl</artifactId>
                <version>1.2</version>
            </dependency>
        </dependencies>
    
        <build>
            <finalName>ssm_test</finalName>
            <pluginManagement>
                <plugins>
                    <plugin>
                        <artifactId>maven-clean-plugin</artifactId>
                        <version>3.0.0</version>
                    </plugin>
                    
                    <plugin>
                        <artifactId>maven-resources-plugin</artifactId>
                        <version>3.0.2</version>
                    </plugin>
                    <plugin>
                        <artifactId>maven-compiler-plugin</artifactId>
                        <version>3.7.0</version>
                    </plugin>
                    <plugin>
                        <artifactId>maven-surefire-plugin</artifactId>
                        <version>2.20.1</version>
                    </plugin>
                    <plugin>
                        <artifactId>maven-war-plugin</artifactId>
                        <version>3.2.0</version>
                    </plugin>
                    <plugin>
                        <artifactId>maven-install-plugin</artifactId>
                        <version>2.5.2</version>
                    </plugin>
                    <plugin>
                        <artifactId>maven-deploy-plugin</artifactId>
                        <version>2.8.2</version>
                    </plugin>
                </plugins>
            </pluginManagement>
    
            <plugins>
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <version>2.2</version>
    
                </plugin>
            </plugins>
        </build>
    
    
    </project>

**配置jdbc.properties**

jdbc.driver=com.mysql.cj.jdbc.Driver
    jdbc.url=jdbc:mysql:///test?useSSL=false
    jdbc.username=root
    jdbc.password=12345678

**配置log4j.properties**

### direct log messages to stdout ###
    log4j.appender.stdout=org.apache.log4j.ConsoleAppender
    log4j.appender.stdout.Target=System.out
    log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
    log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
    
    ### direct messages to file mylog.log ###
    log4j.appender.file=org.apache.log4j.FileAppender
    log4j.appender.file.File=c:/mylog.log
    log4j.appender.file.layout=org.apache.log4j.PatternLayout
    log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
    
    ### set log levels - for more verbose logging change 'info' to 'debug' ###
    
    log4j.rootLogger=info, stdout

**配置spring（applicationContext.xml）**

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:aop="http://www.springframework.org/schema/aop"
           xmlns:tx="http://www.springframework.org/schema/tx"
           xmlns:context="http://www.springframework.org/schema/context"
           xsi:schemaLocation="
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
           http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
           http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
    ">
    
        
        <context:component-scan base-package="com.hailei">
            <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        </context:component-scan>
    
        
        <context:property-placeholder location="classpath:jdbc.properties"/>
    
        
        <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
            <property name="driverClass" value="${jdbc.driver}"/>
            <property name="jdbcUrl" value="${jdbc.url}"/>
            <property name="user" value="${jdbc.username}"/>
            <property name="password" value="${jdbc.password}"/>
        </bean>
    
        
        <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            <property name="dataSource" ref="dataSource"></property>
            
            <property name="configLocation" value="classpath:sqlMapConfig-spring.xml"></property>
    
            
            <property name="mapperLocations" value="classpath:mapper/*.xml"/>
        </bean>
    
        
        <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
            <property name="basePackage" value="com.hailei.mapper"></property>
            
            <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        </bean>
    
    
        
        
        <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
            <property name="dataSource" ref="dataSource"></property>
        </bean>
    
        
        <tx:advice id="txAdvice">
            <tx:attributes>
                <tx:method name="*"/>
            </tx:attributes>
        </tx:advice>
    
        
        <aop:config>
            <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.hailei.service.impl.*.*(..))"></aop:advisor>
        </aop:config>
    
    
    </beans>

**配置spring-mvc.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xmlns:context="http://www.springframework.org/schema/context"
           xsi:schemaLocation="
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
    ">
    
        
        <context:component-scan base-package="com.hailei.controller"></context:component-scan>
    
        
        <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
        <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
    
        
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="prefix" value="/pages/"/>
            <property name="suffix" value=".jsp"/>
        </bean>
    
        
        <mvc:default-servlet-handler></mvc:default-servlet-handler>
    
        
        <mvc:interceptors>
            <mvc:interceptor>
                
                <mvc:mapping path="/**"/>
                
                <mvc:exclude-mapping path="/**/*.css"/>
                <mvc:exclude-mapping path="/**/*.js"/>
                <mvc:exclude-mapping path="/**/*.jpg"/>
                <mvc:exclude-mapping path="/**/*.gif"/>
                <mvc:exclude-mapping path="/**/*.png"/>
                <mvc:exclude-mapping path="/**/*.tff"/>
                <mvc:exclude-mapping path="/**/*.woff"/>
                <mvc:exclude-mapping path="/user/login"/>
                <bean class="com.hailei.interceptor.PrivilegeInterceptor"/>
            </mvc:interceptor>
        </mvc:interceptors>
    
        
        <mvc:annotation-driven/>
    
    </beans>

**配置sqlMapConfig-spring.xml**

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE configuration
            PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-config.dtd">
    <configuration>
    
        
        <typeAliases>
            <package name="com.hailei.domain"></package>
        </typeAliases>
    
    </configuration>

**配置web.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
             version="3.1">
    
        
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </context-param>
    
        
        <filter>
            <filter-name>CharacterEncodingFilter</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>UTF-8</param-value>
            </init-param>
        </filter>
        <filter-mapping>
            <filter-name>CharacterEncodingFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    
        
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
        <listener>
            <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
        </listener>
    
    
        
        <servlet>
            <servlet-name>DispatcherServlet</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:spring-mvc.xml</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
            <servlet-name>DispatcherServlet</servlet-name>
            <url-pattern>/</url-pattern>
        </servlet-mapping>
    
    </web-app>

#### 4.2 工程结构 ####

Maven Web开发中的项目结构如下：

![在这里插入图片描述][50610d045b1447f0810f6e5f05b31841.png_pic_center]  
Java目录结构如下：

![在这里插入图片描述][ffe7236799d64710b4dbb6fcf9e80949.png_pic_center]  
resources和webapp目录结构如下：

![在这里插入图片描述][b4a15ccd683c4c208d2307b7e941988f.png_pic_center]

### 5、数据库 ###

3个表：sys\_user（用户表），sys\_role（角色表），sys\_user\_role（关系表）

![在这里插入图片描述][8b53f510d3c64c2ebe6631ecba2e74f9.png_pic_center]  
sys\_role（角色表）sql语句

/*Table structure for table `sys_role` */
    
    DROP TABLE IF EXISTS `sys_role`;
    
    CREATE TABLE `sys_role` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT,
      `roleName` varchar(50) DEFAULT NULL,
      `roleDesc` varchar(50) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
    
    /*Data for the table `sys_role` */
    
    insert  into `sys_role`(`id`,`roleName`,`roleDesc`) values (1,'院长','负责全面工作'),(2,'研究员','课程研发工作'),(3,'讲师','授课工作'),(4,'助教','协助解决学生的问题');

![在这里插入图片描述][f96b91e2829c422dac4f467b56a80c56.png_pic_center]

sys\_user（用户表）sql语句

/*Table structure for table `sys_user` */
    
    DROP TABLE IF EXISTS `sys_user`;
    
    CREATE TABLE `sys_user` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT,
      `username` varchar(50) DEFAULT NULL,
      `email` varchar(50) DEFAULT NULL,
      `password` varchar(80) DEFAULT NULL,
      `phoneNum` varchar(20) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
    
    /*Data for the table `sys_user` */
    
    insert  into `sys_user`(`id`,`username`,`email`,`password`,`phoneNum`) values (1,'zhangsan','zhangsan@itcast.cn','123','13888888888'),(2,'lisi','lisi@itcast.cn','123','13999999999'),(3,'wangwu','wangwu@itcast.cn','123','18599999999');

![在这里插入图片描述][586b51a960874e43825f20b1078bf7ab.png_pic_center]

sys\_user\_role（关系表）sql语句

/*Table structure for table `sys_user_role` */
    
    DROP TABLE IF EXISTS `sys_user_role`;
    
    CREATE TABLE `sys_user_role` (
      `userId` bigint(20) NOT NULL,
      `roleId` bigint(20) NOT NULL,
      PRIMARY KEY (`userId`,`roleId`),
      KEY `roleId` (`roleId`),
      CONSTRAINT `sys_user_role_ibfk_1` FOREIGN KEY (`userId`) REFERENCES `sys_user` (`id`),
      CONSTRAINT `sys_user_role_ibfk_2` FOREIGN KEY (`roleId`) REFERENCES `sys_role` (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    /*Data for the table `sys_user_role` */
    
    insert  into `sys_user_role`(`userId`,`roleId`) values (1,1),(1,2),(2,2),(2,3);

![在这里插入图片描述][2b7b7293fe4844fd90f33910bcc79846.png_pic_center]

### 6、功能实现(后端) ###

#### 6.1 domain层 ####

**domain层Role：**

package com.hailei.domain;
    
    public class Role {
        
    
        private Long id;
        private String roleName;
        private String roleDesc;
    
        public Long getId() {
        
            return id;
        }
    
        public void setId(Long id) {
        
            this.id = id;
        }
    
        public String getRoleName() {
        
            return roleName;
        }
    
        public void setRoleName(String roleName) {
        
            this.roleName = roleName;
        }
    
        public String getRoleDesc() {
        
            return roleDesc;
        }
    
        public void setRoleDesc(String roleDesc) {
        
            this.roleDesc = roleDesc;
        }
    
        @Override
        public String toString() {
        
            return "Role{" +
                    "id=" + id +
                    ", roleName='" + roleName + '\'' +
                    ", roleDesc='" + roleDesc + '\'' +
                    '}';
        }
    }

**domain层User：**

package com.hailei.domain;
    
    import java.util.List;
    
    public class User {
        
    
        private Long id;
        private String username;
        private String email;
        private String password;
        private String phoneNum;
    
        //当前用户具备哪些角色
        private List<Role> roles;
    
        public List<Role> getRoles() {
        
            return roles;
        }
    
        public void setRoles(List<Role> roles) {
        
            this.roles = roles;
        }
    
        public Long getId() {
        
            return id;
        }
    
        public void setId(Long id) {
        
            this.id = id;
        }
    
        public String getUsername() {
        
            return username;
        }
    
        public void setUsername(String username) {
        
            this.username = username;
        }
    
        public String getEmail() {
        
            return email;
        }
    
        public void setEmail(String email) {
        
            this.email = email;
        }
    
        public String getPassword() {
        
            return password;
        }
    
        public void setPassword(String password) {
        
            this.password = password;
        }
    
        public String getPhoneNum() {
        
            return phoneNum;
        }
    
        public void setPhoneNum(String phoneNum) {
        
            this.phoneNum = phoneNum;
        }
    
        @Override
        public String toString() {
        
            return "User{" +
                    "id=" + id +
                    ", username='" + username + '\'' +
                    ", email='" + email + '\'' +
                    ", password='" + password + '\'' +
                    ", phoneNum='" + phoneNum + '\'' +
                    '}';
        }
    }

#### 6.2 mapper层 ####

**mapper层RoleMapper：**

package com.hailei.mapper;
    
    import com.hailei.domain.Role;
    
    import java.util.List;
    
    public interface RoleMapper {
        
    
        List<Role> findAll();
    
        void save(Role role);
    
        List<Role> findRoleByUserId(Long id);
    
    }

**mapper层UserMapper：**

package com.hailei.mapper;
    
    import com.hailei.domain.User;
    import org.apache.ibatis.annotations.Param;
    import org.junit.runners.Parameterized;
    
    import java.util.List;
    
    public interface UserMapper {
        
    
        List<User> findAll();
    
        void save(User user);
    
        void saveUserRoleRel(@Param("id") Long id, @Param("roleIds") Long[] roleIds);
    
        void delUserRoleRel(Long userId);
    
        void del(Long userId);
    
        User findByUsernameAndPassword(User user);
    }

#### 6.3 service层 ####

**service层RoleService：**

package com.hailei.service;
    
    import com.hailei.domain.Role;
    
    import java.util.List;
    
    public interface RoleService {
        
    
        List<Role> list() ;
    
        void save(Role role);
    }

**service层UserService：**

package com.hailei.service;
    
    import com.hailei.domain.User;
    
    import java.util.List;
    
    public interface UserService {
        
        List<User> list();
    
        void save(User user, Long[] roleIds);
    
        void del(Long userId);
    
        User login(User user);
    }

**service层接口实现RoleServiceImpl：**

package com.hailei.service.impl;
    
    import com.hailei.domain.Role;
    import com.hailei.mapper.RoleMapper;
    import com.hailei.service.RoleService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service("roleService")
    public class RoleServiceImpl implements RoleService {
        
    
        @Autowired
        private RoleMapper roleMapper;
    
        @Override
        public List<Role> list() {
        
            List<Role> roleList = roleMapper.findAll();
            return roleList;
        }
    
        @Override
        public void save(Role role) {
        
            roleMapper.save(role);
        }
    }

**service层接口实现UserServiceImpl：**

package com.hailei.service.impl;
    
    import com.hailei.domain.Role;
    import com.hailei.domain.User;
    import com.hailei.mapper.RoleMapper;
    import com.hailei.mapper.UserMapper;
    import com.hailei.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.dao.EmptyResultDataAccessException;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service("userService")
    public class UserServiceImpl implements UserService {
        
    
        @Autowired
        private RoleMapper roleMapper;
    
        @Autowired
        private UserMapper userMapper;
    
        @Override
        public List<User> list() {
        
            List<User> userList = userMapper.findAll();
            //封装userList中的每一个User的roles数据
            for (User user : userList) {
        
                //获得user的id
                Long id = user.getId();
                //将id作为参数 查询当前userId对应的Role集合数据
                List<Role> roles = roleMapper.findRoleByUserId(id);
                user.setRoles(roles);
            }
            return userList;
        }
    
        @Override
        public void save(User user, Long[] roleIds) {
        
            //第一步 向sys_user表中存储数据
            userMapper.save(user);
            User new_user = userMapper.findByUsernameAndPassword(user);
            //第二步 向sys_user_role 关系表中存储多条数据
            Long id = new_user.getId();
            userMapper.saveUserRoleRel(id,roleIds);
        }
    
        @Override
        public void del(Long userId) {
        
            //1、删除sys_user_role关系表
            userMapper.delUserRoleRel(userId);
            //2、删除sys_user表
            userMapper.del(userId);
        }
    
        @Override
        public User login(User user) {
        
            try {
        
                return userMapper.findByUsernameAndPassword(user);
            }catch (EmptyResultDataAccessException e){
        
                return null;
            }
        }
    
    
    }

#### 6.4 controller层 ####

**controller层RoleController：**

package com.hailei.controller;
    
    import com.hailei.domain.Role;
    import com.hailei.service.RoleService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.List;
    
    @RequestMapping("/role")
    @Controller
    public class RoleController {
        
    
        @Autowired
        private RoleService roleService;
    
        @RequestMapping("/save")
        public String save(Role role){
        
            roleService.save(role);
            return "redirect:/role/list";
        }
    
        @RequestMapping("/list")
        public ModelAndView list(){
        
            ModelAndView modelAndView = new ModelAndView();
            List<Role> roleList = roleService.list();
            //设置模型
            modelAndView.addObject("roleList",roleList);
            //设置视图
            modelAndView.setViewName("role-list");
            System.out.println(roleList);
            return modelAndView;
        }
    
    }

**controller层UserController：**

package com.hailei.controller;
    
    import com.hailei.domain.Role;
    import com.hailei.domain.User;
    import com.hailei.service.RoleService;
    import com.hailei.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpSession;
    import java.util.List;
    
    @Controller
    @RequestMapping("/user")
    public class UserController {
        
    
        @Autowired
        private UserService userService;
    
        @Autowired
        private RoleService roleService;
    
        @RequestMapping("/login")
        public String login(User user,HttpSession session){
        
            user = userService.login(user);
            if(user!=null){
        
                //登录成功  将user存储到session
                session.setAttribute("user",user);
                return "redirect:/index.jsp";
            }
            return "redirect:/login.jsp";
        }
    
        @RequestMapping("/del/{userId}")
        public String del(@PathVariable("userId") Long userId){
        
            userService.del(userId);
            return "redirect:/user/list";
        }
    
        @RequestMapping("/save")
        public String save(User user,Long[] roleIds){
        
            userService.save(user,roleIds);
            return "redirect:/user/list";
        }
    
        @RequestMapping("/saveUI")
        public ModelAndView saveUI(){
        
            ModelAndView modelAndView = new ModelAndView();
            List<Role> roleList = roleService.list();
            modelAndView.addObject("roleList",roleList);
            modelAndView.setViewName("user-add");
            return modelAndView;
        }
    
        @RequestMapping("/list")
        public ModelAndView list(){
        
            List<User> userList = userService.list();
            ModelAndView modelAndView = new ModelAndView();
            modelAndView.addObject("userList",userList);
            modelAndView.setViewName("user-list");
            return modelAndView;
        }
    
    }

#### 6.5 mapper.xml ####

**RoleMapper.xml：**

**UserMapper.xml：**

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.hailei.mapper.UserMapper">
    
        <resultMap id="UserMap" type="user" >
            <id column="id" property="id" jdbcType="VARCHAR" />
            <result column="username" property="username"></result>
            <result column="email" property="email"></result>
            <result column="password" property="password"></result>
            <result column="phoneNum" property="phoneNum"></result>
        </resultMap>
    
        <insert id="save" parameterType="user">
            insert into sys_user(username,email,password,phoneNum) values(#{username},#{email},#{password},#{phoneNum})
        </insert>
        <select id="findAll" resultType="user">
            select * from sys_user
        </select>
        <insert id="saveUserRoleRel" parameterType="Long">
            insert into sys_user_role(userId,roleId) values
            <foreach collection="roleIds" item="roleIds" separator="," index="index" >
                (#{id},#{roleIds})
            </foreach>
        </insert>
        <delete id="delUserRoleRel" parameterType="user">
            delete from sys_user_role where userId=#{id}
        </delete>
        <delete id="del" parameterType="Long">
            delete from sys_user where id=#{id}
        </delete>
        <select id="findByUsernameAndPassword" resultMap="UserMap" parameterType="user">
            select * from sys_user where username = #{username} and password = #{password}
        </select>
    </mapper>

#### 6.6 interceptor ####

**PrivilegeInterceptor：**

package com.hailei.interceptor;
    
    import com.hailei.domain.User;
    import org.springframework.web.servlet.HandlerInterceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    public class PrivilegeInterceptor implements HandlerInterceptor {
        
    
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws IOException {
        
            //逻辑：判断用户是否登录  本质：判断session中有没有user
            HttpSession session = request.getSession();
            User user = (User) session.getAttribute("user");
            if(user==null){
        
                //没有登录
                response.sendRedirect(request.getContextPath()+"/login.jsp");
                return false;
            }
    
            //放行  访问目标资源
            return true;
        }
    }

### 7、功能实现(前端) ###

#### 7.1 index.jsp ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>主页</title>
    </head>
    <body>
    	<%
    		response.sendRedirect(request.getContextPath()+"/pages/main.jsp");
    	%>
    </body>
    </html>

#### 7.2 login.jsp ####

**功能展示：**

![在这里插入图片描述][2a17ada623b54cecaf827838e53d4e09.png_pic_center]

#### 7.3 user-list.jsp ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    
    
    <meta
    	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    	name="viewport">
    
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    
    	<script>
    		function delUser(userId){
        
    		    if(confirm("您确认要删除吗")){
        
    		        location.href="${pageContext.request.contextPath}/user/del/"+userId;
    			}
    		}
    	</script>
    
    </head>
    
    <body class="hold-transition skin-blue sidebar-mini">
    
    	<div class="wrapper">
    
    		
    		<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="${pageContext.request.contextPath}/index.jsp"><i
    						class="fa fa-dashboard"></i> 首页</a></li>
    				<li><a
    					href="${pageContext.request.contextPath}/user/findAll.do">用户管理</a></li>
    
    				<li class="active">全部用户</li>
    			</ol>
    			</section>
    			
    
    				
    				<section class="content"> 
    				<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}/user/saveUI'">
    											<i class="fa fa-file-o"></i> 新建
    										</button>
    										
    										<button type="button" class="btn btn-default" title="刷新">
    											<i class="fa fa-refresh"></i> 刷新
    										</button>
    									</div>
    								</div>
    							</div>
    							<div class="box-tools pull-right">
    								<div class="has-feedback">
    									<input type="text" class="form-control input-sm"
    										placeholder="搜索"> <span
    										class="glyphicon glyphicon-search form-control-feedback"></span>
    								</div>
    							</div>
    							
    
    							
    							<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="sorting_desc sorting_desc_disabled">联系电话</th>
    										<th class="sorting">具有角色</th>
    										<th class="sorting">操作</th>
    									</tr>
    								</thead>
    								<tbody>
    									<c:forEach items="${userList}" var="user">
    										<tr>
    											<td><input name="ids" type="checkbox"></td>
    											<td>${
        user.id}</td>
    											<td>${
        user.username}</td>
    											<td>${
        user.email}</td>
    											<td>${
        user.phoneNum}</td>
    											<td class="text-center">
    												<c:forEach items="${user.roles}" var="role">
    													  ${
        role.roleName}
    												</c:forEach>
    											</td>
    											<td class="text-center">
    												<a href="javascript:void(0);" onclick="delUser('${user.id}')" class="btn bg-olive btn-xs">删除</a>
    											</td>
    										</tr>
    									</c:forEach>
    
    
    
    								</tbody>
    
    							</table>
    							
    
    						</div>
    						
    
    					</div>
    					
    
    
    
    				</div>
    
    				</section>
    				
    
    			</div>
    			
    			
    
    			
    			<footer class="main-footer">
    			<div class="pull-right hidden-xs">
    				<b>Version</b> 1.0.8
    			</div>
    			<strong>Copyright © 2018-2020 <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>
    </body>
    
    </html>

**功能展示：**

![在这里插入图片描述][6bec43be423b43c4bc1934e6707a48d4.png_pic_center]  
**删除功能：**

![在这里插入图片描述][e1b97a836e264ae2bc9ee2bc00062930.png_pic_center]

#### 7.3 user-add.jsp ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    
    
    <meta
    	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    	name="viewport">
    
    
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    </head>
    
    <body class="hold-transition skin-purple sidebar-mini">
    
    	<div class="wrapper">
    
    		
    		<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="${pageContext.request.contextPath}/index.jsp"><i
    						class="fa fa-dashboard"></i> 首页</a></li>
    				<li><a
    					href="${pageContext.request.contextPath}/user/findAll.do">用户管理</a></li>
    				<li class="active">用户表单</li>
    			</ol>
    			</section>
    			
    
    			<form action="${pageContext.request.contextPath}/user/save"
    				method="post">
    				
    				<section class="content"> 
    
    				<div class="panel panel-default">
    					<div class="panel-heading">用户信息</div>
    					<div class="row data-type">
    
    						<div class="col-md-2 title">用户名称</div>
    						<div class="col-md-4 data">
    							<input type="text" class="form-control" name="username"
    								placeholder="用户名称" value="">
    						</div>
    						<div class="col-md-2 title">密码</div>
    						<div class="col-md-4 data">
    							<input type="password" class="form-control" name="password"
    								placeholder="密码" value="">
    						</div>
    						<div class="col-md-2 title">邮箱</div>
    						<div class="col-md-4 data">
    							<input type="text" class="form-control" name="email"
    								placeholder="邮箱" value="">
    						</div>
    						<div class="col-md-2 title">联系电话</div>
    						<div class="col-md-4 data">
    							<input type="text" class="form-control" name="phoneNum"
    								placeholder="联系电话" value="">
    						</div>
    						<div class="col-md-2 title">用户角色</div>
    						<div class="col-md-10 data">
    							<c:forEach items="${roleList}" var="role">
    								<input class="" type="checkbox" name="roleIds" value="${role.id}">${
        role.roleName}
    							</c:forEach>
    						</div>
    
    					</div>
    				</div>
    				 
    				<div class="box-tools text-center">
    					<button type="submit" class="btn bg-maroon">保存</button>
    					<button type="button" class="btn bg-default"
    						onclick="history.back(-1);">返回</button>
    				</div>
    				 </section>
    				
    			</form>
    		</div>
    		
    
    		
    		<footer class="main-footer">
    		<div class="pull-right hidden-xs">
    			<b>Version</b> 1.0.8
    		</div>
    		<strong>Copyright © 2014-2017 <a
    			href="http://www.itcast.cn">研究院研发部</a>.
    		</strong> All rights reserved. </footer>
    		
    
    	</div>
    
    
    	<script
    		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
    	<script>
    		$.widget.bridge('uibutton', $.ui.button);
    	</script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.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");
    			}
    		}
    	</script>
    
    
    </body>
    
    </html>

**功能展示：**

![在这里插入图片描述][3f7d7e8fb10a4f3681dbf70f69cd4d00.png_pic_center]

#### 7.5 role-list.jsp ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    
    
    <meta
    	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    	name="viewport">
    
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    
    
    </head>
    
    <body class="hold-transition skin-blue sidebar-mini">
    
    	<div class="wrapper">
    
    		
    		<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="${pageContext.request.contextPath}/index.jsp"><i
    						class="fa fa-dashboard"></i> 首页</a></li>
    				<li><a
    					href="${pageContext.request.contextPath}/role/findAll.do">角色管理</a></li>
    
    				<li class="active">全部角色</li>
    			</ol>
    			</section>
    			
    
    				
    				<section class="content"> 
    				<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/role-add.jsp'">
    											<i class="fa fa-file-o"></i> 新建
    										</button>
    										
    										<button type="button" class="btn btn-default" title="刷新">
    											<i class="fa fa-refresh"></i> 刷新
    										</button>
    									</div>
    								</div>
    							</div>
    							<div class="box-tools pull-right">
    								<div class="has-feedback">
    									<input type="text" class="form-control input-sm"
    										placeholder="搜索"> <span
    										class="glyphicon glyphicon-search form-control-feedback"></span>
    								</div>
    							</div>
    							
    
    							
    							<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">角色描述</th>
    										<th class="sorting">操作</th>
    									</tr>
    								</thead>
    								<tbody>
    									<c:forEach items="${roleList}" var="role">
    										<tr>
    											<td><input name="ids" type="checkbox"></td>
    											<td>${
        role.id}</td>
    											<td>${
        role.roleName}</td>
    											<td>${
        role.roleDesc}</td>
    											<td class="text-center">
    												<a href="javascript:void(0);" class="btn bg-olive btn-xs">删除</a>
    											</td>
    										</tr>
    									</c:forEach>
    
    								</tbody>
    
    							</table>
    							
    
    						</div>
    						
    
    					</div>
    					
    
    				</div>
    
    				</section>
    				
    
    			</div>
    			
    			
    
    			
    			<footer class="main-footer">
    			<div class="pull-right hidden-xs">
    				<b>Version</b> 1.0.8
    			</div>
    			<strong>Copyright © 2018-2020 <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>
    </body>
    
    </html>

**功能展示：**

![在这里插入图片描述][eb475c04842d4140be09dc3e56711793.png_pic_center]

#### 7.6 role-add.jsp ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    
    
    <meta
    	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    	name="viewport">
    
    
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    </head>
    
    	<body class="hold-transition skin-purple sidebar-mini">
    
    	<div class="wrapper">
    
    		
    		<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="${pageContext.request.contextPath}/index.jsp"><i
    						class="fa fa-dashboard"></i> 首页</a></li>
    				<li><a href="${pageContext.request.contextPath}/role/findAll.do">角色管理</a></li>
    				<li class="active">角色表单</li>
    			</ol>
    			</section>
    			
    
    			<form action="${pageContext.request.contextPath}/role/save"
    				method="post">
    				
    				<section class="content"> 
    
    				<div class="panel panel-default">
    					<div class="panel-heading">角色信息</div>
    					<div class="row data-type">
    
    						<div class="col-md-2 title">角色名称</div>
    						<div class="col-md-4 data">
    							<input type="text" class="form-control" name="roleName"
    								placeholder="角色名称" value="">
    						</div>
    						<div class="col-md-2 title">角色描述</div>
    						<div class="col-md-4 data">
    							<input type="text" class="form-control" name="roleDesc"
    								placeholder="角色描述" value="">
    						</div>
    										
    
    					</div>
    				</div>
    				 
    				<div class="box-tools text-center">
    					<button type="submit" class="btn bg-maroon">保存</button>
    					<button type="button" class="btn bg-default"
    						onclick="history.back(-1);">返回</button>
    				</div>
    				 </section>
    				
    			</form>
    		</div>
    		
    
    		
    		<footer class="main-footer">
    		<div class="pull-right hidden-xs">
    			<b>Version</b> 1.0.8
    		</div>
    		<strong>Copyright © 2014-2017 <a
    			href="http://www.itcast.cn">研究院研发部</a>.
    		</strong> All rights reserved. </footer>
    		
    
    	</div>
    
    
    	<script
    		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
    	<script>
    		$.widget.bridge('uibutton', $.ui.button);
    	</script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.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");
    			}
    		}
    
    	</script>
    	
    
    </body>
    
    </html>

**功能展示：**

![在这里插入图片描述][c7ff305808184808969468cf0e962e5c.png_pic_center]

#### 7.7 main.jsp ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>ITCAST - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    
    
    <meta
    	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    	name="viewport">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    </head>
    
    <body class="hold-transition skin-blue sidebar-mini">
    
    	<div class="wrapper">
    
    		
    		<jsp:include page="header.jsp"></jsp:include>
    			
    
    		
    		<jsp:include page="aside.jsp"></jsp:include>
    		
    
    		
    		<div class="content-wrapper">
    
    		</div>
    		
    
    		
    		<footer class="main-footer">
    		<div class="pull-right hidden-xs">
    			<b>Version</b> 1.0.8
    		</div>
    		<strong>Copyright © 2014-2017 <a
    			href="http://www.itcast.cn">研究院研发部</a>.
    		</strong> All rights reserved. </footer>
    		
    
    	</div>
    
    	<script
    		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
    	<script>
    		$.widget.bridge('uibutton', $.ui.button);
    	</script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
    	<script
    		src="${pageContext.request.contextPath}/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-index");
    		});
    	</script>
    </body>
    
    </html>

**功能展示：**

![在这里插入图片描述][e5fc87a74ef84decaa31415ab1dfafb7.png_pic_center]

**希望本文对大家有帮助，上文若有不妥之处，欢迎指正**

**分享决定高度，学习拉开差距**

[SSM_Spring_SpringMVC_MyBatis_spring_springmvc_mybatis]: https://www.bilibili.com/video/BV1WZ4y1P7Bp?spm_id_from=333.999.0.0&vd_source=e33748fe5920caad13e701e10501ff21
[https_github.com_HaiLei-Fly_SSM_Test]: https://github.com/HaiLei-Fly/SSM_Test
[50610d045b1447f0810f6e5f05b31841.png_pic_center]: https://img-blog.csdnimg.cn/50610d045b1447f0810f6e5f05b31841.png#pic_center
[ffe7236799d64710b4dbb6fcf9e80949.png_pic_center]: https://img-blog.csdnimg.cn/ffe7236799d64710b4dbb6fcf9e80949.png#pic_center
[b4a15ccd683c4c208d2307b7e941988f.png_pic_center]: https://img-blog.csdnimg.cn/b4a15ccd683c4c208d2307b7e941988f.png#pic_center
[8b53f510d3c64c2ebe6631ecba2e74f9.png_pic_center]: https://img-blog.csdnimg.cn/8b53f510d3c64c2ebe6631ecba2e74f9.png#pic_center
[f96b91e2829c422dac4f467b56a80c56.png_pic_center]: https://img-blog.csdnimg.cn/f96b91e2829c422dac4f467b56a80c56.png#pic_center
[586b51a960874e43825f20b1078bf7ab.png_pic_center]: https://img-blog.csdnimg.cn/586b51a960874e43825f20b1078bf7ab.png#pic_center
[2b7b7293fe4844fd90f33910bcc79846.png_pic_center]: https://img-blog.csdnimg.cn/2b7b7293fe4844fd90f33910bcc79846.png#pic_center
[2a17ada623b54cecaf827838e53d4e09.png_pic_center]: https://img-blog.csdnimg.cn/2a17ada623b54cecaf827838e53d4e09.png#pic_center
[6bec43be423b43c4bc1934e6707a48d4.png_pic_center]: https://img-blog.csdnimg.cn/6bec43be423b43c4bc1934e6707a48d4.png#pic_center
[e1b97a836e264ae2bc9ee2bc00062930.png_pic_center]: https://img-blog.csdnimg.cn/e1b97a836e264ae2bc9ee2bc00062930.png#pic_center
[3f7d7e8fb10a4f3681dbf70f69cd4d00.png_pic_center]: https://img-blog.csdnimg.cn/3f7d7e8fb10a4f3681dbf70f69cd4d00.png#pic_center
[eb475c04842d4140be09dc3e56711793.png_pic_center]: https://img-blog.csdnimg.cn/eb475c04842d4140be09dc3e56711793.png#pic_center
[c7ff305808184808969468cf0e962e5c.png_pic_center]: https://img-blog.csdnimg.cn/c7ff305808184808969468cf0e962e5c.png#pic_center
[e5fc87a74ef84decaa31415ab1dfafb7.png_pic_center]: https://img-blog.csdnimg.cn/e5fc87a74ef84decaa31415ab1dfafb7.png#pic_center