vue、springboot的通過路徑方式傳遞參數

1.controller接口

pageTeacherCondition/{current}/{limit}，通過路徑方式傳值，接口接受參數通過/{}接收，如果有多個參數用/拼接，配合@PathVariable一起使用。

什么是路徑傳值：

http://localhost:8080/teacher/1/10（這就是一個路徑傳值的例子，其中1和10相當於current和limit）

package com.stu.eduservice.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.stu.commonutils.ResultData;
import com.stu.eduservice.entity.EduTeacher;
import com.stu.eduservice.entity.vo.TeacherQuery;
import com.stu.eduservice.service.IEduTeacherService;
import com.stu.servicebase.exceptionHandler.GuliException;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.apache.http.HttpResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * <p>
 * 講師 前端控制器
 * </p>
 *
 * @author stu
 * @since 2021-04-10
 */
@Api(description="講師管理")
@RestController
@RequestMapping("/eduservice/teacher")
@CrossOrigin  //解決跨域
public class EduTeacherController {

    @Autowired
    private IEduTeacherService eduTeacherService;

    //條件查詢，分頁
    @PostMapping("pageTeacherCondition/{current}/{limit}")
    public ResultData pageTeacherCondition(@PathVariable long current, @PathVariable long limit,
                                           @RequestBody(required = false) TeacherQuery teacherQuery ){

        QueryWrapper wrapper = new QueryWrapper();

        String name = teacherQuery.getName();
        Integer level = teacherQuery.getLevel();
        String begin = teacherQuery.getBegin();
        String end = teacherQuery.getEnd();

        if (!StringUtils.isEmpty(name)) {
            wrapper.like("name", name);
        }

        if (!StringUtils.isEmpty(level) ) {
            wrapper.eq("level", level);
        }

        if (!StringUtils.isEmpty(begin)) {
            wrapper.ge("gmt_create", begin);
        }

        if (!StringUtils.isEmpty(end)) {
            wrapper.le("gmt_create", end);
        }
        Page<EduTeacher> page = new Page<EduTeacher>(current,limit);

        eduTeacherService.page(page,wrapper);

        Map<String,Object> map = new HashMap<String,Object>();
        long total = page.getTotal();
        List<EduTeacher> list = page.getRecords();
        map.put("total",total);
        map.put("list",list);
        return ResultData.success().data(map);

    }


}

2.vue調用后端controller接口

vue傳參數這里列舉2中方式，路徑傳值主要通過反斜杠/傳遞，有幾個拼接幾個，本例子需要路徑傳2個值current和limit。

第一種：url: '/eduservice/teacher/pageTeacherCondition/'+current+'/'+limit,
第二種：url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,

注意區別：

相同點：

兩種傳參數調用controller接口的地址和參數值是一樣的,拼接參數的值都是用反斜杠/拼接，反斜杠/后邊直接拼接參數的值【current和limit】就可以了（和?id=1&name='張三'這種傳參類似，但是有區別）；

不同點：

1. 第一種路徑拼接是用單引號拼接，用反斜杠/拼接路徑參數值，然后用+拼接參數值。（類似於?號傳值的方式，但是又有區別注意url:后邊我加粗標紅顏色的部分，第一種里是紅色符號是單引號'，第二種里是用piao符號）。
2. 第二種路徑拼接是用piao拼接，讀作piao（一聲），用反斜杠/拼接路徑參數值，然后不用+拼接參數值，直接在/后邊加上${limit}就可以。
3. 簡單來講兩種傳參方式的區別主要是路徑拼接的標點符號和拼接參數值的方式不同，一個是通過加號+拼接，一個是通過${}方式賦值。

piao符號就是下圖里的紅框的符號（英文狀態下）

import request from '@/utils/request'

export default {
    //講師列表，分頁
    //current當前頁，limit每頁記錄數，teacherQuery分頁條件
 getTeacherListPage(current,limit,teacherQuery){
        return request({
            //url: '/table/list/'+current+'/'+limit, url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
            method: 'post',
            //條件的對象，后端使用RequestBody獲取屬性
            //data表示把對象轉換json進行傳遞到接口
            data: teacherQuery
          }) 
    },
    //刪除講師
    removeDataById(id){
        return request({
            url: `/eduservice/teacher/${id}`,
            method: 'delete'
          }) 
    },
    getTeacherInfo(id){
        return request({
            url: `/eduservice/teacher/getTeacherById/${id}`,
            method: 'get'
          })     
    }
}