ssm框架：后台管理系统

最新推荐文章于 2024-06-09 12:15:58 发布

普通还不自信的程序员

最新推荐文章于 2024-06-09 12:15:58 发布

阅读量2.5k

点赞数 2

分类专栏：项目

本文链接：https://blog.csdn.net/qq_41841482/article/details/108201127

版权

项目专栏收录该内容

10 篇文章 4 订阅

订阅专栏

文章目录

本项目采用前后端项目分离模式

前端：project_web
后端：project_ssm

效果

在这里插入图片描述

项目代码仓库

准备工作

0. 库表初始化

mysql -uroot -p111111
create database dbplatform default charset=utf8; -- 创建数据库
use dbplatform;
source E:\JAVA Workatabase\dump.sql; --在当前数据下，执行sql脚本

1. 后端配置文件

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>com.hzx</groupId>
    <artifactId>project_ssm</artifactId>
    <version>1.0-SNAPSHOT</version>

    <packaging>war</packaging>

    <dependencies>
        <!-- Spring常用依赖 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.1.6.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>5.1.6.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.1.6.RELEASE</version>
        </dependency>
        <!-- spring-jdbc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.6.RELEASE</version>
        </dependency>
        <!-- spring+mybatis集成依赖 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.6.RELEASE</version>
        </dependency>
        <!--MyBatis核心依赖-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.6</version>
        </dependency>
        <!--MySql驱动依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!-- junit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

        <!-- 分页 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.10</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.16</version>
        </dependency>
        
        <!-- FastJson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.54</version>
        </dependency>
        <dependency>
            <!-- servlet编译环境 -->
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- Logback依赖，还会传递 slf4j 和 logback-core -->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.3</version>
        </dependency>
	</dependencies>
</project>

src/main/webapp/WEB-INF/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_4_0.xsd"
         version="4.0">
    <!-- 这是一个空白的web.xml文件模板 -->
    <!-- 前端、核心 控制器 -->
    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置文件 告知核心 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!-- 此过滤器会进行：request.setCharactorEncoding("utf-8"); -->
    <filter>
        <filter-name>encoding</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>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- Listener
     项目启动时，启动spring工厂
     启动工厂时，会找到一个 名为  contextConfigLocation的全局参数
    -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-context.xml</param-value>
    </context-param>
</web-app>

src/main/resource/db.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/dbplatform?useSSL=false&characterEncoding=utf-8
name=root
password=123456
initialSize=10
maxActive=50
minIdle=5
maxWait=5000

src/main/resource/mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       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/mvc
                           http://www.springframework.org/schema/mvc/spring-mvc.xsd">


    <!-- 扫描 use-default-filters="false" 不产生任何对象 -->
    <context:component-scan base-package="com" use-default-filters="false">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!-- 注册 可以识别mvc相关注解的组件 -->
    <mvc:annotation-driven>
        <!--安装FastJson转换器-->
        <mvc:message-converters>
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <!--声明转换类型json-->
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>


    <!-- 视图解析器
         1. 捕获handler的返回值  "user"
         2. 解析，在返回值前后拼接  前后缀 ：  /user.jsp
     -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/"/>
        <property name="suffix" value=".html"/>
    </bean>

    <!-- 
      额外的增加一个handler，且其requestMapping:  "/**" 可以匹配所有请求，但是优先级最低
      所以如果其他所有的handler都匹配不上，请求会转向 "/**" ,恰好，这个handler就是处理静态资源的
      处理方式：将请求转会到tomcat中名为default的Servlet
      -->
    <mvc:default-servlet-handler/>
</beans>

src/main/resource/mybatis-config.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">

<!--MyBatis配置-->
<configuration>
    <settings>
        <setting name="cacheEnabled" value="true"/> <!-- mybaits-config.xml中开启全局缓存（默认开启） -->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>

    <!--分页插件-->
    <plugins>
        <!-- com.github.pagehelper为PageHelper类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>
    
</configuration>

