axios实现restful风格的四种请求

最新推荐文章于 2023-11-10 19:28:28 发布
最新推荐文章于 2023-11-10 19:28:28 发布
阅读量1.1k 收藏 3
点赞数
文章标签： restful json java ajax vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50929656/article/details/128996968
版权

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，基本请求有5种： 

  • get：多用来获取数据
  • post：多用来新增数据
  • put：多用来修改数据（需要传递所有字段，相当于全部更新）
  • delete：多用来删除数据

 注 : get、delete请求的参数是params(特殊情况可以直接跟在地址后面)，而post、put的参数是data

下载js：js/vue-2.6.12.js     js/axios-0.21.0.js

链接：https://pan.baidu.com/s/1US7jEn3bmCJBsPoxpPAsUQ?pwd=uj8u 
 

引入：组件库、样式（html文件跟js文件在同一目录下）

<!-- 引入样式 -->
    <script src="js/vue-2.6.12.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios-0.21.0.js"></script>

get请求分页查全部：HTML的axios

<script>
axios({
                    method: 'get', //请求类型为get
                    url: "http://localhost:8989/springboot/computer/1/5", //请求地址
                }).then((resp) => {
                    this.page = resp.data  //后端传值处理
                    this.page.pageSizes = [3, 5, 10],  //分页的每页显示行数
                        this.page.pageCount = 5      //分页的下端显示几个页码
                })
</script>

get请求分页查全部：Controller

@RestController
@RequestMapping("/computer")
public class ComputerController {
    @Autowired
    private ComputerService computerService;

    @GetMapping("/{pageNum}/{pageSize}")
    public PageInfo<Computer> selectAll(@PathVariable("pageNum") int pageNum, @PathVariable("pageSize") int pageSize){
        return computerService.selectAll(pageNum,pageSize);
    }
}

get请求分页查全部：Service

@Service
public class ComputerServiceImpl implements ComputerService {
    @Autowired
    private ComputerMapper mapper;
    @Override
    public PageInfo<Computer> selectAll(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        List<Computer> phones = mapper.selectAll();
        PageInfo<Computer> page = new PageInfo<>(phones);
        return page;
    }
}

get请求分页查全部：Mapper

@Mapper
public interface ComputerMapper {
    public List<Computer> selectAll();
}
<mapper namespace="com.jia.mapper.ComputerMapper">
    <resultMap id="computerMap" type="com.jia.entity.Computer">
        <id column="id" property="id"/>
        <result column="price" property="price"/>
        <result column="screen" property="screen"/>
        <result column="keyboard" property="keyboard"/>
        <result column="mouse" property="mouse"/>
        <result column="color" property="color"/>
        <result column="clang" property="clang"/>
        <association property="brand" javaType="com.jia.entity.Brand">
            <id column="bid" property="brandId"/>
            <result column="bname" property="brandName"/>
        </association>
    </resultMap>

    <select id="selectAll" resultMap="computerMap">
        SELECT c.*,b.brand_id bid,b.brand_name bname FROM t_computer c LEFT OUTER JOIN t_brand b on c.brand_id = b.brand_id
    </select>
</mapper>

put添加：html

<script>
axios({
                        method: "Put",
                        url:"http://localhost:8989/springboot/computer/",
                        data:this.computer  //请求体传参
                    }).then((resp)=>{
                        computer:{
                            brand:{}
                        };
                        this.toSelectAll()  
                        this.showUpdateForm=false;
                    })
</script>

put添加：controller

@PutMapping("/")
    public void update(@RequestBody Computer computer){
        System.err.println(computer);
        computerService.updateById(computer);
    }

post修改：html

<script>
axios.post("http://localhost:8989/springboot/computer/",this.computer).then((resp)=>{
                        computer:{
                            brand:{}
                        };
                        this.toSelectAll()
                        this.showUpdateForm=false;
                    })
</script>

post修改：controller

@PostMapping("/")
    public void addComputer(@RequestBody Computer computer){
        System.err.println(computer);
        computerService.addComputer(computer);
    }

