CGB2109-Day07-Axios-SpringBoot
作者：互联网
文章目录
- 1. Axios post请求
- 2 SpringBoot框架学习
- 视频作业
1. Axios post请求
1.1 常见post请求种类
- form表单提交 method=“post” 同步（要素：页面是否刷新）
- axios.post() 异步操作.
1.2 axios post入门案例
1.2.1 编辑前端JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios测试</title>
<script src="../js/axios.js"></script>
</head>
<body>
<h1>Axios测试案例-2</h1>
<script>
/*
语法:
1.参数 axios.post(URL地址,数据对象)
2.注意事项: 与axios.get(url,{params:对象})请求写法不一样.
*/
let url1 = "http://localhost:8080/axios/saveUser"
let user1 = {id:100, name:"猫", age:2, sex: "母"}
axios.post(url1,user1)
.then(function(promise){
console.log(promise.data)
})
</script>
</body>
</html>
1.2.2 前端页面解析
说明: axios.post请求中 如果传递了js对象.则发送到后端服务器的数据是 JSON串.
1.2.3 编辑AxiosController
package com.jt.controller;
import com.jt.pojo.User;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
@RestController
@CrossOrigin //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
/**
* URL地址: http://localhost:8080/axios/getUserById?id=100
* 参数: id = 100
* 返回值: User对象的JSON 伪造一个User对象
*/
@RequestMapping("/getUserById")
public User getUserById(Integer id){
int a = 100;
//根据ID查询数据库
User user = new User();
user.setId(id);
user.setName("好好学习");
user.setAge(1000);
user.setSex("男");
return user;
}
/**
* URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
* 参数: id=xxx name=xxx
* 返回值: List [user1,user2]
*/
@RequestMapping("/getUserByNA")
public List<User> getUserByNA(User user){
List<User> list = new ArrayList<>();
list.add(user);//简化赋值操作 直接返回
list.add(user);
return list;
}
/**
* URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
* 参数: name/sex
* 返回值: List<User>
*/
@RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
public List<User> findUserByNS(User user){
List<User> list = new ArrayList<>();
list.add(user);
list.add(user);
return list;
}
/**
* URL: "http://localhost:8080/axios/saveUser"
* 参数: {"id":100,"name":"猫","age":2,"sex":"母"} json串
* url1: http://xxx/axios/saveUser?id=xxx&name=xxx
* 返回值: "新增用户成功!!!"
* 难点:
* 1.Get请求数据是通过?key=value&key2=value2的方式获取
* post请求 数据是json串 数据结构不同. 所以不能使用User对象接收
* 2.JSON串想把法转化为User对象
* User转化为JSON串 @ResponseBody
* JSON串转化为User @RequestBody
* 3.JSON串转化 要求json串中的属性与对象中的属性一致,
* 并且赋值时调用对象的set方法
* 4.@RequestMapping可以支持任意类型的请求. 但是这样的写法不安全.
* 改进: 只能接收固定类型的请求
* @PostMapping("/saveUser")
* @GetMapping
* @PutMapping
* @DeleteMapping
*/
//@RequestMapping(value="/saveUser",method = RequestMethod.POST)
//@PostMapping("/saveUser")
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
System.out.println(user);
return "新增用户成功!!!";
}
}
1.2.4 页面效果测试
1.2.5 关于请求常见异常
- 405 异常 ajax的请求类型与后端接收的请求类型不匹配.
- 400异常 参数类型不匹配
- 404异常 请求路径找不到
1.2.6 请求类型和业务关系
常见请求类型:
1.GET 查询操作
2.DELETE 删除操作 get/delete 用法相同
3.POST 1.表单数据提交 2.新增操作
4.PUT 修改操作 post/put 用法相同
1.3 用户修改操作
1.3.1 编辑页面JS
/**
* 业务需求:
* 完成用户的修改操作.
* 将ID=100的数据 name改为张三 age改为18 sex改为女
* URL: http://localhost:8080/axios/updateUser
* 返回值: 修改成功!!! 数据要求后端打印
*/
let url2="http://localhost:8080/axios/updateUser"
let user2={id:100,name:"张三",age:18,sex:"女"}
axios.put(url2,user2)
.then(function(promise){
console.log(promise.data)
})
1.3.2 编辑AxiosController
/**
* URL:http://localhost:8080/axios/updateUser
* 参数: JSON串
* 返回值: String
*/
@PutMapping("/updateUser")
public String updateUser(@RequestBody User user){
System.out.println(user);
return "修改成功!!!";
}
2 SpringBoot框架学习
2.1 什么是SpringBoot
定位: SpringBoot框架是框架的框架,简化常规框架的配置的方式,只需要很少的代码,即可以实现大量的功能. 体现了**“开箱即用”** 思想
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。
2.2 创建SpringBoot项目
2.2.1 创建项目
2.3 pom.xml文件说明
2.3.1 pom.xml基本配置
<!--maven坐标 必须唯一-->
<groupId>com.jt</groupId>
<artifactId>springboot_demo1</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot_demo1</name>
<description>Demo project for Spring Boot</description>
<!--
配置信息: JDK版本/设定了字符集/springboot版本信息
-->
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<spring-boot.version>2.3.7.RELEASE</spring-boot.version>
</properties>
2.3.2 jar包依赖关系
<!-- 指定依赖项 -->
<dependencies>
<!--
现象:
springboot中的jar包文件缺少版本号
原因:
原来开发框架时需要自己手动添加版本号.SpringBoot框架
引入之后,所有的版本号信息,由SpringBoot官网进行测试(springboot将市面上
常用的框架进行了整合,并且测试了jar包的版本及依赖关系).springBoot内部已经完成
了版本定义.所以无需再写.
-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<!--springboot项目依赖管理器,其中定义了其它框架的jar包,
以后使用直接添加jar包即可
-->
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
2.3.3 springboot项目 maven 操作方式
<!--
标签说明：
maven操作springboot项目的工具
1.编译工具 maven-compiler-plugin
作用： maven执行指令时,通过插件管理SpringBoot项目
2.项目打包工具 spring-boot-maven-plugin
采用install的方式将springboot项目打成jar包.
springboot的项目和常规项目不一样.所以需要添加插件
-->
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.3.7.RELEASE</version>
<configuration>
<mainClass>com.jt.SpringbootDemo1Application</mainClass>
</configuration>
<executions>
<execution>
<id>repackage</id>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
2.4 开箱即用原理说明(面试必问)
2.4.1 介绍
springBoot将繁琐的配置封装到某些jar包中. 该jar包中的文件已经完成了配置.引入即可使用.只需要少量的配置就可以获取其功能的方式 叫做 “开箱即用”
2.4.2 开箱即用规则-启动项
启动项: spring-boot-starter-xxxx
说明: 包中已经将框架进行了整合.用户拿来就用
<!--springboot整合springmvc-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2.4.3 关于主启动类的说明
说明: @ComponentScan(“包路径!!!”)
规则: 当前包扫描的路径 默认就是主启动类所在的包路径…
注意事项: 以后写代码 必须在主启动类所在包路径的 同包及子包中编辑
2.4.4 开箱即用-自动配置注解
注解名称: @EnableAutoConfiguration 启动自动化的配置
规则: 该注解的作用用来加载springBoot-start-xxx的启动项.当主启动类执行时,则会开始加载启动项中的配置.则功能加载成功.
2.5 SpringBoot-YML配置文件说明
2.5.1 properties文件说明
说明: SpringBoot项目中有多个配置文件.如果大量的重复的配置项都写到其中,则用户体验不好.
如果需要优化,则可以修改为yml文件
2.5.2 编辑application.yml
说明: 将application.properties的文件 修改名称为application.yml文件
基本语法:
# 基本语法
# 1.数据结构 key-value结构
# 2.写法 key: value 空格
# 3.有层级结构 注意缩进
server:
port: 8080
2.6 SpringBoot入门案例
2.6.1 业务需求
说明: 动态为属性赋值. 之后通过页面展现数据.
2.6.2 编辑msg.properties文件
msg=我是springboot的第一天
2.6.3 编辑HelloController
package com.jt.controller;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@PropertySource(value = "classpath:/msg.properties",encoding = "UTF-8")
public class HelloController {
@Value("${msg}")
private String msg;
@GetMapping("/hello")
public String hello(){
return "您好SpringBoot"+msg;
}
}
2.6.4 页面效果展现
2.7 lombok插件介绍
2.7.1 lombok插件介绍
常规开发中POJO类必须手写get/set/toString/构造/…等方法,这类操作写起来鸡肋.但是又不得不写. 开发效率低.
所以可以引入lombok插件 自动生成上述的方法.
2.7.2 插件安装
-
引入jar包
<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> -
安装插件
-
安装lombok
URL: https://plugins.jetbrains.com/plugin/6317-lombok
2.7.3 lombok的使用
package com.jt.pojo;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
@Data //Getter/Setter/RequiredArgsConstructor/ToString/EqualsAndHashCode
@Accessors(chain = true) //重写了set方法. 可以实现链式加载
public class User implements Serializable {
private Integer id;
private String name;
/* public User setId(Integer id){
this.id = id;
return this; //当前对象 运行期有效
}
public User setName(String name){
this.name = name;
return this; //当前对象 运行期有效
}*/
}
2.7.4 lombok 案例测试
测试set方法能否正常调用
视频作业
B站地址: 不二子阳
- VUE后台脚手架安装过程
- SpringMVC调用流程图
- SpringBoot开箱即用原理
标签：Axios,SpringBoot,CGB2109,Day07,axios,user,org,lombok,User 来源： https://blog.csdn.net/m0_54850604/article/details/123079525