src/main/resource/spring-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/aop
                           http://www.springframework.org/schema/aop/spring-aop.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">
    <context:property-placeholder location="classpath:db.properties"/>
    <!--连接池-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
        <property name="driverClassName" value="${driver}"/>
        <property name="url" value="${url}"/>
        <property name="username" value="${name}"/>
        <property name="password" value="${password}"/>
    </bean>

    <!--SqlSessionFactory-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--连接池-->
        <property name="dataSource" ref="dataSource"/>
        <!--mapper文件-->
        <property name="mapperLocations" value="classpath:mapper/*-mapper.xml"/>
        <!--别名-->
        <property name="typeAliasesPackage" value="com.entity"/>
        <!--关联mybatis核心配置-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <!--MapperScannerConfigurer-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--工厂中只有一个SqlSessionFactory此配置可省略-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <property name="basePackage" value="com.dao"/>
    </bean>

    <!-- Service 配置省略，有注解完成 @service-->

    <!-- 事务管理器 -->
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!-- <tx:advice>  事务Advice 配置省略，有注解完成 @Transactional-->
    <!-- 编织 配置省略，有注解完成 -->

    <!-- 注解扫描 -->
    <context:component-scan base-package="com" use-default-filters="true">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!-- 指定事务管理器，支持 @Transactional -->
    <tx:annotation-driven transaction-manager="txManager"/>
    <!-- AOP注解启动 -->
    <aop:aspectj-autoproxy/>


</beans>

配置文件拆分版

2. 首页前端代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script src="layui/layui.js"></script>
    <script src="jquery-2.1.0.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" id="aname">

                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:void(0)"  onclick="logout()">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <!--由js获取-->
                <!--不同角色显示不同导航栏-->
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
    </div>

    <div class="layui-footer">
    </div>
</div>

<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });

// 首页功能

</script>
</body>
</html>

user.html

user.html 作为一个代码片段，被加载到首页的“正文”部分

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12 layui-col-lg12">
            <table class="layui-hide" id="user_table" lay-filter="testTable"></table>
        </div>
    </div>
</div>

<!--表头功能-->
<script type="text/html" id="toolBarDemo">
    <a class="layui-btn layui-btn" lay-event="add">添加</a>
    <a class="layui-btn layui-btn layui-btn-danger" lay-event="del">删除</a>
</script>

<!--每行数据功能-->
<script type="text/html" id="barDemo">
    <!-- lay-event标识事件类型，在点击回调中可以获取 -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="authorize">授权</a>
</script>

role.html

<div class="layui-fluid">
    <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-md12 layui-col-lg12">
            <table class="layui-hide" id="role_table" lay-filter="testTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <!-- lay-event标识事件类型，在点击回调中可以获取 -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="authorize">授权</a>
</script>

<script type="text/html" id="toolBarDemo">
    <a class="layui-btn layui-btn" lay-event="add">添加</a>
</script>

模块

1. 用户

在这里插入图片描述

entity.User.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Admin {
    private Integer id;
    private String password;
    private String email;
    private String realName;
    private Boolean status;
}

DAO.UserDAO.java

public interface AdminDAO {
    Admin queryAdminByEmail(@Param("email") String email);
    
    List<User> queryAllUser();

    Integer countUser();

	//批量删除（修改状态值1->0）
    Integer delMultiple(@Param("ids") Integer[] ids);

    // 授权（修改状态值0->1）
    Integer authorizeUser(@Param("id") Integer id);

	Integer addUser(User user);

	Integer updateUser(User user);
}

resource.mapper.userdao-mapper.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.dao.AdminDAO">
    <!--id = 所需重写的接口抽象方法，resultType = 查询后所需返回的对象类型-->
    <select id="queryAdminByEmail" resultType="com.entity.Admin">
        select ID,PASSWORD,EMAIL,REAL_NAME,STATUS
        from admin_user
        where EMAIL=#{email}
    </select>