根据id的delete删除：html

<script>
axios({
                    method: "delete",
                    url:"http://localhost:8989/springboot/computer/"+id,
                    // params:{
                    //     id:id
                    // }
                }).then(()=>{
                    this.toSelectAll()
                })
</script>

根据id的delete删除：controller

@GetMapping("/{id}")
    public Computer selectById(@PathVariable("id") int id){
        return computerService.selectById(id);
    }

批量删除：html

<script>
axios({
                    method:'delete',
                    url:'http://localhost:8989/springboot/computer/',
                    data:this.ids
                }).then((resp)=>{
                    this.toSelectAll()
                })
</script>

批量删除：controller

@DeleteMapping("/")
    public void deletes(@RequestBody int [] ids){
        for (int id : ids) {
            System.err.println(id);
        }
        computerService.deletes(ids);
    }

完整的html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <script src="js/vue-2.6.12.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios-0.21.0.js"></script>

</head>
<body>
<div id="app">
    <div>
        <el-button type="primary" @click="toShowAddForm">添加</el-button>
        <el-table
                :data="page.list"
                style="width: 100%"  border
                stripe
                @selection-change="getIds">
            <el-table-column
                    header-align="center"
                    align="center"
                    type="selection"
            ></el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="序号"
                    type="index"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="主键"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="screen"
                    label="屏幕"
                    width="100"
                    >
            </el-table-column>
            <el-table-column
                    prop="keyboard"
                    label="键盘">
            </el-table-column>
            <el-table-column
                    prop="mouse"
                    label="鼠标">
            </el-table-column>
            <el-table-column
                    prop="color"
                    label="颜色">
            </el-table-column>
            <el-table-column
                    prop="clang"
                    label="音响">
            </el-table-column>
            
           
            <el-table-column
                    prop="brand.brandName"
                    label="品牌">
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="操作"
            >
                <!-- 自定义列模板-->
                <template slot-scope="scope">
                    <el-button type="warning" @click="toShowUpateForm(scope.row.id)">修改</el-button>
                    <el-button type="danger" @click="toDeleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="sizes, prev, pager, next, jumper, ->, total" :total="page.total"
            :page-size.sync="page.pageSize" :page-sizes="page.pageSizes" :current-page.sync="page.pageNum"
            :pager-count="page.pagerCount" @size-change="toSelectByPageForChangePageSize"
            @current-change="toSelectByPageForChangePageNum" background>
        </el-pagination>
        <el-button type="danger" @click="toDeleteMany">删除选中</el-button>
        <el-dialog :title="title" :visible.sync="showUpdateForm">
            <el-form ref="form" :model="computer" label-width="80px">
                <el-form-item label="价格">
                    <el-input type="text" v-model="computer.price"/>
                </el-form-item>
                <el-form-item label="屏幕">
                    <el-input type="text" v-model="computer.screen"/>
                </el-form-item>
                <el-form-item label="键盘">
                    <el-input type="text" v-model="computer.keyboard"/>
                </el-form-item>
                <el-form-item label="鼠标">
                    <el-input type="text" v-model="computer.mouse"/>
                </el-form-item>
                <el-form-item label="颜色">
                    <el-input type="text" v-model="computer.color"/>
                </el-form-item>
                <el-form-item label="音响">
                    <el-input type="text" v-model="computer.clang"/>
                </el-form-item>
               
                <el-form-item label="品牌">
                    <el-select v-model="computer.brand.brandId" placeholder="请选择">
                        <el-option
                                v-for="item in brands"
                                :key="item.value"
                                :label="item.brandName"
                                :value="item.brandId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="danger" @click="noShowUpateForm()">取消</el-button>
                    <el-button type="primary"  @click="UpdateForm(title)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            computers:[
                 
            ],
            pageNum: 1,
            pageSize: 5,
            page: {
                    pageSizes: [3, 5, 10],
                    pagerCount: 5
                },
            ids:[],
            showUpdateForm:false,
            computer:{brand:{}},
             brands:[]
        },created(){
            axios({
                    method: 'get',
                    url: "http://localhost:8989/springboot/computer/1/5",
                    
                }).then((resp) => {
                    this.page = resp.data
                    this.page.pageSizes = [3, 5, 10],
                        this.page.pageCount = 5
                })
        }
        ,methods:{
            getIds(val){
                this.ids=[]
                for(var i = 0;i<val.length;i++){
                    this.ids.push(val[i].id)
                }
            },
            toSelectAll(){
                axios({
                    method: 'get',
                    url: "http://localhost:8989/springboot/computer/"+this.page.pageNum+"/"+this.page.pageSize,
                    
                }).then((resp) => {
                    this.page = resp.data
                    this.page.pageSizes = [3, 5, 10],
                        this.page.pageCount = 5
                })
            },toShowUpateForm(id){
                axios({
                    method: "get",
                    url:"http://localhost:8989/springboot/computer/"+id,
                    
                }).then((resp)=>{this.computer=resp.data})
                axios({
                    method: "get",
                    url:"http://localhost:8989/springboot/brand/",
                }).then((resp)=>{
                    this.brands=resp.data
                    this.title="修改"
                    this.showUpdateForm=true
                })

            }
            ,toShowAddForm(){
                this.computer={
                    brand:{}
                }
                axios({
                    method: "get",
                    url:"http://localhost:8989/springboot/brand/",
                }).then((resp)=>{
                    this.brands=resp.data
                    this.title="添加"
                    this.showUpdateForm=true
                })
            },
            noShowUpateForm(){
                this.computer={
                    brand:{}
                }
                this.showUpdateForm=false
            },
            UpdateForm(title){
                if (title=="添加"){
                    console.log(this.computer)
                 
                    axios.post("http://localhost:8989/springboot/computer/",this.computer).then((resp)=>{
                        computer:{
                            brand:{}
                        };
                        this.toSelectAll()
                        this.showUpdateForm=false;
                    })
                }else {
                    axios({
                        method: "Put",
                        url:"http://localhost:8989/springboot/computer/",
                        data:this.computer
                    }).then((resp)=>{
                        computer:{
                            brand:{}
                        };
                        this.toSelectAll()
                        this.showUpdateForm=false;
                    })

                }

            },
            toDeleteById(id){
                axios({
                    method: "delete",
                    url:"http://localhost:8989/springboot/computer/"+id,
                    
                }).then(()=>{
                    this.toSelectAll()
                })
            },toDeleteMany(){
                axios({
                    method:'delete',
                    url:'http://localhost:8989/springboot/computer/',
                    data:this.ids
                }).then((resp)=>{
                    this.toSelectAll()
                })
            },toSelectByPageForChangePageSize(pageSize) {
                    axios({
                        method: 'get',
                        url: "http://localhost:8989/springboot/computer/"+this.page.pageNum+"/"+pageSize,
                        
                    }).then((resp) => {
                        this.pageNum=resp.pageNum
                        this.pageSize=resp.pageSize
                        this.page = resp.data
                        this.page.pageSizes = [3, 5, 10],
                            this.page.pageCount = 5
                    })
                },
                toSelectByPageForChangePageNum(pageNum) {
                    axios({
                        method: 'get',
                        url: "http://localhost:8989/springboot/computer/"+pageNum+"/"+this.page.pageSize,
                        
                    }).then((resp) => {
                        this.pageNum=resp.pageNum
                        this.pageSize=resp.pageSize
                        this.page = resp.data
                        this.page.pageSizes = [3, 5, 10],
                            this.page.pageCount = 5
                    })
                }
        }
    })
