音乐播放器javaweb项目近日总结，用js，css，HTML，servlet，mybatis来写注册登录忘记密码（还没写好）

香蕉你个不呐呐635

于 2024-09-03 23:03:56 发布

阅读量282

点赞数 3

文章标签： javascript css html

本文链接：https://blog.csdn.net/2302_80637450/article/details/141873229

版权

这几天学了js，css，HTML，servlet，mybatis，还有axios，目前axios还没有用到，学的比较慢因为那个servlet，axios我看不懂，可能看懂了然后不会用，之后给我们上了一节课，感觉每一个东西单独拆开好像学过，但是放在一起听的很懵，今天我就到处翻博客反复看了点代码，终于知道了一点前后端交互就赶紧写了点。

因为是小白所以写的有些感觉没必要写的比较详细方便自己记忆

1.前端界面代码

html文件：（css，和js就省略了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="RjLnFt.css">
</head>
<body>
<div class="container">
    <h1>注册</h1>
    <form action="/register" method="POST">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
            <ul>
                <li id="EE">邮箱无效！</li>
            </ul>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
            <ul>
                <li id="length-tip">密码必须至少8位。</li>
                <li id="letter-tip">密码必须包含字母。</li>
                <li id="number-tip">密码必须包含数字。</li>
            </ul>
        </div>
        <div class="form-group">
            <label for="verification-code">验证码</label>
            <div class="input-group">
                <input type="text" id="verification-code" name="verification-code" placeholder="请输入验证码" required>
                <button type="button">获取验证码</button>
            </div>
        </div>
        <div class="form-group1">
            <button type="submit" class="submit-button">注册</button>
        </div>
    </form>
    <p class="login-link">已有账号？<a href="SongLogin.html">登录</a></p>
</div>
<script src="fun.js"></script>
</body>
</html>

代码解释：

使用了 <form> 标签，将所有表单元素包裹起来。
设置了 action="/register"，指定了表单提交的目标 URL。
设置了 method="POST"，指定了提交的 HTTP 方法。
为每个输入字段添加 name 属性，以便在服务器端能够识别表单数据。

action属性指定了表单数据提交到 /register URL，method属性指定了使用POST方法提交数据。

URL是指在web应用程序中定义的请求路径。

eg：（反射和注解通俗来讲就是反射来找注解再找类）

我在web.xml中配置了一个Servlet映射，将/register路径映射到RegisterServlet,其中的/register就是URL，看代码：


<!--  配置Servlet-->
  <servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>com.example.servlet.RegisterServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name> RegisterServlet</servlet-name>
    <url-pattern> /register</url-pattern>
  </servlet-mapping>

2.后端代码

RegisterServlet需要处理 POST 请求，从请求中提取表单数据，并与数据库进行交互。

当用户通过 POST 方法向 /register 发送请求时 RegisterServlet 的 doPost 方法将会被调用。


@WebServlet("/register") // 定义Servlet的URL映射
public class RegisterServlet extends HttpServlet {
    //这个是序列化机制的一部分，一般都写在这，不用很管他
    private static final long serialVersionUID = 1L;

    // 处理POST请求
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取表单提交的参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String email = request.getParameter("email");

从表单获取数据后，再加入数据库

3.加入数据库部分

我用的是mybatis

1.先配置环境：


   <!--mybatis 依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.16</version>
    </dependency>



    <!--mysql 驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.46</version>
    </dependency>

2.封装一个user类用来到时候用

直接将数据封装到user里面传过去，后续调用mapper

我下面的代码不全，而且也不是我写song项目的user只是学习mybatis测试用的


public class User {
//alt+鼠标左键可以列编辑
    private Integer id;
    private String username;
    private String password;
    private String gender;
    private String addr;

    public User() {
    }

    public Integer getId() {
        return id;
    }

3.写mapper部分

这是一个接口，可以把操作数据库所有的方法都写在这里面，后面方便调用


public interface UserMapper {

    //查询所有
    List<User> selectAll();

    //根据id查询
    User selectById(int id);

    //条件查询
    //1散装参数：如果方法中有多个参数，需要使用@Param("SQL参数占位符名称")
    //2.对象参数：对象的属性名称要和参数占位符名称一致
    //3.map集合参数
    List<User> selectByCondition(@Param("username") String username,@Param("gender") String gender);

    List<User> selectByCondition(User user);

    List<User> selectByCondition(Map map);


    /**
     * 单条件动态查询
     * @param user
     * @return
     */
    List<User> selectByConditionSingle(User user);

    /**
     * 添加
     */

    void add(User user);

    /**
     * 修改
     */
    int update(User user);

    /**
     * 根据id删除
     */

    void deleteByid(int id);

}

这是对应xml文件的sql语句：


<!--  添加-->

    <insert id="add" useGeneratedKeys="true" keyProperty="id">
             insert into tb_user (username,password,gender,addr)
             values (#{username},#{password},#{gender},#{addr});
    </insert>

4.将数据加入数据库

然后表单加入的数据就可以调用这个法加入了

 //1.获取SqlSessionFactory
        //1.加载mybatis的核心配置文件，获取SqlSessionFaxtory
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        //2.获取SqlSession 对象，用它来执行sql
        SqlSession sqlSession = sqlSessionFactory.openSession();//在这里面其实是可以写true或者false的没写为f表示要手动提交

        //3.1获取UserMapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper((UserMapper.class));

        userMapper.add(user2);

        //提交事务
        sqlSession.commit();

        //5.释放资源
        sqlSession.close();

香蕉你个不呐呐635

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
音乐播放器javaweb项目近日总结，用js，css，HTML，servlet，mybatis来写注册登录忘记密码（还没写好）

这几天学了js，css，HTML，servlet，mybatis，还有axios，目前axios还没有用到，学的比较慢因为那个servlet，axios我看不懂，可能看懂了然后不会用，之后给我们上了一节课，感觉每一个东西单独拆开好像学过，但是放在一起听的很懵，今天我就到处翻博客反复看了点代码，终于知道了一点前后端交互就赶紧写了点。因为是小白所以写的有些感觉没必要写的比较详细方便自己记忆。
复制链接

扫一扫