大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/157817.html原文链接：https://javaforall.net
