- Python (Flask 后端示例)etym.cn
python
from flask import Flask, request, jsonify
app = Flask(name)
假设的商品数据
products = [
{“id”: 1, “name”: “游戏A”, “price”: 99.99},
{“id”: 2, “name”: “游戏B”, “price”: 79.99},
]
@app.route(‘/products’, methods=[‘GET’])
def get_products():
return jsonify(products)
@app.route(‘/products/int:product_id’, methods=[‘GET’])
def get_product(product_id):
for product in products:
if product[‘id’] == product_id:
return jsonify(product)
return jsonify({“error”: “Product not found”}), 404
… 其他路由和逻辑
if name == ‘main’:
app.run(debug=True)
2. JavaScript (Node.js + Express 后端示例)
javascript
const express = require(‘express’);
const app = express();
const products = […]; // 同上,假设的商品数据
app.get(‘/products’, (req, res) => {
res.json(products);
});
app.get(‘/products/:product_id’, (req, res) => {
const productId = parseInt(req.params.product_id);
const product = products.find(p => p.id === productId);
if (product) {
res.json(product);
} else {
res.status(404).json({ error: ‘Product not found’ });
}
});
// … 其他路由和逻辑
app.listen(3000, () => console.log(‘Server started on port 3000’));
3. Java (Spring Boot 后端示例)
这里仅提供一个简单的Controller示例,完整的Spring Boot应用需要更多的配置和类。
java
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping(“/products”)
public class ProductController {
private List<Product> products = ...; // 假设的商品数据
@GetMapping
public List<Product> getAllProducts() {
return products;
}
@GetMapping("/{productId}")
public Product getProductById(@PathVariable Long productId) {
// 查找并返回商品,或返回404
}
// ... 其他方法和逻辑
}
// Product类需要定义,包括id、name、price等属性
4. 前端示例 (HTML/CSS/JavaScript, 使用React或Vue等框架)
由于前端代码通常与具体框架和库紧密相关,这里仅提供一个简单的HTML结构示例,用于展示商品列表。
html
Game Store
<script>
// 假设从后端API获取数据并填充到页面上
// 这里仅使用静态数据作为示例
const products = [/* ... 从后端获取的数据 ... */];
const list = document.getElementById('product-list');
products.forEach(product => {
const li = document.createElement('li');
li.textContent = `${product.name} -
$$
{product.price.toFixed(2)}`;
list.appendChild(li);
});
- Python (Flask 后端示例)
python
from flask import Flask, request, jsonify
app = Flask(name)
假设的商品数据
products = [
{“id”: 1, “name”: “游戏A”, “price”: 99.99},
{“id”: 2, “name”: “游戏B”, “price”: 79.99},
]
@app.route(‘/products’, methods=[‘GET’])
def get_products():
return jsonify(products)
@app.route(‘/products/int:product_id’, methods=[‘GET’])
def get_product(product_id):
for product in products:
if product[‘id’] == product_id:
return jsonify(product)
return jsonify({“error”: “Product not found”}), 404
… 其他路由和逻辑
if name == ‘main’:
app.run(debug=True)
2. JavaScript (Node.js + Express 后端示例)
javascript
const express = require(‘express’);
const app = express();
const products = […]; // 同上,假设的商品数据
app.get(‘/products’, (req, res) => {
res.json(products);
});
app.get(‘/products/:product_id’, (req, res) => {
const productId = parseInt(req.params.product_id);
const product = products.find(p => p.id === productId);
if (product) {
res.json(product);
} else {
res.status(404).json({ error: ‘Product not found’ });
}
});
// … 其他路由和逻辑
app.listen(3000, () => console.log(‘Server started on port 3000’));
3. Java (Spring Boot 后端示例)
这里仅提供一个简单的Controller示例,完整的Spring Boot应用需要更多的配置和类。
java
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping(“/products”)
public class ProductController {
private List<Product> products = ...; // 假设的商品数据
@GetMapping
public List<Product> getAllProducts() {
return products;
}
@GetMapping("/{productId}")
public Product getProductById(@PathVariable Long productId) {
// 查找并返回商品,或返回404
}
// ... 其他方法和逻辑
}
// Product类需要定义,包括id、name、price等属性
4. 前端示例 (HTML/CSS/JavaScript, 使用React或Vue等框架)
由于前端代码通常与具体框架和库紧密相关,这里仅提供一个简单的HTML结构示例,用于展示商品列表。
html
Game Store
<script>
// 假设从后端API获取数据并填充到页面上
// 这里仅使用静态数据作为示例
const products = [/* ... 从后端获取的数据 ... */];
const list = document.getElementById('product-list');
products.forEach(product => {
const li = document.createElement('li');
li.textContent = `${product.name} -
$$
{product.price.toFixed(2)}`;
list.appendChild(li);
});