vue.js - 从 Vue 到 Cake 后端的 API 发布在重新加载时失败

问题描述

在重新加载前端、后端、浏览器和/或计算机的某些情况下，从 Vue 到 Cake 后端的 API 发布失败。

我正在开发一个使用 Vue.js 作为前端框架和 CakePHP 3.8 作为后端框架的应用程序。我在 Vue 中设置了一些表单，我从这些表单向多个 Cake Backend Endpoints 发出 POST 请求。我的 GET 请求工作正常..

在某些情况下，我会收到一条错误消息。一旦我删除了一些代码，再试一次，然后放回原始代码并再试一次，这个错误消息就会消失。错误消息说有一个 CORS 块，但它说所有错误，也有拼写错误。所以错误信息完全在这种情况下。因此，使用完全相同的代码，请求在删除、重试和放回之后起作用。

根本原因和解决方案
帮助我找到解决方案的重要一点是意识到控制台给出了错误的错误 (CORS)。CakePHP 中的错误日志更加清晰。这给出了一个错误 Error: [PDOException] SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null (Cake error.log)。因此写入数据库的数据无法保存到数据库中。错误是在处理 Cake Backend 上的 POST 数据时。

问题的解决方案是在进行保存之前先执行请求数据检查.. if($data){}

***我认为问题与与后端建立第一次连接的时间延迟有关。想要在没有建立数据的情况下立即进行保存。显然这仅在启动系统时发生。***

有人对此有更好的解释吗？

Vue前端代码：

<template>
  <div id="addpacklist">
      
      {{post_data}}
      
    <p v-if="errors.length">
      <b>Please correct the following error(s):</b>
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>      

    
    <form v-on:submit.prevent="addPackinglist">
      <h2>Add PackingList</h2>

      <label for="name">Name:</label>
      <input type="text" id="name" v-model="name"><br>   

      <input type="submit" value="Submit">           
    </form>
      
  </div>
</template>


<script>
        
    var data = [];

    import $ from 'jquery';    
    
    // you will use v-model & data on edits.. 
    export default{
       name :'addpacklist', 
       data(){
          return{
            errors: [],
            name: '',
            post_data: '',
            }
        },
       
       methods: {
            
            addPackinglist(){
                
                this.errors = [];
                
                // form validation                 
                if(!this.name){
                    
                    this.errors.push('Name required.');                    
                    
                }
                
                if (this.name.length > 10){
                    
                    this.errors.push('Name maximum 10 Characters');
                    
                }
                
                if(this.name && this.name.length < 11){
                    
                    // cannot use associative arrays in Javascript : does not exist!! 
                    data[0] = this.name;
                    console.log(data);                

                    fetch('http://wampprojects/holidays_backend/packinglists/add', {
                      method: 'POST',
                      mode: 'cors',
                      headers: {
                        'Content-Type': 'application/json',
                      },
                      body: JSON.stringify(data),
                    })
                    .then(response => response.json())
                    .then(json_data => this.post_data = json_data) 
                    .catch(error => {

                       console.log("error");

                    });                    
                } 
            },
       },
    }
    
</script>

蛋糕后端代码：

public function add(){
    
    $data = $this->request->data;
    $sendback = "";
    
    // build up data object and save to database 
    $packinglist = $this->Packinglists->newEntity();    
    
    // if you do not perform this check you will get an error 
    // I think it has something to do with establishing the first link from Front-End to Back-End (Session) 

    // THIS IS WHAT I ADDED TO MAKE IT WORK!! 
    if($data){
        
        $packinglist->name = $data[0];

        // something wrong with saving entity 
        if($this->Packinglists->save($packinglist)){

            $sendback = "save success";

        }else{

            $sendback = "save failed";            

        };              
    }
    
    // no automatic view, only data returned
    $this->autoRender = false;
    
    return $this->response
    ->withType('application/json')
    ->withStringBody(json_encode($data));        
    
}

我记录了一些场景..
当停止一个元素并保持浏览器打开时..
**当停止并重新启动 Vue 的本地开发服务器时，它仍然有效。（好的）
**当停止和重新启动互联网时仍然有效。（好的）
**当停止和重新启动 wamp 服务器时仍然有效..（好的）
**当停止和启动 wamp 服务器时仍然有效..（好的）

停止一个元素并关闭浏览器时..
**停止 Wamp 并重新启动（ok）
**停止 Wamp 并启动（ok）
**停止 Vue 并重新启动（ok）
**停止 Internet 并重新启动（ok）

停止和（重新）启动 Vue 和 Wamp 并保持浏览器打开时..
**第一次重新启动 Wamp 时，然后 Vue..（好的）
**当第一次启动 Wamp 时，然后 Vue。（ok）
**当第一次用“npm run serve”重启Vue时..然后启动所有服务wamp..（nok）
**当第一次重启Vue..然后重启所有服务wamp..（ok）

停止和（重新）启动 Vue 和 Wamp 并关闭浏览器时..
**首先重新启动 Wamp，然后 Vue，然后浏览器..（nok）
**首先启动 Wamp，然后 Vue，然后浏览器..（ok）
**先启动Vue，再启动Wamp，再启动浏览器（ok）
**先启动Vue，再启动Wamp，再启动浏览器（nok）

关机时
**先启动 Vue，然后 Wamp，然后浏览器（nok）
**先启动 Wamp，然后 Vue，然后浏览器（nok）

标签： vue.jswampcakephp-3.0vue-cli

vue.js - 从 Vue 到 Cake 后端的 API 发布在重新加载时失败

问题描述

解决方案

推荐阅读