SpringBoot 企业级简化开发（二）https://developer.aliyun.com/article/1469560

4、登录+拦截器

4.1、登录

禁用模板缓存

说明：页面存在缓存，所以我们需要禁用模板引擎的缓存

#禁用模板缓存 
spring.thymeleaf.cache=false

模板引擎修改后，想要实时生效！页面修改完毕后，IDEA小技巧： Ctrl + F9 重新编译！即可生效！

我们这里就先不连接数据库了，输入任意用户名都可以登录成功！

1、我们把登录页面的表单提交地址写一个controller！

<form class="form-signin" th:action="@{/user/login}" method="post">
 //这里面的所有表单标签都需要加上一个name属性 
    
</form>

2、去编写对应的controller

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    public String login(
            @RequestParam("username") String username ,
            @RequestParam("password") String password,
            Model model){
        //具体的业务
        if(!StringUtils.isEmpty(username)&&"123456".equals(password)){
            return "redirect:/main.html";
        }
        else{
            //告诉用户，你登录失败
            model.addAttribute("msg","用户名或者密码错误！");
            return "index";
        }
    }
}

OK ，测试登录成功！

3、登录失败的话，我们需要将后台信息输出到前台，可以在首页标题下面加上判断

<!--判断是否显示，使用if, ${}可以使用工具类，可以看thymeleaf的中文文档--> 
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"> 
</p>

重启登录失败测试：

优化，登录成功后，由于是转发，链接不变，我们可以重定向到首页！

4、我们再添加一个视图控制映射，在我们的自己的MyMvcConfifig中：

registry.addViewController("/main.html").setViewName("dashboard");

5、将 Controller 的代码改为重定向；

//登录成功！防止表单重复提交，我们重定向 
return "redirect:/main.html";

重启测试，重定向成功！后台主页正常显示！

4.2、登录拦截器

但是又发现新的问题，我们可以直接登录到后台主页，不用登录也可以实现！怎么处理这个问题呢？我

们可以使用拦截器机制，实现登录检查！

1、在LoginController添加serssion

session.setAttribute("loginUser",username);

2、自定义一个拦截器：

//自定义拦截器
public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //获取 loginUser 信息进行判断
        Object user = request.getSession().getAttribute("loginUser");
        if(user == null){//未登录，返回登录页面
            request.setAttribute("msg","没有权限，请先登录");
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }else{
            //登录，放行
            return true;
        }
    }
}

3、然后将拦截器注册到我们的SpringMVC配置类当中！

@Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 注册拦截器，及拦截请求和要剔除哪些请求!
        // 我们还需要过滤静态资源文件，否则样式显示不出来
        registry.addInterceptor(new LoginHandlerInterceptor())
                .addPathPatterns("/")
                .excludePathPatterns("/index.html","/user/login","/","/css/*","/img/","/js/");
}

4、我们然后在后台主页，获取用户登录的信息

<!--后台主页显示登录用户的信息-->
[[${session.loginUser}]] <!--$取EL表达式-->

然后我们登录测试拦截！完美！

5、展示员工列表

5.1、员工列表页面跳转

我们在主页点击Customers，就显示列表页面；我们去修改下

1、将首页的侧边栏Customers改为员工管理

2、a链接添加请求

<a class="nav-link" th:href="@{/emps}">员工管理</a>

3、将list放在emp文件夹下

4、编写处理请求的controller

//员工列表
@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;
    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getALL();
        model.addAttribute("emps",employees);
        return "emp/list";
    }
}

我们启动项目，测试一下看是否能够跳转，测试OK！我们只需要将数据渲染进去即可！

但是发现了一个问题，侧边栏和顶部都相同，我们是不是应该将它抽取出来呢？

5.2、Thymeleaf 公共页面元素抽取

步骤：

1、抽取公共片段 th:fragment 定义模板名

2、引入公共片段 th:insert 插入模板名

实现：

1、我们来抽取一下，使用list列表做演示！我们要抽取头部nav标签，我们在dashboard中将nav部分定

义一个模板名；

<!--顶部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a> <!--$取EL表达式-->
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">注销</a>
        </li>
    </ul>
</nav>

2、然后我们在list页面中去引入，可以删掉原来的nav

<!--引入抽取的topbar--> 
<!--模板名 ： 会使用thymeleaf的前后缀配置规则进行解析 使用~{模板::标签名}-->
<!--顶部导航栏-->
<div th:insert="~{dashboard::topbar}"></div>

3、启动再次测试，可以看到已经成功加载过来了！

说明：

