若依前后端分离版本-前后端交互整理

ruoyi-ui与后端交互

方法一:表单

使用 headers: {'Content-Type':'application/x-www-form-urlencoded'},

ruoyi-ui的vue中

javascript 复制代码
//ruoyi-ui的vue中定义
formData: {
                    a: '111',
                    b: '111',
                    c: 1,
                },
//vue中方法调用              
outBound() {            
            empty(this.formData).then(response => {
        })
},

ruoyi-ui的api中

javascript 复制代码
​​​​​​​//ruoyi-ui中js中api
export function empty(data) {
   const encodedData = qs.stringify(data);
  return request({
    url: '/A/info/empty',
    method: 'post',
    data: encodedData,
    headers: {'Content-Type':'application/x-www-form-urlencoded'},
  })
}

controller方法

java 复制代码
//controller中方法
@RequestMapping("/A/info")
~~~
    @PreAuthorize("@ss.hasPermi('A:info:remove')")
  
    @PostMapping("/empty")
    public AjaxResult empty( String a, String b, Integer c) {
        return aInfoService.empty(a, b, c);
    }

方法二:json

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

ruoyi-ui的vue中

javascript 复制代码
//ruoyi-ui的vue中定义
formData: {
					a: '111',
					b: '111',
					c: 1,
				},
//vue中方法调用				
outBound() {   			
     		empty(this.formData.a,this.formData.b,this.formData.c).then(response => {
     	})
},

ruoyi-ui的api中

javascript 复制代码
//ruoyi-ui中js中api
export function empty(a,b,c) {
  return request({
    url: '/A/info/empty/'+a+'/'+b+'/'+c,
    method: 'post',
  })
}

controller方法

java 复制代码
   //controller中方法
@RequestMapping("/A/info")
  
    @PostMapping("/empty/{a}/{b}/{c}")
    public AjaxResult empty( @PathVariable String a, @PathVariable String b, @PathVariable Integer c) {
        return aInfoService.empty(a, b, c);
    }

ruoyi-app与后端交互

方法一:表单

ruoyi-app的vue中

javascript 复制代码
//ruoyi-app的vue中定义
formData: {
					a: '111',
					b: '111',
					c: 1,
				},
//vue中方法调用				
outBound() {   			
     		empty(this.formData).then(response => {
     	})
},

ruoyi-app的api中

javascript 复制代码
//ruoyi-app的js中api
export function empty(data) {
        return request({
                url: '/A/info/empty',
                method: 'post',
                data: data,
                header : {"Content-Type":"application/x-www-form-urlencoded"}
  })
}

controller中

java 复制代码
//controller中方法
@RequestMapping("/A/info")
~~~
    @PreAuthorize("@ss.hasPermi('A:info:remove')")
  
    @PostMapping("/empty")
    public AjaxResult empty( String a, String b, Integer c) {
        return aInfoService.empty(a, b, c);
    }

方法二:json-同ui前后端交互

如果想要ruoyi-ui的前后端表单交互与ruoyi-app使用前后端表单交互相同,需要对request.js进行修改

修改ruoyi-ui的request.js

方法一:axios请求配置中提供了transformRequest方法用于发送前修改请求数据

请求配置 | Axios中文文档 | Axios中文网 (axios-http.cn)

复制代码
创建axios实例后,添加
javascript 复制代码
// 新增
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 数组中最后一个函数必须返回一个字符串, 一个Buffer实例,ArrayBuffer,FormData,或 Stream
service.defaults.transformRequest = [function (data, headers){
  if (headers['Content-Type'] === 'application/x-www-form-urlencoded') {
    return typeof data === 'object' ? qs.stringify(data) : data;
  }
    if (headers['Content-Type'].includes("application/json")) {
    return typeof data === 'object' ? JSON.stringify(data) : data;
  }
  return data
}]

方法二:request拦截器中添加,用于修改config.data值

javascript 复制代码
import qs from 'qs'
// 【如果是表单类型,判断一下数据是不是对象,如果是对象,则序列化,如果不是对象则直接返回,如果不是表单则直接返回】
//qs.stringify会将对象序列化为 key1=value1&key2=value2&key3=value3形式
config.data = config.headers['Content-Type'] === "application/x-www-form-urlencoded" ?
  (typeof config.data === 'object' ? qs.stringify(config.data) : config.data) : config.data;

小白一枚,可能有不对的地方~

相关推荐
阿伟来咯~1 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端6 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱9 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
许野平16 分钟前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
guai_guai_guai18 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨19 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
狂奔solar27 分钟前
yelp数据集上识别潜在的热门商家
开发语言·python
blammmp1 小时前
Java:数据结构-枚举
java·开发语言·数据结构
何曾参静谧1 小时前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵1 小时前
设计模式-工厂设计模式
java·开发语言·设计模式