SpringMVC——注册登陆功能模块的实现

最新推荐文章于 2024-07-27 14:11:16 发布
最新推荐文章于 2024-07-27 14:11:16 发布
阅读量2.1k 收藏 7
点赞数
分类专栏： SpringMVC实现学生信息管理系统 文章标签： java SpringBoot SpringMVC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42896653/article/details/112310567
版权

注册登陆功能模块的实现

  • 本片博文记录登陆注册功能的开发，内容包括
    1）前端注册登陆页面的实现
    2）后端注册登陆行为逻辑代码的实现
    3）用户数据表的设计和实现
    4）前后台之间数据的交互

一、实体类和配置类

  • 先按照如下图，在项目目录里新建如下的 Package 目录：
    在这里插入图片描述

1、实体类

  • 在 domain 目录下新建三个实体类：Msg、User 和 UserInfo，这三个实体类的具体代码如下：
  • Msg 类：
    //IntelliJ IDEA
//springmvcstudent
//Msg
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com

package com.pyc.springmvcstudent.domain;

public class Msg {
    private String title;
    private String content;

    public Msg(String title,String content){
        this.title=title;
        this.content=content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }
}
  • User 类
    //IntelliJ IDEA
//springmvcstudent
//User
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com

package com.pyc.springmvcstudent.domain;


import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Id
    private long id;
    private String studentID;
    private String password;

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

    public void setId(long id) {
        this.id = id;
    }

    public long getId() {
        return id;
    }

    public void setStudentID(String studentID) {
        this.studentID = studentID;
    }

    public String getStudentID() {
        return studentID;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getPassword() {
        return password;
    }
}
  • 这个类由于使用了 @Entity 注解，因此相当于一个数据表，运行时，Hibernate 框架会根据该类的名称和属性，在数据库中新建对应的数据表。下面的 UserInfo 类也是如此。
  • UserInfo 类
    //IntelliJ IDEA
//springmvcstudent
//UserInfo
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com

package com.pyc.springmvcstudent.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class UserInfo {
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Id
    private long id;
    private String stuID;
    private String name;
    private String profession;
    private String stuClass;    //年级
    private String broth;
    private String tel;
    private Boolean online;  //登陆状态
    public UserInfo(){
        super();
    }
    public UserInfo(String stuID,String name,String profession,String stuClass,String broth, String tel){
        this.stuID=stuID;
        this.name=name;
        this.profession=profession;
        this.stuClass=stuClass;
        this.broth=broth;
        this.tel=tel;
        this.online=false;
    }

    public void setId(long id) {
        this.id = id;
    }

    public long getId() {
        return id;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setProfession(String profession) {
        this.profession = profession;
    }

    public String getProfession() {
        return profession;
    }

    public void setStuClass(String stuClass) {
        this.stuClass = stuClass;
    }

    public String getStuClass() {
        return stuClass;
    }

    public String getStuID() {
        return stuID;
    }

    public Boolean getOnline() {
        return online;
    }

    public String getBroth() {
        return broth;
    }

    public String getTel() {
        return tel;
    }

    public void setBroth(String broth) {
        this.broth = broth;
    }

    public void setOnline(Boolean online) {
        this.online = online;
    }

    public void setStuID(String stuID) {
        this.stuID = stuID;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }
}
  • 这些实体类的setter 和 getter，不用自己一个一个的敲，可以用 IDEA 的智能补充生成。

2、面向对象数据接口

  • 由于上一步新建了两个使用了 @Entity 注解的实体类，因此需要编写相应的 Repository 接口类，这两个接口类放在 Dao Package 目录下，分别取名为：UserRepository 和 UserInfoRepository。
  • UserRepository 接口类的代码如下：
    //IntelliJ IDEA
//springmvcstudent
//UserRepository
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com

package com.pyc.springmvcstudent.dao;

import com.pyc.springmvcstudent.domain.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User,Long> {
}
  • 暂时先只继承 JpaRepository 类提供的查询方法，后面根据需要添加自定义查询方法。
  • UserInfoRepository 接口类代码如下：
    //IntelliJ IDEA
//springmvcstudent
//UserInfoRepository
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com


package com.pyc.springmvcstudent.dao;

import com.pyc.springmvcstudent.domain.UserInfo;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserInfoRepository extends JpaRepository<UserInfo, Long> {
}

3、WebMVCConfig

  • 由于本项目是基于 Spring MVC 的，因此需要一个类用于对 Spring MVC 的路径映射进行控制，将该类放在 Config Package 目录下，该类的详细代码如下：
    //IntelliJ IDEA
//springmvcstudent
//WebMVCConfig
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com

package com.pyc.springmvcstudent.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMVCConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("Index");
    }
}

