css、html源码在底部
用户登录：
准备环境：
2、创建数据库(db2数据库)：
-- 创建用户表
create table tb_user(
id int primary key auto_increment,
username varchar(20) unique ,
password varchar(32)
);
-- 添加数据
insert into tb_user(username, password) VALUES
('junker',123),('kitty',456);
3、导入坐标 (桌面总结的有)
4、创建mtbatis-config.xml核心配置文件,UserMapper.xml映射文件,UserMapper接口 (直接官网复制修改一下即可,具体操作看Mybatis笔记)
流程：
代码演示：
loginServlet路径下的资源：
package com.itheima.web;
import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 接收客户端输入的用户名和密码请求
String username =request.getParameter("username");
String password =request.getParameter("password");
User user =new User();
user.setUsername(username);
user.setPassword(password);
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
SqlSession sqlSession =sqlSessionFactory.openSession();
UserMapper userMapper =sqlSession.getMapper(UserMapper.class);
User user1 =userMapper.select(user);
// System.out.println(user1); // 可测试：当我们接收的有数据的时候返回给我们都是：
// User{id=2, username='kitty', password='456'}
response.setContentType("text/html;charset=utf-8"); // 解决乱码问题
PrintWriter printWriter =response.getWriter();
if (user1 != null){
// 登录成功（响应给客户端）
printWriter.write("登录成功");
}else {
// 登录失败
printWriter.write("登录失败");
}
// 释放资源
sqlSession.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
把request对象拿到的客户端输入的账户和密码传到接口的select方法中：(接下来的操作就是mybatis对数据库的增删改查问题了)：
简单的sql语句直接在UserMapper接口中通过注释的方法写sql语句即可,不用再在sql映射文件中写sql语句了
最终sql语句查询的结果返回给的是调用该select接口方法的地方 (这里是以User对象形式返回)
注意：这里的User对象属性名要和#{占位符} 占位符一样,要不然不知道封装到数据传给sql语句哪个位置 并且User对象属性名要和数据库字段名保持一样,要不然sql语句查询的结果返回给User对象的属性名当中的时候,不知道返回到哪个属性当中
演示结果如下：
用户注册：
registerServlet路径下的资源如下：
package com.itheima.web;
import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// req对象接收用户输入的用户名和密码注册请求
String username =request.getParameter("username");
String password =request.getParameter("password");
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
SqlSession sqlSession =sqlSessionFactory.openSession();
UserMapper userMapper =sqlSession.getMapper(UserMapper.class);
User user =userMapper.selectByUsername(username); // 把用户请求的用户名传到接口方法中去sql语句中查询一下是否已存在
if (user == null){
// 查询结果为null 说明用户名在数据库当中不存在 所以可以让客户注册
// 我们把客户的用户名和密码传入接口中的添加方法,调用sql插入语句即可把客户端注册信息存放到数据库中
// 把用户的请求信息封装到对象属性中传给接口的方法
User user1 =new User();
user1.setUsername(username);
user1.setPassword(password);
userMapper.add(user1);
// 响应给用户注册成功信息
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("注册成功,欢迎您~");
// 注意： 插入数据库数据的时候 需要开启事务 要不然插入不进去
sqlSession.commit();
// 释放资源
sqlSession.close();
} else {
// 不为空 说明用户已经存在 响应给用户存在的信息即可
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("用户名已存在,注册失败~");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
注册接口调用的方法：
注册演示如下：
数据库变化 注册添加数据成功：
SqlSessionFactory工具类抽取我们会发现以上登录注册的代码中：登录资源和注册资源中有一部分代码是一直重复写的
解决方法：
代码：
package com.itheima.util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class SqlSessionFactoryUtils {
private static SqlSessionFactory sqlSessionFactory;
static {
// 静态代码块会随着类的加载而自动执行,且只执行一次
// 把登录/注册资源下重复的sqlSession工厂代码放入静态代码块中
try {
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
public static SqlSessionFactory getSqlSessionFactory(){
return sqlSessionFactory;
}
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
login.css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url("../imgs/IMG_4095(20211225-212537).JPG") no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
#username{
width: 200px;
}
#password{
width: 202px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
#subDiv {
text-align: center;
margin-top: 30px;
}
#loginMsg{
text-align: center;color: aliceblue;
}
login.html：
login
样式演示：
register.css源码:
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.reg-content{
padding: 30px;
margin: 3px;
}
a, img {
border: 0;
}
body {
background-image: url("../imgs/reg_bg_min.jpg") ;
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
height: 90px;
}
.inputs{
vertical-align: top;
}
.clear {
clear: both;
}
.clear:before, .clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.form-div {
background-color: rgba(255, 255, 255, 0.27);
border-radius: 10px;
border: 1px solid #aaa;
width: 424px;
margin-top: 150px;
margin-left:1050px;
padding: 30px 0 20px 0px;
font-size: 16px;
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
text-align: left;
}
.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
width: 268px;
margin: 10px;
line-height: 20px;
font-size: 16px;
}
.form-div input[type="checkbox"] {
margin: 20px 0 20px 10px;
}
.form-div input[type="button"], .form-div input[type="submit"] {
margin: 10px 20px 0 0;
}
.form-div table {
margin: 0 auto;
text-align: right;
color: rgba(64, 64, 64, 1.00);
}
.form-div table img {
vertical-align: middle;
margin: 0 0 5px 0;
}
.footer {
color: rgba(64, 64, 64, 1.00);
font-size: 12px;
margin-top: 30px;
}
.form-div .buttons {
float: right;
}
input[type="text"], input[type="password"], input[type="email"] {
border-radius: 8px;
box-shadow: inset 0 2px 5px #eee;
padding: 10px;
border: 1px solid #D4D4D4;
color: #333333;
margin-top: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
border: 1px solid #50afeb;
outline: none;
}
input[type="button"], input[type="submit"] {
padding: 7px 15px;
background-color: #3c6db0;
text-align: center;
border-radius: 5px;
overflow: hidden;
min-width: 80px;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}
input[type="button"]:hover, input[type="submit"]:hover {
background-color: #5a88c8;
}
input[type="button"]:active, input[type="submit"]:active {
background-color: #5a88c8;
}
.err_msg{
color: red;
padding-right: 170px;
}
#password_err,#tel_err{
padding-right: 195px;
}
#reg_btn{
margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}
register.html：
欢迎注册
欢迎注册
已有帐号？ 登录
样式演示：
