微信商城小程序

需求文档2021030108

一、项目背景

随着社会的发展，人们的生活水平不断提高，餐饮行业也愈加繁荣。如今，越来越多的人选择在外就餐，这也使得餐饮行业的竞争变得更加激烈。因此，如何提高餐厅的服务质量，提高顾客的满意度成为了餐厅经营者必须面对的问题。

本项目旨在设计一款点餐管理系统，为餐厅提供更加高效、便捷的服务方式，提高餐厅的服务质量和顾客的满意度。

二、功能需求

1. 顾客端

（1）菜单浏览：顾客可以通过手机端查看餐厅的菜单，并了解菜品的详细信息和图片展示。

（2）点餐功能：顾客可以通过手机端进行点餐操作，选择菜品和数量，并可备注口味、要求等信息。

（3）在线支付：顾客可以通过手机端进行在线支付，支持多种支付方式，如支付宝、微信支付、银联支付等。

（4）订单查询：顾客可以通过手机端查询历史订单，了解订单状态、菜品详情等信息。

（5）评价功能：顾客可以通过手机端对餐厅进行评价，评价内容包括菜品、服务、环境等方面。

2. PC管理端

（1）菜单管理：管理员可以通过PC管理端对菜单进行管理，包括菜品的添加、删除、修改等操作。

（2）订单管理：管理员可以通过PC管理端对订单进行管理，包括订单的查询、处理、取消等操作。

（3）库存管理：管理员可以通过PC管理端对库存进行管理，包括库存的查询、调整、预警等操作。

（4）员工管理：管理员可以通过PC管理端对员工进行管理，包括员工的添加、删除、修改等操作。

（5）数据统计：管理员可以通过PC管理端对餐厅的数据进行统计，包括菜品销售情况、顾客评价情况、收入情况等方面。

三、非功能需求

1. 安全性：保证系统的数据安全性，防止数据泄露、丢失等情况发生。

2. 可靠性：保证系统的可靠性，防止系统崩溃、数据丢失等情况发生。

3. 可扩展性：保证系统的可扩展性，方便后续对系统进行扩展和升级。

4. 用户体验：保证系统的用户体验，使顾客和管理员能够方便、快捷地使用系统。

四、技术选型

1. 前端技术：采用Vue.js框架进行开发，使用Element UI组件库进行界面设计。

2. 后端技术：采用Spring Boot框架进行开发，使用MySQL数据库进行数据存储。

3. 移动端技术：采用React Native框架进行开发，同时支持iOS和Android平台。

系统设计文档

一、系统架构

本系统采用前后端分离的架构，前端使用Vue.js框架进行开发，后端使用Spring Boot框架进行开发。移动端采用React Native框架进行开发。

前端通过RESTful API与后端进行通信，后端通过MySQL数据库进行数据的存储和管理。

二、数据库设计

本系统共设计了5张表，分别为菜单表、订单表、库存表、员工表和评价表。

（1）菜单表：包含菜品名称、价格、描述、图片等信息。

（2）订单表：包含订单编号、顾客姓名、联系方式、订单状态、菜品详情等信息。

（3）库存表：包含菜品名称、数量、预警值等信息。

（4）员工表：包含员工编号、姓名、职位、联系方式等信息。

（5）评价表：包含评价编号、顾客姓名、评价内容、评价时间等信息。

三、模块设计

1. 顾客端模块

（1）菜单浏览模块：顾客可以通过手机端查看餐厅的菜单，并了解菜品的详细信息和图片展示。

（2）点餐模块：顾客可以通过手机端进行点餐操作，选择菜品和数量，并可备注口味、要求等信息。

（3）在线支付模块：顾客可以通过手机端进行在线支付，支持多种支付方式，如支付宝、微信支付、银联支付等。

（4）订单查询模块：顾客可以通过手机端查询历史订单，了解订单状态、菜品详情等信息。

（5）评价模块：顾客可以通过手机端对餐厅进行评价，评价内容包括菜品、服务、环境等方面。

2. PC管理端模块

（1）菜单管理模块：管理员可以通过PC管理端对菜单进行管理，包括菜品的添加、删除、修改等操作。

（2）订单管理模块：管理员可以通过PC管理端对订单进行管理，包括订单的查询、处理、取消等操作。

（3）库存管理模块：管理员可以通过PC管理端对库存进行管理，包括库存的查询、调整、预警等操作。

（4）员工管理模块：管理员可以通过PC管理端对员工进行管理，包括员工的添加、删除、修改等操作。

（5）数据统计模块：管理员可以通过PC管理端对餐厅的数据进行统计，包括菜品销售情况、顾客评价情况、收入情况等方面。

四、界面设计

1. 顾客端界面

（1）菜单浏览界面

（2）点餐界面

（3）在线支付界面

（4）订单查询界面

 

（5）个人中心界面

2. PC管理端界面

（1）菜单管理界面

（2）订单管理界面

（3）员工管理界面

 

代码示例

<script>
	/**
	 * vuex管理登陆状态，具体可以参考官方登陆模板示例
	 */
	import {
		mapMutations
	} from 'vuex';
	export default {
		methods: {
			...mapMutations(['login'])
		},
		onLaunch: function() {
			let userInfo = uni.getStorageSync('userInfo') || '';
			if(userInfo.id){
				//更新登陆状态
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						this.login(res.data);
					}
				});
			}
			
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
	}
</script>

<style lang='scss'>
	/*
		全局公共样式和字体图标
	*/
	@font-face {
		font-family: yticon;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_1078604_w4kpxh0rafi.ttf') format('truetype');
	}

五、总结

本项目设计了一款点餐管理系统，为餐厅提供更加高效、便捷的服务方式，提高餐厅的服务质量和顾客的满意度。系统采用前后端分离的架构，前端使用Vue.js框架进行开发，后端使用Spring Boot框架进行开发。移动端采用React Native框架进行开发。系统包含顾客端和PC管理端两个模块，分别提供菜单浏览、点餐、在线支付、订单查询、评价、菜单管理、订单管理、库存管理、员工管理、数据统计等功能。系统设计了5张表，包括菜单表、订单表、库存表、员工表和评价表。系统界面简洁美观，易于使用。通过本项目的实现，可以提高餐厅的服务质量和顾客的满意度，提高餐厅的竞争力。