4、WebController

  • 对于不需要传递数据的页面，可以在 WebMVCConfig 中配置，对于需要传递数据的就需要用到 Controller 了，因此这里新建一个 WebController 放在 controller，其代码如下：
    //IntelliJ IDEA
//springmvcstudent
//WebController
//2021/1/7
// Author:御承扬
//E-mail:2923616405@qq.com

package com.pyc.springmvcstudent.controller;


import com.pyc.springmvcstudent.dao.UserInfoRepository;
import com.pyc.springmvcstudent.dao.UserRepository;
import com.pyc.springmvcstudent.domain.Msg;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class WebController {
    final UserRepository userRepository;
    final UserInfoRepository userInfoRepository;

    public WebController(UserRepository userRepository,UserInfoRepository userInfoRepository){
        this.userInfoRepository=userInfoRepository;
        this.userRepository=userRepository;
    }
    @RequestMapping("/toSign")
    public String toSign(Model model){
        Msg msg = new Msg("系统提示","请按照格式进行注册");
        model.addAttribute("msg", msg);
        return "page/Sign";
    }
}

二、视图页面

  • 这里需要编辑两个视图页面，即登陆页面和注册页面，这里将登陆页面设置为系统的index页。
  • 页面不用原生的HTML，而是用 Thymeleaf 模板页面，UI 框架使用 Bootstrap3.

1、Index 页

  • 首先是 Index 页，其代码如下：
    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
          crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>学生信息管理系统</title>
</head>
<body>
<center>
    <div class="container">
        <div class="row" >
            <div>
                <div class="col-md-8">
                    <br>
                    <br>
                    <br>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h2 class="panel-title">
                                提示信息
                            </h2>
                        </div>
                        <div class="panel-body">
                            <div class="panel-info">
                                欢迎访问学生信息管理系统，若未注册请先进行注册，若已注册请使用注册账号和密码进行登陆！
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           <div style="width: auto;height: 50px"></div>
            <div class="col-md-8">
                <form class="form-horizontal" style="width: 500px">
                    <div class="form-group">
                        <label for="stuID" class="col-sm-2 control-label">StudentID:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="stuID" name="stuID" placeholder="StudentID">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">Password:</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" name="password" placeholder="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="checkPassword" class="col-sm-2 control-label">CheckPassword:</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="checkPassword" name="CheckPassword" placeholder="Check Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Login</button>
                            &emsp;&emsp;&emsp;&emsp;
                            <button type="button" class="btn btn-default" onclick="window.location.href='/toSign'">Sign</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</center>
</body>
  • 这里只布置一个登陆表单，表单的action暂时不写，表单输入框下边是两个按钮，一个是登陆按钮，一个注册按钮；登陆按钮的功能暂时置空，而注册按钮的功能就是跳转到注册页面。

2、注册页面

  • 注册页面的代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
          crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>用户注册</title>
