[云服务器4] 搭建学生食堂点餐系统

前言

随着信息技术的发展，传统的学生食堂点餐方式逐渐被数字化系统所取代。搭建一个基于服务器的学生食堂点餐系统，不仅可以提高点餐效率，还能提升学生的就餐体验。本文将详细介绍如何使用云服务器搭建一个功能完善且见面美观的学生食堂点餐系统。

目标

1.搭建一个稳定的学生食堂点餐系统
2.提高用户体验，使系统界面美观易用
3.确保数据安全与隐私保护

环境准备

我们的点餐系统基于一台云服务器。
我们可以打开雨云，注册一个账号，然后购买一个云服务器。

1 云服务器配置选择

至于配置，我们得先考虑一个问题：

如果学生在一个高峰时间段点餐（尤其是那种有很多点餐机的学校），服务器会不会因无法短时间内承载太大的请求量而崩溃，导致整个系统瘫痪？
如果系统瘫痪，将造成比较大的损失，诸如学生因为系统的维护时间而耽误了吃饭、学生付出去了钱之后瘫痪，导致订单没有被系统接收到……

那我们现在只是做一个简单的示例，2核2G就足够了，但如果你想要的是做出一个完备的系统给学校使用，4核8G起步和一个大带宽、高配CPU是必须的。

2.操作系统&数据库

操作系统推荐使用Ubuntu，个人认为是最好的，这个不做要求，但千万不要选Windows！
数据库当然是MySQL了，有phpMyAdmin等管理辅助系统，便于数据管理。

3.开发语言和框架

后端 使用Python的Flask框架
前端 使用React，主要提升用户体验

开始搭建

1.必要的安全设置

打开雨云服务器管理面板的防火墙规则，点击“添加防火墙规则”，动作选允许，IP填写0.0.0.0，端口分别填写80 433 5000。

2.MySQL数据库安装

首先按下Win+R，打开运行框，输入cmd回车。
然后输入:

ssh root@你的服务器IP

如果出现了是否继续，就输入yes。
输入密码后，如果出现root@RainYun-XXX:~#，就表示成功了！
继续输入：

apt update
apt upgrade
reboot

输入reboot后，SSH连接将会断开。过个大概3分钟，重新连接回去就好了。

安装MySQL

apt install mysql-server 

出现是否继续，就输入y。

启用MySQL并设置自带安全设置

mysql_secure_installation

依次输入y 0。
然后输入密码（自定），再输入一遍。
接下去有任何是否继续的提示，全部按y。

创建数据库

mysql -u root -p

输入密码后：

CREATE DATABASE cafeteria_system

3.系统开发

后端开发

安装Flask

apt install python3-pip
pip3 install Flask Flask-MySQLdb

老规矩，询问按y。

创建Flask项目

mkdir cafeteria
cd cafeteria
touch app.py

编写Flask应用

通过nano vim等你喜欢的方式编辑app.py：

from flask import Flask,request,jsonify
from flask_mysqldb import MySQL

app = Flask(__name__)

app.config["MYSQL_HOST"] = "localhost"
app.config["MYSQL_USER"] = "你的MySQL用户名"
app.config["MYSQL_PASSWORD"] = "你的MySQL密码"
app.config["MYSQL_DB"] = "cafeteria_system"

mysql = MySQL(app)

@app.route("/api/menu",methods=["GET"])
def get_menu():
	cur = mysql.connection.cursor()
	cur.execute("SELECT * FROM menu")
	res = cur.fetchall()
	return jsonify(res)

@app.route("/api/order",methods=["GET"])
def place_order():
	data = request.json
	cur = mysql.connection.cursor()
	cur.execute("INSERT INTO orders (student_id,menu_item) VALUES (%s, %s)",(data["student_id"],data["menu_item"]))
	mysql.connection.commit()
	return jsonify({"message":"Order placed successfully!"}),201

if __name__ == "__main__":
	app.run(host="0.0.0.0",port=5000)

启动！

python3 app.py

前端开发

安装Node.js+Create React APP