除了使用insert插入，还可以使用replace替换，或者include包含，三种方式会有一些小区别，可以见名

知义；

我们使用replace替换，可以解决div多余的问题，可以查看thymeleaf的文档学习

侧边栏也是同理，当做练手，可以也同步一下！

定义模板：

<!--侧边栏-->
<nav th:fragment="sitebar" class="col-md-2 d-none d-md-block bg-light sidebar">

然后我们在list页面中去引入：

<!--侧边栏-->
<div th:insert="~{dashboard::sitebar}"></div>

启动再试试，看效果！

我们发现一个小问题，侧边栏激活的问题，它总是激活第一个；按理来说，这应该是动态的才对！

为了重用更清晰，我们建立一个commons文件夹，专门存放公共页面；

我们去页面中引入一下

<!--顶部导航栏-->
<div th:replace="~{commons/commons::topbar}"></div>
<!--侧边栏-->
<div th:replace="~{commons/commons::sidebar}"></div>

我们先测试一下，保证所有的页面没有出问题！ok！

侧边栏激活问题：

1、将首页的超链接地址改到项目中

2、我们在a标签中加一个判断，使用class改变标签的值；

<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>
    首页 <span class="sr-only">(current)</span>
</a>
<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
        <circle cx="9" cy="21" r="1"></circle>
        <circle cx="20" cy="21" r="1"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
    </svg>
    员工管理
</a>

3、修改请求链接

<div th:replace="~{commons/commons::topbar(active='main.html')}"></div>
<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>

4、我们刷新页面，去测试一下，OK，动态激活搞定！

5.3、员工信息页面展示

现在我们来遍历我们的员工信息！顺便美化一些页面，增加添加，修改，删除的按钮！

<thead>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>department</th>
        <th>birth</th>
    </tr>
</thead>
<tbody>
    <tr th:each="emp:${emps}">
        <td th:text="${emp.getId()}"></td>
        <td th:text="${emp.getLastName()}"></td>
        <td th:text="${emp.getEmail()}"></td>
        <td th:text="${emp.getGender()==0?'女':'男'}"></td>
        <td th:text="${emp.department.getDepartmentName()}"></td>
        <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
        <td>
            <button class="btn btn-sm btn-primary">编辑</button>
            <button class="btn btn-sm btn-danger">删除</button>
        </td>
    </tr>
</tbody>

**OK，显示全部员工OK！

6、添加员工实现

6.1、表单及细节处理

1、将添加员工信息改为超链接

<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a></h2>

2、编写对应的controller

//to员工添加页面 
@GetMapping("/emp") 
public String toAddPage(){ 
    return "emp/add"; 
}

3、添加前端页面；复制list页面，修改即可

bootstrap官网文档： https://v4.bootcss.com/docs/4.0/components/forms/

我们去可以里面找自己喜欢的样式！我这里给大家提供了编辑好的：

<form th:action="@{/emp}" method="post" >
    <div class="form-group" ><label>LastName</label>
        <input class="form-control" placeholder="kuangshen" type="text" name="lastName">
    </div>
    <div class="form-group" ><label>Email</label>
        <input class="form-control" placeholder="24736743@qq.com" type="email" name="email">
    </div>
    <div class="form-group"><label>Gender</label><br/>
        <div class="form-check form-check-inline">
            <input class="form-check-input" name="gender" type="radio" value="1">
            <label class="form-check-label">男</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" name="gender" type="radio" value="0">
            <label class="form-check-label">女</label>
        </div>
    </div>
    <div class="form-group" ><label>department</label>
        <select class="form-control" name="department.id">
            <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
        </select>
    </div>
    <div class="form-group" >
        <label >Birth</label>
        <input class="form-control" placeholder="kuangstudy" type="text" name="birth">
    </div>
    <button class="btn btn-primary" type="submit">添加</button>
</form>

4、部门信息下拉框应该选择的是我们提供的数据，所以我们要修改一下前端和后端

Controller

@GetMapping("/emp")
public String toAddPage(Model model){
    //查询所有的部门信息
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    return "emp/add";
}

前端

<select class="form-control" name="department.id">
    <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>

**OK，修改了controller，重启项目测试！

6.2、具体添加功能

1、修改add页面form表单提交地址和方式

<form th:action="@{/emp}" method="post"> 1

2、编写controller；

//员工添加功能
//接收前端传递的参数，自动封装成为对象[要求前端传递的参数名，和属性名一致]
@PostMapping ("/emp")
public String addEmp(Employee employee){
    //保存员工的信息
    System.out.println(employee);
    employeeDao.save(employee);
    // 回到员工列表页面，可以使用redirect或者forward，就不会被视图解析器解析
    return "redirect:/emps";
}

