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'
          })     
    }
}