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

这篇具有很好参考价值的文章主要介绍了web开发中，简单的案例说明前端页面和后端以及mysql数据库的交互过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一.项目流程：

1. 用户在登录页面输入用户名和密码，提交请求给LoginServlet
2. 在LoginServlet中接收请求和数据[用户名和密码]
3. 在LoginServlt中通过Mybatis实现调用UserMapper来根据用户名和密码查询数据库表
4. 将查询的结果封装到User对象中进行返回
5. 在LoginServlet中判断返回的User对象是否为null
6. 如果为nul，说明根据用户名和密码没有查询到用户，则登录失败，返回"登录失败"数据给前端
7. 如果不为null,则说明用户存在并且密码正确，则登录成功，返回"登录成功"数据给前端

前后端交互后端数据显示到前端页面实战,Java,java,mysql,前端,数据库

二.项目步骤：

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;

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

前后端交互后端数据显示到前端页面实战,Java,java,mysql,前端,数据库

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的目录时，要使用/分割

前后端交互后端数据显示到前端页面实战,Java,java,mysql,前端,数据库

四.代码实现

1. 在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中的字段名相对应。

2. 修改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>

3. 编写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);
 }
}

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

前后端交互后端数据显示到前端页面实战,Java,java,mysql,前端,数据库