apt install nodejs npm
npx create-react-app cafeteria-frontend
cd cafeteria-frontend

安装Axios

npm install axios

创建菜单组件

使用文本编辑器，创建并修改src/components/Menu.js：

import React,{ useEffect,useState } from "react";
import axios from "axios";

const Menu = () => {
	const [menu,setMenu] = useState([]);
	useEffect(() => {
		const fetchMenu = async() => {
			const response = await axios.get("http://你的服务器IP:5000/api/menu");
			setMenu(response.data);
		};
		fetchMenu();
	},[]);
	
	return (
		<div>
			<h2>菜单</h2>
			<ul>
				{menu.map(item => (
					<li key={item.id}>{item.name} - &yen;{item.price}</li>
				))}
			</ul>
		</div>
	);
};

export default Menu;

创建下单组件

创建并修改src/components/Order.js：

import React,{ useState } from "react";
import axios from "axios";

const Order = () => {
    const [studentId, setStudentId] = useState("");
    const [menuItem, setMenuItem] = useState("");

    const handleOrder = async () => {
        await axios.post('http://你的服务器IP:5000/api/order', {
            student_id: studentId,
            menu_item: menuItem
        });
        alert("订单已成功提交！");
    };

    return (
        <div>
            <h2>下单</h2>
            <input type="text" placeholder="学生ID" onChange={(e) => setStudentId(e.target.value)} />
            <input type="text" placeholder="菜单项" onChange={(e) => setMenuItem(e.target.value)} />
            <button onClick={handleOrder}>提交订单</button>
        </div>
    );
};

export default Order;

在App.js中整合组建

import React from "react";
import Menu from "./components/Menu";
import Order from "./components/Order";

const App = () => {
	return (
		<div>
			<h1>学生食堂点餐系统</h1>
			<Menu />
			<Order />
		</div>
	);
};

export default App;

部署与优化

使用Gunicorn部署Flask应用

pip3 install gunicorn
gunicorn app:app --bind 0.0.0.0:5000

使用Nginx反向代理

安装Nginx

apt install nginx

配置Nginx

在/etc/nginx/sites-available/default中添加以下配置（注意是添加不是覆盖）：

server {
	listen 80;
	server_name 你的服务器IP;
	
	location / {
		proxy_pass http://127.0.0.1:5000;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
	}
}

重启Nginx

systemctl restart nginx

美化界面

前端设计

你可以使用CSS框架（如Bootstrap）来优化界面，让界面变得Pro；
也可以加上符合学校形象的元素，增强视觉吸引力。

用户体验优化

可以简化操作流程，确保用户能快速完成点餐；
还可以使用BootstrapJS来增强界面的生动性！

这里我就不展开了，大家可以自行搭建！

数据安全与维护

数据安全

可以学习加密存储（如Base64），对学生交易密码等信息加密，确保学生信息安全。
加上严格的用户权限，防止未授权访问。

系统监控

可以定期检查系统的日志，发现潜在问题。
可以使用如Prometheus之类的软件实时监控系统性能，来灵活调整配置。

没有完成的事

限于篇幅，我没有将所有功能都详细介绍。
这只是一个简单的模板，教你如何做好项目的基础搭建和大致框架。

以下是几个建议：
1.实现退款功能；
2.实现预点餐功能（比如在9月3日点9月10日的餐）；
3.实现用户功能（比如刷卡登录，这就涉及硬件交互和与学校对接）；
4.实现付钱；
……
1和2其实比较简单，感谢React$ : D
3就比较复杂，可以用Serial串口通讯与读卡器建立连接，非常具有挑战性！
至于4，我们有两种解决方案：

A 支付宝/微信 API对接

这个可以学习官方文档，这里不过多表述。

B 学校一卡通软件

可以使用学校IC校园卡，这种卡可以充值/消费，同样也要参考一些API文档！

同样具有 挑战性 (不如说是烧脑性)

同时，这个项目也可以很好的练习JS语法+Python语法/库+React使用+MySQL使用！

希望你的搭建之路顺利!