博主介绍：专注于Java（springboot ssm springcloud等开发框架） vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址 介绍 翰文编程-CSDN博客
系统实现预览
4 系统设计
4.1 功能模块设计
微信小程序民宿预约管理系统根据权限类型进行分类，主要可分为用户微信端和管理员服务端二大模块。用户微信端模块主要实现了修改个人信息，查看民宿信息等操作，加强了用户的操作体验。管理员服务端模块主要根据管理员对整个系统的管理进行设计，提高了管理的效率和规范[11]。系统总体模块设计如下图所示：
图4-1 系统总体模块设计
4.2 系统数据库设计
4.2.1 数据库系统
本系统采用MySQL来进行数据库的管理。基于WEB的MySQL体积小、速度快、成本低，能够及时处理上千万条记录，初步满足和支持大型的数据库高并发的读写和高效率读写等要求。
4.2.2 数据库概念设计
概念模型用于对信息世界建模，并与指定的数据库管理系统分离。它有助于将真实世界的事物抽象为适合于数据库管理系统的数据库模型。人们往往把现实世界抽象成信息世界，再把信息世界变成机器世界。也就是说，将现实世界的目标抽象成独立于专用计算机软件和专用数据库管理系统的信息结构的数据模型，然后将物理模型转化为适合电子计算机的数据库管理系统。事实上，数据模型是从现实世界到机器世界的中间层。
信息世界的基本要素包括实体和关联。实体（entity) 客观存在并可相互区别的事物称为实体。实体可以是实际的人、事或物，还可以是抽象化的概念或联络。以下是对部分主要的关键实体E-R如下：
用户信息E-R图如下图4-2所示。
图4-2用户信息E-R图
网站介绍E-R图如下图4-3所示。
图4-3网站介绍E-R图
民宿信息E-R图如下图4-4所示。
图4-4民宿信息E-R图
民宿预订E-R图如下图4-5所示。
图4-5民宿预订E-R图
微信小程序民宿预约管理系统总体E-R图如下图4-5所示。
图4-5微信小程序民宿预约管理系统总体E-R图
4.2.3 数据表设计
本管理系统的数据表的设计根据管理过程中的具体流程所需，方便了管理员对数据进行新增、删除、修改和查询的操作。
4.2.4 数据表的建立
系统使用MySQL工具对数据库进行操作，它有着简便的数据库管理操作以及强大的数据处理能力。以下是数据表的建立情况：
表4-1：我的收藏
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| refid | bigint | refid | |||
| tablename | varchar | 200 | 表名 | ||
| name | varchar | 200 | 名称 | ||
| picture | longtext | 4294967295 | 图片 | ||
| type | varchar | 200 | 类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注) | ||
| inteltype | varchar | 200 | 推荐类型 | ||
| remark | varchar | 200 | 备注 | ||
| userid | bigint | 用户id |
表4-2：民宿预订
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| fangjianmingcheng | varchar | 200 | 房间名称 | ||
| fangjianleixing | varchar | 200 | 房间类型 | ||
| yiwanjiage | double | 一晚价格 | |||
| minsumingcheng | varchar | 200 | 民宿名称 | ||
| minsudizhi | varchar | 200 | 民宿地址 | ||
| minsuleixing | varchar | 200 | 民宿类型 | ||
| ruzhuriqi | date | 入住日期 | |||
| ruzhutianshu | int | 入住天数 | |||
| ruzhujine | double | 入住金额 | |||
| yudingshijian | datetime | 预订时间 | |||
| yonghuzhanghao | varchar | 200 | 用户账号 | ||
| yonghuxingming | varchar | 200 | 用户姓名 | ||
| shoujihaoma | varchar | 200 | 手机号码 | ||
| sfsh | varchar | 200 | 是否审核 | ||
| shhf | longtext | 4294967295 | 回复内容 | ||
| ispay | varchar | 200 | 是否支付 |
表4-3：民宿信息
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| fangjianmingcheng | varchar | 200 | 房间名称 | ||
| fangjiantupian | longtext | 4294967295 | 房间图片 | ||
| fangjianleixing | varchar | 200 | 房间类型 | ||
| yiwanjiage | double | 一晚价格 | |||
| fuwudianhua | varchar | 200 | 服务电话 | ||
| fangneisheshi | longtext | 4294967295 | 房内设施 | ||
| storeupnum | int | 收藏数量 | |||
| minsumingcheng | varchar | 200 | 民宿名称 | ||
| minsudizhi | varchar | 200 | 民宿地址 | ||
| minsuleixing | varchar | 200 | 民宿类型 |
表4-4：民宿类型
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| minsuleixing | varchar | 200 | 民宿类型 |
表4-5：菜单
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| menujson | longtext | 4294967295 | 菜单 |
表4-6：民宿信息评论表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| refid | bigint | 关联表id | |||
| userid | bigint | 用户id | |||
| avatarurl | longtext | 4294967295 | 头像 | ||
| nickname | varchar | 200 | 用户名 | ||
| content | longtext | 4294967295 | 评论内容 | ||
| reply | longtext | 4294967295 | 回复内容 |
表4-7：配置文件
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| name | varchar | 100 | 配置参数名称 | ||
| value | varchar | 100 | 配置参数值 |
表4-8：用户
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| yonghuzhanghao | varchar | 200 | 用户账号 | ||
| yonghumima | varchar | 200 | 用户密码 | ||
| yonghuxingming | varchar | 200 | 用户姓名 | ||
| touxiang | longtext | 4294967295 | 头像 | ||
| xingbie | varchar | 200 | 性别 | ||
| shoujihaoma | varchar | 200 | 手机号码 |
表4-9：token表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| userid | bigint | 用户id | |||
| username | varchar | 100 | 用户名 | ||
| tablename | varchar | 100 | 表名 | ||
| role | varchar | 100 | 角色 | ||
| token | varchar | 200 | 密码 | ||
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
| expiratedtime | timestamp | 过期时间 | CURRENT_TIMESTAMP |
表4-10：管理员
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| username | varchar | 200 | 用户名 | ||
| password | varchar | 200 | 密码 | ||
| role | varchar | 200 | 角色 |
表4-11：网站介绍
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| title | varchar | 200 | 标题 | ||
| subtitle | varchar | 200 | 副标题 | ||
| content | longtext | 4294967295 | 内容 | ||
| picture1 | longtext | 4294967295 | 图片1 | ||
| picture2 | longtext | 4294967295 | 图片2 | ||
| picture3 | longtext | 4294967295 | 图片3 |
5 系统实现
5.1用户微信端模块实现
当游客打开微信小程序的网址后，首先看到的就是微信小程序首页界面。在这里，游客能够看到微信小程序民宿预约管理系统的导航条显示首页、民宿信息、我的等，如图5-1所示。
图5-1微信小程序首页界面图
当用户进入微信小程序进行相关操作前必须先注册登录，在注册页面填写用户账号、密码、确认密码、用户姓名、头像、性别、手机号码等信息，然后点击注册，如图5-2所示。
图5-2用户注册界面图
用户登录，用户在登录页面通过填写账号、密码、验证码，完成登录，如图5-3所示。
图5-3用户登录界面图
主要代码
const {userLogin,wxlogin}=require('../../api/login.js')
const captchaUtil = require('../../utils/captcha.js');
const menuData=require('../../utils/menu.js')
const {session
} = require("../../api/index.js")Page({data: {code:'',selectType:[],showLoginRole:false,username: '',password: '',captcha: '',userCaptchaInput:'' ,loginType: 1, // 1管理员，2商家，3用户},onReady(){this.generateCaptcha()console.log("captcha", this.data.captcha);
},
onLoad(){const menu=menuData.default.list()const selectType=["请选择登陆类型"]wx.login({provider: 'weixin',success: function (res) {let code = res.code;if (code) {this.setData({code});}}.bind(this)});menu.map((obj) => {if (obj["roleName"]&&obj["hasFrontLogin"]=="是") {selectType.push(obj["roleName"])this.setData({selectType})}});if(this.data.selectType.length<=2){this.setData({loginType:1})}},generateCaptcha(){this.setData({captcha:captchaUtil.generateCaptcha('captcha',80,44)})
},bindPickerChange: function(e) {this.setData({loginType: e.detail.value})},registerUser(e){const tablename = e.currentTarget.dataset.tablename;wx.navigateTo({url: `../${tablename}/register`})},// 选择用户登录类型bindLoginTypeChange(e) {const loginType = e.detail.value;this.setData({loginType,});},
uploadAvatar() {wx.chooseImage({count: 1, // 最多可选择的图片数量sizeType: ['compressed'], // 选择压缩的图片sourceType: ['album', 'camera'], // 从相册或相机选择图片success: (res) => {const tempFilePaths = res.tempFilePaths;// 将选择的文件赋值给avatarUrl，并更新到页面上this.setData({avatarUrl: tempFilePaths[0]});}})},async login() {if (this.data.username === '') {wx.showToast({title: '请输入账号',icon:'none'});return;}if (this.data.password === '') {wx.showToast({title: '请输入密码',icon:'none'});return;}if (this.data.captcha === '') {wx.showToast({title: '请输入验证码',icon:'none'});return;}const {captcha,userCaptchaInput}=this.dataif(captcha!=userCaptchaInput){wx.showToast({title: '验证码错误',icon:'none'})this.generateCaptcha();//重新生成验证码
return ;}if(this.data.loginType!=0 ){const role = this.data.selectType[this.data.loginType]const menu = menuData.default.list()var loginRolemenu.map(obj => {if (role == obj.roleName) {loginRole = obj.tableName}})const res = await userLogin(loginRole, this.data.username, this.data.password)if (res.code === 0) {const role = this.data.selectType[this.data.loginType]// 保存登录角色wx.setStorageSync('role', role)// 登录成功const token = res.token;wx.setStorageSync('token', token);wx.setStorageSync('nowTable', loginRole);// 跳转到首页或其他需要登录后才能访问的页面const res2 = await session(loginRole);getApp().globalData.userInfo = res2.datawx.setStorageSync("nickname",this.data.username)wx.setStorageSync("avatarurl", res2.data?.touxiang)if (res2.data?.vip) {wx.setStorageSync("vip", res2.data.vip);}
wx.setStorageSync("avatarurl",res2.data?.touxiang)wx.switchTab({url: '/pages/index/index',});} else {// 登录失败wx.showToast({title: res.msg,icon:'none'});this.generateCaptcha()}}else{wx.showToast({title: '请选择登陆类型',icon:'none'})}},});用户点击民宿信息，在民宿信息页面的搜索栏输入房间名称，进行搜索，然后可以查看房间名称、房间图片、房间类型、一晚价格、服务电话、民宿名称、民宿地址、民宿类型等信息，如有需要进行预订、收藏或者评论等操作，如图5-4所示。
图5-4民宿信息界面图
用户点击我的页面，在我的页面可以对民宿预订、我的收藏、修改密码，进行详细操作，如图5-5所示。
图5-5我的界面图
5.2管理员服务端模块实现
管理员登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，点击登录操作；如图5-6所示。
图5-6 管理员登录界面
管理员进入系统主页面，主要功能包括对首页、系统管理、管理员管理、民宿信息管理、民宿预订管理等进行操作。如图5-7所示：
图5-7管理员主界面
用户信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写用户信息表单。这些用户信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增或删除用户信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便用户信息功能可以看到最新的信息或相应的操作反馈。在用户信息的输入栏中输入用户账号进行搜索，可以查看到用户详细信息，并根据需要进行修改或者删除等操作。如图5-8所示。
图5-8用户管理界面图
民宿类型功能在视图层（view层)进行交互，比如点击“新增”按钮或填写民宿类型表单。这些民宿类型动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增或删除民宿类型，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便民宿类型功能可以看到最新的信息或相应的操作反馈。在民宿类型的输入栏中输入没民宿类型进行搜索，可以查看到民宿类型详细信息，并根据需要进行修改或者删除等操作。如图5-9所示。
图5-9民宿类型界面图
管理员点击网站介绍，在网站介绍页面的输入标题、副标题、图片1、图片2、图片3等信息，进行搜索、新增或者删除网站介绍操作，如图5-10所示。
图5-10网站介绍界面图
管理员点击轮播图，在轮播图页面的对名称、值等信息，进行搜索或者删除轮播图等操作，如图5-11所示。
图5-11轮播图界面图
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者
