前后台上传数据至数据库

港控/mmm° 2021-07-25 18:55 445阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]  
如图，在input框内输入内容后，点击确认录入，传递数据给后台，后台接收后上传到数据库。  
前端代码

<b-modal id="modal-add-task" ref="modal" title="案例录入" @ok="handleOk" @hidden="resetModal" ok-title="确认录入" cancel-title="取消">
        <form ref="form" @submit.stop.prevent="handleSubmit">
            <b-form-group v-for="(item, index) in addTaskForm" :key="index" :label="item.label" :label-for="item.labelFor" :invalid-feedback="item.invalidFeedback" :state="item.state" label-cols-sm="4" content-cols-lg="8" >
                <b-form-input :id="item.id" v-model="addTask[item.vModel]" required :state="item.state" :placeholder="item.placeholder" ></b-form-input>
    
            </b-form-group>
        </form>
    </b-modal>

// 添加案例数据
    addTask:{ 
       gameName: "",
       resume: "",
       details: "",
       reason: '',
       fixed: '',
       task_id: '',
       time: '',
       addUser: ''
    },
    addTaskForm:  [
       { 
           'label':"项目名",
           'labelFor':"gameName-input",
           'invalidFeedback': "gameName is required",
           'state': "gameNameState",
           'id': "gameName-input",
           "vModel": "gameName",
           'placeholder': "项目名称",
       },
       { 
           'label':"问题简述",
           'labelFor':"resume-input",
           'invalidFeedback': "resume is required",
           'state': "resumeState",
           'id': "resume-input",
           "vModel": "resume",
           'placeholder': "一句话概括问题",
       },
       { 
           'label':"问题详情",
           'labelFor':"details-input",
           'invalidFeedback': "details is required",
           'state': "detailsState",
           'id': "details-input",
           "vModel": "details",
           'placeholder': "一句话概括问题",
       },
       { 
           'label':"具体原因",
           'labelFor':"reason-input",
           'invalidFeedback': "reason is required",
           'state': "reasonState",
           'id': "reason-input",
           "vModel": "reason",
           'placeholder': "问题原因",
       },
       { 
           'label':"修复方案",
           'labelFor':"fixed-input",
           'invalidFeedback': "fixed is required",
           'state': "fixedState",
           'id': "fixed-input",
           "vModel": "fixed",
           'placeholder': "修复方案",
       },
    ],
    
     handleSubmit() { 
        // 上传至服务器
        var fd = new FormData()
        fd.append('gameName', this.addTask.gameName)
        fd.append('resume', this.addTask.resume)
        fd.append('details', this.addTask.details)
        fd.append('fixed', this.addTask.fixed)
        fd.append('reason', this.addTask.reason)
    
        sendPostReq(fd, '/api/common/add-task', this.callback3)
    },
    
    // 回调函数，返回成功与失败提示
    callback3(response){ 
        if(response.data.msg=="success") { 
            this.$refs['modal-add-suc'].show()
        }else { 
            this.$refs['modal-add-fail'].show()
        }
    
    },

后端代码

public function addTask(Request $request)
    { 
        $r = new TasksData;
        $r->create_time = date('Y-m-d');
        $r->gameName = $request->input('gameName');
        $r->resume = $request->input('resume');
        $r->details = $request->input('details');
        $r->reason = $request->input('reason');
        $r->fixed = $request->input('fixed');
        if ($r->save())
            return ['msg' => "success"];
        else
            return ['msg' => "fail"];
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]: /images/20210725/889f6ecfeb414cce8ce3377e321d9df3.png