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

黄菊华老师

3135人浏览 · 2022-11-23 11:26:57

黄菊华老师 · 2022-11-23 11:26:57 发布

功能介绍

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

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

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

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

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

H5移动端功能

后台管理功能

开发概要

后台开发

服务器端环境：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

字段名	类型	备注
id	int	自动递增；菜单的id（主键），不允许空
biaoti	varchar	标题
neirong	Text	内容

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

广告表：guanggao

字段名	类型	备注
id	Int	自动递增；菜单的id（主键），不允许空
wz1	longtext	广告1的文字
tpdz1	longtext	广告1的图片地址
ljdz1	longtext	广告1的链接地址
wz2	longtext	广告2的文字
tpdz2	longtext	广告2的图片地址
ljdz2	longtext	广告2的链接地址
wz3	longtext	广告3的文字
tpdz3	longtext	广告3的图片地址
ljdz3	longtext	广告3的链接地址

留言表：liuyan

字段名	类型	备注
id	Int（11）	自动递增；菜单的id（主键），不允许空
xingming	varchar（50）	姓名
dianhua	varchar（50）	电话
youxiang	varchar（50）	邮箱
zhuti	varchar（250）	主题
neirong	longtext	内容
riqi	date	日期
shijian	datetime	时间

会员表：huiyuan

字段名	类型	备注
id	int	自动递增；菜单的id（主键），不允许空
shouji	varchar	手机号：用户名
mima	varchar	密码
fl_id	int（11）	分类id 外键，会员分类表的id，固定=1；预留扩展
xingming	varchar	姓名
xingbie	varchar	性别
qq	varchar	QQ号
youxiang	varchar	Email
touxiang	varchar	头像地址
jianjie	text	简介
jieshao	text	介绍
add_riqi	date	注册日期
add_shijian	datetime	注册时间

资讯分类表：zixun_fenlei

字段名	类型	备注
id	Int	自动递增；菜单的id（主键），不允许空
caidan_mingcheng	varchar	菜单名称，允许空
caidan_lujing	varchar	菜单路径，允许空
caidan_jibie	int	菜单级别，允许空这里做到3级：值可以是:1 \| 2 \| 3
caidan_suoshu	int	菜单所属上级菜单的id，允许空
paixu_id	int	排序数字，数字大的在前面，允许空

资讯表：zixun

字段名	类型	备注
id	Int	自动递增；菜单的id（主键），不允许空
xinxi_lxid1	int	信息1级类型的id，参考资讯类型表的id
xinxi_biaoti	varchar	信息标题
xinxi_riqi	date	信息日期
xinxi_jianjie_yn	tinyin	是否有简介：1表示有简介；0没有
xinxi_jianjie	text	简介内容
xinxi_tupian_yn	tinyint	是否有图片：1表示有图片；0没有
xinxi_tupian	varchar	信息图片地址
xinxi_ding	tinyint	预留是否置顶：1表示置顶；0没有
xinxi_neirong	text	信息内容
riqi	datetime	信息发布的日期
shijian	datetime	信息发布的时间

座位分类表：dingzuo_fenlei

字段名	类型	备注
id	Int	自动递增；菜单的id（主键），不允许空
caidan_mingcheng	varchar	菜单名称，允许空
caidan_lujing	varchar	菜单路径，允许空
caidan_jibie	int	菜单级别，允许空这里做到3级：值可以是:1 \| 2 \| 3
caidan_suoshu	int	菜单所属上级菜单的id，允许空
paixu_id	int	排序数字，数字大的在前面，允许空

样本数据如下

座位表：dingzuo

字段名	类型	备注
id	Int	自动递增；菜单的id（主键），不允许空
xinxi_lxid1	int	按人数的分类id
xinxi_lxid2	int	按大堂、包厢分类的id
xinxi_biaoti	varchar	信息标题
xinxi_riqi	date	信息日期

样本如下

座位预约订单表：dingzuo_yuyue

字段名	类型	备注
id	int	自动递增；菜单的id（主键），不允许空
u_id	int	用户id
yuyue_riqi	date	预约日期
yuyue_xingqiji	varchar	预约星期几
xiadan_shijian	datetime	下单时间
zuowei_id	int	座位id
zuowei_mc	varchar	座位名称
fenlei_renshu	varchar	座位人数
fenlei_leixing	varchar	座位类型：大堂还是包厢
lianxiren	varchar	联系人
dianhua	varchar	电话
beizhu	varchar	备注
zt	tinyint	状态：1表示待审核、2表示拒绝、3表示审核通过
zt_beizhu	text	操作备注

样本如下

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^