web开发中，简单的案例说明前端页面和后端以及mysql数据库的交互过程

    首先这是一个基于**web开发**的稿子，作者也是转java20天左右，以前也一直迷惑起那段页面是如何和后端进行交互，数据提交提交到了哪里？后端开发如何获取到前端提交的数据呢？后端数据提交到数据库中应该如何处理，接下来通过一个简单的例子，登录案例（实现前端数据提交->后端获取数据->数据和数据库对比处理）

一.项目流程：

用户在登录页面输入用户名和密码，提交请求给LoginServlet

在LoginServlet中接收请求和数据[用户名和密码]

在LoginServlt中通过Mybatis实现调用UserMapper来根据用户名和密码查询数据库表

将查询的结果封装到User对象中进行返回

在LoginServlet中判断返回的User对象是否为null

如果为nul，说明根据用户名和密码没有查询到用户，则登录失败，返回"登录失败"数据给前端

如果不为null,则说明用户存在并且密码正确，则登录成功，返回"登录成功"数据给前端

二.项目步骤：

1.创建数据库：

            下面是穿件数据库的语句，可以通过创建语句创建数据库。

-- 创建用户表
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;

这是创建数据库后表的状态：

  **  2.导入mysql和mybstis坐标**

    在项目的pom.xml导入Mybatis和Mysql驱动坐标

<dependency>
  <groupId>org.mybatis</groupId>
  <artifactId>mybatis</artifactId>
  <version>3.5.5</version>
</dependency>
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <version>5.1.34</version>
</dependency>

三.创建mybatis-config.xml核心配置文件，UserMapper.xml映射文件,UserMapper接口

    mybatis-config.xml 拷贝到resources目录下

<?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"/>
        <!--
          useSSL:关闭SSL安全连接 性能更高
          useServerPrepStmts:开启预编译功能
          &amp; 等同于 & ,xml配置文件中不能直接写 &符号
        -->
        <property name="url" value="jdbc:mysql:///db1?
useSSL=false&amp;useServerPrepStmts=true"/>
        <property name="username" value="root"/>
        <property name="password" value="1234"/>
      </dataSource>
    </environment>
  </environments>
  <mappers>
    <!--扫描mapper-->
    <package name="com.itheima.mapper"/>
  </mappers>
</configuration>

     在com.itheima.mapper包下创建UserMapper接口

public interface UserMapper {
}

UserMapper.xml 拷贝到resources目录下,

注意：在resources下创建UserMapper.xml的目录时，要使用/分割

四.代码实现

在UserMapper接口中提供一个根据用户名和密码查询用户对象的方法

/**
  * 根据用户名和密码查询用户对象
  * @param username
  * @param password
  * @return
  */
  @Select("select * from tb_user where username = #{username} and password =
#{password}")
  User select(@Param("username") String username,@Param("password")  String
password);

说明 :@Param注解的作用:用于传递参数,是方法的参数可以与SQL中的字段名相对应。

修改loign.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="/request-demo/loginServlet" method="post" 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>

编写LoginServlet

 这里我们首先通过方法获取到提交的数据username和password数据，然后我们通过mybatis获取 数据库中的用户名和密码，形成数据对比，最后使用response请求将数据响应回去

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
  @Override
  protected void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
    //1. 接收用户名和密码
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    //2. 调用MyBatis完成查询
    //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 user = userMapper.select(username, password);
    //2.5 释放资源
    sqlSession.close();
    //获取字符输出流，并设置content type
    response.setContentType("text/html;charset=utf-8");
    PrintWriter writer = response.getWriter();
    //3. 判断user释放为null
    if(user != null){
      // 登陆成功
      writer.write("登陆成功");
   }else {
      // 登陆失败
      writer.write("登陆失败");
   }
 }
  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
    this.doGet(request, response);
 }
}

注意：由于我这里的路径错了多以数据无法跳转过去，这里的代码是点击跳转访问页面数据的，但是本来这里的路径输入写错了，所以一直跳转失败了，这里需要填入正确的路径才可以。

五.最后：

** ** 如果数据输入正确的话就会访问数据路径的网页，并且通过我们调取了mysql中的数据形成数据对比，如果对比成功的话，登录成功，否则失败，通过调用response发送响应数据，返会给用户界面。

标签： java mysql 前端

本文转载自: https://blog.csdn.net/m0_58168670/article/details/133324282
版权归原作者 嵌入式转java后端开发 所有，如有侵权，请联系我们删除。

web开发中，简单的案例说明前端页面和后端以及mysql数据库的交互过程

一.项目流程：

二.项目步骤：

1.创建数据库：

三.创建mybatis-config.xml核心配置文件，UserMapper.xml映射文件,UserMapper接口

四.代码实现

五.最后：

发表评论

“web开发中，简单的案例说明前端页面和后端以及mysql数据库的交互过程”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航