</mapper>

    <select id="queryAllUser" resultType="com.entity.User">
        select ID,PASSWORD,EMAIL,REAL_NAME,STATUS
        from admin_user
        order by  STATUS desc,id asc
    </select>

    <select id="countUser" resultType="int">
        select count(*)
        from admin_user
    </select>

    <update id="delMultiple">
        update admin_user set STATUS=0
        where ID in
        <foreach collection="ids" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
    </update>

    <update id="authorizeUser">
        update admin_user set STATUS=1
        where ID=#{id}
    </update>

    <insert id="addUser" parameterType="com.entity.User">
        insert into admin_user(password, email, real_name,STATUS)
        values (#{password},#{email},#{realName},#{status})
    </insert>

	<update id="updateUser" parameterType="com.entity.User">
        update admin_user set PASSWORD=#{password},EMAIL=#{email},REAL_NAME=#{realName},STATUS=#{status}
        where id=#{id}
    </update>

service.user.UserService.java

public interface UserService {
    User queryUserByEmail(String email, String password);

    List<User> queryAllUser(Integer page,Integer limit);

    Integer countUser();

    Integer delMultiple(Integer[] ids);

    Integer authorizeUser(Integer id);

    Integer addUser(User user);

    Integer updateUser(User user);
}

service.user.UserServiceImpl.java

@Setter
@Service("userService")
@Transactional(isolation = Isolation.DEFAULT,propagation = Propagation.REQUIRED,timeout = -1,readOnly = false,rollbackFor = Exception.class)
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDAO userDAO;

    @Override
    @Transactional(propagation = Propagation.SUPPORTS)
    public User queryUserByEmail(String email, String password) {
        User user = userDAO.queryUserByEmail(email);
        if(user !=null&& user.getPassword().equals(password)){
            return user;
        }
        else {
            System.out.println("密码错误");
        }
        return null;
    }

    @Override
    public Integer countUser() {
        return userDAO.countUser();
    }

    @Override
    public List<User> queryAllUser(Integer page,Integer limit) {
        PageHelper.startPage(page,limit);
        return userDAO.queryAllUser();
    }

    @Override
    public Integer delMultiple(Integer[] ids) {
        return userDAO.delMultiple(ids);
    }

    @Override
    public Integer authorizeUser(Integer id) {
        return userDAO.authorizeUser(id);
    }

    @Override
    public Integer addUser(User user) {
        return userDAO.addUser(user);
    }

    @Override
    public Integer updateUser(User user) {
        return userDAO.updateUser(user);
    }
}

result.UserResult.java

@Data
@NoArgsConstructor
public class UserResult {
    private User user;
    private String username;
    private Integer code;
    private String msg;
    private Integer count;
    private List<User> data;

    public UserResult(User user) {
        this.user = user;
    }

    public UserResult(String username) {
        this.username = username;
    }

    public UserResult(Integer code) {
        this.code = code;
    }

    public UserResult(Integer code, String msg, Integer count, List<User> data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }
}

controller.UserController.java

@RestController
@CrossOrigin(value = "http://localhost:8989",allowCredentials = "true")
public class UserController {

    @Autowired
    private UserService userService;
}

2. 侧边导航栏

在这里插入图片描述

entity.Menu.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Menu {
    private Integer id;
    private String name;
    private Integer parentId;
    private String url;
    private Boolean type;
    private List<Menu> menus;
}

result.MenuResult.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class MenuResult {
    private List<Menu> menus;
}
#### DAO.MenuDAO.java

