vue.js毕业设计，基于vue.js前后端分离订座预约小程序系统设计与实现

浅浅的花香味﹌ 2024-03-31 10:25 54阅读 0赞

## 功能介绍 ##

【后台功能】  
广告管理：设置小程序首页轮播图广告和链接  
留言列表：所有用户留言信息列表，支持删除  
会员列表：查看所有注册会员信息，支持删除  
录入资讯：录入资讯标题、内容等信息  
管理资讯：查看已录入资讯列表，支持删除和修改

座位分类设置：设置开放的座位类型，设置好后不要动  
座位录入：选择分类，录入开放的座位名称  
座位管理：查看所有录入的座位信息，支持修改和删除  
座位预约列表：所有用户预约的座位记录列表  
座位预约管理：支持审核和拒绝，支持删除

【用户功能】  
用户注册登录：注册普通账号，然后使用注册的账号登录登录  
资讯功能：用户可以任意浏览资讯列表和详细信息  
留言：用户可以在小程序对管理平台留言。

预约规则：默认只能预约最近4天的座位  
座位预约：选择日期，选择类型，选择座位，填写信息，提交座位预约  
我的预约：预约时间和星期几、预约人姓名、电话、备注。  
取消申请：在我的预约信息中，如果管理员还没有审核，在最右侧会显示“取消申请”，点击该链接，即可取消。

用户信息：填写姓名、qq、邮箱、备注等信息  
退出系统：清除缓存，返回小程序首页

## 小程序功能 ##

![cc62d9c28634452cae6908bc3ad680b2.jpeg][]![0502cfceea71452ab2f4024730249678.jpeg][]![3726b9f2b5ac41bb8b9fc4ebe3807cd1.jpeg][]![5dd5e896ac5541da890134c1467dbb47.jpeg][]![59e0e25b5f894a7092eba4af79c9621b.jpeg][]![847f583bf89b4188901724f576256539.jpeg][]![b4f76e67177749a6ade8a158a53e90df.jpeg][]![ac5dd4bdf5104f01a4ed43ef4c1488a0.jpeg][]

## 后台管理功能 ##

## ![7641e7efe65140bfa772763bc3430270.jpeg][]![7702275a3eda4bf29fa553e98b1097f4.jpeg][]![9b5778faf76c44adbee4a3a6df4575a2.jpeg][]![6a21e8d0ed544aa5ae8488b8d61c8339.jpeg][]![c01a5241499c4c85b02cdd7b29ec4b7f.jpeg][]![9914f5a0079442cc8a503e5f290416a4.jpeg][]![735518497cf840d2ac3ac21b2ca36bef.jpeg][]![48707c76de5b412f8fca82971e273ecd.jpeg][] ##

## 开发概要 ##

#### 后台开发 ####

服务器端环境：iis + php （可以自行搭建其他比如phpstudy之类的）

开发环境：windows7 |windows10都可以

开发语言：php7

开发工具：phpstorm（其他开发工具vscode、dreamweaver等都可以）

数据库：mysql8

数据库管理工具：navicat

其他开发语言：html + css +javascript

#### 前端uniapp开发 ####

框架：基于vue.js的uniapp框架

开发工具：Hbuiderx

其他开发语言：html + css +javascript

## 开发接口 ##

#### 首页-轮播图 ####

wx\_lunbo.php

#### 首页-最新3条信息接口 ####

wx\_news\_list.php

#### 获取信息列表 ####

wx\_news\_list\_byid.php

#### 获取信息详情 ####

wx\_news\_info.php

#### 获取关于我们目录 ####

wx\_guanyu\_list.php

#### 根据关于我们id获取详细信息 ####

wx\_guanyu\_info.php

#### 提交留言接口 ####

wx\_liuyan.php

#### 普通用户登录 ####

wx\_check\_login\_yonghu.php

#### 普通用户注册 ####

wx\_check\_reg\_yonghu.php

#### 用户密码修改 ####

wx\_huiyuan\_mima\_act.php

#### 用户信息 ####

*用户信息获取*

wx\_huiyuan\_xinxi\_byid.php

*用户信息更新*

wx\_huiyuan\_xinxi\_update\_byid.php

#### 订座-获取时间 ####

wx\_shijian\_list.php

#### 订座-获取座位分类列表 ####

wx\_dingzuo\_fenlei.php

#### 订座-根据分类获取对应座位列表 ####

wx\_dingzuo\_list.php

#### 订座-提交预约 ####

wx\_dingzuo\_yuyue\_add.php

#### 订单-获取订单列表 ####

wx\_dingzuo\_yuyue\_list\_byUserid.php

