CGB2110-DAY07-前后端调用

文章目录

• 1. Axios-post请求
• • 1.1 入门案例
  • • 1.1.1 前端JS
    • 1.1.2 post请求参数说明
    • 1.1.3 AxiosController 调用
  • 1.2 关于常见请求类型语法说明
  • 1.3 put请求测试
  • • 1.3.1 编辑前端JS
    • 1.3.2 编辑AxiosController
  • 1.4 关于跨域说明
  • • 1.4.1 同源策略
    • 1.4.2 什么是跨域
    • 1.4.3 考题
    • 1.4.4 关于@CrossOrigin注解说明
• 2.Mybatis
• • 2.1 Mybatis介绍
  • 2.2 导入数据库
  • 2.3 Mybatis入门案例
  • • 2.3.1 创建项目
    • 2.3.2 导入项目
    • 2.3.3 lombok插件安装
    • • 2.3.3.1 lombok介绍
      • 2.3.3.2 导入jar包
      • 2.3.3.3 安装lombok插件
      • 2.3.3.4 lombok注解标识POJO
    • 2.3.3 编辑Mapper接口
    • 2.3.4 编辑mapper的映射文件
    • 2.3.5 Spring整合Mybatis的配置
    • 2.3.6 Spring的测试类
• 常用注解

1. Axios-post请求

1.1 入门案例

1.1.1 前端JS

//1.指定请求的前缀
			axios.defaults.baseURL="http://localhost:8080/axios"
			
			/**
			 * 2. 需求: 一般业务新增时,采用post提交
			 *    URL: http://localhost:8080/axios/saveUser
			 * axios.post(url地址,js对象)
			 * 		.then(回调函数!!!)
			 */
			let user1 = {id: 100,name:"tomcat猫",age:18,sex:"女"}
			axios.post("/saveUser",user1)
				 .then( promise => {
					 console.log(promise.data)
				 })

1.1.2 post请求参数说明

说明: axios中的post请求,参数传递的是JSON串

1.1.3 AxiosController 调用

  /**
     * 业务说明: 接收post请求
     * url地址: http://localhost:8080/axios/saveUser
     * 参数:    JSON串={"id":100,"name":"tomcat猫","age":18,"sex":"女"}
     * 返回值:  User对象
     * 知识点:
     *      1.将JSON串转化为对象  @RequestBody
     *      2.将对象转化为JSON串  @ResponseBody
     */
    @PostMapping("/saveUser")
    public User saveUser(@RequestBody User user){

        return user;
    }

1.2 关于常见请求类型语法说明

1. GET/DELETE 语法相同
2. POST/PUT 语法相同

1.3 put请求测试

1.3.1 编辑前端JS

/**
			 * 业务需求:  实现数据的更新操作
			 * 		     修改id=3的数据  name="张三"  age=18
			 * URL:http://localhost:8080/axios/updateUser
			 * 类型: put
			 * 写法1: 利用对象传参提交数据
			 * 写法2: 利用restFul结构实现
			 */
			let user2 = {id:3, name:"张三", age:18}
			axios.put("/updateUser",user2)
				 .then(promise => {
					 console.log(promise.data)
				 })
			
			let url3=`http://localhost:8080/axios/user/${user2.name}/${user2.age}/${user2.id}`
			axios.put(url3)
				 .then(promise => {
				 	console.log(promise.data)
				 })

1.3.2 编辑AxiosController

/**
     * 业务: 完成修改操作
     * 类型: put类型
     * URL地址: http://localhost:8080/axios/updateUser
     * 参数: user的JSON串
     * 返回值: User返回
     */
    @PutMapping("/updateUser")
    public User updateUser(@RequestBody User user){

        return user;
    }
    /**
     *  需求: restFul结构
     *  url地址: `http://localhost:8080/axios/user/${user2.name}/${user2.age}/${user2.id}`
     *  请求类型: put
     *  返回值: User
     */
    @PutMapping("/user/{name}/{age}/{id}")
    public User updateUser2(User user){

        return user;
    }

1.4 关于跨域说明

1.4.1 同源策略

要素1: 浏览器的访问地址
要素2: Ajax的请求的网址
策略说明: 如果上述的要素同时满足 协议://域名:端口号都相同的情况,则称之为满足同源策略.可以进行正确的调用. 也称之为 “同域访问”.

