登录注册demo

于 2023-01-18 20:28:33 发布
阅读量169 收藏
点赞数
分类专栏： javaweb 文章标签： web java tomcat servlet maven
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49229860/article/details/128730034
版权

登录

1. 准备环境

  • 静态页面：login.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="loginServlet" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

</body>
</html>

  • 数据库：user.sql

    -- 创建用户表
CREATE TABLE tb_user(
	id int primary key auto_increment,
	username varchar(20) unique,
	password varchar(32)
);

-- 添加数据
INSERT INTO tb_user(username,password) values('zhangsan','123'),('lisi','234');

SELECT * FROM tb_user;

  • pojo：User.java

  • pom.xml加入依赖坐标：Mybatis 和 Mysql驱动

  • mybatis-config.xml : resource目录下

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--起别名-->
    <typeAliases>
        <package name="com.itheima.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///db1?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="root"/>
                <property name="password" value="root"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.itheima.mapper"/>
    </mappers>
</configuration>

  • Usermapper.xml ：resource/com/itheima/mapper

  • Usermapper接口：java/com/itheima/mapper

2.代码实现

  • UserMapper接口中提供一个接口方法：根据username和password查询用户对象

    package com.itheima.mapper;

import com.itheima.pojo.User;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface UserMapper {
    @Select("select * from tb_user where username=#{username} and password = #{password}")
    User select(@Param("username") String username, @Param("password") String password);
}

  • Usermapper.xml （如果sql语句简单使用注解进行映射，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="com.itheima.mapper.UserMapper">

    <select id="select" resultType="com.itheima.pojo.User">
        select * from tb_user where username=#{username} and password = #{password}
    </select>
