构建后台管理系统

https://www.yuque.com/docs/share/e426e9d5-4d64-4962-a4f9-9af6f06480f6?# 《SpringBoot》
链接有效期至 2022-05-20 14:28:05

1、项目创建

thymeleaf、web-starter、devtools、lombok

2、静态资源处理

自动配置好，我们只需要把所有静态资源放到 static 文件夹下

3、路径构建

th:action=“@{/login}”

4、模板抽取

th:insert/replace/include

5、登陆的页面跳转

    @PostMapping("/login")
    public String main(User user, HttpSession session, Model model){

        if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
            //把登陆成功的用户保存起来
            session.setAttribute("loginUser",user);
            //登录成功重定向到main.html;  重定向防止表单重复提交
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","账号密码错误");
            //回到登录页面
            return "login";
        }

    }

6、登录之后的拦截器

配置拦截器步骤：
● 1、编写一个拦截器 实现HandlerInterceptor 接口
● 2、拦截器注册到容器中 （实现WebMvcConfigurer 的 addInterceptor方法）
● 3、指定拦截器规则【如果拦截所有，静态资源也会被拦截】

1、LoginHandlerInterceptor

package com.baidu.admin.interceptor;


import lombok.extern.slf4j.Slf4j;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * 1、配置好拦截器要拦截什么请求
 * 2、把这些配置放在容器中
 */
@Slf4j
public class LoginInterceptor implements HandlerInterceptor {

    //目标方法执行前
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        //判断用户是否登录，session
        HttpSession session = request.getSession();
        Object loginUser = session.getAttribute("loginUser");

        //有用户名，放行
        if (loginUser != null){
            return true;
        }

        //拦截
//        session.setAttribute("msg","请先登录");
//        response.sendRedirect("/");
        request.setAttribute("msg","请先登录");
        request.getRequestDispatcher("/").forward(request,response);
        return false;
    }

    //目标方法执行完成后
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
    }

    //页面渲染之后
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

2、注册到容器中
3、指定拦截规则

package com.baidu.admin.config;

        import com.baidu.admin.interceptor.LoginInterceptor;
        import org.springframework.context.annotation.Configuration;
        import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
        import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 1、编写一个拦截器 实现HandlerInterceptor 接口
 * 2、拦截器注册到容器中 （实现WebMvcConfigurer 的 addInterceptor方法）
 * 3、指定拦截器规则【如果拦截所有，静态资源也会被拦截】
 */
@Configuration
public class AdminWebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginInterceptor())
                .addPathPatterns("/**")   //拦截所有的请求,静态资源所有请求也会被拦截。
                .excludePathPatterns("/","/login","/css/**","/fonts/**","/images/**","/js/**");  //放行请求

    }

}

遍历数据，并返回前端

1、这里使用的使用的时自己重建的数据，也可以从数据库中查询。

// 查询到数据库的全部数据。
List<User> list = userService.list();
System.out.println("查询全部的数据==》"+list);

    @GetMapping("/dynamic_table")
    public String dynamic_table(Model model){
        //表格内容的遍历
        List<User> users = Arrays.asList(new User("zhangsan", "123456"),
                new User("lisi", "123444"),
                new User("haha", "aaaaa"),
                new User("hehe ", "aaddd"));
        model.addAttribute("users",users);

        return "table/dynamic_table";
    }

2、前端页面，解析数据

<div class="panel-body">
    <div class="adv-table">
        <table class="display table table-bordered" id="hidden-table-info">
            <thead>
                <tr>
                    <th>#</th>
                    <th>用户名</th>
                    <th>密码</th>
                </tr>
            </thead>

            <tbody>
                <tr class="gradeX" th:each="user,stats:${users}">
                    <td th:text="${stats.count}"></td>
                    <td th:text="${user.userName}"></td>
                    <td th:text="${user.password}"></td>
                </tr>

            </tbody>
        </table>

    </div>
</div>

分页操作

Springboot实现分页操作；

1、加入依赖

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.1</version>
</dependency>

2、Mybatis-Plus工具类

@Configuration
public class MyBatisPageConfig {

    @Bean
    public MybatisPlusInterceptor paginationInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();

        //这是分页拦截器
        PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();
        paginationInnerInterceptor.setOverflow(true);
        paginationInnerInterceptor.setMaxLimit(500L);

        mybatisPlusInterceptor.addInnerInterceptor(paginationInnerInterceptor);
        return mybatisPlusInterceptor;


    }
}

3、测试

mapper

UserMapper

package com.baidu.admin.mapper;

import com.baidu.admin.bean.User;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.springframework.stereotype.Repository;

@Repository
public interface UserMapper extends BaseMapper<User> {


}

这里用到userService；需要创建UserService接口和实现类

注意：由于是mybatis-plus需要继承 IService

package com.baidu.admin.service;

import com.baidu.admin.bean.User;
import com.baomidou.mybatisplus.extension.service.IService;

public interface UserService extends IService<User> {

}

UserServiceImpl

package com.baidu.admin.service.impl;

import com.baidu.admin.bean.User;
import com.baidu.admin.mapper.UserMapper;
import com.baidu.admin.service.UserService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {

}

