bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
django_react

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
django_react [2026/04/10 08:29]
enric_mieza_sanchez [Codi de l'aplicació ReactJS] 		django_react [2026/04/14 18:26] (actual)
enric_mieza_sanchez [Django-Environ i el VCS]
Línia 135: Línia 135:
 from django.shortcuts import get_object_or_404 from django.shortcuts import get_object_or_404
 from typing import List, Optional, Union, Literal from typing import List, Optional, Union, Literal
 +import datetime
  
 from .models import * from .models import *
Línia 152: Línia 153:
     qs = Llibre.objects.all()     qs = Llibre.objects.all()
     return qs     return qs
- 
 </file> </file>
  
Línia 200: Línia 200:
  
 # variables a llegir de .env # variables a llegir de .env
 +# ULL! cal elimninar les variables que hi ha al settings.py
 DEBUG = env('DEBUG') DEBUG = env('DEBUG')
 SECRET_KEY = env('SECRET_KEY') SECRET_KEY = env('SECRET_KEY')
Línia 207: Línia 208:
     'default': env.db(),     'default': env.db(),
 } }
 +# dominis amb autorització per a fer crides a l'API
 CORS_ALLOWED_ORIGINS = env.list("CORS_ALLOWED_ORIGINS",default=[ CORS_ALLOWED_ORIGINS = env.list("CORS_ALLOWED_ORIGINS",default=[
     "http://localhost:5173",    # Exemple: React en desenvolupament amb Vite o CRA     "http://localhost:5173",    # Exemple: React en desenvolupament amb Vite o CRA
     "http://127.0.0.1:5173",     "http://127.0.0.1:5173",
 ]) ])
 +# protecció CSRF per atacs de dominis creuats
 +CSRF_TRUSTED_ORIGINS = env.list("CSRF_TRUSTED_ORIGINS")
 </file> </file>
  
Línia 221: Línia 225:
 ALLOWED_HOSTS=*,elmeudomini.com ALLOWED_HOSTS=*,elmeudomini.com
 CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com
 +CSRF_TRUSTED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com
 </file> </file>
  
Línia 230: Línia 235:
  
 Creació del projecte React dins la carpeta ''react/'' del projecte Django amb Vite. Caldrà triar projecte React + JavaScript: Creació del projecte React dins la carpeta ''react/'' del projecte Django amb Vite. Caldrà triar projecte React + JavaScript:
 +
 +Ens hem de posar a la carpeta principal del projecte Django, al mateix nivell que el ''manage.py''.
  
   $ npm create vite@latest react   $ npm create vite@latest react
Línia 238: Línia 245:
 Els arxius de codi seran: Els arxius de codi seran:
   * App.jsx   * App.jsx
 +  * config.js
   * services/api.js   * services/api.js
   * components/BookList.jsx   * components/BookList.jsx
Línia 246: Línia 254:
   * Modal.css   * Modal.css
   * styles.css   * styles.css
 +  * index.css
  
  
Línia 268: Línia 277:
  
 export default App; export default App;
 +</file>
 +
 +<file javascript config.js>
 +const config = {
 +  development: {
 +    API_URL: 'http://localhost:8000/api',
 +    DEBUG: true,
 +  },
 +  production: {
 +    API_URL: 'https://elmeudomini.com/api',
 +    DEBUG: false,
 +  }
 +};
 +
 +const env = process.env.NODE_ENV || 'development';
 +export default config[env];
 +
 </file> </file>
  
 <file javascript services/api.js> <file javascript services/api.js>
-const API_URL = 'http://localhost:8000/api/llibres'; // Ajusta según tu Django API+import config from '../config'; 
 + 
 +const API_BASE_URL = config.API_URL;
  
 export const getBooks = () => { export const getBooks = () => {
   console.log('cridant API...');   console.log('cridant API...');
-  return fetch(API_URL)+  return fetch(API_BASE_URL+"/llibres")
     .then((response) => {     .then((response) => {
       if (!response.ok) {       if (!response.ok) {
Línia 556: Línia 584:
 p { p {
   color: black;   color: black;
 +}
 +</file>
 +
 +Aquest sol venir a l'esquelet del projecte, sol anar canviant d'una versió a l'altra
 +<file css index.css>
 +:root {
 +  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
 +  line-height: 1.5;
 +  font-weight: 400;
 +
 +  color-scheme: light dark;
 +  color: rgba(255, 255, 255, 0.87);
 +  background-color: #242424;
 +
 +  font-synthesis: none;
 +  text-rendering: optimizeLegibility;
 +  -webkit-font-smoothing: antialiased;
 +  -moz-osx-font-smoothing: grayscale;
 +}
 +
 +a {
 +  font-weight: 500;
 +  color: #646cff;
 +  text-decoration: inherit;
 +}
 +a:hover {
 +  color: #535bf2;
 +}
 +
 +body {
 +  margin: 0;
 +  display: flex;
 +  place-items: center;
 +  min-width: 320px;
 +  min-height: 100vh;
 +}
 +
 +h1 {
 +  font-size: 3.2em;
 +  line-height: 1.1;
 +}
 +
 +button {
 +  border-radius: 8px;
 +  border: 1px solid transparent;
 +  padding: 0.6em 1.2em;
 +  font-size: 1em;
 +  font-weight: 500;
 +  font-family: inherit;
 +  background-color: #1a1a1a;
 +  cursor: pointer;
 +  transition: border-color 0.25s;
 +}
 +button:hover {
 +  border-color: #646cff;
 +}
 +button:focus,
 +button:focus-visible {
 +  outline: 4px auto -webkit-focus-ring-color;
 +}
 +
 +@media (prefers-color-scheme: light) {
 +  :root {
 +    color: #213547;
 +    background-color: #ffffff;
 +  }
 +  a:hover {
 +    color: #747bff;
 +  }
 +  button {
 +    background-color: #f9f9f9;
 +  }
 } }
 </file> </file>
django_react.1775809777.txt.gz · Darrera modificació: 2026/04/10 08:29 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki