Discussion :

[grub_fr]

Salut,

J'arrive a envoyer 1 json depuis Symfony vers Vite Vue mais pas le contraire.
Ma variable part bien du server Vite Vue, mais Symfony n'arrive pas à la récupérer.
Voici le code des 2 fichiers et des screens de la console firefox et du resultat affiché dans le controller Symfony

le fichier view01.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<script setup lang = 'ts'>
 
import { ref } from 'vue'
 
const message = ref('')
 
fetch("/api")
  .then(response => response.json())
  .then(data => {
    message.value = JSON.stringify(data);
  });
 
const V01 = ref("Please enter value to send to Symfony");
 
function onSubmit() {
  const obj = {
    value: V01.value
  };
  // console.log("Submitting value: ", JSON.stringify({ value: V01.value }));
  // Log the JSON string to the console
  console.log(JSON.stringify(obj));
 
  // Do something with the submitted value
  fetch('https://localhost:8000/api/receive/data/php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    // body: JSON.stringify({ value: V01.value })
    body: JSON.stringify(obj)
  })
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
    console.log(error)
  });
}
 
</script>
 
<template>
	<main>
		<section class="section01">
			{{ message }}
			<br>
			<form @submit.prevent="onSubmit">
				<label for="inputField">Please enter value to send to Symfony</label>
				<br>
				<input type="text" id="inputField" v-model="V01" />
				<br>
        			<button type="submit">ENTER</button>
		        </form>
		</section>
	</main>
</template>
 
<style scoped>
 
  .section01 {
    width: 800px;
    height: 400px;
    background-color: green;
    padding: 50px;
    border: 6px solid #000000;
  }
 
</style>

le fichier controller de Symfony6: ReceiveDataPhpController

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<?php
 
namespace App\Controller;
 
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
 
class ReceiveDataPhpController extends AbstractController
{
    #[Route('/api/receive/data/php', name: 'app_receive_data_php')]
    public function index(Request $request): Response
    {
 
    	// Get the JSON object from the request body
        $jsonObject = $request->getContent();
 
        // Output a message to confirm that the code is being executed
	echo "The controller code is being executed<br>";
 
        // Output the JSON object for debugging
        var_dump($jsonObject);
        echo "Length of JSON object: " . strlen($jsonObject) . "<br>";
 
        if($jsonObject) {
        echo "<br>";
        	echo "tt bon";
        } else {
        	echo "pas tt bon";
        }
        echo "<br>";
 
        // Decode the JSON object into an associative array
        $data = json_decode($jsonObject, true);
 
 
        if (json_last_error() !== JSON_ERROR_NONE) {
   		 $errorMsg = json_last_error_msg();
    		echo "Error decoding JSON data: " . $errorMsg . "<br>";
	}
 
	var_dump($data);
	echo "<br>";
 
        if ($data === null) {
    		// handle the case when the JSON data cannot be decoded
    		return new Response('The JSON data is invalid');
	}
 
        // Check if the 'value' element is set in the $data array
        if (isset($data['value'])) {
            $value = $data['value'];
 
            return $this->render('receive_data_php/index.html.twig', [
                'controller_name' => 'ReceiveDataPhpController',
                'value' => $value,
            ]);
        } else {
            // handle the case when the 'value' element is not set
            return new Response('The value element is not set in the JSON data');
        }
 
 
    }
}

et les screen
de la console firefox:


puis de ce que je vois ds le template twig du fichier controller de Symfony6


Voilà, je ne sais pas ce qui se passe, donc si vous avez des pistes.
En vous remerciant,
grub

[ThomasR]

Bonjour,

Ton code semble parfaitement correct.

Dans ton dernier screenshot, on voit que tu essayes d'appeler l'URL de ton API directement dans ton navigateur (en GET). Sauf que ton code, il attend à ce que tu aies envoyé des données JSON en POST, mais si tu accèdes directement depuis ton navigateur tu n'envoies rien du tout. Ainsi ta page affiche bien que ton JSON est vide, ce qui est correct.

[grub_fr]

re,

Bonjour Thomas,

