登入操作实现

最新推荐文章于 2021-06-09 20:36:44 发布

三维空间的二维生物

最新推荐文章于 2021-06-09 20:36:44 发布

阅读量252

点赞数

分类专栏：笔记文章标签： java eclipse

本文链接：https://blog.csdn.net/qq_44400723/article/details/110391221

版权

笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

所有人都能进来，太随意了，添加登入功能。
登入有登入号，登录密码，和用户的真实姓名。
在数据库还要增加张表来存储用户信息。

一增加用户表

1·在db.sql添加

create table tbl_user(
  user_no char(6) primary key,
  user_pwd char(6) not null,
  user_name varchar(30) not null
);

char(6) 六位定长。

2·在数据库中添加表

在对应数据库下添加：
在这里插入图片描述

二·

1·在pom.xml添加：

引入lang3：

<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.4</version>
</dependency>

2·ValueObject.class

在domain下创建类ValueObject.class：

package edu.mju.stuwork.domain;

import org.apache.commons.lang3.builder.ReflectionToStringBuilder;


public abstract class ValueObject {
	
	@Override
	public String toString() {
		return ReflectionToStringBuilder.toString(this);
	}

}

3·User.class

在domain下创建User.class：

package edu.mju.stuwork.domain;


public class User extends ValueObject {
	
	private String userNo;
	private String userPwd;
	private String userName;
	
	public String getUserNo() {
		return userNo;
	}
	public void setUserNo(String userNo) {
		this.userNo = userNo;
	}
	public String getUserPwd() {
		return userPwd;
	}
	public void setUserPwd(String userPwd) {
		this.userPwd = userPwd;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}

}

三·增加视图

在views下创建login.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title></title>    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" href="<c:url value="/resources/vendor/bootstrap-4.5.3-dist/css/bootstrap.min.css"/>" media="all" />
	
	<script type="text/javascript" src="<c:url value="/resources/vendor/jquery/jquery-3.3.1.js"/>"></script>
	<script type="text/javascript" src="<c:url value="/resources/vendor/popper.js/popper.min.js"/>"></script>
	<script type="text/javascript" src="<c:url value="/resources/vendor/bootstrap-4.4.1-dist/js/bootstrap.min.js"/>"></script>

  </head>
  
  <body>

    <div class="container">
       <div class="row col-12 col-md-6 offset-md-2" style="margin-top:100px">
         <h2><b>学生管理系统 v1.0</b></h2>
         <hr>
       </div>
       <div class="row py-5">
        <form action='<c:url value="/login"/>' method="post" class="col-12 col-md-6 offset-md-3">
           <div class="form-group">
		    <label for="userno">账户名称</label>
		    <input name="userNo" class="form-control" placeholder="请输入6位账号信息" maxlength="6" value="${param.userNo}">
		   </div>
           <div class="form-group">
		    <label for="userno">账户密码</label>
		    <input name="userPwd" type="password" class="form-control" placeholder="请输入密码信息" maxlength="6">
		   </div>
		   <c:if test="${not empty errMsg}">
            <div class="alert alert-danger text-center">
			  ${errMsg}
		    </div>		
		   </c:if>		   
		   <div>
		    <input type="submit" class="btn btn-primary" value="系 统 登 录">
		   </div>		   		               
        </form>
      </div>
    </div> 
  </body>
</html>

四·新增一个去登录界面的控制器

SecurityContrller.class:


package edu.mju.stuwork.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SecurityController {

	@GetMapping("/login")
	public String toLogin() throws Exception{
		return "login";
	}
	
	
}

这个get的mapping是去登陆界面，post的login才是真正的登入

在WEB-INF下新建index.jsp：
在这里插入图片描述
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>
   <jsp:forward page="/login"></jsp:forward>
</body>
</html>

五·准备工作

在数据库添加两位用户：
在这里插入图片描述

insert into tbl_user values('000102','123456','王有财');

在这里插入图片描述
接下来的登入，将要取用户信息。以用户账号到数据库中比对，没有记录是没有这个用户；有一条记录，查询密码是否匹配，不匹配就是密码不正确。还是有Dao的。

六·新建UserDao

这个Dao只做查询就可以实现登入了
创建一个接口：
UserDao:

package edu.mju.stuwork.dao;

import edu.mju.stuwork.domain.User;

public interface UserDao {

	User getUserByNo(String userNo);
	

}

七·添加映射

接着写一个映射叫做UserMapper：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  

  
  <mapper namespace="edu.mju.stuwork.dao.UserDao"><!-- 添加Mapper的命名空间，是这个Mapper唯一的ID，作为一个ID的话，还是域名最靠谱，Mapper的作用是告诉mybatis应该怎么办 -->

     <select id="getUserByNo" parameterType="String" resultType="User">
      select *
      from tbl_user
      where user_no=#{userNo}<!-- 只有一个参数 -->
   </select>
  
    
