weixin_46346206
2021-10-25 22:32
采纳率: 50%
浏览 36
已结题

controller 无法接受到aioax.post请求

1.用类对象接受加上@RequestBody 直接无法访问
2.controller 无法接受到aioax.post请求
各位帮忙看下哪里有问题

package cn.itcast.container.controller;

import cn.itcast.container.pojo.Order;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@RestController
public class UserController {
    @RequestMapping("/add")
    public void index( @RequestBody Order order1){
        Order order=new Order();
        System.out.println(order1);
        System.out.println("123");
    }


}


下面是HTML文件

<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>器具发料系统</title>
    <meta name="description" content="器具管理">
    <meta name="keywords" content="器具管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>单据管理<small>单据申请</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>单据管理</el-breadcrumb-item>
                <el-breadcrumb-item>单据申请</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <div class="filter-container">
                    <el-button type="primary" @click="save">提交订单</el-button>
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDeleteDetails()">删除</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAllDetails">清空</el-button> -->

                </div>
                <el-form class="form" :model="bindForm" ref="ruleForm">
                    <el-table v-loading="loading" size="small" :data="bindForm.datalist">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="零件号" align="center" prop="value">
                            <template slot-scope="scope">
                                <el-form-item :prop="`datalist[${scope.$index}].value`" :rules="rules.value">
                                    <el-select
                                            v-model="scope.row.value"
                                            clearable
                                            filterable
                                            remote
                                            reserve-keyword
                                            placeholder="请输入关键词"
                                            :remote-method="remoteMethod"
                                            :loading="loading">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="规格" align="center" prop="description">
                            <template slot-scope="scope">
                                <el-form-item :prop=" `datalist[${scope.$index}].description`" :rules="rules.description">
                                    <el-input v-model="scope.row.description" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="`datalist[${scope.$index}].qty`" :rules="rules.qty">
                                    <el-input v-model="scope.row.qty" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="发货地点" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="`datalist[${scope.$index}].workstation`" :rules="rules.workstation">
                                    <el-input v-model="scope.row.workstation" placeholder="请输入工站"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <!-- <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> -->
                                <el-button size="mini" type="danger" @click="sub">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
            </div>
        </div>
    </div>

</body>

<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                options: [],
                value: [],
                list: [],
                loading: false,
                states: ["<0009012", "<0009016", "<0009017",
                    "<0009018", "<0009019", "<0009020",
                    "<0009024", "<0009004", "<0009005",
                    "<0009006", "<0001130", "<0009030", "<0009031",
                    "<0009033", "<0010005", "<0010006", "<0010001",
                    "<0010004", "<0010007", "<0010017",
                    "<0010018", "<0010019", "<0010020",
                    "<0010008", "<0010009", "<0009035",
                    "<0009037", "<0010010", "<0010015",
                    "<0010016",
                ],
                // 支付场景数据
                // 此处必须是这样的数据类型,才能够校验成功
                bindForm: {
                    datalist: []
                },
                // 支付场景是否开启的状态值
                rules: {
                    description: [{
                        required: true,
                        message: '姓名不可为空',
                        trigger: 'blur'
                    }],
                    qty: [{
                        required: true,
                        trigger: ['blur', 'change'],
                        message: '请输入正整数'
                    }],
                    workstation: [{
                        required: true,
                        trigger: ['blur', 'change'],
                        message: '请输入工站地址'
                    }],
                    value: [{
                        required: true,
                        trigger: ['blur', 'change'],
                        message: '请输入零件号'
                    }],
                }
            };
        },
        methods: {
            /**
             * 渲染表头 表头增加必填项*
             * str自定义传入参数 为表头名称
             */
            //添加一行
            add() {
                this.bindForm.datalist.push({
                    value: '',
                    description: '',
                    qty: '',
                    workstation: '',
                });
            },
            //删除一行
            sub(index) {
                this.bindForm.datalist.splice(index, 1);
            },
            //提交表单
            save() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        // 通过校验时
                        alert("效验通过");
                        console.log(this.bindForm.datalist);
                        axios.post("/add", this.bindForm.datalist).then((res) => {

                        });
                    } else {
                        alert("请确认输入的数据是否正确");
                    }
                });
            },
            //零件号搜索
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            }
        },
        mounted() {
            //初始化create 一行
            this.bindForm.datalist.push({
                value: '',
                description: '',
                qty: '',
                workstation: ''
            });
            //初始化
            this.list = this.states.map(item => {
                return {
                    value: `${item}`,
                    label: `${item}`
                };
            });
        }
    })
</script>

</html>

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

  • chenl_ 2021-10-26 00:20
    最佳回答

    后端接收是个order对象,前端传个数组?

    评论
    解决 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题