rest接口和webservice接口区别

2023-02-27 10:55| 来源: 网络整理| 查看: 265

rest接口和webservice接口区别_rest接口怎么写思创斯忠实用户-ss • 2023年2月25日 08:31 • Ios

rest接口和webservice接口区别_rest接口怎么写axios请求接口的方式get：一般多用于获取数据post：主要提交表单数据和上传文件put：对数据全部进行更新patch：只对更改过的数据进行更新delete：删除请求Get示例一：不带参数前端后端示例一：不带参数前端后端示例二：参数直接拼接到url上前端letcurrentPage=2let_this=this_this.$axios.get(‘/blog/list?currentPage=’+currentPage).

大家好，我是你的好朋友思创斯。今天说一说rest接口和webservice接口区别_rest接口怎么写,希望您对编程的造诣更进一步.

axios功能简介从浏览器中创建XMLHttpRequests 从node.js创建http请求支持Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF axios 基础

安装axios：

cnpm install axios –save

在main.js中引入axios：

import axios from ‘axios’ Vue.prototype.$axios = axios;

简介使用：

//get方法 this.$axios.get(url,{ params: { id: 1001 } }).then(function(res){ //成功回调 }).cache(function(err){ //错误回调 }) //post方法 this.$axios.post(url,{ id: 1001 }).then(function(res){ //成功回调 }).cache(function(err){ //错误回调 }) //通过传递相关配置来进行请求 this.$axios({ method: 'get', //post url:'https://www.hcshow.online/', params: { id: 1001 } }).then(function(res) { console.log(res) }) axios 请求接口的方式 get：一般多用于获取数据 post：主要提交表单数据和上传文件 put：对数据全部进行更新 patch：只对更改过的数据进行更新 delete：删除请求 axios传参方式 params:{…} 将参数加在URL上传参 data:{…} 放在RequestBody中传参并且以Json格式发送 Get 示例一：拼串方式携带参数前端 let currentPage = 2 let _this = this _this.$axios.get('/blog/list?currentPage=' + currentPage).then(res => { //get方式请求 console.log(res) }) 后端 @GetMapping("/list") public Result list(@RequestParam(defaultValue = "1") Integer currentPage) { } 示例二：params方式携带参数前端 data () { return { queryInfo: { //获取博客列表的查询参数 query: 'Java Set', pageNum: 1, //当前的页数 pageSize: 4 //当前每页显示多少条数据 } } }, methods: { page (currentPage) { let _this = this _this.$axios.get('/blog/list' ,{ //get请求 params:_this.queryInfo }).then(res => { }) } } }

对应的请求

后端参数：直接在参数表上接收 @GetMapping("/list") //get请求 public Result list(String query,Integer pageNum,Integer pageSize){ } Post 示例一：直接传递参数前端 export default { data () { return { queryInfo: { //获取用户列表的查询参数 query: { 'username': 'zhangsan', 'password': '1234' } } } }, methods: { page (queryInfo) { let _this = this _this.$axios.post('/user/list', queryInfo).then(res => { //post方式请求 console.info(res) }) } } } 后端

处理用户请求的Controller

@PostMapping("/user/list") public Result list(@RequestBody(required = false) String param) throws JsonProcessingException { //解析前端传递过来的数据param ..... }

注意：实际测试下面方式不能获取到前端传递过来的数据

@PostMapping(value ="/login") public Result login(String username,String password){ return null; } 示例二：data方式传递参数前端 data () { return { queryInfo: { //获取博客列表的查询参数 query: 'Java Set', pageNum: 1, //当前的页数 pageSize: 4 //当前每页显示多少条数据 } } }, methods: { page (currentPage) { let _this = this _this.$axios.post('/blog/list' ,{ //post请求 data:_this.queryInfo }).then(res => { }) } } }

对应的请求

后端接收Json字符串自己取出各参数（只要不是通过URL传参，参数都在 RequestBody 中） @PostMapping("/list") public Result list(@RequestBody String param){ } Put 示例一：前端 let _this = this _this.$axios.put(`/user/${ user.id}/status`).then(res => { //注意，此处使用的是反斜杠 console.log(res) }) 后端 @PutMapping("/user/{userId}/status") public Result changStatus(@PathVariable("userId") Integer userId){ } 示例二：前端 const param = { userId:1 } _this.$axios.put('/user/update',param).then(res=>{ console.log(res) }) 后端 @PutMapping("/user/update") public Result changStatus(@PathVariable("userId") Integer userId){ } patch 前端 const param={ ids:[1,3,5,8] } _this.$axios.patch('/user/p',param).then(res=>{ console.log(res) }), Delete 前端 _this.$axios.delete('/user/delete',{ params:{ id:1 } }).then(res=>{ console.log(res) }) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

文章由思创斯整理,转载请注明出处：https://ispacesoft.com/97474.html

思创斯忠实用户-ss 0 0 生成海报

【本文地址】

公司简介

联系我们