</mapper>

在这里插入图片描述

八·新建UserService

package edu.mju.stuwork.service;

import edu.mju.stuwork.domain.User;

public interface UserService {
	User getUserByNo(String userNo);
}

九·新建UserService的实现类UserServiceImpl

package edu.mju.stuwork.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import edu.mju.stuwork.dao.UserDao;
import edu.mju.stuwork.domain.User;

@Service
public class UserServiceImpl implements UserService {

	@Autowired
	private UserDao userDao;

	@Override
	public User getUserByNo(String userNo) {
		return userDao.getUserByNo(userNo);
	}

}

十·回到控制器实现真正的login

修改SecurityController：
使他在登入时输出user的信息以供检查：

package edu.mju.stuwork.controller;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import edu.mju.stuwork.domain.User;

@Controller
public class SecurityController {

	@GetMapping("/login")
	public String toLogin() throws Exception{
		return "login";
	}
	
	@PostMapping("/login")
	public String login(User user) throws Exception{
		System.out.println(user);
		return null;
	}
	
	
}

十一·为User添加toStrong

每次手动实现toSting效率比较低：
引入lang的增强包：
即我们在上面做的：
在这里插入图片描述
引入lang包，重写他的toString。使用反射机制，自动的分析java类的各个属性，自动生成toString；
在ValueObject写上这个，其他继承了ValueObject的类都不要重写toString了。

回到控制器，添加以后会用到的UserService：
在这里插入图片描述

测试：
在这里插入图片描述

在这里插入图片描述
toString（用户名，哈希码）：

十二·在控制器实现登入功能

回到SecurityController：
修改如下：

 	@PostMapping("/login")
	public String login(User user,Model model,HttpSession session) throws Exception{
//		System.out.println(user);
		User u = userService.getUserByNo(user.getUserNo());
		
		if(u==null){ //没有这个账号
			model.addAttribute("errMsg", "没有这个用户账户，请检查!");
		    return "login";
		}//账号存在，进一步进行密码的检测。用户存在，但密码不正确	
		else if(!user.getUserPwd().equals(u.getUserPwd())){//检测从网页获取的密码与数据库中的密码是否相等
			model.addAttribute("errMsg", "用户存在，但密码不正确，请检查!");
			return "login";//再次回到登入界面
		}
		else{//账号密码匹配，获取session，session是一个在多个请求中进行数据分享的公共场所。
			session.setAttribute("loginedUser", u);
			return "redirect:/students";//重定向
		}

	}

查不到记录 “u”就是空了

在网页部分准备好了：
c if：如果c if的条件为真，就把c if 开始和结束标签之间的内容显示出来。
alert：提示框
alert-danger：危险提示框
text-center：文字居中的提示框
在这里插入图片描述
如果errMsg不为空就将其显示出来。

测试：
在这里插入图片描述

三种情况都可以。
tips：暂时禁用断点的方法

账号在密码输入错误后还在，仿佛系统会记住：
在这里插入图片描述
是因为：

获得提交参数中的userNo，是一种便捷方式。

十三·显示用户信息及登出系统

来到list_student.jsp：
修改：

   <h3 class="mt-5 mb-3">
                学生信息列表
        <small class="mr-2" style="float:right">
                       操作员：${loginedUser.userName} 
          <button class="btn btn-primary btn-sm" onclick="showLogoutDlg();">离开</button>                       
        </small>
   </h3>

当点击按钮时，应该出现应该模态窗：

添加：

   <!-- 退出系统模态窗口 -->
   <div class="modal fade" tabindex="-1" id="logoutModal" >
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title">操作提示</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <p id="logoutMsg"></p>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" onclick="logout()">确认</button>
	      </div>
	    </div>
	  </div>
   </div>

直接这么写：
在这里插入图片描述
是可以打开模态窗，但是，不能显示动态的文字。

添加JavaScript：
找到logoutMsg显示一些信息，把模态窗开起来:

function showLogoutDlg(){
	$("#logoutMsg").text("${loginedUser.userName},确认要退出系统吗?");
	$('#logoutModal').modal('show');
}

那么怎么退出系统呢？
来到SecurityController：

添加：

	@GetMapping("/logout")
	public String logout(HttpSession session) throws Exception{
		
		
		session.removeAttribute("loginedUser");//把用户信息拿掉
		session.invalidate();//废除这个session
		//重新回到登入界面
		return "redirect:/login";
		
	}

在list_student.jsp添加，脚本：

function logout(){
	location.href='<c:url value="/logout"/>';
}

测试：
在这里插入图片描述

三维空间的二维生物

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录