1.4.2 什么是跨域

违反了同源策略就叫跨域访问

1.4.3 考题

案例1:

1. 浏览器地址: http://www.jd.com/xx/xx
2. ajax地址: https://www.jd.com/yy/yy 跨域: 协议不同

案例2:

1. 浏览器地址: http://www.jd.com/xx/xx
2. ajax地址: http://www.jd.com/yy/yy 同域请求

案例3:

1. 浏览器地址: http://www.jd.com:80/xx/xx
2. ajax地址: http://www.jd.com/yy/yy 同域请求!!!

案例4:
前提: 域名与IP对应

1. 浏览器地址: http://www.jd.com/xx/xx
2. ajax地址: http://8.8.8.8/yy/yy 跨域请求! 域名不一致

案例5:

1. 浏览器地址: https://www.jd.com/xx/xx
2. ajax地址: https://www.jd.com:443/yy/yy 同域请求 https的默认端口号 443

案例6:

1. 浏览器地址: http://www.jd.com/xx/yy/xx
2. ajax地址: http://miaoshi.jd.com/yy/yy 跨域请求 域名不同

1.4.4 关于@CrossOrigin注解说明

2.Mybatis

2.1 Mybatis介绍

官网地址: https://mybatis.org/mybatis-3/zh/index.html
MyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。

总结:
1. MyBatis 是一款优秀的持久层框架 在内部封装了JDBC,简化了操作数据库的过程.
2. 映射: 数据库中的表 与POJO中的类一一映射.
表中的字段与类中的属性一一映射

2.2 导入数据库

2.3 Mybatis入门案例

2.3.1 创建项目

1. 创建项目
   
2. 勾选jar包
   

2.3.2 导入项目

1. 编辑pom.xml配置文件

       <dependency>
           <groupId>org.mybatis.spring.boot</groupId>
           <artifactId>mybatis-spring-boot-starter</artifactId>
           <version>2.2.0</version>
       </dependency>
   
       <!--jdbc依赖包-->
       <dependency>
           <groupId>mysql</groupId>
           <artifactId>mysql-connector-java</artifactId>
       </dependency>
   
       <!--添加lombok的包-->
       <dependency>
           <groupId>org.projectlombok</groupId>
           <artifactId>lombok</artifactId>
       </dependency>
   

2. 导入src配置文件
   说明: 将课前资料中的项目的src文件进行导入. 如图所示
   

2.3.3 lombok插件安装

2.3.3.1 lombok介绍

说明: pojo对象中必须添加get/set/toString等常规方法,但是该方法写起来繁琐,但是又必须添加. 所以可以引入lombok插件动态生成上述的方法.

2.3.3.2 导入jar包

 		<!--添加lombok的包-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

2.3.3.3 安装lombok插件

搜索安装: lombok的插件

2). 本地安装
说明: 下载lombok的安装文件, 如图所示:
文件下载: 去码云中下载即可

3). 导入插件 勾选zip包即可

lombok 版本地址: https://plugins.jetbrains.com/plugin/6317-lombok/versions

2.3.3.4 lombok注解标识POJO

@Data //动态生成get/set/toString/equals/hashCode等方法
@Accessors(chain = true) //开启链式加载  重写set方法
@NoArgsConstructor       //无参构造
@AllArgsConstructor      //全参构造
public class User implements Serializable {
    private Integer id;
    private String name;
    private Integer age;
    private String sex;

   /* public User setId(Integer id){
        this.id = id;
        return this; //表示当前对象 运行期有效
    }

    public void xx(){
        User user = new User();
        //链式结构 重写set方法 要求返回user对象
        user.setName("xxx").setAge(10).setSex("女");
    }*/

}

2.3.3 编辑Mapper接口

规则: 基于面向接口开发的规则,准备一个新的接口

@Mapper //将接口交给Spring容器管理 Map<userMapper,JDK代理对象>
//@Repository //将持久层交给Spring容器管理
public interface UserMapper {
    //查询所有的用户信息
    List<User> findAll();
}

2.3.4 编辑mapper的映射文件

核心作用: 编辑操作数据库的Sql

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
    调用流程:
         1.编辑Mapper接口 编辑接口方法
         2.映射文件与Mapper接口绑定 namespace
