后端接收参数

对于不同的前端框架请求Url传送前端参数，后端的接收方法也不同，这里列出几个我用过的方法。

Vue传参

vue框架用axios进行get，post请求，参数的传递有两种方式。一：url携带参数，也就是url本身有参数的功能；二：用url拼接的方式实现。

下面的示例是从项目中截了一部分出来，懒得改了，无关紧要，看得懂大体架构就行。

1.url携带参数

下面例子请求的路径实际上是(假如id=1)/Table/1。

axios.get('/Table/'+this.Id)
    .then(function (response) {
    	//测试，看看有没有返回结果
    	console.log(response.data);
    	//每次显示前清空已有数组
    	if (that.ear_tags != null){
        	that.ear_tags.splice(0,that.ear_tags.length);
    	}
    	//数组添加值，显示
    	that.ear_tags.push(response.data);
	})
    .catch(function (error) {
    	console.log(error);
	})

后端接收用@PathVariable注解来获取参数。路径里id要用{}来包裹。这是模板语法。@PathVariable能获取花括号里的值。

如下

@RequestMapping("/Table/{id}")
@ResponseBody
public Ear_tag selectId(@PathVariable("id") int id){
    return ear_tagMapper.selectId(id);
}

2.url拼接参数

在Vue实例内部添加axios方法。这里定义了一个函数searchMusic()，在函数内部的get请求中实现了传参。多个参数可以用&进行拼接。

methods:{
        searchMusic:function (){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query)  //白嫖歌曲的接口
                .then(function (response){
                    console.log(response);
                    that.musicList = response.data.result.songs;
                },function (err){})
        },

上面请求路径实际上是https://autumnfish.cn/search 那么后端路径映射@RequestMapping里应该是/search 。

参数的接收是用@RequestParam 来接收的。

下面给一个用get("/Table/age?agemin='+that.agemin+'&agemax='+that.agemax")来替换上面例子所对应的后端写法。

在后端接收url拼接路径参数

@Controller
public class TableController {
    
    @RequestMapping("/Table/age")
    @ResponseBody
    public List<Ear_tag> selectAge(@RequestParam("agemin") String Agemin,
                                   @RequestParam("agemax") String  Agemax){
        int agemin = 0;
        int agemax = 10;
        if (!Agemin.equals("")){
            agemin = Integer.parseInt(Agemin);
        }
        if (!Agemax.equals("")){
            agemax = Integer.parseInt(Agemax);
        }
        if (agemin < agemax){
            return ear_tagMapper.selectAgeRange(agemin,agemax);
        } else {
            return null;
        }
    }
}

@RequestParam的详细用法还不甚了解，有待后续学习。