CGB2109-Day07-Axios-SpringBoot
2022/2/22 23:48:32
本文主要是介绍CGB2109-Day07-Axios-SpringBoot,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 1. Axios post请求
-
- 1.1 常见post请求种类
- 1.2 axios post入门案例
-
- 1.2.1 编辑前端JS
- 1.2.2 前端页面解析
- 1.2.3 编辑AxiosController
- 1.2.4 页面效果测试
- 1.2.5 关于请求常见异常
- 1.2.6 请求类型和业务关系
- 1.3 用户修改操作
-
- 1.3.1 编辑页面JS
- 1.3.2 编辑AxiosController
- 2 SpringBoot框架学习
-
- 2.1 什么是SpringBoot
- 2.2 创建SpringBoot项目
-
- 2.2.1 创建项目
- 2.3 pom.xml文件说明
-
- 2.3.1 pom.xml基本配置
- 2.3.2 jar包依赖关系
- 2.3.3 springboot项目 maven 操作方式
- 2.4 开箱即用原理说明(面试必问)
-
- 2.4.1 介绍
- 2.4.2 开箱即用规则-启动项
- 2.4.3 关于主启动类的说明
- 2.4.4 开箱即用-自动配置注解
- 2.5 SpringBoot-YML配置文件说明
-
- 2.5.1 properties文件说明
- 2.5.2 编辑application.yml
- 2.6 SpringBoot入门案例
-
- 2.6.1 业务需求
- 2.6.2 编辑msg.properties文件
- 2.6.3 编辑HelloController
- 2.6.4 页面效果展现
- 2.7 lombok插件介绍
-
- 2.7.1 lombok插件介绍
- 2.7.2 插件安装
- 2.7.3 lombok的使用
- 2.7.4 lombok 案例测试
- 视频作业
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开箱即用原理
这篇关于CGB2109-Day07-Axios-SpringBoot的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?