#### 订单-删除 ####

wx\_dingzuo\_yuyue\_del\_byUserid.php

## 数据库 ##

#### 关于我们概要表：gaiyao ####

存放关于我们的相关项目数据

#### 广告表：guanggao ####

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:111.75pt;"> 字段名 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:3cm;"> 类型 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:260.5pt;"> 备注 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> id </td> 
 <td style="vertical-align:top;width:3cm;"> Int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 自动递增；菜单的id（主键），不允许空 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> wz1 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告1的文字 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> tpdz1 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告1的图片地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> ljdz1 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告1的链接地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> wz2 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告2的文字 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> tpdz2 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告2的图片地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> ljdz2 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告2的链接地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> wz3 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告3的文字 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> tpdz3 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告3的图片地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> ljdz3 </td> 
 <td style="vertical-align:top;width:3cm;"> longtext </td> 
 <td style="vertical-align:top;width:260.5pt;"> 广告3的链接地址 </td> 
 </tr> 
 </tbody> 
</table>

#### 留言表：liuyan ####

#### 会员表：huiyuan ####

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:111.75pt;"> 字段名 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:3cm;"> 类型 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:260.5pt;"> 备注 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> id </td> 
 <td style="vertical-align:top;width:3cm;"> int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 自动递增；菜单的id（主键），不允许空 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> shouji </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 手机号：用户名 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> mima </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 密码 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> fl_id </td> 
 <td style="vertical-align:top;width:3cm;"> int（11） </td> 
 <td style="vertical-align:top;width:260.5pt;"> 分类id 外键，会员分类表的id，固定=1；预留扩展 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xingming </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 姓名 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xingbie </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 性别 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> qq </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> QQ号 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> youxiang </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> Email </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> touxiang </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 头像地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> jianjie </td> 
 <td style="vertical-align:top;width:3cm;"> text </td> 
 <td style="vertical-align:top;width:260.5pt;"> 简介 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> jieshao </td> 
 <td style="vertical-align:top;width:3cm;"> text </td> 
 <td style="vertical-align:top;width:260.5pt;"> 介绍 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> add_riqi </td> 
 <td style="vertical-align:top;width:3cm;"> date </td> 
 <td style="vertical-align:top;width:260.5pt;"> 注册日期 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> add_shijian </td> 
 <td style="vertical-align:top;width:3cm;"> datetime </td> 
 <td style="vertical-align:top;width:260.5pt;"> 注册时间 </td> 
 </tr> 
 </tbody> 
</table>

#### 资讯分类表：zixun\_fenlei ####

#### 资讯表：zixun ####

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:111.75pt;"> 字段名 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:3cm;"> 类型 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:260.5pt;"> 备注 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> id </td> 
 <td style="vertical-align:top;width:3cm;"> Int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 自动递增；菜单的id（主键），不允许空 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_lxid1 </td> 
 <td style="vertical-align:top;width:3cm;"> int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息1级类型的id，参考资讯类型表的id </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_biaoti </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息标题 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_riqi </td> 
 <td style="vertical-align:top;width:3cm;"> date </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息日期 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_jianjie_yn </td> 
 <td style="vertical-align:top;width:3cm;"> tinyin </td> 
 <td style="vertical-align:top;width:260.5pt;"> 是否有简介：1表示有简介；0没有 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_jianjie </td> 
 <td style="vertical-align:top;width:3cm;"> text </td> 
 <td style="vertical-align:top;width:260.5pt;"> 简介内容 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_tupian_yn </td> 
 <td style="vertical-align:top;width:3cm;"> tinyint </td> 
 <td style="vertical-align:top;width:260.5pt;"> 是否有图片：1表示有图片；0没有 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_tupian </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息图片地址 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_ding </td> 
 <td style="vertical-align:top;width:3cm;"> tinyint </td> 
 <td style="vertical-align:top;width:260.5pt;"> 预留是否置顶：1表示置顶；0没有 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xinxi_neirong </td> 
 <td style="vertical-align:top;width:3cm;"> text </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息内容 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> riqi </td> 
 <td style="vertical-align:top;width:3cm;"> datetime </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息发布的日期 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> shijian </td> 
 <td style="vertical-align:top;width:3cm;"> datetime </td> 
 <td style="vertical-align:top;width:260.5pt;"> 信息发布的时间 </td> 
 </tr> 
 </tbody> 
</table>

#### 座位分类表：dingzuo\_fenlei ####

样本数据如下

#### 座位表：dingzuo ####

样本如下

