SpringBoot自学好几天 中途开始写笔记 SpringBoot Web开发 20190127

版权声明：本文为博主原创文章，未经博主允许不得转载,如需转载请在明显处标明出处！ https://blog.csdn.net/qq_36291682/article/details/86668621

登录

开发的时候使用模板引擎，修改页面内容不生效？
1.禁用模板缓存

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

2.修改完后刷新
修改完页面内容后 ctrl+f9 重新编译
登录错误消息显示

   @PostMapping(value ="/user/login")
//    @RequestMapping(value ="/user/login",method =RequestMethod.POST)
   public String login(@RequestParam("username") String username ,@RequestParam("password") String password,
   Map<String,String> map){
      //测试使用  用户名不为空  密码是123456 就认为成功
       if(!StringUtils.isEmpty(username) && "123456".equals(password)){
               //登录成功
           return "dashboard";
       }else{
           map.put("msgmsg","用户名密码错误");
           return "login";
       }

   }

<p style="color:red" th:text="${msgmsg}"  th:if="${not #strings.isEmpty(msgmsg)}" ></p>

防止表单重复提交 需要重定向
1）

   @Bean
    public WebMvcConfigurer addViewControllers2() {
        return  new WebMvcConfigurer() {
            //
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("index.html").setViewName("login");
                //重定向使用
                registry.addViewController("main.html").setViewName("dashboard");
            }
        };
    }

拦截器进行登录检查
1）登陆成功后需要把登录信息放入session(或者用其他存储方法)

  @PostMapping(value ="/user/login")
//    @RequestMapping(value ="/user/login",method =RequestMethod.POST)
    public String login(@RequestParam("username") String username , @RequestParam("password") String password,
                        Map<String,String> map, HttpSession session){
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
        	//放入session  为了后边验证是否登录！！！
            session.setAttribute("loginUser",username);
            //登录成功  防止表单重复提交 使用重定向 /main.html 重定向到当前项目下的main.html
            return "redirect:/main.html";
        }else{
            map.put("msgmsg","用户名密码错误");
            return "login";
        }
    }

2）编写拦截器

public class LoginHandllerInterceptor implements HandlerInterceptor {
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object user = request.getSession().getAttribute("loginUser");
        if(user == null){
            //未登录  返回登录页面  登录页面显示错误信息  
            request.setAttribute("msgmsg","没有权限 请先登录");
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }else{
            //已登录  放行请求
            return true;
        }
    }
}

3)注册拦截器

  @Bean
    public WebMvcConfigurer addViewControllers2() {
        return  new WebMvcConfigurer() {
            //添加映射
            public void addViewControllers(ViewControllerRegistry registry) {
                registry.addViewController("/").setViewName("login");
                registry.addViewController("index.html").setViewName("login");
                registry.addViewController("main.html").setViewName("dashboard");
            }
            //注册拦截器注册拦截器！！
            @Override
            public void addInterceptors(InterceptorRegistry registry) {
                    //以前需要考虑静态资源拦截问题（   *.css *.js 等）  SpringBoot就不需要考虑了 它已经做好了静态资源映射
                    registry.addInterceptor(new LoginHandllerInterceptor()).addPathPatterns("/**").excludePathPatterns("/index.html","/","/user/login");
            }
        };
    }

直接访问main.html会提示没有权限

把dashboard.html页面的js css引用都改为th引用 webjars方式

 <!--jquery 引入-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.2.1</version>
        </dependency>
        <!--popper-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>popper.js</artifactId>
            <version>1.14.4</version>
        </dependency>
        <!--feather-icons-->
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>feather-icons</artifactId>
            <version>4.10.0</version>
        </dependency>
        <!--chartjs-->
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>chart.js</artifactId>
            <version>2.7.3</version>
        </dependency>

