# python_flask_blueprint_mysql_vue_axios_elementUI_visiual_system

**Repository Path**: xiyg_admin/python_flask_blueprint_mysql_vue_axios_element-ui_visiual_system

## Basic Information

- **Project Name**: python_flask_blueprint_mysql_vue_axios_elementUI_visiual_system
- **Description**: No description available
- **Primary Language**: Python
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-28
- **Last Updated**: 2024-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Python, Flask, MySQL, Vuex, Vue

## README

# python_flask_blueprint_mysql_vue_axios_elementUI_visiual_system
创建一个数据可视化系统涉及多个技术栈的集成，包括 Python Flask 作为后端框架，MySQL 作为数据库，Vue.js 作为前端框架，Element UI 作为组件库以及 Axios 用于与后端进行 API 请求。下面是一个简单的示例，展示如何使用这些技术实现一个基本的数据可视化系统，假设我们将要展示用户信息的可视化。

### 项目结构


```
/data_visualization_system
    ├── backend
    │   ├── app.py
    │   ├── config.py
    │   ├── models.py
    │   ├── routes.py
    │   ├── __init__.py
    ├── frontend
    │   ├── public
    │   ├── src
    │   │   ├── components
    │   │   │   └── UserChart.vue
    │   │   ├── App.vue
    │   │   ├── main.js
    │   └── package.json
```

### 1. 后端 (Flask)

1.1 安装依赖
`pip install Flask Flask-CORS Flask-SQLAlchemy Flask-Migrate pymysql`

1.2 backend/config.py

```
import os

class Config:
    SECRET_KEY = os.environ.get('SECRET_KEY') or 'your_secret_key'
    SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://username:password@localhost/db_name'
    SQLALCHEMY_TRACK_MODIFICATIONS = False
```

1.3 backend/models.py

```
from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(150), unique=True, nullable=False)
    email = db.Column(db.String(150), unique=True, nullable=False)
```

1.4 backend/routes.py

```
from flask import Blueprint, jsonify
from .models import db, User

bp = Blueprint('api', __name__)

@bp.route('/users', methods=['GET'])
def get_users():
    users = User.query.all()
    return jsonify([{'id': user.id, 'username': user.username, 'email': user.email} for user in users])
```


1.5 backend/app.py

```
from flask import Flask
from flask_cors import CORS
from config import Config
from models import db
from routes import bp as api_bp

app = Flask(__name__)
app.config.from_object(Config)
CORS(app)

db.init_app(app)

with app.app_context():
    db.create_all()  # 创建数据库

app.register_blueprint(api_bp, url_prefix='/api')

if __name__ == '__main__':
    app.run(debug=True)
```

### 2. 前端 (Vue.js)

2.1 创建 Vue 项目
使用 Vue CLI 创建项目，并安装 Element UI 和 Axios：

```

vue create frontend
cd frontend
npm install element-ui axios
```


2.2 frontend/src/main.js

```
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;
Vue.use(ElementUI, { size: 'small' });

new Vue({
  render: h => h(App),
}).$mount('#app');
CopyInsert
2.3 frontend/src/App.vue
<template>
  <div id="app">
    <UserChart />
  </div>
</template>

<script>
import UserChart from './components/UserChart.vue';

export default {
  components: {
    UserChart,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```


2.4 frontend/src/components/UserChart.vue

```
<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.loadUsers();
  },
  methods: {
    async loadUsers() {
      const response = await this.$axios.get('http://localhost:5000/api/users');
      this.users = response.data;
    },
  },
};
</script>

<style scoped>
</style>
```


### 3. 运行项目

3.1 数据库设置
确保你在 MySQL 中创建了数据库 db_name，并在 config.py 中填写正确的数据库连接信息。
3.2 启动后端
在 backend 目录下，运行以下命令启动 Flask 后端：

`python app.py`

3.3 启动前端
在 frontend 目录下，运行以下命令启动 Vue 前端：

`npm run serve`

现在，你可以在浏览器中访问 `http://localhost:8080` 来查看数据可视化系统，用户信息将通过 Element UI 的表格展示。

4. 总结
这是一个简单的数据可视化系统示例，使用了 Flask 作为后端，提供 API 接口，使用 Vue.js 和 Element UI 作为前端展示界面，并通过 Axios 进行数据请求。为了实现更复杂的可视化，你可以使用图表库（如 Chart.js 或 ECharts）来进行图表的绘制，并根据业务需求进一步扩展后端 API。