Bootstrap 5.1 Version
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Install Flask-CORS extension https://flask-cors.readthedocs.io/
$ pip install -U flask-cors
from flask_cors import CORS
https://github.com/axios/axios
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`id`, `firstname`, `lastname`, `address`) VALUES
(1, 'Airi', 'Satou', 'Tokyo'),
(2, 'Angelica ', 'Ramos', 'London'),
(3, 'Ashton ', 'Cox', 'San Francisco'),
(4, 'Bradley', 'Greer', 'London'),
(5, 'Brenden ', 'Wagner', 'San Francisco'),
(40, 'Brielle', 'Williamson', 'New York'),
(54, 'Bruno', 'Nash', 'London'),
(55, 'Caesar', 'Vance', 'New York'),
(56, 'Cara', 'Stevens', 'New York'),
(57, 'Cedric', 'Kelly', 'Edinburgh'),
(58, 'Zorita Serran', 'Satou', 'Tokyo'),
(59, 'Angelica ', 'Ramos', 'London'),
(60, 'Ashton ', 'Cox', 'San Francisco'),
(61, 'Bradley ', 'Greer', 'London'),
(62, 'Brenden ', 'Wagner', 'San Francisco'),
(63, 'Brielle', 'Williamson', 'New York'),
(64, 'Bruno', 'Nash', 'London'),
(65, 'Caesar', 'Vance', 'New York'),
(66, 'Cara', 'Stevens', 'New York'),
(67, 'Brenden ', 'Wagner', 'San Francisco'),
(68, 'Brielle', 'Williamson', 'New York'),
(69, 'Bruno', 'Nash', 'London'),
(70, 'Caesar', 'Vance', 'New York'),
(71, 'Cara', 'Stevens', 'New York'),
(72, 'Cedric', 'Kelly', 'Edinburgh');
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=73;
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Flask Vue.js fetchAll Data from Mysql Database</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="fetchAlldiv">
<br />
<h3 align="center">Python Flask Vue.js fetchAll Data from Mysql Database</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<h3 class="panel-title"> Member List</h3>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr v-for="rs in allData">
<td>{{ rs.firstname }}</td>
<td>{{ rs.lastname }}</td>
<td>{{ rs.address }}</td>
<td><button type="button" name="edit" class="btn btn-primary btn-xs edit">Edit</button></td>
<td><button type="button" name="delete" class="btn btn-danger btn-xs delete">Delete</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var application = new Vue({
el:'#fetchAlldiv',
data:{
allData:'',
},
methods:{
fetchAllData:function(){ //show records
axios.get('http://localhost:5000/')
.then(function(response){
console.log(response);
application.allData = response.data.members;
});
}
},
created:function(){
this.fetchAllData();
}
});
</script>
</body>
</html>
app.py
//app.py
from flask import Flask, jsonify
from flask_cors import CORS
from flaskext.mysql import MySQL #pip install flask-mysql
import pymysql
# configuration
DEBUG = True
# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)
mysql = MySQL()
app.config['MYSQL_DATABASE_USER'] = 'root'
app.config['MYSQL_DATABASE_PASSWORD'] = ''
app.config['MYSQL_DATABASE_DB'] = 'testingdb'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)
# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})
@app.route('/')
def home():
conn = mysql.connect()
cursor = conn.cursor(pymysql.cursors.DictCursor)
try:
cursor.execute("SELECT * from members order by id")
userslist = cursor.fetchall()
return jsonify({
'status': 'success',
'members': userslist
})
except Exception as e:
print(e)
finally:
cursor.close()
conn.close()
if __name__ == '__main__':
app.run()
