Thank you for your help.
I work on an application, I have to manage the frontend part with vue.js and the backend part with express.js, mysql.
One important thing I currently only work on requests in VueJS: Fetch API.
When I restart the front part and do a simulation nothing is displayed on my console.
I declared my data, method, fetch API.
-Authentication with Vue 3 : Registration and login.
-The page in question is the registration.
I then go to the backend to do the controllers, route, auth part, for secure authentication on mysql.
<script>
export default {
name: "FormSuscribe",
data() {
return {
first_name: "",
email: "",
password_key: "",
};
},
methods: {
signup() {
fetch("http://localhost:3000/api/auth/signup", {
method: "POST",
//--Header--//
headers: {
Authorization: "Bearer ",
Accept: "application/json",
"Content-Type": "application/json",
},
//---Body--//
body: JSON.stringify({
name: this.name,
email: this.email,
password: this.password,
}),
});
},
},
};
</script><template>
<main>
<section class="form my-4 mx-5">
<div class="container">
<div class="row">
<div class="col-lg-5 g-0">
<img
src="@/assets/signup-image.jpg"
class="img-fluid first-img"
alt="Office"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<form method="post" @submit="signup">
<div class="form-row">
<div class="col">
<input
id="first_name"
name="username"
placeholder="Nom"
class="my-3 p-2"
v-model="first_name"
/>
</div>
</div>
<div class="form-row">
<div class="col">
<input
type="email"
id="email"
name="email"
class="form-group my-3 p-2"
placeholder="[email protected]"
v-model="email"
/>
</div>
</div>
<div class="form-row">
<div class="col">
<input
type="password"
id="password"
name="password"
placeholder="**********"
class="my-3 p-2"
v-model="password_key"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-4">
<button type="button" class="btn fw-bold">register</button>
<a href="">Forgot password</a>
<p>
You already have an account <a href="#">Connect</a>
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<div class="container text-center">
<img
src="@/assets/icon-left-font-black.webp"
class="img-fluid col-lg-2 col-sm-2"
alt="Brand "
/>
</div>
</main>
</template>