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>
故意输入错误用户名和密码
**效果图