订单外卖小程序前台后台项目设计

冷不防 2022-10-28 15:22 250阅读 0赞

# 项目的名称 #

foods_xcx

## 一 介绍 ##

外卖小程序项目，包含的小程序的前台和后台，从注册账号，登录系统，选购菜品，购物车，订单，支付，后台进行发布菜品，管理订单等功能都支持。东西很赞，非常值得学习和二次开发，设计指导项目。

## 二 软件技术说明 ##

项目前端使用hbuilderx工具开发小程序端，里面使用到了vue的技术。

项目后端使用springboot和ssm技术，还有权限springsecurity部分和bootstrap做后台管理界面。

项目后端使用maven方式构建。

项目数据库 使用mysql数据库。

项目开发工具 使用idea或者eclipse都可以

项目jdk ，采用jdk1.8以上的

## 三 项目结构图 ##

项目功能结构图:  
功能结构图，主要是描述这个项目的功能结构，项目分为前台和后台，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center]

项目流程图:

项目的流程主要有管理员操作 还有普通用户操作，管理员在系统管理后台进行操作，普通用户在前端进行访问小程序，如下流程图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 1]

项目用例图:

用例图：也有管理员 和 普通用户的用例图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 2]  
普通用户:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 3]

## 四 项目功能描述和截图 ##

小程序项目主页:  
小程序主要主要展示菜品的分类数据，以及轮播图展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 4]

菜品选购:  
采购列表也采用的是 经典的左右结构，一般外卖，商城的页面 都是这个结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 5]

购物车:  
加入购物车：  
加入购物车时候，会出现在下面的购物车里面，点击购物车，会弹出对应的菜品数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 6]

订单结算:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 7]

菜品管理:

菜品管理主要进行菜品的发布，修改和删除操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 8]  
项目的列表实现： 项目列表采用bootstrap的table 进行实现的,功能比较强大，界面好看，如下代码

$('#foodTable').bootstrapTable({ 
            url: '/food/listpage',              //请求后台的URL（*）
            method: 'GET',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            iconsPrefix: 'mdi', // 自定义表格右上角的图标，这个必须要定义，因为不是官方模板，icon图标样式名字不同会导致图标无法显示
            icons:  { 
                refresh: 'mdi-refresh',              // 刷新图标
                columns: 'mdi-format-list-bulleted', // 列图标
                toggleOff: 'mdi-toggle-switch-off',  // 切换光
                toggleOn: 'mdi-toggle-switch',       // 切换开
                detailOpen: 'mdi-plus',              // 详情开
                detailClose: 'mdi-minus',            // 详情光
                fullscreen: 'mdi-fullscreen'         // 全屏图标
            },
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            singleSelect: false, //开启单选,想要获取被选中的行数据必须要有该参数
            queryParams : function(params) { //上传服务器的参数
                var temp = { 
                    offset :params.offset + 0,// SQL语句起始索引
                    page : params.limit
                };
                return temp;
            },
            columns: [{ 列1，列2...}
               ]
        });

项目地址：  
https://gitee.com/soul\_PreCoder/foods\_xcx

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/89e5b0e2a297440191910823b662a8d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/699da831dfaf4e20bd1873ce24c0e5d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/956261c494fb464396ebd2709bdc4e0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221024/c8f5316e19d9483186210f34fff7a9a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221024/56da388c2858429fb9a82efac95107fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221024/e05e34824496494e86cfc227cae1fedd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221024/0da3b92e272a42efad86acbfb9cd2c17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221024/c28a94ea6a2b44c18232932956fe3935.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221024/5fe03376e0304876b954b0f50bc7311c.png