文章目录

---

前言

工作中的项目，关于前后端传值的方式，这对大神们可能有点小儿科了，想了半天第一天写些什么，决定把这个记录下来，项目比较简单，使用vue+springboot做的一个移动端报表录入项目，其中包含了一些数字化的数据展示

一、常规的几种传值方式

前段JS，封装方法和参数

vue.js
export default {
    data() {
    return {
        params: {
            trole:''，
            pageNum:1
            }
        }
    }

    methods: {
 getList(){
  test.getUser(this.params).then(res=>{
    this.id = res.data.id;
    this.name = res.data.name;
             })
         }
     }
}

request.js
export function getUser(query){
    return request({
        url:'/list',
        methods:'get',
        params:query
    })
}

1、后端直接使用实体类接收前段传递的数值

java
@GetMapping("/list")
public List list(String trole) {
    System.out.println(trole);
}
// 实体类
public class Student() {
    private String trole;
    private Integer pageNum;
}

 2、后端分别接收使用@RequestParam()

前段还是一样的
java
@GetMapping("/list")
public List list(@RequestParam("trole") String trole, @RequestParam("pageNum") Integer pageNum) {
    System.out.println("trole="+trole+";pageNum="+pageNum);
}

3、通过URL传递多个参数，后端分别接收,使用PathVariable()

// 前台代码稍微变一下
export function list(trole, pageNum) {
    return request({
        url:'/list'+trole+'/'+pageNum,
        method:'get'
    })
}

java
@GetMapping("list/{trole}/{pageNum}")
public List list(@PathVariable("trole") String trole,@PathVariable("pageNum") Integer pageNum) {
    System.out.println("trole="+trole+";pageNum="+pageNum);
}

4、使用post传输参数，后台实体类接收，使用@RequestBody()

//前段和前面一样
java
@GetMapping("/list")
public List list(@RequestBody Student s) {
    return s;
}

//实体类
public class Student{
    private String trole;
    private int pageNum;
}

 5、前段传输数组形式，后台接收数据，常用于删除操作

//前段
let query = {
    ids:"1,2,3,4"
}

export function list(query) {
    return request({
        url:'/list',
        method:'get',
        params:query
    })
}

java
@GetMapping("/list")
public List list(@RequestParam("ids") Long[] ids){
    return null;
}

二、项目中的实现

1.首先在vue中创建了一个request.js，封装请求相关内容,使用的是uni-app

request.js主要代码如下（示例）：

export default(url, method,params)=>{
    let token = uni.getStorageSync('__token');
    return new Promise((resolve, reject)=> {
    wx.request({
     url:"http://127.0.0.1:8811"+url,
     method:method,
     header:header,
     data:{
      ...params
    },
     networkTimeout:{
      "request" : 40000
    },
     success(res){
      const code = res.data.code|| 200;
      .....//相关业务操作
    }
  })
 })
}

2.前段定义接口

well.js主要代码如下（示例）：

import request from '../request/request.js'
export default{
    getUserWellNum(params){
     return request("/well/getUserWellNum","GET",params)
 }
}

3.index.vue

这里主要就是传参，前段界面的东西我就不写了，主要是js中定义的东西，前端调用这个方法就可以了

index.vue主要代码如下：

import well from 'well.js'
export default {
  data() {
   return{
    params:{
     trole:''
    }
  }
 }
   methods:{
    getList(){
     well.getUserWellNum(this.params).then(res=>{
       console.log(res.data);
     })
    }
  }
}

总结

其实还有很多现成好的request.js封装，比如若依框架中封装好的request.js，功能很强大，由于项目比较小，单独做了一个简单的，想有时间把若依框架的东西都梳理一遍，应该可以从中学到不少东西，日积跬步，以致千里吧，希望自己能坚持下去，希望每一个热爱编程的人，都能一直热爱并坚持下去。