当前位置： 首页>前端>正文

springsurity OAUTH2登录流程图 spring实现登录功能

前端2024-04-24 19:32:36


目录

  • 前言：
  • 完整项目结构
  • 预实现功能
  • 后台代码实现
  • 创建controller
  • model
  • service
  • mapper
  • mapper.xml
  • 运行测试
  • 前端代码实现
  • 导入相关文件
  • index.html
  • index.js
  • 注意点
  • 将登录页设置为项目欢迎页
  • Tomcat设置
  • spring-mvc.xml修改静态资源的位置
  • 实现
  • 登录界面
  • 小结


前言：

SSM实现简单登录现有的项目已经很多了，这边主要是为了自己的回顾，使用的是IDEA
SSM整合请看系列九与系列八

完整项目结构

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_web,第1张

预实现功能

数据库中admin用户，页面登录，后台判断用户与密码，成功则跳转

后台代码实现

创建controller

@RestController
@RequestMapping("login")
public class LoginController {

    @Autowired
    private UserService userService;

    @RequestMapping("checkLogin")
    public String login(String username,String password){
        User user = userService.checkLogin(username,password);
        if (user!=null){
            return "success";
        }
        return "fail";
    }
}

model

public class User {
    private String id;
    private String name;
    private String password;
    ...(get  set)
}

service

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public User checkLogin(String username, String password) {
        return userMapper.checkLogin(username,password);
    }
}

mapper

public interface UserMapper{
    
    User checkLogin(@Param("username") String username,@Param("password") String password);
}

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- 该文件代表的是类和表的映射关系，关于表的sql语句等等写在这里 -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.UserMapper">

    <select id="checkLogin" resultType="com.demo.model.User">
        select * from user where name = #{username} and password =#{password}
    </select>
</mapper>

运行测试

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_xml_02,第2张

到这步，后台代码已经成功了，接下去就是前端的部分

前端代码实现

前端部分用了layui，因为方便快捷(主要还是懒)，具体的都可以去layui官网看参考文档，下面就不祥讲了

导入相关文件

layui相关文件可以直接在官网下载，将其文件夹放入到静态资源文件中，静态资源文件放在WEB-INF外面（否则会导致静态资源访问不到，具体另外讲），如图：

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_web_03,第3张

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登入</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../resources/layui-v2.5.7/css/layui.css">

</head>
<body>

<div style="width: 20%;margin:20px auto">
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>
<script src="../resources/layui-v2.5.7/layui.js"></script>
<script src="../page/index.js"></script>
</body>
</html>

index.js

layui.use(['layer', 'form'], function() {
        var $ = layui.$,
        layer = layui.layer,
        form = layui.form

    form.on('submit(submit)', function(data){
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        $.ajax({
            url:  'http://localhost:8081/login/checkLogin',
            type: "post",
            data:data.field,
            success : function(data) {
                window.location.href ="http://localhost:8081/page/hello.html" ;
            },
        })

        // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    // form.render();
})

注意点

将登录页设置为项目欢迎页

web.xml中修改

<welcome-file-list>
        <welcome-file>page/index.html</welcome-file>
    </welcome-file-list>

因为登录页目录为

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_spring_04,第4张

Tomcat设置

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_mybatis_05,第5张

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_xml_06,第6张

如果设置成http://localhost:8081/demospring会导致静态资源路径错误

原因：

由于加入了默认工程所以对于工程名demospring的访问http://localhost:8081/demospring/和http://localhost:8081/是一样的。

再看html文件中路径的写法：，这样写成绝对路径，访问时就变成了http://localhost:8081/resources/layui-v2.5.7/css/layui.css

但是实际的路径是http://localhost:8081/demospring/resources/layui-v2.5.7/css/layui.css

（但是这个有可能会导致这个问题：部署到服务器后无法访问静态资源）

spring-mvc.xml修改静态资源的位置

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_springmvc_07,第7张

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 扫描controller -->
    <context:component-scan base-package="com.demo.controller" />
    <!-- 当配置了mvc:annotation-driven/后，Spring就知道了我们启用注解驱动。然后Spring通过context:component-scan/标签的配置，
    会自动为我们将扫描到的@Component，@Controller，@Service，@Repository等注解标记的组件注册到工厂中，来处理我们的请求 -->
    <mvc:annotation-driven />
    <!--通过location，可以重新定义资源文件的位置-->
    <mvc:resources mapping="/resources/**" location="/resources/"/>
    <!--静态页面，如html,css,js,images可以访问-->
    <mvc:default-servlet-handler />
    <!-- 视图定位到/WEB/INF/jsp 这个目录下 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/page/" />
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

实现

登录界面

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_xml_08,第8张

登录成功

springsurity OAUTH2登录流程图 spring实现登录功能,springsurity OAUTH2登录流程图 spring实现登录功能_xml_09,第9张

小结

在实现前后端时，发生了静态资源访问404的情况，在这里另外起一篇进行讲解



https://www.xamrdz.com/web/2wd1933115.html

相关文章：