Vue+Flask电商后台管理系统

以下是一个简化的Vue+Flask电商后台管理系统的示例代码。

Flask后端代码 (app.py):

from flask import Flask, jsonify
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app)
 
# 假设有一个产品列表
products = [
    {'id': 1, 'name': 'Product 1', 'price': 100},
    {'id': 2, 'name': 'Product 2', 'price': 200}
]
 
@app.route('/products', methods=['GET'])
def get_products():
    return jsonify({'products': products})
 
if __name__ == '__main__':
    app.run(debug=True)

Vue前端代码 (src/components/ProductsList.vue):

<template>
  <div>
    <h1>产品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await axios.get('http://localhost:5000/products');
        this.products = response.data.products;
      } catch (error) {
        console.error('Error fetching products:', error);
      }
    }
  }
};
</script>

确保Flask服务器正在运行，并且Vue前端可以正确地从Flask服务器获取数据。这个例子演示了如何使用Flask创建一个简单的API，并使用Vue来展示从API获取的数据。在实际应用中，你可能需要进一步实现数据的增删改查操作。