网站群建设公司,百度推广 网站吸引力,如何创建自己的网址,wordpress批量换网址在今天的快节奏生活中#xff0c;外卖订餐系统已经成为了人们日常生活中不可或缺的一部分。这些系统通过在线点餐和配送服务#xff0c;为用户提供了便捷的用餐体验。在本文中#xff0c;我们将创建一个简单的外卖订餐系统#xff0c;使用Python和Flask框架构建后端#x…在今天的快节奏生活中外卖订餐系统已经成为了人们日常生活中不可或缺的一部分。这些系统通过在线点餐和配送服务为用户提供了便捷的用餐体验。在本文中我们将创建一个简单的外卖订餐系统使用Python和Flask框架构建后端以及HTML、CSS和JavaScript构建前端。
技术栈
我们将使用以下技术栈来构建这个外卖订餐系统
后端Python和Flask框架 前端HTML、CSS和JavaScript 数据库SQLite轻量级数据库
后端
首先我们将创建后端部分负责处理用户的订单和餐厅的菜单。我们将使用Flask框架来构建后端API。确保你已经安装了Python和Flask
pip install Flask接下来创建一个名为app.py的Python文件这将是我们的Flask应用程序的入口点
from flask import Flask, request, jsonifyapp Flask(__name__)# 用于存储菜单数据的示例字典
menu {1: {name: 汉堡, price: 5.99},2: {name: 披萨, price: 7.99},3: {name: 三明治, price: 4.99},
}# 用于存储用户订单的示例列表
orders []# 获取菜单
app.route(/menu, methods[GET])
def get_menu():return jsonify(menu)# 下订单
app.route(/order, methods[POST])
def place_order():data request.get_json()item_id data.get(item_id)if item_id in menu:orders.append(menu[item_id])return jsonify({message: 订单已成功添加到购物车})else:return jsonify({message: 无效的菜单项})# 查看购物车
app.route(/cart, methods[GET])
def view_cart():return jsonify({cart: orders})if __name__ __main__:app.run(debugTrue)在这个示例中我们创建了一个简单的Flask应用程序有一个用于获取菜单的路由/menu一个用于下订单的路由/order以及一个用于查看购物车的路由/cart。
前端
现在让我们创建一个简单的前端界面以便用户可以浏览菜单、下订单和查看购物车。我们将使用HTML、CSS和JavaScript来构建前端。
首先创建一个名为index.html的HTML文件
!DOCTYPE html
html langen
headmeta charsetUTF-8title外卖订餐系统/titlelink relstylesheet hrefstyles.css
/head
bodyh1外卖订餐系统/h1div idmenuh2菜单/h2ul idmenu-list/ul/divdiv idorderh2下订单/h2select iditem-list/selectbutton idorder-button下订单/button/divdiv idcarth2购物车/h2ul idcart-list/ul/divscript srcapp.js/script
/body
/html接下来创建一个名为styles.css的CSS文件来美化我们的界面
body {font-family: Arial, sans-serif;margin: 0;padding: 20px;text-align: center;
}h1 {color: #333;
}div {border: 1px solid #333;padding: 10px;margin: 10px;
}select, button {margin: 5px;
}现在创建一个名为app.js的JavaScript文件来处理前端逻辑
document.addEventListener(DOMContentLoaded, () {const menuList document.getElementById(menu-list);const itemList document.getElementById(item-list);const cartList document.getElementById(cart-list);const orderButton document.getElementById(order-button);// 获取菜单fetch(/menu).then(response response.json()).then(data {for (const id in data) {const menuItem data[id];menuList.innerHTML li${menuItem.name}: $${menuItem.price}/li;itemList.innerHTML option value${id}${menuItem.name}/option;}});// 下订单orderButton.addEventListener(click, () {const itemId itemList.value;fetch(/order, {method: POST,headers: {Content-Type: application/json},body: JSON.stringify({ item_id: parseInt(itemId) })}).then(response response.json()).then(data {alert(data.message);});});// 查看购物车fetch(/cart).then(response response.json()).then(data {data.cart.forEach(item {cartList.innerHTML li${item.name}: $${item.price}/li;});});
});在这个JavaScript文件中我们使用了fetch来与后端API进行通信并动态更新前端界面。
运行应用程序
现在你可以在终端中运行你的应用程序
python app.py访问 http://localhost:5000 即可查看你的外卖订餐系统的界面。用户可以浏览菜单、下订单订单将会显示在购物车中。
这只是一个简单的示例你可以根据自己的需求扩展功能例如用户登录、支付集成、订单管理等等。希望这个示例有助于你入门外卖订餐系统的开发。