</head>
<body>
<div class="container">
    <div class="row">
        <br>
        <br>
        <br>
        <div class="col-md-8">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h2 class="panel-title">
                        提示信息：
                    </h2>
                </div>
                <div class="panel-body" th:if="${ not #lists.isEmpty(msg)}">
                    <div class="panel-info">
                        <h4 th:text="${msg.getTitle()}"></h4><h5 th:text="${msg.getContent()}"></h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <form class="form-horizontal" style="width: 500px">
                <div class="form-group">
                    <label for="stuID" class="col-sm-2 control-label">StudentID:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="stuID" name="stuID" placeholder="StudentID">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">Password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="password" placeholder="password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="stuName" class="col-sm-2 control-label">Name:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="stuName" name="stuName" placeholder="Student Name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="profession" class="col-sm-2 control-label">Profession</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="profession" name="profession" placeholder="Profession">
                    </div>
                </div>
                <div class="form-group">
                    <label for="stuClass" class="col-sm-2 control-label">Class:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="stuClass" name="stuClass" placeholder="class">
                    </div>
                </div>
                <div class="form-group">
                    <label for="broth" class="col-sm-2 control-label">Broth:</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="broth" name="broth" placeholder="1999-01-01">
                    </div>
                </div>
                <div class="form-group">
                    <label for="tel" class="col-sm-2 control-label">Tel:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="tel" name="tel" placeholder="Tel">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Sign</button>
                        &emsp;&emsp;&emsp;&emsp;
                        <button type="button" class="btn btn-default" onclick="window.location.href='/index'">Login</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

3、测试页面显示是否正常

  • 这一步进行页面显示测试，运行项目访问 http://localhost:8080/index 会显示如下页面：
    在这里插入图片描述
  • 我这里浏览器开启了黑色模式，所以页面底色是黑色，在非黑色模式下页面底色是白色。
  • 点击注册按钮，正常情况下应该跳转到如下页面：
    在这里插入图片描述
