用户注册功能实现及代码优化案例

已于 2022-06-15 15:02:28 修改
阅读量2.1k 收藏 7
点赞数 12
分类专栏： Web前端开发与Vue.js实践 文章标签： postman 测试工具 服务器 java 前端
于 2022-05-20 16:38:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61961937/article/details/124881587
版权

目录

 准备环境及一些登录界面的代码见上一个博客：

UserMapper接口添加如下代码：

增加注册的静态页面到项目的webapp目录下

register.html代码：

register.html对应的register.css代码：

RegisterServlet代码：

执行结果：

注册成功示例，数据库就会存入相应的用户名和密码：

注册失败示例：

代码优化：

问题：

SqlSessionFactoryUtils工具类代码：

将两个文件中的重复代码优化为下面代码：

流程说明：

1、用户填写用户名，密码等信息，点击注册按钮，提交到Registervlet

2、在Register中使用MyBatis保存数据

3、保存前，需要判断用户名是否已经存在，根据用户名查询数据库

dd432869829e469e8464a2f496ee388b.png

 准备环境及一些登录界面的代码见上一个博客：

用户登录功能实现案例_夏志121的博客-CSDN博客https://blog.csdn.net/m0_61961937/article/details/124862350?spm=1001.2014.3001.5502

UserMapper接口添加如下代码：

    /**
     * 根据用户名查询用户对象
     * @param username
     * @return
     */
    @Select("select * from tb_user where username = #{username}")
    User selectByUsername(String username);

    /**
     * 添加用户
     * @param user
     */
    @Insert("insert into tb_user values(null,#{username},#{password})")
    void add(User user);

增加注册的静态页面到项目的webapp目录下

register.html代码：

<!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="login1.html">登录</a>
    </div>
    <form id="reg-form" action="/Webapp/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>

register.html对应的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;
}

RegisterServlet代码：

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 {
        //1、接收用户密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //封装用户对象
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        //2、使用mapper,根据用户名查询用户对象
        //2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        //2.4使用方法
        User u = userMapper.selectByUsername(username);

        //3、判断用户对象是否为null
        if( u == null){
            // 用户名不存在，添加用户
            userMapper.add(user);

            //提交事务
            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);
    }
}

执行结果：

21e4a57512aa4a2c80c2deaad64c818b.png

 注册成功示例，数据库就会存入相应的用户名和密码：

62fd4b47261944a899fa4bdc5422a839.png

注册失败示例：

ea2b32a02fe5474b915a1581e3667393.png

代码优化：

创建SqlSessionFactory代码优化下面的重复代码：

//2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

问题：

1、代码重复：使用工具类优化

2、SqlSessionFactory工厂只创建一次，不要重复创建：利于静态代码块特性优化

SqlSessionFactoryUtils工具类代码：

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 {
        //静态代码块会随着类的加载而自动执行，且只执行一次
        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;
    }
}

将两个文件中的重复代码优化为下面代码：

SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();

自此代码优化结束。

 

