Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）附源码「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面。对用户输入的用户名和密码就行校验，校验通过则登录成功，密码和用户信息保存在mysql表中，通过MyBatis访问（MyBatis相关知识可参考先前的文章MyBatis测试）。先给出最终的效果图：

登录成功则进入如下页面：

登录失败，则进入如下页面：

如果输入的密码或者用户名为空或者不合法，则页面上提示：

（一）安装配置tomcat

这里使用的是tomcat 8.0，直接官网下载压缩包解压，然后添加环境变量TOMCAT_HOME（值为D:\apache-tomcat-8.0.52）并修改CLASSPATH环境变量（末尾添加%TOMCAT_HOME%\BIN），然后在D:\apache-tomcat-8.0.52\bin下双击startup.bat运行tomcat，运行成功，在浏览器中输入http://localhost:8080/，可见欢迎页面如图：

（二）eclipse配置tomcat 8.0

window–>preferences–>Server–>runtime environments，添加tomcat 8.0,然后apply即可。

双击server视图中的tomcat 8.0,需要如下配置，否则运行时可能会报错。

（三）eclipse创建Dynamic Web project

先给出工程视图如下：

具体步骤如下：

（1）创建Dynamic Web project工程，命名为LoginTest

注意选中下图中的单选框，这样自动创建一个web.xml文件

(2) 编写 index.jsp（这里只使用了index.jsp作为登录页面，注册查询等可以类似实现），先给出最终的index.jsp。实际上对于最简单的java web程序，只有一个web.xml和index.jsp即可运行，index.jsp的body中只写hello world，然后再tomcat上运行，就可实现java web的hello world。最终版本的index.jsp用到了模板css/init.css（用于初始化css的一些基本配置，以便屏蔽一些浏览器差异），css/login.css则是自定义的登录界面的样式；index.jsp还用到了js/login.js，利用javascript对输入框信息做一些校验并给出提示。最终的源码包中给出相应文件。

index.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

   <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>登录界面</title>
		<link rel="stylesheet" href="css/inti.css" type="text/css" />
		<link rel="stylesheet" href="css/login.css" type="text/css" />
		
		
	</head>
    
	<body>
	    
		
	    <!--absolute 绝对定位相对于父元素 不占空间 z-index属性-->
		<div id="bg">  
			<div class='div_logo'>
				<p >用户登录</p>
			</div>
			
			<div class='div_form'>
				 
				<form name='login' action='Login' onsubmit='return validation()' method='post'>
						<div class='div_login_input' id='user'>
							<div id='icon_user'></div>
							<input class='login' id='username' type='text' name='username' placeholder='用户名'></input>
							<span class='hint' id='hint_user'></span>
						</div>
					
						<div class='div_login_input' id='pwd' >
							<div id='icon_pwd'></div>
							<input class='login' id='password' type='password' name='password' placeholder='请输入密码'></input>
							<span class='hint' id='hint_pwd'></span>
						</div>
						
						<div class='div_btn'>
							<input id='login_submit'  type='submit'  value='登录'></input>
						</div>
				</form>
			
		</div>

		<script src='js/login.js'></script>
		
	</body>

</html>

（3）编写LoginServlet.java

package com.test.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.ibatis.session.SqlSession;

import com.test.dao.*;
import com.test.util.GetSqlSession;