Controller层

@Controller
public class TableController {

    @Autowired
    UserService userService;
    
    @GetMapping("/dynamic_table")
    public String dynamic_table(@RequestParam(value = "pn",defaultValue = "1")Integer pn, Model model){

        List<User> list = userService.list();

        //分页查询数据
        Page<User> userPage = new Page<>(pn,2);

        //分页查询的结果
        Page<User> page = userService.page(userPage, null);

        long current = page.getCurrent();
        long pages = page.getPages();
        long total = page.getTotal();
        List<User> records = page.getRecords();

        model.addAttribute("page",page);


        return "table/dynamic_table";
    }
}

4、编写前端

<div class="row-fluid">
  <div class="span6">
    <div class="dataTables_info" id="dynmaic-table_info">
      当前第 [[${page.current}]] 页 总计 [[${page.pages}]] 页 共 [[${page.total}]] 条记录
    </div>
  </div>

  <div class="span6">
  <div class="dataTables_paginate paging_bootstrap pagination">
    <ul>
        <li class="prev"><a href="#">前一页</a></li>
        <li th:class="${num == page.current?'active':''}" th:each="num:${#numbers.sequence(1,page.pages)}">
            <a th:href="@{/dynamic_table(pn=${num})}">[[${num}]]</a>
        </li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>
    </div>
  </div>
</div>

查询操作；

1、前端页面

  <form class="form-inline" th:action="@{/select}" method="get">
      <!--<span style="color: red;font-weight: bold;width: 20px">${error}</span>-->
      <div>
          <input type="text" name="name" class="form-control" placeholder="请输入要查询的名字：">
          <button type="submit" class="btn btn-success">查询</button>
      </div>
  </form>

2、Contoller层视图跳转

//查询
    @GetMapping("/select")
    public String select(User user,Model model){
        System.out.println("进入查询页面！"+user);

        HashMap<String, Object> map = new HashMap<>();
        map.put("name",user.getName());

        List<User> users = userMapper.selectByMap(map);

        model.addAttribute("users",users);


        return "table/select";
    }

3、跳转查询到页面，编写前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Dynamic Table</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css"/>

    <link th:replace="commont :: commontheader">
</head>

<body class="sticky-header">

<section>

    <div th:replace="commont :: leftmenu"></div>

    <!-- main content start-->
    <div class="main-content">

        <div th:replace="commont :: headermenu"></div>

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Dynamic Table
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Data Tables</a>
                </li>
                <li class="active"> Dynamic Table</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Dynamic Table
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>
                        <div class="panel-body">

                            <table class="display table table-bordered table-striped" id="dynamic-table">
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>name</th>
                                    <th>age</th>
                                    <th>email</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="gradeX" th:each="user:${users}">
                                    <td th:text="${user.id}"></td>
                                    <td th:text="${user.name}"></td>
                                    <td th:text="${user.age}"></td>
                                    <td th:text="${user.email}"></td>

                                    <td>
                                        <a class="btn btn-sm btn-success" th:href="@{/user/}+${user.getId()}">编辑</a>
                                        <a class="btn btn-sm btn-danger" th:href="@{/delete/}+${user.getId()}">删除</a>
                                    </td>

                                </tr>

                                <!--</tbody>-->
                                <!--<tfoot>-->
                                <!--<tr>-->
                                <!--<th>Rendering engine</th>-->
                                <!--<th>Browser</th>-->
                                <!--<th>Platform(s)</th>-->
                                <!--<th class="hidden-phone">Engine version</th>-->
                                <!--<th class="hidden-phone">CSS grade</th>-->
                                <!--</tr>-->
                                <!--</tfoot>-->
                            </table>


                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            DataTables hidden row details example
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>

                        <div class="panel-body">
                            <div class="adv-table">
                                <table class="display table table-bordered" id="hidden-table-info">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>用户名</th>
                                        <th>密码</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr class="gradeX" th:each="user,stats:${users}">
                                        <td th:text="${stats.count}"></td>
                                        <td th:text="${user.userName}"></td>
                                        <td th:text="${user.password}"></td>
                                    </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<div th:replace="commont :: commontscript"></div>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--&lt;!&ndash;dynamic table initialization &ndash;&gt;-->
<!--<script src="js/dynamic_table_init.js"></script>-->

<!--&lt;!&ndash;common scripts for all pages&ndash;&gt;-->
<!--<script src="js/scripts.js"></script>-->
</body>
</html>

重要的就是那几行table 标签里面的数据，也可以使用dynamic_table.html的复用。

4、测试结果OK；

添加数据

需求：点击添加按钮，页面跳转到调价页面的前端。点击添加，添加到后台。

1、前端添加按钮；

<h2>
	<a class="btn btn-sm btn-success" th:href="@{/addEmp}">添加数据</a>
</h2>

2、点击按钮，提交到addEmp请求，Controller层控制跳转页面；

    //添加数据,跳转到新的页面
    @RequestMapping("/addEmp")
    public String addEmp(){

        return "table/addEmp";
    }

3、编写跳转跳转到前端的页面；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>添加页面</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css"/>

    <link th:replace="commont :: commontheader">
