SpringBoot入门表单登录

最新推荐文章于 2024-06-27 11:17:53 发布

逆光al

最新推荐文章于 2024-06-27 11:17:53 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/qq_40933929/article/details/97039014

版权

代码规范

每个Spring-boot一般包含下面几个部分：

POJO 实体层，存放一些实体对象
dao 持久层，主要负责对数据库的操作
service业务层，实现一些业务逻辑
controller控制层，拦截请求，并根据请求做出响应，例如返回某些重要的数据，或者提示

在这里插入图片描述

public class User {
    private int id;
    private String name;
    private String password;

    public User(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public User() {
    }
    //下面是getter、setter
}

这个类存放的是用户的登录信息，当前端提交表单时，会将这个用户的userName和password传送给后端，然后controller验证这个用户的用户名的密码是否匹配，并返回一些提示信息

package cn.ncu.along.todolist.dao;

import cn.ncu.along.todolist.POJO.User;
import org.springframework.stereotype.Repository;

@Repository
public interface UserDao {
    int findUserByName(User user);
    int hasMatch(User user);
}


import cn.ncu.along.todolist.POJO.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

@Repository
public class UserDaoImpl implements UserDao {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    private String FINDNAMESQL = "select count(*) from user where userName = ?";
    private String VOLIDATESQL = "select count(*) from user where userName = ? and password = ?";
    @Override
    public int findUserByName(User user) {
        Object[] arg={user.getName()};
        return jdbcTemplate.queryForObject(FINDNAMESQL,arg,Integer.class);
    }

    @Override
    public int hasMatch(User user) {
        Object[] args = {user.getName(),user.getPassword()};
        return jdbcTemplate.queryForObject(VOLIDATESQL,args,Integer.class);
    }
}

package cn.ncu.along.todolist.service;

import cn.ncu.along.todolist.POJO.User;
import cn.ncu.along.todolist.dao.UserDao;
import cn.ncu.along.todolist.dao.UserDaoImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserDao userDaoImpl;
    public int  login(User user){
        if(userDaoImpl.findUserByName(user)>0){
            if(userDaoImpl.hasMatch(user)>0)
                return 2;//登陆成功
            else
                return 1;//密码错误
        }
        else
            return 0;//用户名不存在
    }
}

为什么需要一个UserDao接口？
利用了java的多态性，这里在service中注入的是一个UserDaoImpl,但是声明类型是UseDao,原理是什么呢？
首先每个标注了@Component的类都会被bean容器识别，而且默认的id 是以小写字母开头的类名，我们不能所有的类都用@Component标注，为了见名知其意，有了其他三种注解

@Repository 标注dao类
@Service 标注Service类
@Controller标注controller类

上面的@Repository标注的UserDaoImpl，用xml方式等价于
$\ id="userDaoImpl" class="Dao.UserDaoImpl" />$
总之为每个Dao类定义一个接口也是规范，符合设计模式中的开闭原则

package cn.ncu.along.todolist.Controller;

import cn.ncu.along.todolist.POJO.User;
import cn.ncu.along.todolist.service.UserService;
import com.alibaba.fastjson.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("volidate")//拦截路由
    @ResponseBody//返回JSON数据
    public JSONObject volidate(HttpServletRequest request){
        String userName = request.getParameter("userName");
        String password = request.getParameter("password");
        JSONObject obj = new JSONObject();
        int status = userService.login(new User(userName,password));
        if(status ==2)
            obj.put("info","登录成功");
        else if(status==1)
            obj.put("info","密码错误");
        else if(status==0)
            obj.put("info","用户名不存在");
        return obj;
    }
}

控制器中的每个方法若要处理请求，则需要在上面标注@RequestMapping("volidate")
另外每个方法可以返回JSON数据，也可以返回页面，返回页面则需要改变返回值为ModelView对象

数据库配置

使用spring-boot的优点之一就是在配置数据库时只需要在resource的application.properties下面增加下面内容即可，一般使用其他方式的话还需要自己去配置数据源。在做了下面的配置之后就可以直接在dao中注入JABCTemplate对象，然后进行数据库的操作了。

