Сообщение API от Vue до Cake Backend не выполняется при определенных условиях перезагрузки FrontEnd, BackEnd, браузера и / или компьютера ..
Я разрабатываю приложение с Vue. js в качестве Frontend Framework и Cake PHP 3.8 в качестве Backend Framework. Я установил несколько форм в Vue, из которых я делаю POST-запросы к нескольким конечным точкам Cake Backend. Мои запросы GET работают нормально ..
При определенных условиях я получаю сообщение об ошибке. Это сообщение об ошибке исчезает, когда я удаляю код, повторю попытку, а затем верну исходный код и попытаюсь снова .. В сообщении об ошибке говорится, что есть блок CORS, но он говорит об этом со всеми ошибками, а также с орфографическими ошибками. Таким образом, сообщение об ошибке полностью соответствует . Таким образом, с точно таким же кодом запрос работает после удаления, повторной попытки и возврата ..
Root Причина и решение
Важная вещь, помогающая мне в поиске решения, заключалась в понимании что консоль выдает неправильную ошибку (CORS). Журнал ошибок в Cake PHP был намного понятнее. Это дало ошибку Ошибка: [PDOException] SQLSTATE [23000]: Нарушение ограничения целостности: 1048 «Имя» столбца не может быть пустым (Cake error.log) . Таким образом, данные, записанные в базу данных, не могут быть сохранены в базе данных. Ошибка была при обработке данных POST на сервере Cake.
Решение проблемы проблема заключалась в том, чтобы сначала выполнить проверку данных запроса перед сохранением .. if ($ data) {}
*** Я думаю, проблема связана с задержкой во времени установление первого соединения с Back-End .. Хочет немедленно сделать сохранение, не установив данные .. Видимо, это происходит только при запуске системы. ***
Есть ли у кого-нибудь лучшее объяснение этому?
Vue Front-End Code:
<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));
}
Некоторые сценарии, которые я зарегистрировал ..
При остановке одного элемента и сохранении браузера ..
** При остановке & перезапуск локального сервера dev для Vue он все еще работает. (ok)
** При остановке и перезапуске inte rnet все еще работает. (ОК)
** При остановке и перезапуске сервера wamp все еще работает .. (ОК)
** При остановке и запуске сервер wamp все еще работает .. (ОК)
При остановке один элемент и закрытие браузера ..
** Остановить Wamp и перезапустить (нормально)
** Остановить Wamp и запустить (нормально)
** Остановить Vue и перезапустить (нормально)
* * Остановить Inte rnet и перезапустить (нормально)
При остановке и (повторном) запуске Vue & Wamp и сохранение браузера включенным ..
** При первом перезапуске Wamp, затем Vue .. (ок)
** При первом запуске резервное копирование Wamp, затем Vue. (ok)
** При первом перезапуске Vue с «npm run serve» .. Затем запустите все службы wamp .. (nok)
** При первом перезапуске Vue .. Затем перезапустите все Services wamp .. (ok)
При остановке и (повторном) запуске Vue & Wamp и выключении браузера ..
** Сначала перезапускаем Wamp, затем Vue, затем браузер .. (nok)
** Сначала запустите Wamp, затем Vue, затем браузер .. (ok)
** Сначала запустите Vue, затем перезапустите Wamp, затем браузер (ok)
* * Сначала запустите Vue, затем запустите Wamp, затем браузер (nok)
При выключении компьютера
** Сначала запустите Vue, затем Wamp, затем браузер (nok)
** Сначала запустите Wamp, затем Vue, затем браузер (nok)