Blog: Ederson Melo

Aplicação Completa de login e registro com Python Flask e MySQL

Image without description

A ideia aqui é também conter postagens sobre projetos e simples adicionados ao github.

Projeto para uma aplicação completa de login e registro com Python Flask e MySQL.

1.O que é mostrado Form Design — Crie um formulário de login e registro com HTML5 e CSS3. Modelos — Crie modelos do Flask com HTML e Python. Validação básica — Validação de dados de formulário que são enviados ao servidor (nome de usuário, senha e e-mail). Gerenciamento de sessão — Inicialize sessões e armazene os resultados do banco de dados recuperados. Consultas MySQL — Selecione e insira registros de/na nossa tabela de banco de dados. Rotas — O roteamento nos permitirá associar as URLs às funções que criaremos.

1.1. Requisitos Python => 3.7.2. Certifique-se de marcar a opção Add Python to PATH na tela de configuração da instalação. Pode baixar e instalar o MySQL Community Server e o MySQL Workbench. Abra a linha de comando e instale o Python Flask com o comando: pip install flask Instale o Flask-MySQLdb com o comando: pip install flask-mysqldb

1.2. Estrutura e configuração de arquivos Precisamos criar nosso diretório e arquivos do projeto. Você pode criar o diretório em qualquer lugar do seu computador, desde que o Python possa acessá-lo. Crie os diretórios e arquivos abaixo.

File Structure

\-- sample-app-login-python-flask
    |-- main.py
    \-- static
        |-- style.css
    \-- templates
        |-- index.html
        |-- register.html
        |-- home.html
        |-- profile.html
        |-- layout.html

main.py — Este será nosso arquivo de projeto principal, todo nosso código Python estará neste arquivo (Rotas, conexão MySQL, validação, ...). index.html — O modelo de formulário de login criado com HTML5 e CSS3. register.html — O modelo de formulário de registro criado com HTML5 e CSS3. home.html — O modelo inicial restrito a usuários logados. profile.html — O modelo de perfil restrito a usuários logados. Os detalhes do usuário serão preenchidos nesta página. layout.html — O modelo de layout para os modelos de página inicial e de perfil. style.css — A folha de estilo CSS3 para nosso sistema de login e registro.

1.3. Abra o prompt de comando e navegue até o diretório do seu projeto. Você pode fazer isso com o comando cd c:\pasta_projeto. Pessoalmente sigo um padrão: C:\projetos-NOMEDATECNOLOGIA

Para executar eu crio um ambiente python3 -m venv .venv

Instale o Flask no ambiente virtual inserindo: python3 -m pip install flask.

Run command: set FLASK_APP=main.py
Run command: set FLASK_DEBUG=1
Run command: python3 -m flask run

O modo de depuração nos permitirá editar nossos arquivos sem reiniciar constantemente o servidor web.

Me segue no blog e nas redes sociais (edersonmelo) - Blog pessoal. (edersonmelo) - Aplicação Completa de login e registro com Python Flask e MySQL. [(GitHub) https://github.com/edersonmelo (Twitter) @edersonmelo (Instagram) @edersonmmelo

Redux vs Context API

Image without description

Caso na postagem sobre Redux você tenha entendido que puramente com o React passar dados para as props dos filhos dos filhos requer um pouco mais, você entendeu tudo.

Mas outra forma de resolver o problema, além de Redux, seria o gerenciamento de estado como Context API. O difícil é saber qual o mais adequado para sua aplicação.

A Context API, em um aplicativo React típico, os dados são passados ​​de cima para baixo (pai para filho) por meio de props, mas esse uso pode ser complicado para certos tipos de props (por exemplo, preferência de localidade, tema de interface do usuário) que são exigidos por muitos componentes dentro de um aplicativo. O contexto fornece uma maneira de compartilhar valores como esses entre componentes sem ter que passar explicitamente um prop por todos os níveis da árvore.

A Context API é uma ferramenta React integrada que não influencia o tamanho final do pacote e é integrada por design.

Para usar a Context API, você precisa:

Crie o contexto const Context = createContext(MockData);

Criar um provedor para o contexto

const Parent = () => {
    return (
        <Context.Provider value={initialValue}>
            <Children/>
        </Context.Provider>
    )
}

Consumir os dados no Contexto

const Child = () => {
    const contextData = useContext(Context);
    // use the data
    // ...
}

Já o Redux é um contêiner de estado previsível para aplicativos JavaScript. Ajudando na escrita de aplicativos que se comportam de forma consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar.

Redux é uma biblioteca de código aberto que fornece um armazenamento central e ações para modificar o armazenamento. Ele pode ser usado com qualquer projeto usando JavaScript ou TypeScript.

Para usar o Redux você precisa:

Create a Reducer

import { createSlice } from "@**Redux**js/toolkit";

export const slice = createSlice({
    name: "slice-name",
    initialState: {
        // ...
    },
    reducers: {
        func01: (state) => {
            // ...
        },
    }
});

export const { func01 } = slice.actions;
export default slice.reducer;

Configure the Store

import { configureStore } from "@**Redux**js/toolkit";
import reducer from "./reducer";

export default configureStore({
    reducer: {
        reducer: reducer
    }
});

Make the Store available for data consumption

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-**Redux**';
import App from './App.jsx'
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Use State or Dispatch Actions

import { useSelector, useDispatch } from 'react-**Redux**';
import { func01 } from './**Redux**/reducer';

const Component = () => {
    const reducerState = useSelector((state) => state.reducer);
    const dispatch = useDispatch();
    const doSomething = () = > dispatch(func01)  
    return (
        <>
            {/* ... */}
        </>
    );
}
export default Component;

Então, como resultado comparativo final, posso levantar alguns pontos, inclusive alguns coletei na web para ter mais insumos. Se a ideia é apenas passar dados de pai para filho, o uso da Context API te atende. Mas se a ideia é trabalhar com muitos dados dinâmicos, o Redux seria a solução.