bon, oui le probleme est réglé.
Je mets du code (8 fichiers, pr que vs puissiez tout voir et je vulgarise ta reponse Thomas <-- tu pourras confirmer le fait que j'ai bien compris... mon formateur)

tt d'abord le projet VITE VUE qui est ds 1 rep DANS le projet Symfony
Le fichier vite.config.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server : {
        proxy: {
            "/api": {
                target: "https://127.0.0.1:8000",
                changeOrigin: true,
                secure: false,
                ws:true,
            },
        },
    },
})

dc, ici, ds le proxy, on met le prefixe a toutes les routes de symfony
et
on renseigne egalement l'adresse du server Symfony avec le port (127.0.0.1:8000)

le fichier index.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
import { createRouter, createWebHistory } from "vue-router";
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/view01",
      name: "view01",
      component: () => import("../views/view01.vue"),
 
    },
    {
      path: "/view02",
      name: "view02",
      component: () => import("../views/view02.vue"),
    },
  ],
});
 
export default router;

Ce fichier est personnel a VITE VUE, ce st les routes de VITE VUE

le fichier main.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { createApp } from 'vue'
 
import App from './App.vue'
import router from "./router";
 
import './style.css'
 
const app = createApp(App);
 
app.use(router);
 
app.mount("#app");

idem strictement personnel a VITE VUE

le fichier App.vue. On debute le bal des fichiers.vue
ces fichiers ds leur forme basique (celle que je presente ici car je ne connais que ça pr le moment)
st découpés en 3 morceaux
les balises <template> qui representent ce qui sera vu par l'utilisateur ds son navigateur
les balises <script> qui representent "la configuration" des balises template. On organise les données, on indique ce qu'on envoie a Symfony et ce qu'on en recoit
les balises <style>, le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<script setup lang="ts">
 
import { RouterLink, RouterView } from "vue-router";
import { ref } from 'vue'
 
</script>
 
<template>
    <main>
        <section class="section01">
            <div class="nav">
                <div class="item">
                    <RouterLink to="/view01">Page01</RouterLink>
                </div>
 
                <div class="item">
                    <RouterLink to="/view02">Page02</RouterLink>
                </div>
            </div>
 
            <div class="contentView">
                <RouterView />
            </div>
        </section>
    </main>
 
</template>
 
<style scoped>
 
    .section01 {
      flex-direction: column;
      height: 100vh;
      width: 100%;
      margin-left: 0;
      align-items: flex-start;
    }
 
    .nav {
      background-color: #ddd;
      display: flex;
      justify-content: space-between;
      padding: 20px;
    }
 
    .item {
      text-align: center;
      margin-right: 20px;
    }
 
    .contentView {
      flex: 1;
      aspect-ratio: 16/9;
    }
</style>

idem, strictement personnel à VITE VUE, ce st les liens qui amenent aux differentes views

le fichier view01.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<template>
  <main>
    <section class="section01">
      <!-- Affiche le json en brut -->
      <!-- {{ message }} -->
      <div class="name">
        name: {{ parsedMessage.name }}
      </div>
      <br>
      <div class="lastname">
        lastname: {{ parsedMessage.lastname }}
      </div>
    </section>
  </main>
</template>
 
<script setup lang="ts">
 
import { ref, computed } from "vue";
 
// la valeur de message a sa declaration
// est 1 string vide
const message = ref("");
 
// la valeur de parsedMessage a sa declaration
// est 1 json vide
const parsedMessage = ref ({});
 
// correspond à la route du controller SF
fetch("/api")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // contient le contenu du json,
    // utilisé uniquement pr verif de la bonne reception
    // ms pas utilisable en tant que tel
    message.value = JSON.stringify(data);
 
    // contient 1 sorte de tableau associatif
    // clé - valeur, dt on se servira
    // pr affichage ds le template
    parsedMessage.value = data;
  })
  .catch((error) => {
    console.log(error);
  });
 
</script>
 
<style scoped>
.section01 {
  background-color: blue;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16/9;
  height: min(100vh, calc(16vw / 9));
  width: 100%;
  text-align: left;
}
 
.name {
  background-color: blue;
  width: 100%;
  text-align: left;
}
 
.lastname {
  background-color: blue;
  width: 100%;
  text-align: left;
}
</style>