夏志121
关注
  • 12
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
注册功能的代码
weixin_35756637的博客
01-15 421
注册功能的代码取决于您使用的编程语言和框架。但是，在大多数情况下，您需要在您的应用程序中创建一个注册表单，该表单允许用户输入用户名和密码，并在提交表单时将这些数据发送到服务器。然后，服务器端代码将验证输入的数据(如检查用户名是否已被使用)并将新用户的信息存储在数据库中。 举例来说，下面是一个简单的注册功能使用Node.js和Express框架的代码示例: app.post('/register',...
作业 02|实现用户注册功能
m0_64018773的博客
06-14 2222
实现用户注册功能 ·前端布局 ·事件绑定处理方法 ·吐司提示 ·实现跳转 ·事件监听 ·单选按钮、复选框
实现用户注册功能 - Java Web程序设计 - 实验8
最新发布
xizhou202的博客
05-21 250
实现步骤 1.创建User类 package cn.itcast.jdbc.example.domain; import java.util.Date; public class User { private int id; private String username; private String password; private String email; private Date birthday; public int getId(){
用户注册功能实现 四 （完）
fksfdh的博客
09-21 596
用户注册功能实现 四 （完） 目的： 1、短信校验功能实现 2、注册功能实现功能实现（完） 接口校验功能： 前端通过 → js校验 后端接口views通过 → forms校验 应用技术： 1、前端：js（jQuery框架）、ajax(前后端交互)、 2、后端：django接口设计（json），csrf防跨域攻击，form表单校验功能 一、注册功能 1.业务流程...
springboot实现简单的注册登录功能
Java721的博客
02-22 2万+
spring官网 通过spring官网初始化SpringBoot项目 使用idea工具打开Springboot项目，项目结构 添加pom依赖 <!--springboot启动类--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId>
Java-web实现用户登录、注册功能
热门推荐
m0_52822058的博客
12-17 2万+
在编写代码之前，在pom.xml导入servlet、mybatis的依赖，导入tomcat插件。工具类抽取以后，以后在对Mybatis的SqlSession进行操作的时候，就可以直接使用。采用正则表达式实现用户名不超过15个字符、密码在4~10个字符。在写Servlet的时候，因为需要使用Mybatis来完成数据库的操作，所。编写UserMapper提供根据用户名查询用户数据方法和添加用户方法。编写UserMapper提供根据用户名、密码查询用户数据方法方法。来一个登录失败的案例：admin用户不存在。
js实现用户注册协议倒计时的方法
12-10
以上就是使用JavaScript实现用户注册协议倒计时的方法，通过合理的代码结构和逻辑，我们可以创建一个高效且易于维护的功能。在实际开发中，根据项目需求和规范，可以进一步优化和完善这个功能。
代码雨背景用户注册表单代码
04-25
【代码雨背景用户注册表单代码】是一种网页设计技术，主要用于创建吸引用户的会员注册界面。在这样的表单中，背景通常会使用动态的“代码雨”效果，即一系列编程代码字符像雨水一样从屏幕顶部向下飘落，为网页增添...
tongxuelu.zip_sql用户注册_tongxuelu
09-19
本文将深入探讨“同学录”系统中的SQL用户注册功能，解析其实现原理，并结合“tongxuelu.zip”文件，为大家展示一个简单但实用的同学录系统的构建过程。 一、SQL用户注册基础 SQL（Structured Query Language）是...
PHP.rar_sms api php_用户api_用户注册实现短信验证码_短信验证码
09-23
在本案例中，我们探讨的是如何使用PHP语言来实现这一功能，特别是通过调用短信分发平台的API来发送短信验证码。下面我们将详细讲解相关的知识点。 1. **用户注册流程**： - 用户输入手机号码。 - 服务器接收到...
ASP.NET用户注册及判断用户是否在在
03-16
在这个特定的案例中，我们关注的是一个用户注册和检查用户是否在线的示例应用。这个应用使用了.NET源码，特别适合初学者进行学习和实践。 首先，用户注册功能是任何Web应用程序的核心部分。在ASP.NET中，这通常涉及...
用户注册源代码demo
04-19
用户注册代码demo，采用手机号码验证码注册，后台校验，验证码存redis
注册新用户例子(C#源代码)
12-12
注册新用户例子(C#源代码) 简单的注册新用户,希望对大家有用,VS2008
Java Web实现登录注册（超详细附代码），web开发学习教程
2401_84093054的博客
04-03 2406
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。中…(img-X9gFApvR-1712114889509)][外链图片转存中…(img-97cFfvyT-1712114889509)]
Python代码：用户登录注册
asunshineboy的博客
05-23 1万+
*简单的Python代码：用户登录注册 利用业余时间，写了一个用户进行登录注册的代码，非常简单。主要实现的功能是： 可以进行用户登录，在用户进行登录之前，对用户名进行检查，查看是否是已经注册的用户，如果是已经注册的用户，则直接登录；如果是未注册的用户，需要进行注册才可以登录 用户名检查：用户名长度为8~18位，不在这个数字范围内的用户名不可以进行登录，字符不限 用户密码检查：密码长度为8~18位，不在这个范围内的用户名也是不可以进行注册的，字符不限（其实用户名和密码的长度都是可以自己改的） 不允许注册已经
PHP连接数据库实现用户注册登录功能
YouthBelief的博客
10-07 1万+
PHP连接数据库实现用户注册登录功能 代码如下dbconnect.phplogin.htmlregister.phplogin.phpindex.phplogout.php ) 代码如下 数据库连接，登录页面，注册功能，登录功能，后台页面，注销功能。 dbconnect.php <?php $server = "localhost"; $db_username = "root"; $db_passwd = "123456"; $dbname = "test";
java 注册实现_javaweb中注册功能的实现
weixin_42154650的博客
02-20 656
注册功能的实现实验步骤1、创建数据库mydb，字符编码为utf-8。2、在mydb数据库中创建一个tb_user表，该表的结构如下所示： 3、在eclipse中导入试验1的工程，导入后的工程结构图如下所示： 4、复制register文件夹到WebContent目录下，该文件夹包含注册页面及相关资源。5、编写字符串加密的类Md5Encrypt。在src目录下创建一个名为“swu.xxj.util”的...
[React 实战系列] 注册功能的优化
GoldenaArcher的博客
11-26 1262
[React 实战系列] 注册功能的优化注册功能的优化获取注册状态注册流程的优化清空表单显示成功提示信息显示失败提示信息重置状态 之前已经实现的内容： 项目开始前的准备工作 项目的搭建与配置 布局、登录、注册的页面实现及 Route 的封装 注册功能的实现 至上一篇为止，注册的基本功能已经实现了，但是用户注册了之后 UI 没有与用户实现有意义的互动，并且当用户回到注册页面的时候，基本的注册信息被持久化在页面上。 这一篇主要实现的目的就是对这些功能进行优化。 注册功能的优化 一般页面注册流
vue用户登录注册案例
05-31
好的，下面我将为您提供一个基于Vue的用户登录和注册的案例代码，供参考： 1. 创建一个名为`Login.vue`的登录组件，并设置登录表单： ``` <template> <div> <h2>用户登录</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="username" placeholder="请输入用户名"> </div> <div> <label>密码:</label> <input type="password" v-model="password" placeholder="请输入密码"> </div> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 发送登录请求 axios.post('/api/login', { username: this.username, password: this.password }).then(response => { // 登录成功 this.$store.commit('login', response.data) this.$router.push('/') }).catch(error => { // 登录失败 console.log(error) }) } } } </script> ``` 2. 创建一个名为`Register.vue`的注册组件，并设置注册表单： ``` <template> <div> <h2>用户注册</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="username" placeholder="请输入用户名"> </div> <div> <label>密码:</label> <input type="password" v-model="password" placeholder="请输入密码"> </div> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { register() { // 发送注册请求 axios.post('/api/register', { username: this.username, password: this.password }).then(response => { // 注册成功 this.$router.push('/login') }).catch(error => { // 注册失败 console.log(error) }) } } } </script> ``` 3. 在`main.js`文件中配置路由和Vuex： ``` import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import Vuex from 'vuex' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) Vue.use(Vuex) const router = new VueRouter({ routes: [ { path: '/login', component: Login }, { path: '/register', component: Register } ] }) const store = new Vuex.Store({ state: { user: null }, mutations: { login(state, user) { state.user = user } } }) new Vue({ el: '#app', router, store, render: h => h(App) }) ``` 4. 在后端服务器上设置API路由，并处理登录和注册请求： ``` const express = require('express') const bodyParser = require('body-parser') const app = express() app.use(bodyParser.json()) const users = [] app.post('/api/login', (req, res) => { const user = users.find(u => u.username === req.body.username && u.password === req.body.password) if (user) { res.json(user) } else { res.status(401).send('用户名或密码不正确') } }) app.post('/api/register', (req, res) => { const user = users.find(u => u.username === req.body.username) if (user) { res.status(409).send('用户名已存在') } else { users.push(req.body) res.sendStatus(201) } }) app.listen(3000, () => { console.log('服务器已启动') }) ``` 以上是一个简单的Vue用户登录和注册的案例，您可以根据自己的实际需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏志121

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值