spring.datasource.url=jdbc:mysql://localhost:3306/sampledb?useUnicode=true&characterEncoding=utf8
spring.datasource.driverClassName= com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123456

下面给出导入的依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.58</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

resource->static下的前端资源
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="login.css" type="text/css">
</head>
<body>
    <div class="login">
        <div class="up">
            <div class="back">
                <span>Hello World</span><br>  
            </div>
              
        </div>
        <div class="in">
            <span>Sign In</span><br>
            <form name="loginForm">
                <input type="text" name="userName" placeholder="name"><br>
                <input type="password" name="password" placeholder="password"><br>
                <input id="btn" type="button" value="Sign In" onclick="volidate()">
            </form>
            
            <div id="info"></div>
        </div>
    </div>
</body>
<script>
    function volidate(){
        var xmlHttp = new XMLHttpRequest();
        var userName = document.loginForm.userName.value;
        var password = document.loginForm.password.value;
        var url = "volidate?userName="+userName+"&password="+password;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange=function() {
            if (xmlHttp.readyState == 4) {
                var infoObj = JSON.parse(xmlHttp.responseText);
                info.innerHTML = infoObj.info;
            }else{
                info.innerHTML = "正在登录，请稍后";
            }
        }
        xmlHttp.send();
    }

</script>
</html>

body,html{
    padding: 0px;
    margin: 0px;
    height: 100%;
}
body{
    background: url("geometry.jpg") center/100% no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login{
    width: 50%;
    height: 60%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction:row;
}
.up{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    flex-grow:1;
    background: url("/sea.jpg") center/100% no-repeat;
}
.back{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    flex-grow: 1;
    background-color: rgba(043,183,209,0.4);
    width:100%;
}
.up span{
    color:#fff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 26px;
}
.in{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    background-color: #fff;
    flex-grow: 1;
}
input{
    background:none;  
    outline:none;  
    font-size:12px;
    height:30px;
    border-radius:50px;
    border:1px solid #c8cccf;
    margin: 5px;
}
input::-webkit-input-placeholder {
    /* placeholder字体大小  */
    font-size: 12px;
    /* placeholder位置  */
    text-align: center;
}
#btn:hover{
    background: #2bb673;
}

#btn {
    width: 145px;
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.in span{
    font-size: 20px;
}

#info{
    font-family: 华文楷体;
    font-size:12px;
    color:rgb(064,228,149);
}

测试业务方法

ps：测试前请先在数据库中建立这一张user表

use sampledb;//选择sampledb数据库

create table user(
id int primary key,
userName char(20) not null,
password char(20) not null
);

//插入一条数据
insert into user (userName,password) values("admin","123");

在这里插入图片描述
这里直接使用工程下test最下面的主类测试

package cn.ncu.along.todolist;

import cn.ncu.along.todolist.POJO.User;
import cn.ncu.along.todolist.service.UserService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

@RunWith(SpringRunner.class)
@SpringBootTest
public class TodolistApplicationTests {

    @Autowired
    private UserService userService;
    @Test
    public void contextLoads() {
    }

    @Test
    public void testService(){
        System.out.println(userService.login(new User("admin","123")));
    }
}

若测试的是一个正确的用户，并且测试结果如下：
在这里插入图片描述
那么就是成功了。这时直接运行main下的主类，在服务器启动后在谷歌浏览器中输入
localhost://8080/login.html,进入登录界面，输入整的用户名和密码，页面上会提示登录成功

逆光al

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot入门表单登录

代码规范每个Spring-boot都要遵循MVC，一般包含下面几个部分：POJO 实体层，存放一些实体对象dao 持久层，主要负责对数据库的操作service业务层，实现一些业务逻辑controller控制层，拦截请求，并根据请求做出响应，例如返回某些重要的数据，或者提示public class User { private int id; private Str...
复制链接

扫一扫