```java
public interface MenuDAO {
    List<Menu> queryUserMenu(@Param("userId") Integer id);
}

resource.mapper.menudao-mapper.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.dao.MenuDAO">
    <!--id = 所需重写的接口抽象方法，resultType = 查询后所需返回的对象类型-->
    <select id="queryUserMenu" resultMap="userMenu">
        select m.ID,m.NAME,m.PARENT_ID pid,m.URL,m.TYPE,
            m2.id id2, m2.name name2, m2.parent_id pid2, m2.url url2, m2.type type2
        from menu m
        inner join role_menu rm on rm.MENU_ID=m.ID
        inner join user_role ur on rm.ROLE_ID=ur.ROLE_ID
        left join (select id,name,PARENT_ID,URL,TYPE from menu where TYPE=1) m2 on m.ID=m2.PARENT_ID
        where ur.USER_ID=#{userId} and m.PARENT_ID is null
    </select>

    <resultMap id="userMenu" type="com.entity.Menu">
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="pid" property="parentId"/>
        <result column="url" property="url"/>
        <result column="type" property="type"/>
        <collection property="menus" ofType="Menu">
            <id column="id2" property="id"/>
            <result column="name2" property="name"/>
            <result column="pid2" property="parentId"/>
            <result column="url2" property="url"/>
            <result column="type2" property="type"/>
        </collection>
    </resultMap>
</mapper>

service.menu.MenuService.java

public interface MenuService {
    List<Menu> queryUserMenu(@Param("userId") Integer id);
}

service.menu.MenuServiceImpl.java

@Setter
@Service("menuService")
@Transactional(isolation = Isolation.DEFAULT,propagation = Propagation.REQUIRED,timeout = -1,readOnly = false,rollbackFor = Exception.class)

public class MenuServiceImpl implements MenuService{

    @Autowired
    private MenuDAO menuDAO;

    @Override
    @Transactional(propagation = Propagation.SUPPORTS)
    public List<Menu> queryUserMenu(Integer id) {
        List<Menu> menus = menuDAO.queryUserMenu(id);
        return menus;
    }
}

controller.MenuController.java

@RestController
@CrossOrigin(value = "http://localhost:8989",allowCredentials = "true")
public class MenuController {

    @Autowired
    private MenuService menuService;
}

3. 角色

在这里插入图片描述

entity.Role.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Role {
    private Integer id;
    private String name;
    private String remark;
    private Boolean status;

    public Role(Integer id, Boolean status) {
        this.id = id;
        this.status = status;
    }
}

result.RoleResult.jsvs

@Data
@NoArgsConstructor
@AllArgsConstructor
public class RoleResult {
    private Integer code;
    private String msg;
    private Integer count;
    private List<Role> data;

    public RoleResult(Integer code) {
        this.code = code;
    }
}

resource.mapper.roledao-mapper.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.dao.RoleDAO">
    <!--id = 所需重写的接口抽象方法，resultType = 查询后所需返回的对象类型-->
    <select id="queryAllRole" resultType="com.entity.Role">
        select id, name, remark, status
        from role
    </select>

    <select id="countRole" resultType="int">
        select count(*) from role
    </select>

    <update id="changeStatus" parameterType="com.entity.Role">
        update role set STATUS=#{status}
        where id=#{id}
    </update>
</mapper>

service.role.RoleService.java

public interface RoleService {
    List<Role> queryAllRole(Integer page,Integer limit);

    Integer countRole();

    Integer changeStatus(Role role);
}

service.role.RoleServiceImpl.java

@Setter
@Service("roleService")
@Transactional(isolation = Isolation.DEFAULT,propagation = Propagation.REQUIRED,timeout = -1,readOnly = false,rollbackFor = Exception.class)
public class RoleServiceImpl implements RoleService{

    @Autowired
    private RoleDAO roleDAO;

    @Override
    public List<Role> queryAllRole(Integer page,Integer limit) {
        PageHelper.startPage(page,limit);
        return roleDAO.queryAllRole();
    }

    @Override
    public Integer countRole() {
        return roleDAO.countRole();
    }

    @Override
    public Integer changeStatus(Role role) {
        return roleDAO.changeStatus(role);
    }
}

controller.RoleController.java

@RestController
@CrossOrigin(value = "http://localhost:8989",allowCredentials = "true")
public class RoleController {

    @Autowired
    private RoleService roleService;
}

功能

1. 登录

数据表：admin_user

1.1 前端

login.html

登录页面
layui的布局  layui-container
layui的form  layui-form
发送参数：email和password
响应：{"code":1}，响应成功后跳转首页
请求方式：不是传统的提交表单，而是ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script src="layui/layui.js"></script>
    <style>
        .layui-container {
            margin-top: 10%;
            width: 60%;
        }

        .layui-btn {
            margin-left: 20%;
        }

    </style>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md3"></div>
    <div class="layui-container">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">EMAIL</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
        </form>
    </div>
    <div class="layui-col-md3 layui-col-md-offset6"></div>
</div>

<script>
    layui.use('form', function () {
        var form = layui.form

        form.on('submit(login)', function (data) {
            layui.$.ajax({
                type: "get",
                url: "http://localhost:8080/ssm/login",
                data: {"email": data.field.email, "password": data.field.password},
                dataType: "json",

                xhrFields: {
                    // 跨域携带cookie
                    withCredentials: true
                },
                success: function (ret) {
                    console.log(ret)
                    if (ret.code > 0) {
                        layer.msg("登录成功")
                        location.href="index.html"
                    } else {
                        layer.msg("用户名密码错误")
                    }
                }
            });
        })
    })

</script>
</body>
</html>

1.2 后端

UserController.java

@RestController
@CrossOrigin(value = "http://localhost:8989",allowCredentials = "true")

public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 登录
     * @param email
     * @param password
     * @param session
     * @return
     */
    @GetMapping("/login")
    public UserResult login(String email, String password, HttpSession session){
        User user = userService.queryUserByEmail(email,password);
        session.setAttribute("user", user);
        if (user !=null) {
            System.out.println("-----login-----");
            System.out.println(session.getAttribute("user"));

            System.out.println("登录成功");
            return new UserResult(user);
        }
        else {
            System.out.println("失败");
            return new UserResult();
        }
    }

}

2.首页显示当前登录管理员姓名

前端

index.html

<script>
    $(function () {
        // AJAX加载用户名
        $.ajax({
           url:"/ssm/aname",
           type:"get",
            dataType:"json",
            xhrFields: {
                    // 跨域携带cookie
                    withCredentials: true
                },
                crossDomain: true,
           success:function (ret) {
               var adminname=ret.adminname
               console.log(ret.adminname)
               if(adminname!=""){

                   $("#aname").text(adminname)
               }else {
                   $("#aname").text("请登录")
                   $("#aname").attr("href","login.html")
                   $("#logout").hide()
               }
           } 
        });
    })
</script>

后端

UserController.java

    /**
     * 获取登录管理员名字
     * @param session
     * @return
     */
    @GetMapping("/uname")
    public UserResult getUserName(HttpSession session){
        User user = (User) session.getAttribute("user");
        System.out.println("-----uname-----");
        if(user !=null){
            return  new UserResult(user.getRealName());
        }
        return new UserResult("");
    }

3. 管理员退出登录

前端

<script>
    function logout() {
        $.ajax({
            type:"get",
            url:"/ssm/logout",
            xhrFields: {
                    // 跨域携带cookie
                    withCredentials: true
                },
                crossDomain: true,
            success:function (ret) {
                if (ret.code==1){
                    location.href="login.html"
                }
            }
        })
    }
</script>

后端

UserController.java

    /**
     * 退出登录
     * @param session
     * @return
     */
    @RequestMapping("/logout")
    public UserResult logoutUser(HttpSession session){
        session.invalidate();
        return new UserResult(1);
    }

4. 显示侧边导航栏

前端

为了防止异步过程中渲染不到，所以将ajax代码块放入一开始，对页面渲染后直接对导航栏渲染

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

        $.ajax({
            url: "http://localhost:8080/ssm/menu",
            type: "get",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (ret) {
                console.log(ret)
                var menus = ret.menus
                $('#index_nav').empty() // 清空导航中原始内容
                for (var i = 0; i < menus.length; i++) {
                    var index_li
                    if (menus[i].url) {
                        index_li = $('<li class="layui-nav-item layui-nav-itemed"><a href="javascript:void(0)" οnclick="goPage(\'' + menus[i].url + '\')">' + menus[i].name + '</a></li>')
                    } else {
                        index_li = $('<li class="layui-nav-item layui-nav-itemed"><a href="javascript:void(0)">' + menus[i].name + '</a></li>')
                    }

                    if (menus[i].menus) {
                        var index_dl = $('<dl class="layui-nav-child"></dl>')
                        for (var j = 0; j < menus[i].menus.length; j++) {
                            index_dl.append('<dd><a href="javascript:void(0)" οnclick="goPage(\'' + menus[i].menus[j].url + '\')">' + menus[i].menus[j].name + '</a></dd>')
                        }
                        index_li.append(index_dl)
                    }
                    $('#index_nav').append(index_li)
                }
                element.render(); // 对新加入的页面中的元素进行渲染
            }
        })
    });
</script>

后端

@RestController
@CrossOrigin(value = "http://localhost:8989",allowCredentials = "true")
public class MenuController {

    @Autowired
    private MenuService menuService;

    /**
     * 侧边导航栏
     * @return
     */
    @GetMapping("/menu")
    public MenuResult userMenu(HttpSession session){
        Admin admin = (Admin) session.getAttribute("admin");
        List<Menu> menuList = menuService.queryUserMenu(admin.getId());
        System.out.println("======menu=====");

        for (Menu menu : menuList) {
            System.out.println(menu);
        }
        if(!menuList.isEmpty()){
            return new MenuResult(menuList);
        }else {
            return new MenuResult(new ArrayList<>());
        }
    }
}

5. 用户管理

带分页功能，前端数据表格状态一栏显示有效或无效

前端

<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#user_table'
            ,height:350
            , url: 'http://localhost:8080/ssm/userList' //数据接口
            , dataType: "json"
            , page: true //开启分页
            , toolbar: true

            , xhrFields: {
                withCredentials: true
            }
            ,crossDomain: true
            , cols: [[ //表头
                {type: 'checkbox'}
                , {field: 'id', title: 'ID',}
                , {field: 'email', title: '邮箱'}
                , {field: 'realName', title: '姓名'}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        return (d.status == 1) ? "<span class=\"layui-badge layui-bg-green\">有效</span>" : "<span class=\"layui-badge \">无效</span>"
                    }
                }
                , {field: "right", title: "操作", toolbar: '#barDemo'}
            ]]
            ,page:{
                limit:5
                ,limits:[5,6,7]
                ,prev:'<i class="layui-icon layui-icon-prev"></i>'
                ,next:'<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev','page','next','count','limit','skip','refresh']
            }
        });

    });
</script>
<script type="text/html" id="barDemo">
    <!-- lay-event标识事件类型，在点击回调中可以获取 -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

后端

UserController.java

    /**
     * 查询所有用户信息
     * @return
     */
    @GetMapping("/userList")
    public UserResult allUser(Integer page,Integer limit){
        Integer count = userService.countUser();
        List<User> userList = userService.queryAllUser(page,limit);
        if(userList.isEmpty()) {
            return new UserResult(1, "没有数据", 0, new ArrayList<>());
        }else {
            return new UserResult(0, "", count, userList);
        }
    }

6. 批量删除

修改多个用户的状态，status属性1->0

前端

// toolbar 是表头工具条事件名
        table.on('toolbar(testTable)', function (obj) {
            var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            // 在头工具栏事件中  获取被选中的行
            var checkStatus = table.checkStatus('user_table'); //idTest 即为基础参数 id 对应的值
            // console.log(checkStatus.data) //获取选中行的数据
            // console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            // console.log(checkStatus.isAll) //表格是否全选
            if (layEvent == "add") {
            	// 添加功能
                layer.msg("add")
            } else if (layEvent == "del") {
            	// 删除功能
                var ids = []
                confirm("确认删除")
                {
                    var rows = table.checkStatus('user_table');
                    // console.log(rows.data);
                    for (var i in rows.data) {
                        console.log(rows.data[i].id)
                        ids.push(rows.data[i].id)
                    }
                    // console.log(ids)

                    $.ajax({
                        type: "get",
                        url: "http://localhost:8080/ssm/del",
                        data: "ids=" + ids,
                        xhrFields: {
                            // 跨域携带cookie
                            withCredentials: true
                        },
                        crossDomain: true,
                        success: function (ret) {
                            if (ret) {
                                layer.msg("操作成功");
                                table.reload("user_table")
                            }
                        }
                    });
                }
            }
        });

后端

UserController.java

    /**
     * 批量删除（修改status属性1->0）
     * @param ids
     * @return
     */
    @RequestMapping("/del")
    public UserResult delMultipleUser(Integer[] ids){
        int res = userService.delMultiple(ids);
        return (res>0)?new UserResult(0):new UserResult(1);

    }

7. 给单个用户授权

将用户status属性0->1

前端

        table.on('tool(testTable)', function (obj) { //tool 是行工具条事件名
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            // console.log(data);
            // console.log(layEvent);
            if (layEvent == "edit") {
                console.log(layEvent);
                // 编辑功能
            } else if (layEvent == "authorize") {
                // 授权功能
                console.log(layEvent)
                console.log(data.id)
                var id = data.id
                confirm("确认授权")
                {
                    $.ajax({
                        type: "get",
                        url: "http://localhost:8080/ssm/author",
                        data: "id=" + id,
                        xhrFields: {
                            // 跨域携带cookie
                            withCredentials: true
                        },
                        crossDomain: true,
                        success: function (ret) {
                            if (ret) {
                                layer.msg("操作成功");
                                table.reload("user_table")
                            }
                        }
                    });
                }
            }
        });
    });

后端

    /**
     * 授权（修改status属性0->1）
     * @param id
     * @return
     */
    @RequestMapping("/author")
    public UserResult authorizeUser(Integer id){
        int res = userService.authorizeUser(id);
        return (res>0)?new UserResult(0):new UserResult(1);
    }

8. 新增用户

前端

利用layui.open() 点击“新增”按钮后在页面生成一个弹窗
在这里插入图片描述

    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        // toolbar 是表头工具条事件名
        table.on('toolbar(testTable)', function (obj) {
            var layEvent = obj.event; 
            var checkStatus = table.checkStatus('user_table'); 
            if (layEvent == "add") {
                add_layer_index = layer.open({
                    type: 1,
                    title: ["添加用户", "padding-left:5px"],
                    content: layui.$("#user_add_form"),
                    shade: false
                });
            } else if (layEvent == "del") {
            	// 删除
			}
        });

        // 注册表单提交
        form.on('submit(user_add_submit)', function (data) {
            console.log(data)
            var formData = data.field // 表单中的数据
            console.log(data.field)
            $.ajax({
                type:"post",
                url:"http://localhost:8080/ssm/addUser",
                data:JSON.stringify(formData),
                contentType:"application/json",
                xhrFields: {
                    // 跨域携带cookie
                    withCredentials: true
                },
                crossDomain: true,
                success:function (ret) {
                    if(ret.code==1){
                        layer.close(add_layer_index)
                        layer.msg("增加成功")
                        table.reload("user_table")
                    }
                }
            })
        })
    });

<div id="user_add_form" style="display: none;padding: 10px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">邮箱</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="text" name="email" placeholder="email" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">密码</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="text" name="password" placeholder="password" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">姓名</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="text" name="realName" placeholder="name" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">状态</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="radio" name="status" value="0" title="无效">
                <input type="radio" name="status" value="1" title="有效" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px">
                <button type="button" class="layui-btn" lay-submit lay-filter="user_add_submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

后端

    /**
     * 添加新用户
     * @param user
     * @return
     */
    @RequestMapping("/addUser")
    public UserResult addUser(@RequestBody User user){
        System.out.println("-----addUser-----");
        System.out.println(user);
        int res = userService.addUser(user);
        return (res>0)?new UserResult(1):new UserResult(0);
    }

9. 修改用户

前端

直接在前端获取数据，回填到变表单中。不再通过sql语句查询单条数据

    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        table.on('tool(testTable)', function (obj) { 
            var data = obj.data; 
            var layEvent = obj.event; 
            var tr = obj.tr; 
            if (layEvent == "edit") {
                edit_layer_index = layer.open({
                    type:1,
                    title:["编辑","padding-left:5px"],
                    content:layui.$("#user_edit_form"),
                    shade:false,
                    area:"500px",
                })
                console.log(data)
                // 表单回填
                form.val("user_edit",data)
            } else if (layEvent == "authorize") {
				// 授权
            }
        });

        // 编辑表单提交
        form.on('submit(user_edit_submit)',function (data) {
            var updatFormData = data.field
            $.ajax({
                type:"post",
                url:"http://localhost:8080/ssm/updatUser",
                data:JSON.stringify(updatFormData),
                contentType:"application/json",
                xhrFields: {
                    // 跨域携带cookie
                    withCredentials: true
                },
                crossDomain: true,
                success:function (ret) {
                    if(ret.code==1){
                        layer.close(edit_layer_index)
                        layer.msg("修改成功")
                        table.reload("user_table")
                    }else {
                        layer.close(edit_layer_index)
                        layer.msg("修改失败")
                    }
                }
            });
        })

    });

<!--编辑表单-->
<div id="user_edit_form" style="display: none;padding: 10px;">
    <form class="layui-form" lay-filter="user_edit">
        <input type="hidden" name="id" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">邮箱</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="text" name="email" placeholder="email" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">密码</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="text" name="password" placeholder="password" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">姓名</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="text" name="realName" placeholder="name" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">状态</label>
            <div class="layui-input-block" style="margin-left:60px">
                <input type="radio" name="status" value="0" title="无效">
                <input type="radio" name="status" value="1" title="有效" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px">
                <button type="button" class="layui-btn" lay-submit lay-filter="user_edit_submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

后端

    /**
     * 更新用户
     * @param user
     * @return
     */
    @RequestMapping("/updatUser")
    public UserResult updatUser(@RequestBody User user){
        System.out.println("-----updatUser-----");
        int res = userService.updateUser(user);
        return (res>0)?new UserResult(1):new UserResult(0);
    }

10. 角色管理

前端

<script>
    layui.use(['table','layer','form'],function () {
        var table = layui.table
        var layer = layui.layer
        var form = layui.form

        table.render({
            elem:'#role_table',
            url:'http://localhost:8080/ssm/roleList',
            page:true,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            toolbar:'#toolBarDemo',
            cols: [[ //表头
                {type: 'checkbox'}
                , {field: 'id', title: 'ID',}
                , {field: 'name', title: '姓名'}
                , {field: 'remark', title: '角色'}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        return (d.status == 1) ? "<input type=\"checkbox\" name=\"status\" lay-filter='status' value=\""+d.id+"\" lay-skin=\"switch\" lay-text=\"有效|无效\" checked>" : "<input type=\"checkbox\" name=\"status\" lay-filter='status' value=\""+d.id+"\" lay-skin=\"switch\" lay-text=\"有效|无效\">"
                    }
                }
                , {field: "right", title: "操作", toolbar: '#barDemo'}
            ]],
            page: {
                limit: 5
                , limits: [5, 8, 10]
                , prev: '<i class="layui-icon layui-icon-prev"></i>'
                , next: '<i class="layui-icon layui-icon-next"></i>'
                , layout: ['prev', 'page', 'next', 'count', 'limit', 'skip', 'refresh']
            }
        });
    })
</script>

后端

    /**
     * 查询所有角色信息
     * @param page
     * @param limit
     * @return
     */
    @RequestMapping("/roleList")
    public RoleResult allRole(Integer page,Integer limit){
        List<Role> roleList = roleService.queryAllRole(page,limit);
        if(roleList.isEmpty()){
            return new RoleResult(1,"没有数据",0,new ArrayList<>());
        }else {
            return new RoleResult(0,"",roleService.countRole(),roleList);
        }
    }

11. 修改角色权限

前端

 layui.use(['table','layer','form'],function () {
        var table = layui.table
        var layer = layui.layer
        var form = layui.form
        
        form.on('switch(status)',function (data) {
            // console.log(data)
            // console.log(data.elem.checked)
            // console.log(data.value)
            $.ajax({
                type:"post",
                url:"http://localhost:8080/ssm/changeStatus",
                data:"id="+data.value+"&status="+data.elem.checked,
                success:function (ret) {
                    if(ret){
                        layer.msg("修改成功")
                    }else {
                        layer.msg("修改失败")
                    }
                }
            });
        })
	}

后端

    /**
     * 修改角色状态
     * @param id
     * @param status
     * @return
     */
    @RequestMapping("/changeStatus")
    public RoleResult changeStatus(Integer id,Boolean status){
        Role role = new Role(id,status);
        Integer res = roleService.changeStatus(role);
        return (res>0)?new RoleResult(0):new RoleResult(1);
    }

普通还不自信的程序员

关注

2
点赞
踩
38

收藏

觉得还不错? 一键收藏
8
评论
ssm框架：后台管理系统

本项目采用前后端项目分离模式前端：project_tyep3_web后端：project_tyep3_ssm准备工作0. 库表初始化mysql -uroot -p111111create database dbplatform default charset=utf8; -- 创建数据库use dbplatform;source E:\QFtrain\mysqldatabase\dump.sql; --在当前数据下，执行sql脚本1. 后端配置文件src/main/webapp/WE
复制链接

扫一扫

专栏目录