回忆：重定向和转发以及 /的问题？

时间格式问题

生日我们提交的是一个日期，我们第一次使用的 / 正常提交成功了，后面使用 - 就错误了，所以这里面

应该存在一个日期格式化的问题；

SpringMVC会将页面提交的值转换为指定的类型，默认日期是按照 / 的方式提交；比如将2019/01/01

转换为一个date对象。

那思考一个问题？我们能不能修改这个默认的格式呢？

这个在配置类中，所以我们可以自定义的去修改这个时间格式化问题，我们在我们的配置文件中修改一

下；

spring.mvc.date-format=yyyy-MM-dd

这样的话，我们现在就支持 - 的格式了，但是又不支持 / 了， 2333吧

测试OK！

7、修改员工信息

逻辑分析：

我们要实现员工修改功能，需要实现两步；

1、点击修改按钮，去到编辑页面，我们可以直接使用添加员工的页面实现

2、显示原数据，修改完毕后跳回列表页面！

实现

1、我们去实现一下，首先修改跳转链接的位置；

<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>

2、编写对应的controller

//员工修改页面
@GetMapping("/emp/{id}")
public String toUpdateEmp(@PathVariable("id") Integer id,Model model){
    Employee employee = employeeDao.getEmployeeById(id);
    model.addAttribute("emp",employee);
    //查询所有的部门信息
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    return "emp/update";
}

3、我们需要在这里将add页面复制一份，改为update页面；需要修改页面，将我们后台查询数据回显

<form th:action="@{/emp}" method="post" >
    <input type="hidden" name="id" th:value="${emp.getId()}">
    <div class="form-group" ><label>LastName</label>
        <input th:value="${emp.getLastName()}" class="form-control" placeholder="kuangshen" type="text" name="lastName">
    </div>
    <div class="form-group" ><label>Email</label>
        <input th:value="${emp.getEmail()}" class="form-control" placeholder="24736743@qq.com" type="email" name="email">
    </div>
    <div class="form-group"><label>Gender</label><br/>
        <div class="form-check form-check-inline">
            <input th:checked="${emp.getGender()==1}" class="form-check-input" name="gender" type="radio" value="1">
            <label class="form-check-label">男</label>
        </div>
        <div class="form-check form-check-inline">
            <input th:checked="${emp.getGender()==0}" class="form-check-input" name="gender" type="radio" value="0">
            <label class="form-check-label">女</label>
        </div>
    </div>
    <div class="form-group" ><label>department</label>
        <select class="form-control" name="department.id">
            <option th:selected="${dept.id==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
        </select>
    </div>
    <div class="form-group" >
        <label >Birth</label>
        <input th:value="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}" class="form-control" placeholder="2021-02-02" type="text" name="birth">
    </div>
    <button class="btn btn-primary" type="submit">修改</button>
</form>

数据回显OK!

8、删除员工实现与404页面处理

1、list页面，编写提交地址

<a class="btn btn-sm btn-danger"  th:href="@{/delEmp/}+${emp.getId()}">删除</a>

2、编写Controller