-->
<mapper namespace="com.jt.mapper.UserMapper">
    <!--
        1.id与接口的方法名称绑定
        2. 回顾:JDBC->resultSet->遍历结果集->手动封装对象
        3. resultType: mybatis自动的将结果集的数据封装为对象
                       如果返回值List集合,则自动封装为List,User充当其中的泛型对象
                       如果返回值User对象.则直接返回User对象
    -->
    <select id="findAll" resultType="com.jt.pojo.User">
        select * from demo_user
    </select>
    
</mapper>

2.3.5 Spring整合Mybatis的配置

说明: Mybatis原生代码的结构混乱,比较复杂.所以采用Spring整合mybatis的操作.,简化开发的步骤.
其中表示spring整合mybatis的步骤 其中的配置信息暂时 了解即可.

#1.配置端口号  注意缩进!!!!!
server:
  port: 8090

#2.配置数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    #yml文件 0不解析 如果字母以0开头则引号包裹
    #password: "0123456"
    password: root

#3.配置Mybatis
mybatis:
  #定义别名包
  type-aliases-package: com.jt.pojo
  #将所有的映射文件全部加载
  mapper-locations: classpath:/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

#4.打印Sql com.jt.mapper下的Sql日志
logging:
  level:
    com.jt.mapper: debug

2.3.6 Spring的测试类

说明: Spring为了后期测试代码方便,专门针对于测试方法,开发了一个注解@SpringBootTest

package com.jt;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.List;

@SpringBootTest //该注解的作用启动spring容器中,之后动态的获取对象
public class TestMybatis {

    @Autowired  //IDEA编译异常 不影响代码的执行
    private UserMapper userMapper;

    @Test
    public void test01(){
        List<User> userList = userMapper.findAll();
        System.out.println(userList);
    }
}

常用注解

1. @Configuration 标识当前类是配置类
2. @ComponentScan 包扫描注解 扫描注解
3. @Bean 标识该方法的返回值交给Spring容器管理
4. @Scope 控制多例和单例
5. @Lazy 懒加载
6. @PostConstruct 初始化方法
7. @PreDestroy 销毁方法
8. @Component 将当前类未来的对象交给容器管理
9. @Autowired 按照类型进行注入
10. @Qualifier 按照名称进行注入
11. @Repository 标识持久层注解
12. @Service 标识Service层
13. @Controller 标识Controller层
14. @Value 为属性赋值 @Value("${key}")
15. @PropertySource 加载指定路径的配置文件properties
16. @Aspect 标识当前类是一个切面类
17. @Pointcut 用于定义切入点表达式 表达式写法4种
18. @EnableAspectJAutoProxy 让AOP的注解有效果
19. @Before AOP-前置通知
20. @AfterReturning AOP-后置通知
21. @AfterThrowing AOP-异常通知
22. @After AOP-最终通知
23. @Around AOP-环绕通知
24. @Order(1) //可以利用order关键字 实现AOP的排序 数字越小越先执行.
25. @ResponseBody 将返回的数据转化为JSON串, 如果是字符串本身 原数据返回
26. @RequestMapping("/hello") 实现浏览器的请求路径与方法的映射
27. @PathVariable restFul结构,接收参数的注解.
28. @GetMapping("") 只能接收GET请求类型
29. @DeleteMapping("") 只能接收DELETE请求类型
30. @PostMapping("") 只能接收POST请求类型
31. @PutMapping("") 只能接收PUT请求类型
32. @RestController 表示Controller类,同时要求返回值为JSON
33. @CrossOrigin 允许跨域访问
34. @RequestBody 参数接收时,将JSON串转化为java对象 json中的key与对象的属性一致.
35. @Data lombok动态生成get/set/toString/equals/hashcode等方法
36. @Accessors 控制是否开启链式加载结构
37. @NoArgsConstructor 生成无参构造方法
38. @AllArgsConstructor 生成全参构造方法
39. @Mapper mybatis将当前的接口交给Spring容器管理. Map<类名小写,JDK动态代理对象>
40. @SpringBootTest 该注解的作用在进行代码测试时启动spring容器,之后动态的获取对象 注意包路径 主启动类的同包及子包中.