这几天学了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();