bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • android_sudoku • android_spinner • integracio_de_django_amb_react • xpath • websockets_php • android_sensors • github_classroom_autograde • jenkins_django • django_pres • django_lliga
integracio_de_django_amb_react

Diferències

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
integracio_de_django_amb_react [2023/07/06 10:02]
raquel_alaman_navas 		integracio_de_django_amb_react [2023/07/06 10:25] (actual)
raquel_alaman_navas [Integració de Reactjs (FrontEnd)]
Línia 24: Línia 24:
   * **Account**: account_id (IntegerField),customer (ForeignKey Customer) description (CharField(200)), limit(IntegerField)   * **Account**: account_id (IntegerField),customer (ForeignKey Customer) description (CharField(200)), limit(IntegerField)
  
---> Proposta implementació Customer i Account#+--> Proposta d'implementació Customer i Account#
 <file python models.py> <file python models.py>
  
Línia 125: Línia 125:
 from rest_framework import serializers from rest_framework import serializers
    
-# import the todo data model+# import the Customer data model
 from .models import Customer from .models import Customer
    
Línia 214: Línia 214:
  
 <WRAP info> <WRAP info>
-Només funcionarà la sentència anterior amb versions de node.js superiors a la 14.0, així que si et dóna error, caldrà que l'actualitzis. Pots seguir aquest [[https://www.cyberithub.com/how-to-install-the-latest-version-of-node-js-on-ubuntu-debian/|tutorial]].+Només funcionarà la sentència anterior amb versions de node.js superiors a la 14.0, així que si et dóna error, caldrà que l'actualitzis. Pots seguir aquest [[https://www.cyberithub.com/how-to-install-the-latest-version-of-node-js-on-ubuntu-debian/|tutorial]]. Tingues paciència, perquè aquest pas trigarà força!
 </WRAP> </WRAP>
  
Línia 227: Línia 227:
 </code> </code>
  
-Si és així, et sortirà una pantalla similar a aquesta:+Si és així, et sortirà una pantalla similar a aquesta (en l'adreça localhost:3000):
  
 +{{ ::react_app.png |}}
 4. Obre el fitxer //App.js// a la carpeta del frontend. Elimina el codi existent i substitueix-lo pel codi següent: 4. Obre el fitxer //App.js// a la carpeta del frontend. Elimina el codi existent i substitueix-lo pel codi següent:
  
Línia 315: Línia 316:
       >       >
         <span         <span
-          className={`todo-title mr-2 ${ +          className={`customer-title mr-2 ${ 
-            this.state.viewCompleted ? "completed-todo" : ""+            this.state.viewCompleted ? "completed-customer" : ""
           }`}           }`}
           title={item.description}           title={item.description}
Línia 411: Línia 412:
 export default App; export default App;
 </file> </file>
 +
 +6. Obre el fitxer //Index.css//, neteja el CSS que hi ha a dins i afegeix el següent codi al fitxer:
 +
 +<file css Index.css>
 +.customer-title {
 +  cursor: pointer;
 +}
 +.completed-customer {
 +  text-decoration: line-through;
 +}
 +.customer-list > span {
 +  padding: 5px 8px;
 +  border: 1px solid rgb(7, 167, 68);
 +  border-radius: 10px;
 +  margin-right: 5px;
 +  cursor: pointer;
 +}
 +.customer-list > span.active {
 +  background-color: rgb(6, 139, 12);
 +  color: #fff;
 +}
 +</file>
 +
 +7. Crea una carpeta nova anomenada "Components" al directori //src// i afegeix un fitxer //Modal.js//. Després, afegeix el codi següent:
 +<file javascript Modal.js>
 +import React, { Component } from "react";
 + 
 +// importing all of these classes from reactstrap module
 +import {
 +  Button,
 +  Modal,
 +  ModalHeader,
 +  ModalBody,
 +  ModalFooter,
 +  Form,
 +  FormGroup,
 +  Input,
 +  Label
 +} from "reactstrap";
 + 
 +class CustomModal extends Component {
 +  constructor(props) {
 +    super(props);
 +    this.state = {
 +      activeItem: this.props.activeItem
 +    };
 +  }
 +  // changes handler to check if a checkbox is checked or not
 +  handleChange = e => {
 +    let { name, value } = e.target;
 +    if (e.target.type === "checkbox") {
 +      value = e.target.checked;
 +    }
 +    const activeItem = { ...this.state.activeItem, [name]: value };
 +    this.setState({ activeItem });
 +  };
 + 
 +  // rendering modal in the custommodal class received toggle and on save as props,
 +  render() {
 +    const { toggle, onSave } = this.props;
 +    return (
 +      <Modal isOpen={true} toggle={toggle}>
 +        <ModalHeader toggle={toggle}> Customer Item </ModalHeader>
 +        <ModalBody>
 +         
 +          <Form>
 + 
 +            {/* 3 formgroups
 +            1 title label */}
 +            <FormGroup>
 +              <Label for="title">Customer ID</Label>
 +              <Input
 +                type="text"
 +                name="title"
 +                value={this.state.activeItem.title}
 +                onChange={this.handleChange}
 +                placeholder="Enter Customer ID"
 +              />
 +            </FormGroup>
 + 
 +            {/* 2 description label */}
 +            <FormGroup>
 +              <Label for="description">Customer name</Label>
 +              <Input
 +                type="text"
 +                name="description"
 +                value={this.state.activeItem.description}
 +                onChange={this.handleChange}
 +                placeholder="Enter Customer Name"
 +              />
 +            </FormGroup>
 + 
 +            {/* 3 completed label */}
 +            <FormGroup check>
 +              <Label for="completed">
 +                <Input
 +                  type="checkbox"
 +                  name="completed"
 +                  checked={this.state.activeItem.completed}
 +                  onChange={this.handleChange}
 +                />
 +                Completed
 +              </Label>
 +            </FormGroup>
 +          </Form>
 +        </ModalBody>
 +        {/* create a modal footer */}
 +        <ModalFooter>
 +          <Button color="success" onClick={() => onSave(this.state.activeItem)}>
 +            Save
 +          </Button>
 +        </ModalFooter>
 +      </Modal>
 +    );
 +  }
 +}
 +export default CustomModal
 +</file>
 +8. Fes els canvis indicats a continuació al fitxer //index.js//:
 +<file javascript index.js>
 +import React from "react";
 +import ReactDOM from "react-dom";
 +import "./index.css";
 +import App from "./App";
 + 
 +import "bootstrap/dist/css/bootstrap.min.css";
 + 
 +ReactDOM.render(
 +  <React.StrictMode>
 +    <App />
 +  </React.StrictMode>,
 +  document.getElementById("root")
 +);
 +</file>
 +9. Per fer les peticions als endpoints de l'API al servidor del framework de Django, necessitarem instal·lar l'Axios. Utilitza l'ordre següent dins de la carpeta del framework per a instal·lar l'Axios:
 +<code>
 +npm install axios
 +</code>
 +
 +I, amb aquest pas, ja tenim una aplicació Fullstack Django-React utilitzant el framework REST Django per establir la comunicació entre el frontend i el backend.
 +
 +<WRAP todo>
 +**Exercici:**
 +Aplica la serialització de manera que es puguin gestionar els comptes associats als clients.
 +</WRAP>
 +
 +\\
 +
integracio_de_django_amb_react.1688637728.txt.gz · Darrera modificació: 2023/07/06 10:02 per raquel_alaman_navas

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