Mudanças entre as edições de "React.js: CRUD Rest"
Linha 22: | Linha 22: | ||
$ npm install --save axios | $ npm install --save axios | ||
− | Depois disso, vamos alterar alguns arquivos. | + | Depois disso, vamos alterar alguns arquivos. |
== index.css == | == index.css == | ||
+ | |||
+ | Para que a tabela fique bonitinha, vamos adicionar um CSS no arquivo <code>index.css</code> | ||
<syntaxhighlight lang=css> | <syntaxhighlight lang=css> | ||
Linha 50: | Linha 52: | ||
color: white; | color: white; | ||
} | } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | == App.js == | ||
+ | |||
+ | E então vamos para o arquivo principal da aplicação | ||
+ | |||
+ | <syntaxhighlight lang=react> | ||
+ | import React, { Component } from 'react'; | ||
+ | import axios from 'axios'; | ||
+ | import './App.css'; | ||
+ | |||
+ | //const server = 'https://api.arisa.com.br'; | ||
+ | const server = 'http://localhost:8080'; | ||
+ | |||
+ | class App extends Component { | ||
+ | constructor(props) { | ||
+ | super(props); | ||
+ | this.state = { | ||
+ | users: [], | ||
+ | user_id: '', | ||
+ | user_name: '', | ||
+ | user_email: '', | ||
+ | disabled: false, | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | render() { | ||
+ | const { users } = this.state; | ||
+ | const { user_id } = this.state; | ||
+ | const { user_name } = this.state; | ||
+ | const { user_email } = this.state; | ||
+ | |||
+ | return ( | ||
+ | <div> | ||
+ | <h1>Usuários</h1> | ||
+ | <form onSubmit={this.handleSubmit}> | ||
+ | <p> | ||
+ | <label>ID: | ||
+ | <input type='text' | ||
+ | name='user_id' | ||
+ | value={user_id} | ||
+ | onChange={this.myChangeHandler} | ||
+ | disabled={(this.state.disabled) ? "disabled" : ""} | ||
+ | /> | ||
+ | </label> | ||
+ | </p> | ||
+ | <p> | ||
+ | <label>Name: | ||
+ | <input type='text' | ||
+ | name='user_name' | ||
+ | value={user_name} | ||
+ | onChange={this.myChangeHandler} | ||
+ | /> | ||
+ | </label> | ||
+ | </p> | ||
+ | <p> | ||
+ | <label>E-mail: | ||
+ | <input type='text' | ||
+ | name='user_email' | ||
+ | value={user_email} | ||
+ | onChange={this.myChangeHandler} | ||
+ | /> | ||
+ | </label> | ||
+ | </p> | ||
+ | <p> | ||
+ | <button>Gravar</button> | ||
+ | <button type='button' onClick={this.reset}>Limpar</button> | ||
+ | </p> | ||
+ | </form> | ||
+ | <table> | ||
+ | <thead> | ||
+ | <tr><th>ID</th><th>Nome</th><th>E-mail</th><th></th></tr> | ||
+ | </thead> | ||
+ | <tbody> | ||
+ | {users.map(user => ( | ||
+ | <tr key={user.id}> | ||
+ | <td>{user.id}</td> | ||
+ | <td onClick={() => this.getUser(user.id)}>{user.name}</td> | ||
+ | <td><a href={"mailto:" + user.email}>{user.email}</a></td> | ||
+ | <td><button type='button' onClick={() => this.deleteUser(user.id)}>X</button></td> | ||
+ | </tr> | ||
+ | ))} | ||
+ | </tbody> | ||
+ | </table> | ||
+ | </div> | ||
+ | ); | ||
+ | } | ||
+ | |||
+ | async componentDidMount() { | ||
+ | this.get(); | ||
+ | } | ||
+ | |||
+ | myChangeHandler = (event) => { | ||
+ | let nam = event.target.name; | ||
+ | let val = event.target.value; | ||
+ | this.setState({ [nam]: val }); | ||
+ | } | ||
+ | |||
+ | handleSubmit = async (e) => { | ||
+ | try { | ||
+ | var id = parseInt(this.state.user_id); | ||
+ | } catch(error) { | ||
+ | console.error("Error :", error); | ||
+ | } | ||
+ | e.preventDefault(); | ||
+ | const data = JSON.stringify({ | ||
+ | id: id, | ||
+ | name: this.state.user_name, | ||
+ | email: this.state.user_email, | ||
+ | }); | ||
+ | try { | ||
+ | if (this.state.disabled) { | ||
+ | await axios.put(`${server}/users`, data); | ||
+ | } else { | ||
+ | if (this.state.user_id.trim() === "") return; | ||
+ | await axios.post(`${server}/users`, data); | ||
+ | } | ||
+ | this.setState({ | ||
+ | user_id: '', | ||
+ | user_name: '', | ||
+ | user_email: '', | ||
+ | disabled: false, | ||
+ | }); | ||
+ | this.get(); | ||
+ | } catch (error) { | ||
+ | console.error("Error creating post:", error); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | get = async () => { | ||
+ | try { | ||
+ | const response = await axios.get(`${server}/users`, ''); | ||
+ | this.setState({ users: [] }); | ||
+ | this.setState({ users: response.data }); | ||
+ | } catch (error) { | ||
+ | console.error("Error get users :", error); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | getUser = async (id) => { | ||
+ | try { | ||
+ | const response = await axios.get(`${server}/users/${id}`); | ||
+ | this.setState({ | ||
+ | user_id: response.data.id, | ||
+ | user_name: response.data.name, | ||
+ | user_email: response.data.email, | ||
+ | disabled: true, | ||
+ | }); | ||
+ | } catch (error) { | ||
+ | console.error("Error get user :", error); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | deleteUser = async (id) => { | ||
+ | try { | ||
+ | await axios.delete(`${server}/users/${id}`); | ||
+ | this.reset(); | ||
+ | this.get(); | ||
+ | } catch (error) { | ||
+ | console.error("Error deleting post:", error); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | reset = async () => { | ||
+ | this.setState({ | ||
+ | user_id: '', | ||
+ | user_name: '', | ||
+ | user_email: '', | ||
+ | disabled: false, | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> |
Edição das 17h18min de 2 de abril de 2024
Afluentes: Usabilidade, Desenvolvimento Web, Mobile e Jogos, Desenvolvimento Front-end II
Serviço web
Para que nosso CRUD possa ser funcional, precisamos de um serviço web com as operações de CRUD (CREATE, READ, UPDATE e DELETE). Para o nosso exemplo aqui, usarei um serviço web desenvolvido em linguagem de programação GO:
Caso você queira reimplementar o serviço em Node.js ou outra linguagem/framework, basta entender o manual de acesso ao serviço web:
Criação do Projeto
Tendo definido o serviço web que iremos consumir, agora vamos para a criação do nosso projeto. Nesse ponto, já temos instalado o npm, node e create-react-app, então vamos criar a pasta do projeto:
$ npx create-react-app reactcrud
Também vamos precisar do Axios, então já vamos instalar ele. Para isso, entre dentro da pasta que do projeto que criamos e baixe o axios:
$ cd reactcrud $ npm install --save axios
Depois disso, vamos alterar alguns arquivos.
index.css
Para que a tabela fique bonitinha, vamos adicionar um CSS no arquivo index.css
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #ddddff
}
tr:hover {
background-color: #bbbbff;
}
th {
background-color: #04AA6D;
color: white;
}
App.js
E então vamos para o arquivo principal da aplicação
import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
//const server = 'https://api.arisa.com.br';
const server = 'http://localhost:8080';
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
user_id: '',
user_name: '',
user_email: '',
disabled: false,
};
}
render() {
const { users } = this.state;
const { user_id } = this.state;
const { user_name } = this.state;
const { user_email } = this.state;
return (
<div>
<h1>Usuários</h1>
<form onSubmit={this.handleSubmit}>
<p>
<label>ID:
<input type='text'
name='user_id'
value={user_id}
onChange={this.myChangeHandler}
disabled={(this.state.disabled) ? "disabled" : ""}
/>
</label>
</p>
<p>
<label>Name:
<input type='text'
name='user_name'
value={user_name}
onChange={this.myChangeHandler}
/>
</label>
</p>
<p>
<label>E-mail:
<input type='text'
name='user_email'
value={user_email}
onChange={this.myChangeHandler}
/>
</label>
</p>
<p>
<button>Gravar</button>
<button type='button' onClick={this.reset}>Limpar</button>
</p>
</form>
<table>
<thead>
<tr><th>ID</th><th>Nome</th><th>E-mail</th><th></th></tr>
</thead>
<tbody>
{users.map(user => (
<tr key={user.id}>
<td>{user.id}</td>
<td onClick={() => this.getUser(user.id)}>{user.name}</td>
<td><a href={"mailto:" + user.email}>{user.email}</a></td>
<td><button type='button' onClick={() => this.deleteUser(user.id)}>X</button></td>
</tr>
))}
</tbody>
</table>
</div>
);
}
async componentDidMount() {
this.get();
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
}
handleSubmit = async (e) => {
try {
var id = parseInt(this.state.user_id);
} catch(error) {
console.error("Error :", error);
}
e.preventDefault();
const data = JSON.stringify({
id: id,
name: this.state.user_name,
email: this.state.user_email,
});
try {
if (this.state.disabled) {
await axios.put(`${server}/users`, data);
} else {
if (this.state.user_id.trim() === "") return;
await axios.post(`${server}/users`, data);
}
this.setState({
user_id: '',
user_name: '',
user_email: '',
disabled: false,
});
this.get();
} catch (error) {
console.error("Error creating post:", error);
}
};
get = async () => {
try {
const response = await axios.get(`${server}/users`, '');
this.setState({ users: [] });
this.setState({ users: response.data });
} catch (error) {
console.error("Error get users :", error);
}
}
getUser = async (id) => {
try {
const response = await axios.get(`${server}/users/${id}`);
this.setState({
user_id: response.data.id,
user_name: response.data.name,
user_email: response.data.email,
disabled: true,
});
} catch (error) {
console.error("Error get user :", error);
}
}
deleteUser = async (id) => {
try {
await axios.delete(`${server}/users/${id}`);
this.reset();
this.get();
} catch (error) {
console.error("Error deleting post:", error);
}
}
reset = async () => {
this.setState({
user_id: '',
user_name: '',
user_email: '',
disabled: false,
});
}
}
export default App;