bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • apache2_en_debian_ubuntu • android_imatges • terraform • dam_mp06_uf1 • dns_spoofing • php.ini • syntax • scrum_projecte • accedint_mongodb • python_venv
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:08]
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 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 433: Línia 434:
 } }
 </file> </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.1688638105.txt.gz · Darrera modificació: 2023/07/06 10:08 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