<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
		<script type="text/javascript" src="asserts/js/popper.min.js"  th:src="@{/webjars/popper.js/1.14.4/umd/popper.js}"></script>
		<script type="text/javascript" src="asserts/js/bootstrap.min.js"  th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.js}"></script>
		<!-- Icons -->
		<script type="text/javascript" src="asserts/js/feather.min.js"  th:src="@{/webjars/feather-icons/4.10.0/dist/feather.js}"></script>

		<!-- Graphs -->
		<script type="text/javascript" src="asserts/js/Chart.min.js"  th:src="@{/webjars/chart.js/2.7.3/dist/Chart.js}"></script>

员工列表 RestfulCRUD**

• URI: /资源名称/资源标识 HTTP请求方式区分CRUD操作

	普通CRUD	RestfaulCRUD
查询	getEmp	emp—GET
添加	addEmp	emp—POST
修改	updateEmp	emp—PUT
删除	deleteEmp	emp—DELETE

就是用一样的请求资源名 /emp 用不一样的请求方式 GET POST PUT DELETE 来做CRUD

• 实验的请求架构

	请求URI	请求方式
查询所有员工	emps	GET
查询某个员工	emp/{id}	GET
到添加页面	emp	GET
添加员工	emp	POST
到修改页面	emp/{id}	GET
修改	emp	PUT
删除	emp/{id}	DELETE

thymeleaf公共页面元素抽取

1.抽取
<div th:fragment="copy">
		&copy; 2011 The Good Thymes Virtual Grocery
</div>
2.引用
//模板名::选择器     模板名::片段名
<div th:insert="~{footer :: copy}"></div>
或者是   
<div th:insert="footer :: copy"></div>
3.默认效果
insert的片段 就在div中
如果使用th:insert等属性引入 可以不写~{}
行内写法可以加上:[[~{}]] [(~{})]

三种引入th片段的属性：
th:insert: 将公共片段插入声明引入的元素中
th:replace ： 将声明引入的元素 替换为公共片段
th:include ： 将被引入的片段的内容 包含进引入标签中

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式：
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

效果：
<div>
	<footer>
	&copy; 2011 The Good Thymes Virtual Grocery
	</footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

引入片段时传入参数：

引入的时候传入参数：
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
 片段定义的地方使用参数：
 //根据参数判断 给不同的class
 th:class="${activeUri=='emps'?'nav-link active':'nav-link'}"

1. 查询员工：

  @GetMapping("/emps")
    public String list(Model model){
        //查询所有员工
        Collection<Employee> emps = employeeDao.getAll();
        //放在请求域中共享
        model.addAttribute("emps",emps);
        //classpath:/tmplates/xxx   .html
        return "emp/list";
    }

					<h2><a  class="btn btn-sm btn-success" th:href="@{/emp}">员工添加</a></h2>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>#</th>
									<th>lastName</th>
									<th>email</th>
									<th>gender</th>
									<th>department</th>
									<th>birth</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="emp:${emps}" >
									<td th:text="${emp.id}"></td>
									<td>[[${emp.lastName}]]</td>
									<td th:text="${emp.email}"></td>
									<td th:text="${emp.gender}==0?'女':'男'"></td>
									<td th:text="${emp.department.departmentName}"></td>
									<td th:text="${#dates.format(emp.birth,'yyyy-mm-dd HH:ss')}"></td>
									<td  >
										<button class="btn btn-sm btn-primary">编辑</button>
										<button class="btn btn-sm btn-danger">删除</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

2. 添加员工：

