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:25]
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
  
  
 === Javascript i JSX === === Javascript i JSX ===
 +
 +--> Proposta de codi JSX
  
 <file javascript App.jsx> <file javascript App.jsx>
Línia 266: 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 366: Línia 396:
 </file> </file>
  
-=== CSS ===+<-- 
 + 
 +\\ 
 + 
 +=== Estils CSS === 
 + 
 +--> Proposta de codi CSS
  
 <file css App.css> <file css App.css>
 +#root {
 +  max-width: 1280px;
 +  margin: 0 auto;
 +  padding: 2rem;
 +  text-align: center;
 +}
 +
 +.logo {
 +  height: 6em;
 +  padding: 1.5em;
 +  will-change: filter;
 +  transition: filter 300ms;
 +}
 +.logo:hover {
 +  filter: drop-shadow(0 0 2em #646cffaa);
 +}
 +.logo.react:hover {
 +  filter: drop-shadow(0 0 2em #61dafbaa);
 +}
 +
 +@keyframes logo-spin {
 +  from {
 +    transform: rotate(0deg);
 +  }
 +  to {
 +    transform: rotate(360deg);
 +  }
 +}
 +
 +@media (prefers-reduced-motion: no-preference) {
 +  a:nth-of-type(2) .logo {
 +    animation: logo-spin infinite 20s linear;
 +  }
 +}
 +
 +.card {
 +  padding: 2em;
 +}
 +
 +.read-the-docs {
 +  color: #888;
 +}
 </file> </file>
  
 <file css Modal.css> <file css Modal.css>
 +/* Modal.css */
 +.modal-overlay {
 +  position: fixed;
 +  top: 0;
 +  left: 0;
 +  right: 0;
 +  bottom: 0;
 +  background-color: rgba(0, 0, 0, 0.5);
 +  display: flex;
 +  justify-content: center;
 +  align-items: center;
 +  z-index: 1000;
 +}
 +
 +.modal-content {
 +  background-color: white;
 +  padding: 20px;
 +  border-radius: 8px;
 +  max-width: 500px;
 +  width: 90%;
 +  max-height: 80vh;
 +  overflow-y: auto;
 +  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 +}
 +
 +.modal-header {
 +  display: flex;
 +  justify-content: space-between;
 +  align-items: center;
 +  margin-bottom: 20px;
 +  border-bottom: 1px solid #eee;
 +  padding-bottom: 10px;
 +}
 +
 +.modal-header h2 {
 +  margin: 0;
 +  font-size: 1.5rem;
 +}
 +
 +.close-btn {
 +  background: none;
 +  border: none;
 +  font-size: 24px;
 +  cursor: pointer;
 +  color: #666;
 +  padding: 0;
 +  width: 30px;
 +  height: 30px;
 +  display: flex;
 +  align-items: center;
 +  justify-content: center;
 +}
 +
 +.close-btn:hover {
 +  color: #000;
 +}
 +
 +.modal-body {
 +  margin-bottom: 20px;
 +  line-height: 1.6;
 +}
 +
 +.modal-body p {
 +  margin: 10px 0;
 +}
 +
 +.modal-footer {
 +  display: flex;
 +  justify-content: flex-end;
 +  border-top: 1px solid #eee;
 +  padding-top: 10px;
 +}
 +
 +.modal-footer button {
 +  padding: 8px 16px;
 +  background-color: #007bff;
 +  color: white;
 +  border: none;
 +  border-radius: 4px;
 +  cursor: pointer;
 +}
 +
 +.modal-footer button:hover {
 +  background-color: #0056b3;
 +}
 </file> </file>
  
 <file css styles.css> <file css styles.css>
 +body {
 +  font-family: Arial, sans-serif;
 +  background-color: #f5f5f5;
 +  text-align: center;
 +}
 +
 +.container {
 +  max-width: 800px;
 +  margin: 20px auto;
 +}
 +
 +.book-card {
 +  background: white;
 +  padding: 15px;
 +  border-radius: 5px;
 +  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
 +  margin-bottom: 15px;
 +  text-align: left;
 +}
 +
 +h1 {
 +  color: #333;
 +}
 +
 +h3 {
 +  color: #007bff;
 +}
 +
 +h4 {
 +  margin-top: 10px;
 +}
 +
 +ul {
 +  list-style: none;
 +  padding: 0;
 +}
 +
 +ul li {
 +  background: #e9ecef;
 +  padding: 5px;
 +  margin: 5px 0;
 +  border-radius: 3px;
 +}
 +
 +p {
 +  color: black;
 +}
 </file> </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>
 +
 +<--
  
 \\ \\
  
django_react.1775809517.txt.gz · Darrera modificació: 2026/04/10 08:25 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