（十六）博客--后台登录（1）

1.登录页面

步骤：
1.https://zijieke.com/semantic-ui/examples/login.php
2.打开页面检查

3.复制片段

<div class="ui m-container " style="width: 40em !important;"  >
	<div class="ui middle aligned center aligned grid m-margin-top-large">
	  <div class="column">
	    <h2 class="ui teal image header">
		  <img src="../static/images/老虎.jpeg" class="image">
	      <div class="content">
	        后台博客管理
	      </div>
	    </h2>
	    <form class="ui large form">
	      <div class="ui  segment">
	        <div class="field">
	          <div class="ui left icon input">
	            <i class="user icon"></i>
	            <input type="text" name="email" placeholder="邮箱地址">
	          </div>
	        </div>
	        <div class="field">
	          <div class="ui left icon input">
	            <i class="lock icon"></i>
	            <input type="password" name="password" placeholder="密码">
	          </div>
	        </div>
	        <div class="ui fluid large teal submit button">登录</div>
	      </div>
	
	      <div class="ui error message"></div>
	
	    </form>
	  </div>
	</div>
</div>

**效果图

2.service层
在com.lrm.blog包下建立service包》》UseService接口

package com.lrm.blog.service;

import com.lrm.blog.po.User;

public interface UserService {
    User checkUser (String username,String password);
}

同时在建一个UserService类

package com.lrm.blog.service;

import com.lrm.blog.dao.UserRepository;
import com.lrm.blog.po.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

//需要加此注解才能是一个真正的Service
@Service
public class UserServiceImpl implements UserService{

//    对数据库进行操作需要注入
    @Autowired
    private UserRepository userRepository;

    @Override
    public User checkUser(String username, String password) {
        User user = userRepository.findByUsernameAndPassword(username,password);
        return user;
    }
}

3.dao层（继承jpa）
在com.lrm.blog包下建立dao包》》UserService类

package com.lrm.blog.dao;

import com.lrm.blog.po.User;
import org.springframework.data.jpa.repository.JpaRepository;

//JpaRepository<User,Long>表示数据库操作的对象，并且id为Long类型
//通过继承JpaRepository就可以进行数据库的相关操作（增、删、改、查）
public interface UserRepository extends JpaRepository<User,Long> {

//    通过此方法可以在数据库中找到相关的user
    User findByUsernameAndPassword (String username, String password);

}

4.web层
com.lrm.blog目录下建admin包 在建LoginController类

package com.lrm.blog.web.admin;

import com.lrm.blog.po.User;
import com.lrm.blog.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("/admin")
public class LoginController {

//    注入业务层
    @Autowired
    private UserService userService;

//    转到登录页面
    @GetMapping
    public String loginPage(){
        return "/admin/login";
    }

//    检验提交的用户名和密码是否正确
    @PostMapping("/login")
    public String login(@RequestParam String username,
                        @RequestParam String password,
                        HttpSession session,
                        RedirectAttributes attributes
                        ){
        User user = userService.checkUser(username,password);
        if (user!=null){
//            不要把密码传到前面去
            user.setPassword(null);
//            把查到的user存放到session里面
            session.setAttribute("user",user);
            return "admin/index";
        }else{
//            使用attributes来提示错误信息
//            为什么不用mode.addAttribute("message"),因为mode是在请求域中,而attributes是在另外一个请求中,所以mode拿不到login页面
            attributes.addFlashAttribute("message","用户名和密码错误");
//            这地方为什么不用/admin/login,因为如果当user不存在时返回时就会出现路径的错误
//            所以这地方使用redirect:/admin "重定向",当返回页面时就会重新跳转到login
            return "redirect:/admin";
        }
    }

//    注销用户

    @GetMapping("/logout")
    public String logout(HttpSession session){
//        把session里面的信息删掉
        return "redirect:/admin";
    }

}

同时在注销页面添加th:href="@{/admin/logout}"

  <a href="#" th:href="@{/admin/logout}" class="item">注销</a>

5.在login.html中添加提交路径
在form表单中添加th:action="@{admin/login}"

4.在数据库中
初始化数据

5.用127.0.0.0.1：8080/admin访问
6.注销功能

在admin/-fragment.html中的head注销class中添加th:hre="@{/admin/logout}"

7,表单验证

	<script type="text/javascript">
		$('.ui.form').form({
			fields:{
				username:{
					identifier:'username',
					rules:[{
						// type:'empty',表示验证方式非空
						type:'empty',
						// prompt表示当出错时的提示信息
						prompt:'请输入用户名'
					}]
				},
				password:{
					identifier:'password',
					rules:[{
						// type:'empty',表示验证方式非空
						type:'empty',
						// prompt表示当出错时的提示信息
						prompt:'请输入用户名'
					}]
				}
			}
		});
	</script>

8，建立存放后台提示的错误信息需要在登录页面

<!-----------存放表单验证（非空判断）区域----------->
	      <div class="ui error message"></div>
<!-----------存放后台信息验证提示错误区域-------->
			<div class="ui message" th:unless="${#strings.isEmpty(message)}" th:text="${message}"></div>

故意输入错误用户名和密码
**效果图