• 跳转到登录页面：

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

	@GetMapping("/emp")
    public String toAddPage(Model model){
        //查出所有部门
        Collection<Department> depts  =  departmentDao.getDepartments();
        model.addAttribute("depts",depts);
        return "emp/add";
    }
	//添加员工
    //SpringMCV 自动将参数和入参对象的属性进行一一绑定 ； 请求参数名字 要与javabean入参的属性名一样
    @PostMapping("/emp")
    public String addEmp(Employee employee){
        employeeDao.save(employee);
        //到员工列表页面
        //redirect表示重定向到一个地址   /代表当前项目路径
        //forward方法 表示转发到一个地址
        return "redirect:/emps";
    }

 <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<form th:action="@{/emp}" method="post">

						<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
						<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
						<div class="form-group">
							<label>名称</label>
							<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
						</div>
						<div class="form-group">
							<label>邮件</label>
							<input name="email" type="email" class="form-control" placeholder="[email protected]" th:value="${emp!=null}?${emp.email}">
						</div>
						<div class="form-group">
							<label>性别</label><br/>
							<div class="form-check form-check-inline">
								<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}">
								<label class="form-check-label">男</label>
							</div>
							<div class="form-check form-check-inline">
								<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
								<label class="form-check-label">女</label>
							</div>
						</div>
						<div class="form-group">
							<label>部门</label>
							<!--提交的是部门的id-->
							<select class="form-control" name="department.id">
								<option th:selected="${emp!=null}?${dept.id == emp.department.id}"
										th:value="${dept.id}"
										th:each="dept:${depts}"
										th:text="${dept.departmentName}"></option>
							</select>
						</div>
						<div class="form-group">
							<label>生日</label>
							<input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">
						</div>
						<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
					</form>
				</main>
			</div>

容易出问题：日期转换
2018-08-08 2018/08/08 2018.08.08
默认用的是dd/MM/yyyy
可以直接在配置文件修改：

#日期
spring.mvc.date-format=yyyy-MM-dd

页面模板中日期格式化

<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:ss')}"></td>

3.修改员工

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

    @GetMapping("/emp/{id}")
    public String toEditPage(@PathVariable("id") String id, Model model){
         Employee e =     employeeDao.get(id);
         model.addAttribute("emp",e);
        //查出所有部门
        Collection<Department> depts  =  departmentDao.getDepartments();
        model.addAttribute("depts",depts);
         return "emp/add";
    }

用新增页面 加 三元判断与修改页面公用！

//通过判断emp是否为空 来控制页面是否回显
th:value="${emp!=null}?${emp.lastName}"
//通过判断emp是否为空 来控制按钮内容
th:text="${emp!=null}?'修改':'添加'"
//隐藏id
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">

 //员工修改
   @PutMapping("/emp")
   public String updateEmp(Employee employee){
       employeeDao.save(employee);
       return "redirect:/emps";
   }

修改页面提交的HTTP方式：

1. SpringMVC中配置 HiddenHttpMethodFilter
2. 页面创建一个表单 post
3. 再创建一个input项 name是_method 值就是我们指定的请求方式

<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>

SpringBoot已经配置好了

	//WebMvcAutoConfiguration类中  
	//转换post的提交方式 
    @Bean
    @ConditionalOnMissingBean({HiddenHttpMethodFilter.class})
    @ConditionalOnProperty(
        prefix = "spring.mvc.hiddenmethod.filter",
        name = {"enabled"},
        matchIfMissing = true
    )
    public OrderedHiddenHttpMethodFilter hiddenHttpMethodFilter() {
        return new OrderedHiddenHttpMethodFilter();
    }

4.删除员工
方式1:

<form th:action="@{/emp}+${emp.id}" method="post">
    <input type="hidden" name="_method" value="delete"/>
    <button class="btn btn-sm btn-danger" type="submit"> 删除</button>
</form>

方式2：

1.
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn" type="submit"> 删除</button>
2.
<form id="deleteEmpForm"  method="post">
	<input type="hidden" name="_method" value="delete"/>
</form>
3.
<script>
			$(function(){alert();
                $(".deleteBtn").on("click",function(){ 
                    $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
                    return false;
                })
			});
</script>

后台都一样：

   @DeleteMapping("/emp/{id}")
    public String deleteEmp(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }

这就是简单增删改查 ~~~