御承扬
关注
专栏目录
SpringMVC——在IDEA中的学习流程
qq_39108448的博客
09-16 339
springMVC——学习流程 一个模型 - 视图 - 控制器（MVC）的Web框架建立在中央前端控制器 1、简单的hello.jsp请求响应 流程： 导jar包 在web.xml加入spring监听，以及springmvc的核心配置（配置文件的地址，拦截器） 配置applicationContext.xml（扫描除Controller类；导入pringmvc.xml）和pringmvc.xml...
springMVC实现用户注册及登陆
03-01
Java+tomcat+springMVC;实现用户注册及登陆 .没有Service与dao
Spring学习之SpringMVC框架快速搭建实现用户登录功能
纸上得来终觉浅,绝知此事要躬行
12-02 6903
关于SpringMVC的介绍我就不多说了，网上一搜一大堆，好多大鸟的博客都有详细的描述，之前看的跟开涛学SpringMVC，写的非常好，SpringMVC运行的流程和原理讲的非常的细致在此我引用一下开涛前辈的图片和文字，大家要是想看原文就点击上面的链接。 SpringMVC处理请求的流程图 大家一定要仔细的看，最好是拿张纸，画一画，可比你光看有效果，大家可以与纯MVC模式对比一下，这样
SpringMVC实现登陆与注册
最新发布
m0_73963106的博客
07-27 799
这里需要引入jquery，由于我本地有jquery的静态文件，所以这里我直接将它放进webapp下引入使用，大家如果没有可以使用CDN，即<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>也可正常运行。在之前书写Controller层时，当用户登陆成功时，我们将用户名信息存储到了session域中，我们可以通过检测session域是否有值来进行页面控制，可是如何控制？），进行重定向，否则重新回到该页面。
Spring mvc + myBatis (实现用户登录功能)
12-04
Spring mvc + myBatis,注释详解， 实现用户登录功能。
spring mvc实现验证码登录注册功能
04-20
用spring mvc实现带有验证码的登录注册功能模块，代码比较完整详细，适合于毕业设计的登录注册功能，可以根据自己的需要进行修改。 个人环境为：eclipse2019、mysql、和tomcat8.5
springmvc框架的用户登录注册的简单实现
06-06
spring初学这可以参考的用户登录注册简单的例子，mvc设计模式的spring框架，适合初学者，比较简单，容易理解和入门
SpringMVC——demo
03-08
【SpringMVC——demo】 SpringMVC是Spring框架的一个核心模块，主要用于构建Web应用程序。它是一种基于模型-视图-控制器（MVC）设计模式的轻量级Java Web开发框架，能够有效地分离业务逻辑和展示逻辑，使得代码更加...
SpringMVC+HIbernate登录程序并进行增删改查
08-15
SpringMVC+Hibernate登录程序并进行增删改查是一个经典的Web开发示例，它整合了两个重要的Java技术框架——SpringMVC和Hibernate，用于构建基于Java的动态网站应用。SpringMVC是Spring框架的一部分，主要负责处理...
springmvc--登录的实现
My Devil's Cry
02-17 820
以前写登录，习惯用ajax，感觉很方便。看了taotao之后就不这么认为了，原来还有用POST提交的。还学习到了用js封装对象使用。 页面如下： 用户名
spring mvc实现账户密码的登陆（极为简单）
08-30
spring mvc实现账户密码的登陆（极为简单），新手一看就懂。
springMVC配置连接数据库实现登录功能的一个小demo
11-12
学了几天，配置连接数据库实现登录功能的一个小demo，还有很多地方比较模糊，添加包也是全添，很多细节的问题都在研究中
SpringMVC用户登录Demo
12-02
一个使用SpringMVC实现用户登录的Demo，很简单，非常适合初学者！
SpringMVC数据验证——注册用户格式的验证实例
05-17
SpringMVC数据验证——注册用户格式的验证实例，具体过程和效果看博文http://blog.csdn.net/evankaka/article/details/45789283
SpringMVC注册功能的实现
Love_MinJuan的博客
05-24 2683
注册功能： 1.启用注册按钮，添加一个注册页面 userRegister.jsp（可参考登录页面） 2.注册功能 2.1 注册成功，添加新用户，跳转到新页面（registerOk.jsp）； 2.2 注册失败，添加几个验证，没有通过验证，展示错误信息 3.验证功能： 3.1 非空判断 3.2 账号唯一 3.3 两次密码不同 1.添加applicationContext.xml文件配置数据库连接信息，创建sqlsession工厂，实现dao层及service层的动态代理 <?xml version="1
IDEA实现 springmvc的简单注册登录
Dam_e_的博客
12-03 9118
IDEA实现 springmvc的简单登录 1.基本环境搭建 spring简介 SpringMVC框架是以请求为驱动，围绕Servlet设计，将请求发给控制器，然后通过模型对象，分派器来展示请求结果视图。其中核心类是DispatcherServlet，它是一个Servlet，顶层是实现的Servlet接口。 project创建 在图中填上项目名称即可，其他直接next 如上图所示，创建...
登录模块的实现
weixin_30364147的博客
12-23 3574
1、模块介绍 　　以JSP+Servlet+JavaBean模式进行开发，系统流程图如下： 　　用户登录之前需要进行注册，在注册成功后通过注册的用户名和密码进行登录，登录失败可以根据系统提示重新登录，登录成功后进入主页。 　　 2、关键技术 　　本实例采用MVC模式进行开发，战士了模型层（Model）、视图层（View）和控制层（Controller）的结构体系，程序设计结构如...
SpringMVC实现的登录操作（Servlet原生API以及POJO作为参数使用）
唐昊
10-08 153
Index.jsp页面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> </head> <body>
Springmvc Bug管理系统设计与实现——基于MySQL
系统实现章节详细描述了各个功能模块的实现细节，如登录界面、主页面以及各管理模块的界面和功能。程序调试部分分析了调试过程和测试方法，确保系统的稳定性和正确性。 最后，论文总结了项目的意义，讨论了可能的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

御承扬

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值