第三阶段02-Mybatis框架

Mybatis框架

• Mybatis框架是目前最流行的数据持久层框架, 使用Mybatis框架可以帮助程序员自动生成JDBC代码, 程序员只需要通过注解或xml配置文件提供需要执行的SQL语句,以及对象和表的映射关系, Mybatis框架会根据此映射关系和SQL自动生成出JDBC代码,从而提高开发效率

• Mybatis框架属于ORM框架, Object Relational Mapping 对象关系映射, 指Java对象和数据库中表的对应关系, Mybatis框架就是通过两者之间的关系 生成的JDBC代码

• 如何使用Mybatis框架?

  • 创建工程时需要勾选 Mybatis Framework和 MySQL Driver

  • 创建完工程,如果pom.xml里面的mysql相关依赖报错的话 使用下面的依赖替换掉,刷新maven即可解决

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.15</version>
    </dependency>
    

  • 在application.properties配置文件中添加连接数据库的信息

    # 数据库连接地址
    spring.datasource.url=jdbc:mysql://localhost:3306/bootdb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true
    # 数据库用户名&密码：
    spring.datasource.username=root
    spring.datasource.password=root
    

商品管理系统(Mybatis版) + 注册和登录

• 准备工作:

  • 创建boot05工程 , 打3个勾 Web->Spring Web, 搜索my 勾选 Mybatis Framework Mysql Driver

  • 如果pom.xml里面 mysql相关的依赖报错 , 替换成以下依赖

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.15</version>
    </dependency>
    

  • 在application.properties 里面 把链接数据库的url ,用户名和密码修改掉

  • 在static里面创建index.html 首页 运行工程测试

• 添加商品步骤:

  • 在首页添加超链接 请求地址 /insert.html
  • 创建insert.html 页面 页面中添加form表单 提交地址为/insert
  • 创建controller.ProductController, 创建insert方法处理/insert请求, 创建Product实体类, 然后在参数列表处声明
  • 创建mapper.ProductMapper接口, 在里面添加insert方法
  • 在ProductController的insert方法中调用mapper的insert方法 给客户端响应添加完成

• 商品列表步骤:

  • 在首页添加超链接 请求地址为/select
  • 在ProductController里面添加select方法处理/select请求
  • 在ProductMapper里面添加select方法, 通过@Select注解修饰 返回值为list集合
  • 在ProductController的select方法里面调用mapper的select方法得到list集合,从boot03工程里面把准备html的代码复制到当前工程 这样数据就装进了表格标签里面并且响应给了客户端

• 删除商品步骤:

  • 在复制过来的代码中包含删除商品的超链接 请求地址为/delete?id=xxx
  • 在ProductController中创建delete方法处理/delete请求, 在方法中调用mapper的deleteById方法把接收到的id传递过去,然后给客户端响应删除完成
  • 实现mapper里面的deleteById方法

• 修改商品步骤:

  • 在首页添加 修改商品的超链接 请求地址为/update.html
  • 创建update.html页面 , 在页面中添加form表单, 提交地址为/update, 表单里面四个文本框和一个提交按钮
  • 在ProductController中添加update方法 处理/update请求, 在方法的参数列表处声明Product对象, 用来接收传递过来的数据, 在方法中调用mapper的update方法把product对象传递过去, 最后给客户端响应 修改完成!
  • 实现mapper里面的update方法

• 注册步骤:

  • 在首页添加注册和登录的超链接 请求地址分别是/reg.html和/login.html
  • 创建reg.html注册页面 ,页面中添加form表单请求地址为/reg 表单中三个文本框和一个提交按钮,
  • 创建UserController,并添加reg方法处理/reg请求, 创建User实体类, 在方法的参数列表处声明用来接收传递过来的用户信息
  • 创建UserMapper 接口, 在里面添加insert方法
  • 在UserController的reg方法中调用mapper的insert方法 给客户端响应注册成功

• 登录步骤:

  • 创建login.html页面在页面中添加form表单 提交地址为/login,表单中有一个文本框,一个密码框和一个提交按钮
  • 在UserController里面添加login方法处理/login请求, 参数列表处声明User对象接收传递过来的用户名和密码, 在方法中调用mapper.selectByUsername方法返回值为User对象, 判断User对象的情况给客户端响应对应的内容
  • 实现mapper里面的selectByUsername方法
  • 在UserController的reg方法中 注册之前 调用mapper的selectByUsername方法查询是否有此用户名, 如果查询到了内容给客户端响应 用户名已存在, 这样注册前就做了去重操作了

同步请求和异步请求

• 同步: 指单线程依次做几件事
• 异步: 指多线程同时做几件事
• 同步请求: 指客户端只有一个主线程, 主线程需要负责页面的渲染操作以及监听操作,如果需要发出请求时,主线程会停止渲染(清空页面) 发出请求, 直到服务器响应了数据之后才会将服务器响应的数据再次渲染出来,这样把原内容清空掉显示新的内容称为页面的整体刷新, 同步请求只能实现整体刷新,无法实现页面的局部刷新
• 异步请求: 指客户端主线程负责页面的渲染和监听,如果需要发出请求时,创建一个新的子线程,由子线程发出请求,请求到数据后把数据呈现在原页面的基础之上, 这种对原页面的部分内容进行改动称为页面的局部刷新, 只有通过异步请求才能实现页面的局部刷新.

客户端如何发出异步请求

• 之前发出请求的方式都是同步请求
• 通过Axios框架发出异步请求
  • html页面中引入axios.js框架文件

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

• ​ 相关代码:

  //发出异步get请求
  axios.get("/helloAxios").then(function (response) {
      //response是响应对象,response.data得到服务器响应的数据
      alert(response.data);
      v.info=response.data;
  });