首页 > 其他分享> 文章详细

CGB2109-Day07-Axios-SpringBoot

2022-02-22 23:02:00 阅读：207 来源： 互联网

标签：Axios SpringBoot CGB2109 Day07 axios user org lombok User

文章目录

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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 案例测试

视频作业