Python Flask
https://flask.palletsprojects.com/en/2.2.x/installation/
Create an environment
C:\flask_dev>py -3 -m venv venv
Activate the environment
C:\flask_dev>venv\Scripts\activate
Install Flask
venv C:\flask_dev>pip install Flask
C:\flask_dev\flaskreact\app.py
Install requirements
Flask-SQLAlchemy
Flask-SQLAlchemy is an extension for Flask that adds support for SQLAlchemy to your application.
https://flask-sqlalchemy.palletsprojects.com/en/3.0.x/
(venv) PS C:\flask_dev\flaskreact>pip install -U Flask-SQLAlchemy
Flask + marshmallow for beautiful APIs
https://pypi.org/project/flask-marshmallow/
(venv) PS C:\flask_dev\flaskreact>pip install flask-marshmallow
(venv) PS C:\flask_dev\flaskreact>pip install Flask-Cors
C:\flask_dev\flaskreact\app.py
#C:\flask_dev\flaskreact\app.py
from flask import Flask, jsonify, request
from flask_sqlalchemy import SQLAlchemy
import datetime
from flask_marshmallow import Marshmallow #ModuleNotFoundError: No module named 'flask_marshmallow' = pip install flask-marshmallow https://pypi.org/project/flask-marshmallow/
from flask_cors import CORS #ModuleNotFoundError: No module named 'flask_cors' = pip install Flask-Cors
app = Flask(__name__)
CORS(app)
# Databse configuration Username:password@hostname/databasename
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:''@localhost/flaskreact'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db=SQLAlchemy(app)
ma=Marshmallow(app)
class Users(db.Model):
__tablename__ = "users"
id = db.Column(db.Integer,primary_key=True)
name = db.Column(db.String(100))
email = db.Column(db.String(100))
date = db.Column(db.DateTime,default=datetime.datetime.now)
def __init__(self,name,email):
self.name=name
self.email=email
class UserSchema(ma.Schema):
class Meta:
fields = ('id','name','email','date')
user_schema = UserSchema()
users_schema = UserSchema(many=True)
@app.route('/listusers',methods =['GET'])
def listusers():
all_users = Users.query.all()
results = users_schema.dump(all_users)
return jsonify(results)
@app.route('/userdetails/<id>',methods =['GET'])
def userdetails(id):
user = Users.query.get(id)
return user_schema.jsonify(user)
@app.route('/userupdate/<id>',methods = ['PUT'])
def userupdate(id):
user = Users.query.get(id)
name = request.json['name']
email = request.json['email']
user.name = name
user.email = email
db.session.commit()
return user_schema.jsonify(user)
@app.route('/userdelete/<id>',methods=['DELETE'])
def userdelete(id):
user = Users.query.get(id)
db.session.delete(user)
db.session.commit()
return user_schema.jsonify(user)
@app.route('/useradd',methods=['POST'])
def useradd():
name = request.json['name']
email = request.json['email']
users = Users(name,email)
db.session.add(users)
db.session.commit()
return user_schema.jsonify(users)
if __name__=='__main__':
app.run(debug=True)
Postman Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
https://www.postman.com/
run (venv) C:\flask_dev\flaskreact>flask run
React JS
https://create-react-app.dev/
Create Project
C:\react-js>npx create-react-app myreactdev
Run
C:\react-js\myreactdev> npm start
C:\react-js\myreactdev\src\App.js
//C:\react-js\myreactdev\src\App.js
import React, { } from 'react';
import './App.css';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import ListUserPage from "./pages/ListUserPage";
import CreateUser from './pages/CreateUser';
import EditUser from './pages/EditUser';
function App() {
return (
<div className="vh-100 gradient-custom">
<div className="container">
<h1 className="page-header text-center">React-JS and Python Flask CRUD Create, Read, Update and Delete MySql-Database</h1>
<BrowserRouter>
<Routes>
<Route path="/" element={<ListUserPage />} />
<Route path="/addnewuser" element={<CreateUser />} />
<Route path="user/:id/edit" element={<EditUser />} />
</Routes>
</BrowserRouter>
</div>
</div>
);
}
export default App;
Install React Router Dom https://www.npmjs.com/package/react-router-dom
C:\react-js\myreactdev>npm i react-router-dom --save
Install Axios
https://www.npmjs.com/package/axios
C:\react-js\myreactdev>npm install axios --save
C:\react-js\myreactdev\src\pages\ListUserPage.js
//C:\react-js\myreactdev\src\pages\ListUserPage.js
import React, { useEffect, useState } from "react";
import axios from "axios" //npm install axios --save
import {Link} from 'react-router-dom';
export default function ListUserPage(){
const [users, setUsers] = useState([]);
useEffect(() => {
getUsers();
}, []);
function getUsers() {
axios.get('http://127.0.0.1:5000/listusers').then(function(response) {
console.log(response.data);
setUsers(response.data);
});
}
const deleteUser = (id) => {
axios.delete(`http://127.0.0.1:5000/userdelete/${id}`).then(function(response){
console.log(response.data);
getUsers();
});
alert("Successfully Deleted");
}
return (
<div>
<div className="container h-100">
<div className="row h-100">
<div className="col-12">
<p><Link to="/addnewuser" className="btn btn-success">Add New User</Link> </p>
<h1>List Users</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date Added</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{users.map((user, key) =>
<tr key={key}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.date}</td>
<td>
<Link to={`user/${user.id}/edit`} className="btn btn-success" style={{marginRight: "10px"}}>Edit</Link>
<button onClick={() => deleteUser(user.id)} className="btn btn-danger">Delete</button>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
C:\react-js\myreactdev\src\pages\CreateUser.js
//C:\react-js\myreactdev\src\pages\CreateUser.js
import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
export default function CreateUser(){
const navigate = useNavigate();
const [inputs, setInputs] = useState([]);
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}));
}
const handleSubmit = (event) => {
event.preventDefault();
axios.post('http://127.0.0.1:5000/useradd', inputs).then(function(response){
console.log(response.data);
navigate('/');
});
}
return (
<div>
<div className="container h-100">
<div className="row">
<div className="col-2"></div>
<div className="col-8">
<h1>Create user</h1>
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label>Name</label>
<input type="text" className="form-control" name="name" onChange={handleChange} />
</div>
<div className="mb-3">
<label>Email</label>
<input type="text" className="form-control" name="email" onChange={handleChange} />
</div>
<button type="submit" name="add" className="btn btn-primary">Save</button>
</form>
</div>
<div className="col-2"></div>
</div>
</div>
</div>
);
}
C:\react-js\myreactdev\src\pages\EditUser.js
//C:\react-js\myreactdev\src\pages\EditUser.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
export default function EditUser(){
const navigate = useNavigate();
const [inputs, setInputs] = useState([]);
const {id} = useParams();
useEffect(() => {
getUser();
}, []);
function getUser() {
axios.get(`http://127.0.0.1:5000/userdetails/${id}`).then(function(response) {
console.log(response.data);
setInputs(response.data);
});
}
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}));
}
const handleSubmit = (event) => {
event.preventDefault();
axios.put(`http://127.0.0.1:5000/userupdate/${id}`, inputs).then(function(response){
console.log(response.data);
navigate('/');
});
}
return (
<div>
<div className="container h-100">
<div className="row">
<div className="col-2"></div>
<div className="col-8">
<h1>Edit user</h1>
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label>Name</label>
<input type="text" value={inputs.name} className="form-control" name="name" onChange={handleChange} />
</div>
<div className="mb-3">
<label>Email</label>
<input type="text" value={inputs.email} className="form-control" name="email" onChange={handleChange} />
</div>
<button type="submit" name="update" className="btn btn-primary">Save</button>
</form>
</div>
<div className="col-2"></div>
</div>
</div>
</div>
);
}
Run C:\react-j\myreactdev>npm start http://localhost:3000/