public class LoginServlet extends HttpServlet{
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException{
		UserDaoImplement usrdao = new UserDaoImplement();
		SqlSession session = GetSqlSession.createSqlSession();
		
		String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=UTF-8");

        
        try {
			PrintWriter pw = resp.getWriter();
			pw.println("<html>");
			pw.println("<body>");
			if(usrdao.verify(username, password, session)==true)
			{
				pw.println("Login success.");
			}
			else
			{
				pw.println("Login failed. Wrong username or password");
			}
			pw.println("</body>");
			pw.println("</html>");
			pw.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

LoginServlet.java获取提交的用户名和密码信息，调用验证方法进行验证，并根据验证结果写验证成功或者失败的界面。这里没有主方法，因为tomcat运行时存在一个主方法。

（4）配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>test</display-name>
  
  <welcome-file-list>
  	<welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.test.servlet.LoginServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
     <servlet-name>LoginServlet</servlet-name>
     <url-pattern>/Login</url-pattern>
   </servlet-mapping>
</web-app>

web.xml功能页面使用的类以以及类与url-pattern之间的关系。web.xml和index.jsp以及LoginServlet.java可构成一个web service,其中inde.jsp定义了页面，LoginServlet.java是提供服务的程序，而web.xml指定了页面与servlet类之间的映射关系，即某个功能页面使用哪个类在后台进行处理。

（5）配置MyBatis访问数据库中的用户表

首先建立用户表，插入两条数据：

create database  test;
use test;

create table tbl_user(
   username       varchar(32)    NOT NULL,
   password   varchar(32)            ,
   PRIMARY KEY ( username )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into tbl_user values("admin", "admin");
insert into tbl_user values("testname", "123456");

然后参考先前的文章MyBatis测试配置MyBatis使用的config/Configure.xml ，mysql.properties以及UserMapper.xml，文章最后在源码中给出。这里先给出表对应的实体类User.java和UserMapper.xml:

User.java:

package com.test.entity;

public class User {
	private String username;
	private String password;
	
	//无参构造方法
	public User(){
		
	}
	
	//有参构造方法
	public User(String username, String password){
		this.username = username;
		this.password = password;
	}
	
	public void setUsername(String username){
		this.username = username;
	}
	
	public void setPassword(String password){
		this.password = password;
	}
	
	public String getUsername(){
		return this.username;
	}
	
	public String getPassword(){
		return this.password;
	}
}

UserMapper.xml:

<?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="UserMapper">
	<select id="getUserByName" parameterType="String" resultType="User">
		select * from tbl_user where username = #{username}
    </select>
</mapper>

访问数据库使用GetSqlSession类，该类利用Configure.xml文件获取sqlSessionFactory实例，并返回一个用于操作数据库的SqlSession实例。GetSqlSession.java如下：

package com.test.util;

import java.io.IOException;
import java.io.InputStream;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class GetSqlSession {
	
	public static SqlSession createSqlSession(){
		SqlSessionFactory sqlSessionFactory = null;
		InputStream input = null;
		SqlSession session = null;
			
		//创建sqlSessionFactory
	    try {
	    	input = Resources.getResourceAsStream("config/Configure.xml");
			sqlSessionFactory = new SqlSessionFactoryBuilder().build(input);
			session  = sqlSessionFactory.openSession();
			return session;
		} catch (IOException e) {
			e.printStackTrace();
			return null;
		}

	}
	
	
}

(6) dao层定义接口并实现接口中的方法

编写接口UserDao.java并由UserDaoImplement.java实现该接口，使用接口的目的是统一规范。实现接口的类，访问数据库中的tbl_user表，查找用户名和密码，与用户提交的用户名和密码进行比对，并返回校验结果。

UserDao.java:

package com.test.dao;

import org.apache.ibatis.session.SqlSession;

public interface UserDao {
	public boolean verify(String username, String password, SqlSession session);//verify username and passwd
}

UserDaoImplement.java:

package com.test.dao;

import org.apache.ibatis.session.SqlSession;

import com.test.entity.*;


public class UserDaoImplement implements UserDao {
	public boolean verify(String username, String password, SqlSession session){
		User user = (User) session.selectOne("UserMapper.getUserByName", username);
			
	    if(user == null){
	    	session.close();
	    	return false;
	    }
	    else if(user.getUsername().equals(username) && user.getPassword().equals(password))
		{
	    	session.close();
	    	return true;
		}
		else
		{
			session.close();
			return false;
		}
		
	    
	} 
}

（7）运行测试：

结果如下：

用户名只能是英文，输入用户名/密码为admin/admin或者testname/123456时候登录成功，否则登录失败。

（8）源码：https://github.com/poetteaes/git/tree/master/project/login

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/157817.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）附源码「建议收藏」

相关推荐

python——Request模块「建议收藏」

MySQL常用语句收集

win7彻底卸载iis

多年收集的一些稀有软件_魔兽世界野外稀有小宠物

Java-重载与重写的区别[通俗易懂]

实用工具系列 – Xshell安装下载与使用「建议收藏」

发表回复