简单的用户登录，注册，与退出

最新推荐文章于 2023-07-09 17:19:15 发布

GAVINVSwithCAILE

最新推荐文章于 2023-07-09 17:19:15 发布

阅读量425

点赞数

分类专栏： Springboot Java JS 文章标签： javascript css spring boot

本文链接：https://blog.csdn.net/GAVINVSwithCAILE/article/details/128261227

版权

本文介绍了如何实现简单的用户登录、注册和退出功能。从HTML界面设计，CSS美化，JavaScript处理按钮逻辑，到Spring Boot后端的实体类、控制类、服务层、实现层和MyBatis配置，再到ResponseCode和Maven项目的配置，一步步详细阐述了整个过程。

摘要由CSDN通过智能技术生成

前言

HTML，让生活更奇妙🤣

接下来介绍的是简单的用户登录，注册，与退出

提示：以下是本篇文章正文内容，下面案例可供参考

一、登录界面

1.HTML部分

<div id="modal" class="c2">
        <form name="myForm" >
            <p class="c3">用户名 :<label>
                <input type="text" autocomplete="current-username" name="username" id="name1">
            </label></p>
            <p class="c3">密  码 :<label>
                <input type="password" autocomplete="current-password" name="password" id="pwd1">
            </label></p>
            <p class="c3">称呼  :<label>
                <input type="radio" name="identity" value="guest" checked="checked" id="guest">用户
                <input type="radio" name="identity" value="merchant" id="merchant">商家
            </label></p>
            <p class="c3">
                <input type="button" value="确认" id="submit1" onclick="toLogin()">
                <input type="button" value="注册" onclick="toRegister()">
                <input type="button" value="退出" onclick="exit()">
            </p>
    </form>
</div>

2.CSS部分

.c2{
   
    background-color: white;
    position: fixed;
    width: 400px;
    height: 300px;
    top: 50%;
    left: 50%;
    z-index: 3;
    margin-top: -150px;
    margin-left: -200px;
    background-image: url("https://img.zcool.cn/community/011c805c47cab9a801203d222422ac.png@1280w_1l_2o_100sh.png");
    font-size: 18px;
    font-family: 微软雅黑, sans-serif;
}

#modal>p{
   
    margin-left: 80px;
}

#modal .c3{
   
    line-height: 80px;
}

#modal>p>input{
   
    margin-left: 40px;
    font-size: 18px;
    background-color: gold;
}