#### 座位预约订单表：dingzuo\_yuyue ####

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:111.75pt;"> 字段名 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:3cm;"> 类型 </td> 
 <td style="background-color:#f2f2f2;border-color:#000000;width:260.5pt;"> 备注 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> id </td> 
 <td style="vertical-align:top;width:3cm;"> int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 自动递增；菜单的id（主键），不允许空 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> u_id </td> 
 <td style="vertical-align:top;width:3cm;"> int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 用户id </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> yuyue_riqi </td> 
 <td style="vertical-align:top;width:3cm;"> date </td> 
 <td style="vertical-align:top;width:260.5pt;"> 预约日期 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> yuyue_xingqiji </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 预约星期几 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> xiadan_shijian </td> 
 <td style="vertical-align:top;width:3cm;"> datetime </td> 
 <td style="vertical-align:top;width:260.5pt;"> 下单时间 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> zuowei_id </td> 
 <td style="vertical-align:top;width:3cm;"> int </td> 
 <td style="vertical-align:top;width:260.5pt;"> 座位id </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> zuowei_mc </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 座位名称 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> fenlei_renshu </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 座位人数 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> fenlei_leixing </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 座位类型：大堂还是包厢 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> lianxiren </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 联系人 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> dianhua </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 电话 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> beizhu </td> 
 <td style="vertical-align:top;width:3cm;"> varchar </td> 
 <td style="vertical-align:top;width:260.5pt;"> 备注 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> zt </td> 
 <td style="vertical-align:top;width:3cm;"> tinyint </td> 
 <td style="vertical-align:top;width:260.5pt;"> 状态：1表示待审核、2表示拒绝、3表示审核通过 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:111.75pt;"> zt_beizhu </td> 
 <td style="vertical-align:top;width:3cm;"> text </td> 
 <td style="vertical-align:top;width:260.5pt;"> 操作备注 </td> 
 </tr> 
 </tbody> 
</table>

样本如下

[cc62d9c28634452cae6908bc3ad680b2.jpeg]: https://img-blog.csdnimg.cn/cc62d9c28634452cae6908bc3ad680b2.jpeg
[0502cfceea71452ab2f4024730249678.jpeg]: https://img-blog.csdnimg.cn/0502cfceea71452ab2f4024730249678.jpeg
[3726b9f2b5ac41bb8b9fc4ebe3807cd1.jpeg]: https://img-blog.csdnimg.cn/3726b9f2b5ac41bb8b9fc4ebe3807cd1.jpeg
[5dd5e896ac5541da890134c1467dbb47.jpeg]: https://img-blog.csdnimg.cn/5dd5e896ac5541da890134c1467dbb47.jpeg
[59e0e25b5f894a7092eba4af79c9621b.jpeg]: https://img-blog.csdnimg.cn/59e0e25b5f894a7092eba4af79c9621b.jpeg
[847f583bf89b4188901724f576256539.jpeg]: https://img-blog.csdnimg.cn/847f583bf89b4188901724f576256539.jpeg
[b4f76e67177749a6ade8a158a53e90df.jpeg]: https://img-blog.csdnimg.cn/b4f76e67177749a6ade8a158a53e90df.jpeg
[ac5dd4bdf5104f01a4ed43ef4c1488a0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/db44de3ccaad4fa2a29a7fad9d1a8e81.jpeg
[7641e7efe65140bfa772763bc3430270.jpeg]: https://img-blog.csdnimg.cn/7641e7efe65140bfa772763bc3430270.jpeg
[7702275a3eda4bf29fa553e98b1097f4.jpeg]: https://img-blog.csdnimg.cn/7702275a3eda4bf29fa553e98b1097f4.jpeg
[9b5778faf76c44adbee4a3a6df4575a2.jpeg]: https://img-blog.csdnimg.cn/9b5778faf76c44adbee4a3a6df4575a2.jpeg
[6a21e8d0ed544aa5ae8488b8d61c8339.jpeg]: https://img-blog.csdnimg.cn/6a21e8d0ed544aa5ae8488b8d61c8339.jpeg
[c01a5241499c4c85b02cdd7b29ec4b7f.jpeg]: https://img-blog.csdnimg.cn/c01a5241499c4c85b02cdd7b29ec4b7f.jpeg
[9914f5a0079442cc8a503e5f290416a4.jpeg]: https://img-blog.csdnimg.cn/9914f5a0079442cc8a503e5f290416a4.jpeg
[735518497cf840d2ac3ac21b2ca36bef.jpeg]: https://img-blog.csdnimg.cn/735518497cf840d2ac3ac21b2ca36bef.jpeg
[48707c76de5b412f8fca82971e273ecd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/cbf3ef04025e4cdeaa99b566c8a91f14.jpeg