首页搭建购物平台前端界面python代码

搭建购物平台前端界面python代码

时间: 2024-10-08 13:05:39 浏览: 36

搭建一个完整的购物平台前端界面通常涉及到HTML、CSS和JavaScript等技术，而不是纯Python。但是，我们可以利用Python搭配Web框架如Flask或Django来构建后端API，然后通过前端技术展示页面。以下是使用Flask简单创建一个商品列表接口的例子（后端部分）： ```python from flask import Flask, jsonify app = Flask(__name__) products = [ {'id': 1, 'name': '产品A', 'price': 100}, {'id': 2, 'name': '产品B', 'price': 200} ] @app.route('/api/products') def get_products(): return jsonify(products) if __name__ == '__main__': app.run(debug=True) ``` 这个例子中，当你访问`http://localhost:5000/api/products`，会返回一个JSON格式的商品列表。而前端部分，你可以使用Vue.js、React.js或Angular.js等库来构建用户界面。例如，显示商品列表的部分可能会这样编写： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品列表</title> <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> </head> <body> <div id="product-list"> <ul v-for="(product, index) in products" :key="index"> <li>{{ product.name }} - {{ product.price }}</li> </ul> </div> <script> new Vue({ el: '#product-list', data: { products: [] }, created() { fetch('http://localhost:5000/api/products') .then(response => response.json()) .then(data => (this.products = data)); } }); </script> </body> </html> ``` 在这个前端代码中，我们使用了Vue的`v-for`指令动态渲染列表。

阅读全文