</script>
</body>
</html>

完整的controller

package com.jia.controller;

import com.jia.entity.Computer;
import com.jia.service.ComputerService;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/computer")
public class ComputerController {
    @Autowired
    private ComputerService computerService;

    @GetMapping("/{pageNum}/{pageSize}")
    public PageInfo<Computer> selectAll(@PathVariable("pageNum") int pageNum, @PathVariable("pageSize") int pageSize){
        return computerService.selectAll(pageNum,pageSize);
    }

    @GetMapping("/{id}")
    public Computer selectById(@PathVariable("id") int id){
        return computerService.selectById(id);
    }

    @PutMapping("/")
    public void update(@RequestBody Computer computer){
        System.err.println(computer);
        computerService.updateById(computer);
    }


    @PostMapping("/")
    public void addComputer(@RequestBody Computer computer){
        System.err.println(computer);
        computerService.addComputer(computer);
    }

    @DeleteMapping("/{id}")
    public void deleteById(@PathVariable("id") int id) {
        computerService.deleteById(id);
    }
    @DeleteMapping("/")
    public void deletes(@RequestBody int [] ids){
        for (int id : ids) {
            System.err.println(id);
        }
        computerService.deletes(ids);
    }

}

weixin_50929656
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RESTful 风格（详细介绍 + 案例实现）
m0_54866636的博客
08-02 1037
概念API，英文全称ApplicationProgrammingInterface，翻译为“应用程序编程接口”。就是将一些功能（逻辑）封装成组件，目的是提供一个应用程序接口给其它程序与开发人员访问，而这些访问人员不需要访问源码以及理解内部工作原理就可以直接使用。举例在WEB项目中A应用暴露一个请求映射方法，B应用通过调用这个请求映射方法从而得到对应功能（请求映射方法赋予的功能）...
SpringBoot和Axios数据的传递和接收-Restful完全版
最新发布
m0_51390969的博客
04-09 1781
在 Spring Boot（及一般的 HTTP 服务开发）中，将请求分为“GET 体系”和“POST 体系”可能会导致一些混淆，因为每种 HTTP 方法（GET、POST、PUT、PATCH、DELETE 等）都设计有其独特的用途和语义。不过，如果我们从“如何获取请求中的数据”这个角度来看，可以有一种比较宽泛的分类方式，尤其是关注于数据是通过 URL 还是请求体传递。但在你的例子中，由于是通过 axios 发送请求，并且当你在请求的 params 中包含一个数组时，axios 会将数组转换为。
day07-Axios中的post请求/get请求/restFul格式
weixin_58678891的博客
07-29 1897
1.RestFul风格 特点: 参数需要使用/ 进行分割 参数的位置是固定的. restFul请求方法路径不能出现动词 作用: 用户可以通过一个URL请求的地址,可以实现不同的业务操作 之前的 get/post请求方式: 查询: http://localhost:8090/getUserById?id=100&name=匿名 类型:get 新增: http://localhost:8090/insertUser 类型:post 更新: http://localhost:8090/update
vue结合axios实现restful风格的四种请求详解
热门推荐
一只前端小菜鸟
03-13 1万+
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，基本请求有5种： get：多用来获取数据 post：多用来新增数据 put：多用来修改数据（需要传递所有字段，相当于全部更新） patch：多用来修改数据，是在put的基础上新增改进的，适用于局部更新，比如我只想修改用户名，只传用户名的字段就ok了，而不需要像put一样把所有字段传过去 del...
Axios + Restful
大连赵哥的博客
06-08 544
Axios + Restful
3-6.restFul传递方式/Axios
m0_58827424的博客
09-03 1034
单个参数传递 url地址: http://localhost:8090/getUserById/100 getMapping("/getUserById/{id}") public String getUserById(@PathVariable Integer id){return “好”;} 对象参数传递 url地址: http://localhost:8090/getUserById/tom/18/男 getMapping("/getUserById/{name}/{age}/{sex}") //如
Vue+axios封装请求实现前后端分离
01-22
本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码，供大家参考，具体内容如下 前言 我们需要进行前后端分离开发，那么前后端的跨域问题就是无可避免的问题，前后端的请求也是无可避免的，Vue之中有一...
使用axios自动发送请求支持筛选自定义操作列让RESTful风格的CRUD更简单
08-08
本文将深入探讨如何在Vue.js项目中利用axios库，实现RESTful风格的CRUD（创建、读取、更新、删除）操作，并支持筛选与自定义操作列，以简化开发流程。 首先，让我们了解RESTful API的基本概念。REST...
vue 调用 RESTful风格接口操作
10-14
本篇文章将详细介绍如何在Vue项目中调用RESTful风格的接口。 REST（Representational State Transfer）是一种软件架构风格，用于设计网络应用程序。它强调通过HTTP方法（GET、POST、PUT、DELETE）来对应不同的操作...
毕设&课程作业_基于fastapi(python后端框架)和vue2实现了RESTful风格的前后端分离.zip
01-24
《基于FastAPI与Vue2实现RESTful风格前后端分离的详解》 在现代Web开发中，前后端分离已经成为一种常见的架构模式，它提高了系统的可维护性和可扩展性。本项目以"毕设&课程作业_基于fastapi(python后端框架)和vue2...
前后端分离，后端restful风格代码
12-16
在这个主题中，我们将深入探讨前后端分离的概念、实现方式以及后端RESTful风格的代码设计。 首先，让我们理解什么是前后端分离。在传统的Web开发中，前端（通常由HTML、CSS和JavaScript组成）与后端（通常由服务器...
axios-rest：一个简单的axios包装器，使rest api调用变得愉快
02-05
Axios休息 一个简单的axios包装器，可使其余api调用变得愉快。 例 const axiosRestClient = require ( 'axios-rest-client' ) const api = axiosRestClient ( { baseUrl : process . env . API_BASE_URL } ) // Get all users api . users . all ( ) . then ( response => { console . log ( response . data ) } ) // Create new user api . use
axios-app:axios RESTful API示例
04-19
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项（webpa
三阶段--day06--Ajax请求Axios,请求的方式,get请求方式及restFul风格,delete请求方式,post请求方式及restFul风格,箭头函数
weixin_58580280的博客
07-29 907
一 后端项目搭建 1 SSM项目结构 2SpringMVC 参数传递方式 2.1简单的参数传递 url地址: http://localhost:8090/getUserById?id=100 编辑后台Controller代码: 2.2对象的方式传递 URL: http://localhost:8090/getUser?id=100&name=“tomcat”&age=18 后台代码说明: 2.3RestFul风格-简单参数接收 特点: 1. 参数需要...
vue结合axios实现restful风格注意点
Letian的编程混沌域
09-17 349
区别主要在参数设置上 get、delete请求的参数是params(特殊情况可以直接跟在地址后面)； -post、put、patch的参数是data。 详解文章： vue结合axios实现restful风格的四种请求详解
RESTful风格接口与axios请求总结
g877835148的博客
11-10 268
axios请求和后台接收方式
vue结合axios封装form,restful,get,post四种风格请求
逗比界一朵花
04-28 2527
axios特点 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 （就是有interceptor） 5.转换请求数据和响应数据 6.取消请求 7.自动转换 JSON 数据 8.客户端支持防御 XSRF 安装 npm i axios–save npm i qs --save npm i elemen...
vue2项目 axios二次封装，接口统一存放,满足RESTful风格（新增源码地址）
wocwin的博客
02-20 2372
vue2项目 axios二次封装，接口统一存放,满足RESTful风格（新增源码地址）
SpringBoot + Vue （axios）实现 Restful API 交互
欢迎来到Gorit的博客
08-31 2136
SpringBoot + Vue 实现 RestFul API 交互一、SpringBoot 编写后端 API1.1 编写一个最简单 API 服务1.2 常见接收参数的方式二、使用 axios 完成 ajax 请求2.1 axios 基本配置2.2 axios 实例 在 RestFul API 中，前后端是分离的，后端不在负责视图的渲染，只负责返回指定的前端请求后端 Rest 风格的 API，后端接收到前端的请求之后，会根据请求方法类型，参数执行一些对应的操作。然后返回 JSON 格式的数据给前端。前端使用
axios怎么写restful风格的url
07-28
在使用 axios 发送 RESTful 风格的请求时，可以通过拼接 URL 参数的方式来实现。以下是一个示例，展示了如何使用 axios 发送 GET 请求并传递参数： ```javascript import axios from 'axios'; // 定义基础 URL ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值