</mapper>

  • login.html设置form标签action=LoginServert

        <form action="LoginServlet" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>

  • LoginServert：com.itheima.web

    • 获取用户名和密码，

    • 调用mybatis查询，

    • 判断查询结果

      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 {
        //1.获取请求参数
        String username = request.getParameter("username").trim();
        String password = request.getParameter("password").trim();
				//2.mybatis查询数据
        //2.1加载核心配置文件
        InputStream inputStream = Resources.getResourceAsStream("mybatis-config.xml");
        //2.2使用sqlSessionFactory创建sqlSession
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3使用sqlSession获取userMapper代理对象，执行方法，获取查询结果
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        User user = userMapper.select(username,password);
				//3.释放资源
        sqlSession.close();
				//4.response设置ContentType
        response.setContentType("text/html;charset=utf-8");
      	//5.根据user是否为null，在页面写登录是否成功
        PrintWriter writer = response.getWriter();
        if (user!=null){
            writer.write("登陆成功");
        }else {
            writer.write("登陆失败");
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

  • 测试

注册

代码实现

  • register.html：action指向registerServlet

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="registerServlet" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>

  • 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.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取前端请求数据，将用户名密码封装为User，为插入数据做准备
        String username = request.getParameter("username").trim();
        String password = request.getParameter("password").trim();
        User u = new User();
        u.setUsername(username);
        u.setPassword(password);
        //2.mybatis查询数据
        InputStream inputStream = Resources.getResourceAsStream("mybatis-config.xml");
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        SqlSession sqlSession = sqlSessionFactory.openSession();
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //根据用户名查询，并返回User对象，
        //注意User实体类要有全参数的构造方法，才可以根据查询结果封装对象
        User user = userMapper.selectByUsername(username);

        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        if (user!=null){
            writer.write("用户名已存在");
        }else {
            userMapper.add(u);
            //mybatis默认开启事务，所以需要提交事务，这样插入数据才可以生效
            sqlSession.commit();
            sqlSession.close();
            writer.write("注册成功");
        }

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

  • UserMapper接口

    package com.itheima.mapper;

import com.itheima.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface UserMapper {
    @Select("select * from tb_user where username=#{username} and password = #{password}")
    User select(@Param("username") String username, @Param("password") String password);

    @Select("select * from tb_user where username=#{username}")
    User selectByUsername(String username);
    @Insert("insert into tb_user values (null,#{username},#{password})")
    void add(User user);
}

SqlSessionFactory工具类抽取

  • 由于每个Servlet里面进行mybatis查询时都有重复的代码

    • sqlSessionFactory工厂类重复创建
    				InputStream inputStream = Resources.getResourceAsStream("mybatis-config.xml");
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
  • 抽取SqlSessionFactory工具类
    • 重复代码抽取工具类
    • 对指定的代码只需要执行一次可以使用静态代码块
程序员行云
关注
专栏目录
html简单的注册页面
12-15
很简单的html的网页制作,包含基本的注册功能
Vue小demo—美团注册页面
sinat_50265804的博客
02-12 1459
一、目标效果 效果图展示 实现原理 1.输入框聚焦时边框变色 使用CSS的:focus选择器，轻松实现元素聚焦时改变样式。 //用法示例 <!DOCTYPE html> <html> <head> <style> input:focus { background-color:yellow; } </style> </head> <body> <p>在文本框中点击，您会看到黄色的背景：<
VueDemo-10.注册用户
a9874561328的博客
02-09 3355
10.注册用户 10.1 构建注册页面 src/views/register/step1.vue <template> <div class="form"> <van-field v-model="tel" type="tel" placeholder="请输入手机号" /> <div class="my-button"> <van-butt......
百度注册页demo
11-28
自己写的纯html的百度注册页面，适合初学者学习css的布局。
好看的登录注册界面demo
10-31
提供精美好看的登录、注册页面 简漂洁亮的HTML5登录界面，内置CSS、js、图片资源 帮助你设计登录界面
iOS简单登录注册demo
06-12
在iOS开发中，创建一个简单的登录注册界面是常见的需求，这个"iOS简单登录注册demo"就是一个实例，展示了如何实现用户登录和注册的功能，并将用户信息存储在本地。在这个项目中，我们将探讨以下几个关键知识点： 1....
jfinal 登录注册demo
07-22
在这个"jfinal 登录注册demo"中，我们可以看到一系列实现网页登录、注册、用户管理以及文件上传功能的实践案例。 1. **登录功能**： - JFinal 提供了内置的 Session 插件，用于处理用户的登录状态。在登录页面，...
Android：简单登录注册Demo
06-13
这个"Android：简单登录注册Demo"就是一个实例，展示了如何利用SQLite数据库实现本地存储用户信息的功能。以下将详细介绍该Demo中的关键知识点。 1. **SQLite数据库**： SQLite是一个轻量级的嵌入式数据库，无需...
nodejs用户登录注册demo示例
08-24
在本文中，我们将深入探讨如何使用Node.js和Express框架构建一个用户登录注册的示例应用。这个应用将结合MySQL数据库来存储用户数据，并实现基本的注册、登录以及登录后跳转到系统界面的功能。 首先，我们需要了解...
仿京东会员注册demo html页面
04-14
仿京东会员注册demo，html文件，用户名，密码，邮箱，手机号验证 js验证。简单的一个仿京东注册表单。
注册页面demo
07-27
注册页面的demo
登录页面demo
07-03
这是用as2.3写的一个登录页面的demo，自己亲测可以的，希望对大家有帮助。
登录注册Demo.zip
06-12
实现android的登录注册和连接mysql数据库，包括源代码和mysql数据文件。APP布局和请求部分用androidstudio运行，服务端导入到Eclipse，然后Run As-Java Application运行，注意IP地址改为和局域网IP一致。
Spring Boot简单登录注册demo
08-13
**Spring Boot简单登录注册demo** 在Java开发领域，Spring Boot框架因其便捷的初始化、自动配置以及丰富的生态而受到广泛欢迎。本示例是基于Spring Boot实现的一个简单的登录注册功能，旨在帮助初学者快速理解如何...
网站注册页面Demo及表单验证功能源码
半亩方塘
07-09 6469
页面的构建简单地应用了bootstrap，通过js代码实现了注册表单的验证功能。代码如下：<!DOCTYPE html> <html> <head> <title>用户注册</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- 用于适应不
注册页面Demo(servlet)
thing15636的博客
07-29 624
思路：创建表单页面获取用户输入信息，通过post方式提交到servlet页面，然后通过BeanUtils工具类将获取到的数据封装成domain对象，最后通过register方法将domain对象通过DBUtils和C3P0写入数据库中。 servlet页面代码如下： package register; import java.io.IOException; import java.lang...
android studio调用API登录注册DEMO
02-10
3. **异步处理**：登录注册通常涉及网络IO操作，因此应该在后台线程执行，防止阻塞UI。可以使用AsyncTask、Handler/Looper或者现代的Coroutines和Flow（Kotlin扩展）来实现异步处理。 4. **Android权限管理**：在...
SSM整合进阶之---简单登录注册demo
08-10
SSM整合进阶之---简单的登录注册，用demo学习。在前一篇框架整合上做了简单的登录注册功能。欢迎下载留言。 使用参考：https://blog.csdn.net/x_san3/article/details/81562496
模仿TIM客户端的登录注册demo实现
本文档主要介绍了由曾德明编写的模仿TIM客户端登录注册功能的Android应用。该应用是一个简单的登录和注册Demo，其界面设计和风格参照了TIM客户端，采用Android Studio开发，并在GitHub上公开了源代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值