bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • fastapi • integracio_de_django_amb_react
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 09:53]
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 239: Línia 240:
    
 export default App; export default App;
 +</file>
 +
 +5. El pas anterior era un exemple per validar l'aplicació. Substitueix-lo, en el fitxer //App.js//, pel codi següent:
 +<file javascript App.js>
 +// import Component from the react module
 +import React, { Component } from "react";
 +import Modal from "./components/Modal";
 +import axios from 'axios'; 
 + 
 +class App extends Component {
 +  constructor(props) {
 +    super(props);
 +     
 +    this.state = {
 +     
 +      viewCompleted: false,
 +      activeItem: {
 +        title: "",
 +        description: "",
 +        completed: false
 +      },
 +       
 +      customersList: []
 +    };
 +  }
 + 
 +
 +  componentDidMount() {
 +    this.refreshList();
 +  }
 + 
 +  refreshList = () => {
 +    axios   //Axios to send and receive HTTP requests
 +      .get("http://localhost:8000/api/customers/")
 +      .then(res => this.setState({ customersList: res.data }))
 +      .catch(err => console.log(err));
 +  };
 + 
 +  displayCompleted = status => {
 +    if (status) {
 +      return this.setState({ viewCompleted: true });
 +    }
 +    return this.setState({ viewCompleted: false });
 +  };
 + 
 +
 +  renderTabList = () => {
 +    return (
 +      <div className="my-5 customer-list">
 +        <span
 +          onClick={() => this.displayCompleted(true)}
 +          className={this.state.viewCompleted ? "active" : ""}
 +        >
 +          completed
 +            </span>
 +        <span
 +          onClick={() => this.displayCompleted(false)}
 +          className={this.state.viewCompleted ? "" : "active"}
 +        >
 +          Incompleted
 +            </span>
 +      </div>
 +    );
 +  };
 + 
 +  renderItems = () => {
 +    const { viewCompleted } = this.state;
 +    const newItems = this.state.taskList.filter(
 +      (item) => item.completed === viewCompleted
 +    );
 +    return newItems.map((item) => (
 +      <li
 +        key={item.id}
 +        className="list-group-item d-flex justify-content-between align-items-center"
 +      >
 +        <span
 +          className={`customer-title mr-2 ${
 +            this.state.viewCompleted ? "completed-customer" : ""
 +          }`}
 +          title={item.description}
 +        >
 +          {item.title}
 +        </span>
 +        <span>
 +          <button
 +            onClick={() => this.editItem(item)}
 +            className="btn btn-secondary mr-2"
 +          >
 +            Edit
 +          </button>
 +          <button
 +            onClick={() => this.handleDelete(item)}
 +            className="btn btn-danger"
 +          >
 +            Delete
 +          </button>
 +        </span>
 +      </li>
 +    ));
 +  };
 + 
 +  toggle = () => {
 +    //add this after modal creation
 +    this.setState({ modal: !this.state.modal });
 +  };
 + 
 +  handleSubmit = (item) => {
 +    this.toggle();
 +     alert("save" + JSON.stringify(item));
 +    if (item.id) {
 +      // if old post to edit and submit
 +      axios
 +        .put(`http://localhost:8000/api/tasks/${item.id}/`, item)
 +        .then((res) => this.refreshList());
 +      return;
 +    }
 +
 +    axios
 +      .post("http://localhost:8000/api/customers/", item)
 +      .then((res) => this.refreshList());
 +  };
 + 
 +  handleDelete = (item) => {
 +      alert("delete" + JSON.stringify(item));
 +    axios
 +      .delete(`http://localhost:8000/api/tasks/${item.id}/`)
 +      .then((res) => this.refreshList());
 +  };
 +  
 +  createItem = () => {
 +    const item = { title: "", description: "", completed: false };
 +    this.setState({ activeItem: item, modal: !this.state.modal });
 +  };
 + 
 +  editItem = (item) => {
 +    this.setState({ activeItem: item, modal: !this.state.modal });
 +  };
 + 
 +  render() {
 +    return (
 +      <main className="content">
 +        <h1 className="text-success text-uppercase text-center my-4">
 +          GFG Task Manager
 +        </h1>
 +        <div className="row ">
 +          <div className="col-md-6 col-sm-10 mx-auto p-0">
 +            <div className="card p-3">
 +              <div className="">
 +                <button onClick={this.createItem} className="btn btn-info">
 +                  Add task
 +                </button>
 +              </div>
 +              {this.renderTabList()}
 +              <ul className="list-group list-group-flush">
 +                {this.renderItems()}
 +              </ul>
 +            </div>
 +          </div>
 +        </div>
 +        {this.state.modal ? (
 +          <Modal
 +            activeItem={this.state.activeItem}
 +            toggle={this.toggle}
 +            onSave={this.handleSubmit}
 +          />
 +        ) : null}
 +      </main>
 +    );
 +  }
 +}
 +export default App;
 +</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.1688637203.txt.gz · Darrera modificació: 2023/07/06 09:53 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