新手使用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,工程在下面链接里,欢迎一起学习交流

https://download.csdn.net/download/g313105910/10741590

如果發現無法save數據到數據庫請看下面解決方案

解决方案是:

在pom.xml里添加:

    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>4.2.5.RELEASE</version>
    </dependency>

  • 5
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花开花落的个人博客

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值