</head>

<body class="sticky-header">

<section>

    <div th:replace="commont :: leftmenu"></div>

    <!-- main content start-->
    <div class="main-content">

        <div th:replace="commont :: headermenu"></div>

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Dynamic Table
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Data Tables</a>
                </li>
                <li class="active"> Dynamic Table</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Dynamic Table
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>
                        <div class="panel-body">

                            <form th:action="@{/add}" method="post">
                                <!--<a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a>-->
                                <!--<input type="hidden" name="id" th:value="${emp.getId()}">-->

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">name</label>
                                    <div class="col-sm-10">
                                        <input  type="text" name="name" class="form-control" id="inputid3" placeholder="name">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">age</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="age" class="form-control" placeholder="age">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                                    <div class="col-sm-10">
                                        <input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email">
                                    </div>
                                </div>

                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-success">添加</button>
                                </div>
                            </form>


                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            DataTables hidden row details example
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>

                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<div th:replace="commont :: commontscript"></div>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--&lt;!&ndash;dynamic table initialization &ndash;&gt;-->
<!--<script src="js/dynamic_table_init.js"></script>-->

<!--&lt;!&ndash;common scripts for all pages&ndash;&gt;-->
<!--<script src="js/scripts.js"></script>-->
</body>
</html>

这里点击添加，from表单提交请求：（提交/add请求）,Controller进行控制，跳转页面；
4、点击添加；添加到后台数据

  //添加
    @PostMapping("/add")
    public String add(User user){
        System.out.println("添加成功！！！");
        System.out.println(user);
        userMapper.insert(user);
        System.out.println(user);
        return "redirect:/dynamic_table";
    }

删除数据

需求：点击删除按钮，删除当前数据；
1、前端删除按钮；

<td>
	<a class="btn btn-sm btn-success" th:href="@{/user/}+${user.getId()}">编辑</a>
	<a class="btn btn-sm btn-danger" th:href="@{/delete/}+${user.getId()}">删除</a>
</td>

2、点击删除，删除数据；

    //删除数据
    @GetMapping("/delete/{id}")
    public String delete(@PathVariable("id")int id){

        System.out.println("delete-->"+id);

        userMapper.deleteById(id);

        return "redirect:/dynamic_table";
    }

修改数据

需求：点击修改，修改当前的数据
1、前端修改页面，点击跳转请求；

<td>
	<a class="btn btn-sm btn-success" th:href="@{/user/}+${user.getId()}">编辑</a>
	<a class="btn btn-sm btn-danger" th:href="@{/delete/}+${user.getId()}">删除</a>
</td>

2、点击修改，跳转修改页面；Controller层

//跳转修改页面
    @GetMapping("/user/{id}")
    public String update(@PathVariable("id")int id,Model model){

        System.out.println("进入修改页面！！");
        //查询原来的数据
        User byId = userService.getById(id);

        model.addAttribute("emp",byId);

        return "table/update";
    }

3、前端修改页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Dynamic Table</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css"/>

    <link th:replace="commont :: commontheader">
</head>

<body class="sticky-header">

<section>

    <div th:replace="commont :: leftmenu"></div>

    <!-- main content start-->
    <div class="main-content">

        <div th:replace="commont :: headermenu"></div>

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Dynamic Table
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Data Tables</a>
                </li>
                <li class="active"> Dynamic Table</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Dynamic Table
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>
                        <div class="panel-body">

                            <form th:action="@{/update}" method="post">
                                <!--<a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a>-->
                                <input type="hidden" name="id" th:value="${emp.getId()}">

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">name</label>
                                    <div class="col-sm-10">
                                        <input th:value="${emp.getName()}" type="text" name="name" class="form-control" id="inputid3" placeholder="id">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">age</label>
                                    <div class="col-sm-10">
                                        <input th:value="${emp.getAge()}" type="text" name="age" class="form-control" placeholder="name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                                    <div class="col-sm-10">
                                        <input th:value="${emp.getEmail()}" type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email">
                                    </div>
                                </div>

                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-success">修改</button>
                                </div>
                            </form>


                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            DataTables hidden row details example
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>

                        <div class="panel-body">
                            <div class="adv-table">
                                <table class="display table table-bordered" id="hidden-table-info">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>用户名</th>
                                            <th>密码</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr class="gradeX" th:each="user,stats:${users}">
                                            <td th:text="${stats.count}"></td>
                                            <td th:text="${user.userName}"></td>
                                            <td th:text="${user.password}"></td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<div th:replace="commont :: commontscript"></div>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--&lt;!&ndash;dynamic table initialization &ndash;&gt;-->
<!--<script src="js/dynamic_table_init.js"></script>-->

<!--&lt;!&ndash;common scripts for all pages&ndash;&gt;-->
<!--<script src="js/scripts.js"></script>-->
</body>
</html>

4、点击修改，数据提交到/update请求。提交当时post请求。

    //修改页面
    @PostMapping("/update")
    public String updateById(User user){
        System.out.println("修改成功！");
        userMapper.updateById(user);

        return "redirect:/dynamic_table";
    }