//删除员工
@GetMapping("/delEmp/{id}")
public String delEmp(@PathVariable("id") Integer id){
    employeeDao.delete(id);
    return "redirect:/emps";
}
测试OK！ 
、、
> 注销
1、注销请求
```html

9、404及注销

注销请求

<a class="nav-link" th:href="@{/user/logout}">注销
</a>

404:

我们只需要在模板目录下添加一个error文件夹，文件夹中存放我们相应的错误页面；

比如404.html 或者 4xx.html 等等，SpringBoot就会帮我们自动使用了！

测试使用！

2、对应的controller

@RequestMapping("/user/logout")
    public String logout(HttpSession session){
        session.invalidate();
        return "redirect:/index.html";
    }

后端人员开发如何开发一个网站

框架：vue，layui，bootstrap，

模版：由他人写好，功能齐全，简单修改后上手直接开发，

如何快速的搭建一个web应用：
前端：页面长什么样子
数据库：设计数据库: 难点
前端能让他自动运行：独立化工程，如果实在是不想，就 all in one
前后端联调！

layui免费模版，x-admin

SpringData

对于数据访问层，无论是nosql还是sql数据库，SpringBoot的底层都是用Springdata去统一处理

SpringBoot：Springdata的官方文档地址：

https://spring.io/projects/spring-data

新项目：Spring-boot-data

项目搭建完成后肯定导入相关启动器，

之后是数据源的配置：

使用学习mybtis的数据库，配置相关yml
SpringBoot的默认是用的mysql8，所以如果出现时区报错，那么我们就添加时区，
serverTimezone="UTC"来解决异durid

druid

durid的常用配置参数

配置	缺省值	说明
name		配置这个属性的意义在于，如果存在多个数据源，监控的时候可以通过名字来区分开来。如果没有配置，将会生成一个名字，格式是："DataSource-" + System.identityHashCode(this)
jdbcUrl		连接数据库的url，不同数据库不一样。例如： mysql : jdbc:mysql://10.20.153.104:3306/druid2 oracle : jdbc:oracle:thin:@10.20.149.85:1521:ocnauto
username		连接数据库的用户名
password		连接数据库的密码。如果你不希望密码直接写在配置文件中，可以使用ConfigFilter。详细看这里：https://github.com/alibaba/druid/wiki/使用ConfigFilter
driverClassName	根据url自动识别	这一项可配可不配，如果不配置druid会根据url自动识别dbType，然后选择相应的driverClassName(建议配置下)
initialSize	0	初始化时建立物理连接的个数。初始化发生在显示调用init方法，或者第一次getConnection时
maxActive	8	最大连接池数量
maxIdle	8	已经不再使用，配置了也没效果
minIdle		最小连接池数量
maxWait		获取连接时最大等待时间，单位毫秒。配置了maxWait之后，缺省启用公平锁，并发效率会有所下降，如果需要可以通过配置useUnfairLock属性为true使用非公平锁。
poolPreparedStatements	false	是否缓存preparedStatement，也就是PSCache。PSCache对支持游标的数据库性能提升巨大，比如说oracle。在mysql下建议关闭。
maxOpenPreparedStatements	-1	要启用PSCache，必须配置大于0，当大于0时，poolPreparedStatements自动触发修改为true。在Druid中，不会存在Oracle下PSCache占用内存过多的问题，可以把这个数值配置大一些，比如说100
validationQuery		用来检测连接是否有效的sql，要求是一个查询语句。如果validationQuery为null，testOnBorrow、testOnReturn、testWhileIdle都不会其作用。
testOnBorrow	true	申请连接时执行validationQuery检测连接是否有效，做了这个配置会降低性能。
testOnReturn	false	归还连接时执行validationQuery检测连接是否有效，做了这个配置会降低性能
testWhileIdle	false	建议配置为true，不影响性能，并且保证安全性。申请连接的时候检测，如果空闲时间大于timeBetweenEvictionRunsMillis，执行validationQuery检测连接是否有效。
timeBetweenEvictionRunsMillis		有两个含义： 1) Destroy线程会检测连接的间隔时间2) testWhileIdle的判断依据，详细看testWhileIdle属性的说明
numTestsPerEvictionRun		不再使用，一个DruidDataSource只支持一个EvictionRun
minEvictableIdleTimeMillis
connectionInitSqls		物理连接初始化的时候执行的sql
exceptionSorter	根据dbType自动识别	当数据库抛出一些不可恢复的异常时，抛弃连接
filters		属性类型是字符串，通过别名的方式配置扩展插件，常用的插件有：监控统计用的filter:stat日志用的filter:log4j防御sql注入的filter:wall
proxyFilters		类型是List<com.alibaba.druid.filter.Filter>，如果同时配置了filters和proxyFilters，是组合关系，并非替换关系

SpringBoot 企业级简化开发（四）https://developer.aliyun.com/article/1469563

SpringBoot 企业级简化开发（三）

4、登录+拦截器

4.1、登录

4.2、登录拦截器

5、展示员工列表

5.1、员工列表页面跳转

5.2、Thymeleaf 公共页面元素抽取

5.3、员工信息页面展示

6、添加员工实现

6.1、表单及细节处理

6.2、具体添加功能

7、修改员工信息

8、删除员工实现与404页面处理

9、404及注销

注销请求

404:

后端人员开发如何开发一个网站

SpringData

druid

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

SpringBoot 企业级简化开发（三）

4、登录+拦截器

4.1、登录

4.2、登录拦截器

5、展示员工列表

5.1、员工列表页面跳转

5.2、Thymeleaf 公共页面元素抽取

5.3、员工信息页面展示

6、添加员工实现

6.1、表单及细节处理

6.2、具体添加功能

7、修改员工信息

8、删除员工实现与404页面处理

9、404及注销

注销请求

404:

后端人员开发如何开发一个网站

SpringData

druid

热门文章

最新文章

相关课程

相关电子书

相关实验场景