springboot RestController传参 demo实战项目

简介

前后端分离下,前后端通讯的各种方法

Git地址

https://gitee.com/wqrzsy/lp-demo/tree/master/lp-spring-web

项目分析

####1. 测试Post提交实体请求，后端要用@RequestBody接收
前端

<form id='test_form' action='testPostForm' method='post' onsubmit="return checkForm('test_form')">
    <input type='text' name='firstName' value=''/>
    <input type='password' id='input_pwd' name='lastName' value=''/>
    <input type='hidden' name='pwd' id='md5_pwd' value=''/>
    <button type='submit'>提交</button>
</form>

<script>
    $(function () {
        var person = {firstname: "Bill", lastname: "Gates"};
        var options = {
            type: 'post',
            url: "/testPostEntity",
            data: JSON.stringify(person),//取得person对象的string
            contentType: 'application/json',
            success: function (result) {
                alert(result.username);
            }
        };

        $("#btnPostEntity").click(function () {
            $.ajax(options);
        });

    });
</script>

上传的content

后端

    @PostMapping("testPostEntity")
    @ApiOperation(value = "测试", notes = "测试")
    @ResponseBody
    public Map<String, String> testPostEntity(@RequestBody User user) {
        Map<String, String> map = new HashMap<String, String>();
        map.put("username", user.getFirstname() + " " + user.getLastname());
        return map;
    }

####2. 测试Post提交表单请求，后端要用@RequestParam接收
前端

<form id='test_form' action='testPostForm' method='post' onsubmit="return checkForm('test_form')">
    <input type='text' name='firstName' value=''/>
    <input type='password' id='input_pwd' name='lastName' value=''/>
    <input type='hidden' name='pwd' id='md5_pwd' value=''/>
    <button type='submit'>提交</button>
</form>

上传的content

后端

    @PostMapping("testPostForm")
    @ApiOperation(value = "测试", notes = "测试")
    @ResponseBody
    public String testPostForm(@RequestParam(value = "firstName") String firstName, @RequestParam(value = "lastName") String lastName) {
        return firstName + ":" + lastName;
    }

####3. 测试Post提交表单请求，表单包含单文件，用MultipartFile 接收
前端

<form id='test_form' action='testPostForm' method='post' onsubmit="return checkForm('test_form')">
    <input type='text' name='firstName' value=''/>
    <input type='password' id='input_pwd' name='lastName' value=''/>
    <input type='hidden' name='pwd' id='md5_pwd' value=''/>
    <button type='submit'>提交</button>
</form>

上传的content

后端

    @PostMapping("testPostFileForm")
    @ApiOperation(value = "测试", notes = "测试")
    public String testPostFileForm(
        @RequestParam(value = "firstName") String firstName,
        @RequestParam(value = "lastName") String lastName,
        @RequestParam(value = "uploadFile") MultipartFile uploadFile
    ) {
        return firstName + ":" + lastName;
    }

####4. 测试Post提交表单请求，表单包含多个文件
前端

<form id='test_form' action='testPostForm' method='post' onsubmit="return checkForm('test_form')">
    <input type='text' name='firstName' value=''/>
    <input type='password' id='input_pwd' name='lastName' value=''/>
    <input type='hidden' name='pwd' id='md5_pwd' value=''/>
    <button type='submit'>提交</button>
</form>

上传的content

后端

    @PostMapping("/multiUpload")
    @ResponseBody
    public String multiUpload(HttpServletRequest request) {
        List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");
        for (int i = 0; i < files.size(); i++) {
            MultipartFile file = files.get(i);
            if (file.isEmpty()) {
                return "上传第" + (i++) + "个文件失败";
            }
            String fileName = file.getOriginalFilename();
            System.out.println(fileName);
        }
        return "上传成功";
    }