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

最新推荐文章于 2022-11-02 09:19:25 发布

原创最新推荐文章于 2022-11-02 09:19:25 发布 · 4.2k 阅读

26 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了外卖小程序的完整项目，包括前端小程序和后端管理系统。前端使用HBuilderX和Vue技术，后端采用SpringBoot和SSM，支持用户注册、选购菜品、订单支付等。后端使用SpringSecurity和Bootstrap，数据库为MySQL。详细阐述了项目结构、功能描述并提供了相关截图。

项目的名称

foods_xcx

一介绍

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

二软件技术说明

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

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

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

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

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

项目jdk ，采用jdk1.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...}
           ]
    });