新手使用spring boot 做的一个登录页面 的心得
很久之前在学校学过jsp和三大框架,之后就在也没接触过web项目,最近公司项目需要做一个web版的数据展示界面,想想用ASP呢还是用JSP,后来发现这些都已经过时了,现在都流行微服务,本来就没有什么WEB开发经验,可把我难坏了,狂补一些前端后端的知识,先看一下登录界面,也是网上copy的代码,自己找的图片,前端用的bootstrap
工程目录是这个样子的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>login</title>
<script src="lib/jquery-3.3.1.min.js"></script>
<link href="lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
<form name="form" accept-charset="utf-8" action="/loginVerify" method="post" onSubmit="javascript:return check_login();">
<div class="container">
<div class="form row">
<div class="form-horizontal col-md-offset-3" id="login_form">
<h3 class="form-title">LOGIN</h3>
<div class="col-md-9">
<div class="form-group">
<i class="fa fa-user fa-lg"></i>
<input class="form-control required" type="text" placeholder="Username" id="username" name="username" autofocus="autofocus" maxlength="20"/>
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i>
<input class="form-control required" type="password" placeholder="Password" id="password" name="password" maxlength="8"/>
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox" name="remember" value="1"/>记住我
</label>
</div>
<div class="form-group col-md-offset-9">
<button type="submit" class="btn btn-success pull-right" name="submit">登录</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript">
function check_login()
{
if(document.form.username.value=="")/*document.表单名.文本域名.value==''"*/
{
alert("请检查用户名是否为空!");
return false;
}
if(document.form.password.value=="")
{
alert("请检查您的密码是否为空!");
return false
}
/*<![CDATA[*/
if(document.form.password.value.length < 6)
{
alert("您的密码长度小于6!");
return false
}
/*]]>*/
}
</script>
</html>
前端代码,引用的css
body{
background: url("../img/1.jpg") no-repeat;
}
.form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}
/*阴影*/
.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
input[type="text"],input[type="password"]{padding-left:26px;}
.checkbox{padding-left:21px;}
后端的控制入口
package springboot.login.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import springboot.login.WebSecurityConfig;
import springboot.login.domain.User;
import springboot.login.service.LoginService;
import javax.servlet.http.HttpSession;
/**
* Created by huangds on 2017/10/24.
*/
@Controller
public class LoginController {
@Autowired
private LoginService loginService;
@GetMapping("/")
public String index(@SessionAttribute(WebSecurityConfig.SESSION_KEY)String account,Model model){
return "View/index";
}
@GetMapping("/login")
public String login(){
return "login";
}
@GetMapping("/loginError")
public String loginError(){
return "loginError";
}
@GetMapping("/loginDBError")
public String loginDBError(){
return "loginDBError";
}
@PostMapping("/loginVerify")
public String loginVerify(String username,String password,HttpSession session){
User user = new User();
user.setUsername(username);
user.setPassword(password);
boolean verify = loginService.verifyLogin(user);
try {
if (verify) {
session.setAttribute(WebSecurityConfig.SESSION_KEY, username);
return "View/index";
} else {
return "redirect:/loginError";
}
}
catch (Exception ex)
{
return "redirect:/loginDBError";
}
}
@GetMapping("/Select")
public String Select(@SessionAttribute(WebSecurityConfig.SESSION_KEY)String account,Model model){
return "View/Select";
}
@GetMapping("/logout")
public String logout(HttpSession session){
session.removeAttribute(WebSecurityConfig.SESSION_KEY);
return "redirect:/login";
}
}
数据库的配置application.properties
#数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/web?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8&useSSL=false
spring.datasource.username=root
spring.datasource.password=xxxxxxxxx
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.hbm2ddl.auto=update
登录表结构
package springboot.login.domain;
import javax.persistence.*;
/**
* Created by huangds on 2017/10/28.
*/
@Entity
@Table(name="tb_user_management")
public class User {
@Id
@Column(name = "id")
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;
@Column(name = "userid")
private String userid;
@Column(name = "username")
private String username;
@Column(name = "password")
private String password;
@Column(name = "userps")
private String userps;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getUserps() {
return userps;
}
public void setUserps(String userps) {
this.userps = userps;
}
public String getUserid() {
return userid;
}
public void setUserid(String userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
发现还是比较好用的,有登录校验,如果没有登录,无法访问一些界面,使用环境是IDEA18.2.4,JDK1.8,工程在下面链接里,欢迎一起学习交流