vue.js毕业设计，基于vue.js前后端分离订座预约系统设计与实现（H5移动项目）

绝地灬酷狼 2024-03-31 10:25 72阅读 0赞

## 功能介绍 ##

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

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

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

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

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

## H5移动端功能 ##

![c4aa352e5b6042d0b6ef8f869c35ebe8.jpeg][]![f10391a3df264584b751491a3efd477e.jpeg][]![4aebeeee82c74424b17236c0b5d598c6.jpeg][]![4be5a87e15dd4783accdcef8b681bd4b.jpeg][]![6399728c0eef410b8a2d1c120c1323fe.jpeg][]![cf219a9d48154cfeaea5ef3770fc70e7.jpeg][]![241f9db1e77048898a59df4bcd4674be.jpeg][]![91dee1910e174ca0becd817474294822.jpeg][]

## 后台管理功能 ##

![e92e70659f3d48e181321a2a7257e2f5.jpeg][]![3ee1d7e939744c088016c2435ecb6383.jpeg][]![1886d8a5cb9549e991adcf9a78e54ef1.jpeg][]![4273a16c162b452f8abe3b2f74b6cc61.jpeg][]![b341c07171114551a8c370edc7c5b412.jpeg][]![c586349388754100bd952906dc3e00ae.jpeg][]![f94186fb169b4630bd51a52bc3cb7c64.jpeg][]![242c1ecec35e43af9dfe77b5c590ec8d.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>

样本如下

[c4aa352e5b6042d0b6ef8f869c35ebe8.jpeg]: https://img-blog.csdnimg.cn/c4aa352e5b6042d0b6ef8f869c35ebe8.jpeg
[f10391a3df264584b751491a3efd477e.jpeg]: https://img-blog.csdnimg.cn/f10391a3df264584b751491a3efd477e.jpeg
[4aebeeee82c74424b17236c0b5d598c6.jpeg]: https://img-blog.csdnimg.cn/4aebeeee82c74424b17236c0b5d598c6.jpeg
[4be5a87e15dd4783accdcef8b681bd4b.jpeg]: https://img-blog.csdnimg.cn/4be5a87e15dd4783accdcef8b681bd4b.jpeg
[6399728c0eef410b8a2d1c120c1323fe.jpeg]: https://img-blog.csdnimg.cn/6399728c0eef410b8a2d1c120c1323fe.jpeg
[cf219a9d48154cfeaea5ef3770fc70e7.jpeg]: https://img-blog.csdnimg.cn/cf219a9d48154cfeaea5ef3770fc70e7.jpeg
[241f9db1e77048898a59df4bcd4674be.jpeg]: https://img-blog.csdnimg.cn/241f9db1e77048898a59df4bcd4674be.jpeg
[91dee1910e174ca0becd817474294822.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a34ad74b215f4d2ca09abd100f1e4c5c.jpeg
[e92e70659f3d48e181321a2a7257e2f5.jpeg]: https://img-blog.csdnimg.cn/e92e70659f3d48e181321a2a7257e2f5.jpeg
[3ee1d7e939744c088016c2435ecb6383.jpeg]: https://img-blog.csdnimg.cn/3ee1d7e939744c088016c2435ecb6383.jpeg
[1886d8a5cb9549e991adcf9a78e54ef1.jpeg]: https://img-blog.csdnimg.cn/1886d8a5cb9549e991adcf9a78e54ef1.jpeg
[4273a16c162b452f8abe3b2f74b6cc61.jpeg]: https://img-blog.csdnimg.cn/4273a16c162b452f8abe3b2f74b6cc61.jpeg
[b341c07171114551a8c370edc7c5b412.jpeg]: https://img-blog.csdnimg.cn/b341c07171114551a8c370edc7c5b412.jpeg
[c586349388754100bd952906dc3e00ae.jpeg]: https://img-blog.csdnimg.cn/c586349388754100bd952906dc3e00ae.jpeg
[f94186fb169b4630bd51a52bc3cb7c64.jpeg]: https://img-blog.csdnimg.cn/f94186fb169b4630bd51a52bc3cb7c64.jpeg
[242c1ecec35e43af9dfe77b5c590ec8d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c35bbc71ec83463d813e097d82f508fa.jpeg