le fichier view02.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<template>
  <main>
    <section class="section01">
 
        You want to change your name?
        <br>
        ok, please enter your new name:
        <br>
        <br>
        <form @submit.prevent="submitForm">
            <label for="name">Name:</label>
            <input id="name" type="text" v-model="name" />
            <br>
            <br>
            <button type="submit">Submit</button>
        </form>
        <br>
        <br>
        Your new name will be:
        <br>
        name: {{ parsedResponse.value }}
        <br>
        message: {{ parsedResponse.message }}
    </section>
  </main>
</template>
 
<script setup lang="ts">
 
import { ref } from "vue";
 
const name = ref("");
const response = ref("");
 
// la valeur de parsedResponse a sa declaration
// est 1 json vide
const parsedResponse = ref ({});
 
function submitForm() {
    const obj = {
    value: name.value
  };
  fetch('https://localhost:8000/api/change/name', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(obj)
  })
  .then(response => {
    return response.json();
  })
  .then(data => {
      // symfonyResult.value = JSON.stringify(data);
      response.value = JSON.stringify(data);
      console.log("Form submitted with name:", name.value);
 
 
      parsedResponse.value = data;
  })
  .catch(error => {
    // handle error
    console.log(error)
  });
}
 
</script>
 
<style scoped>
.section01 {
  background-color: blue;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16/9;
  height: min(100vh, calc(16vw / 9));
  width: 100%;
  text-align: left;
}
 
</style>

Les fichiers controller de Symfony
le fichier IndexController.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<?php
 
	namespace App\Controller;
 
	use Symfony\Component\HttpFoundation\JsonResponse;
	use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
	use Symfony\Component\HttpFoundation\Response;
	use Symfony\Component\Routing\Annotation\Route;
 
	class IndexController extends AbstractController
	{
	    #[Route('/api', name: 'app_index')]
	    public function index(): Response
	    {
 
		$jsonObject = '{"name": "ZZZ", "lastname": "Doe"}';
		$response = new JsonResponse($jsonObject, 200, [], true);
 
		return $response;
 
 
	       // return $this->render('index/index.html.twig', [
	       //     'controller_name' => 'IndexController',
	       // ]);
	       //
	       // return json_encode(['message'=> 'coucou']);
	    }
	}

le fichier ChangenameController.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?php
 
namespace App\Controller;
 
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
 
use Symfony\Component\HttpFoundation\JsonResponse;
 
class ChangeNameController extends AbstractController
{
 
    #[Route('/api/change/name', name: 'app_change_name')]
    public function index(Request $request): Response
    {
 
        $jsonObject = $request->getContent();
        $data = json_decode($jsonObject, true);
 
        if (json_last_error() !== JSON_ERROR_NONE) {
            $errorMsg = json_last_error_msg();
        }
 
        // traitement, on ajoute 1 paire clé/valeur au json
        // avt de le renvoyer
        $data['value'] = strtoupper($data['value']);
        $data['message'] = 'Data received successfully!';
 
        return new JsonResponse($data);
 
    }
 
    }

c'est ds ce fichier que ca posait probleme (en fait c'est moi qui posait probleme, car cô le dit Thomas, le code est fonctionnel)
en fait si vs regardez le premier screen, avec la console FF, on voit que j'affiche le twig du controller et dc moi j'essayais d'afficher ce twig ds FF.
ca ne peut pas fonctionner
1), j'ai pas de methode render
2), le controller, fait 3 choses
-- il recupere les infos envoyées par le front VITE VUE (les données entrées par l'utilisateur)
-- il les traite
-- il les renvoie au front VITE VUE (le return)
3) la structure
-- symfony s'occupe du back-end
-- VITE VUE s'occupe du front end,
ca ne sert à rien d'appeler le twig symfony

Voili, voilou,
Je passe en résolu, j'ai néanmoins 1 question (jen profite que je t'ai sous le coude thomas).
si je change mes prefixes ds VITE VUE et Symfony, c'est a dire si j'enleve le mot "api", j'ai l'errur cô quoi Symfony ne trouve pas de route
pr 127.0.0.1:8000/view01.vue et 127.0.0.1:8000/view02.vue
Connaitrais tu la raison ?

Allé en ts les k, merci pr ton aide.
a+ et bonne soirée,
grub