基于springboot2+vue2框架开发的景区民宿预约系统

1. 资源

浏览全文可获取

2. 项目简介

景区民宿预约系统，旨在为游客提供景区、民宿房间、美食的在线预约服务，同时支持后台管理员对各类信息进行管理、工作人员进行日常工作和预约审核。系统涵盖了用户端前台展示、预约操作、留言反馈，以及管理端的数据维护、审核、统计等功能。

系统分为三种角色：

• 管理员：拥有最高权限，可管理用户、工作人员、房间信息、景点信息、美食信息、公告、轮播图、字典数据以及各类预约订单的审核。
• 工作人员：可管理房间、景点、美食信息，审核用户提交的预约申请，并记录每日工作日志。
• 用户：浏览房间、景点、美食，提交预约申请（需填写体温、行程等防疫信息），对已预约内容进行留言反馈，管理个人资料。

项目采用前后端分离架构，后端提供RESTful API，前端包含基于Vue+Element UI的后台管理界面和基于LayUI的移动端/前台用户界面。

3. 技术栈

后端技术

• 框架：Spring Boot 2.2.2.RELEASE
• ORM：MyBatis-Plus 2.3 + MyBatis Spring Boot Starter 2.1.1
• 安全/权限：Apache Shiro 1.3.2（用于Token认证与授权）
• 数据库：MySQL 5.7.32
• 连接池：Spring Boot JDBC Starter 内置
• 工具库：
  • fastjson：JSON处理
  • commons-lang3、commons-io、hutool：常用工具
  • poi：Excel导入导出
  • js-md5：密码加密
  • baidu-aip：人脸比对（预留）
• 其他：spring-boot-devtools（热部署）、thymeleaf（静态资源支持）

前端技术

• 后台管理端：
  • Vue 2.x
  • Element UI
  • Vue Router（静态路由）
  • Axios（HTTP请求）
  • ECharts（图表统计）
  • vue-json-excel、vue-qr、print-js 等插件
• 前台用户端：
  • LayUI
  • jQuery
  • Vue.js（部分页面交互）
  • Swiper（轮播图）
  • 高德地图API（位置服务）

开发环境

• JDK 1.8
• Maven
• 数据库字符集：utf8

4. 详细介绍

4.1 数据库设计

4.2 功能模块

4.2.1 用户端前台功能

• 首页轮播图：展示系统配置的轮播图片。
• 房间/景点/美食展示：按分类展示列表，支持关键词搜索和类型筛选。
• 详情页：查看详细信息、点击次数自动累加，可提交预约申请和留言反馈。
• 预约流程：
  • 房间预约需额外填写近期体温和近期行程（防疫要求）。
  • 景点和美食预约仅需选择预约日期和备注。
  • 预约提交后状态为“未审核”，待工作人员审核。
• 个人中心：修改个人资料、头像、联系方式等。
• 公告浏览：查看系统发布的公告。

4.2.2 后台管理端（管理员）

• 管理员管理：维护系统管理员账号。
• 基础数据管理：维护字典表（房间类型、景点类型、美食类型、公告类型等）。
• 房间信息管理：增删改查房间，查看房间留言并回复。
• 房间预约管理：审核用户提交的房间预约（通过/拒绝），填写审核反馈。
• 工作人员管理：增删改查工作人员，重置密码。
• 工作记录管理：查看工作人员提交的工作日志。
• 景点信息管理：增删改查景点，查看留言并回复。
• 景点预约管理：审核景点预约。
• 美食信息管理：增删改查美食，查看留言并回复。
• 美食预约管理：审核美食预约。
• 公告管理：发布、编辑、删除公告。
• 用户管理：增删改查普通用户，重置密码。
• 轮播图管理：配置首页轮播图图片路径。

4.2.3 工作人员端功能

• 房间/景点/美食管理：仅可查看和修改（无新增/删除权限，视菜单配置而定）。
• 预约审核：对用户提交的预约进行审核处理。
• 工作记录：每日添加工作记录（体温、工作内容）。
• 公告查看：仅能查看公告，无法编辑。

4.2.4 用户端功能

• 预约记录：在个人中心可查看自己的预约订单及审核状态。
• 留言：对房间、景点、美食发表留言，并可查看管理员的回复。
• 信息浏览与预约：同上。

4.3 技术实现亮点

1. 字典表统一管理：所有需要枚举的字段（类型、审核结果等）均通过 dictionary 表维护，前端展示时自动转换为对应的中文名称，避免硬编码。
2. Token认证：登录后生成有效期为1小时的Token，存储于token表，后续请求需在Header中携带Token，拦截器验证有效性。
3. 防SQL注入：自定义SQLFilter工具类对排序字段进行过滤。
4. Excel批量导入：部分控制器预留了batchInsert接口，通过POI读取Excel批量插入数据。
5. 人脸比对预留：集成了百度AI SDK，可扩展人脸识别登录或身份验证。
6. 统计图表：后端提供通用柱状图、饼状图查询接口，前端ECharts渲染数据。
7. 多环境配置：application.yml配置数据库连接、文件上传大小、MyBatis-Plus日志等。

5. 部分代码

5.1 实体类示例 – FangjianEntity

@TableName("fangjian")
public class FangjianEntity<T> implements Serializable {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String fangjianName;
    private String fangjianPhoto;
    private String fangjianTese;
    private String fangjianPeizhi;
    private Double fangjianMoney;
    private Integer fangjianTypes;
    private Integer fangjianNumber;
    private Integer fangjianClicknum;
    private String fangjianContent;
    @TableField(fill = FieldFill.INSERT)
    private Date createTime;
    // getters/setters...
}

5.2 控制器示例 – JingdianController（景点信息）

@RestController
@RequestMapping("/jingdian")
public class JingdianController {
    @Autowired
    private JingdianService jingdianService;
    @Autowired
    private DictionaryService dictionaryService;

    // 前端列表（无需登录）
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        PageUtils page = jingdianService.queryPage(params);
        List<JingdianView> list = (List<JingdianView>)page.getList();
        for(JingdianView c:list)
            dictionaryService.dictionaryConvert(c, request);
        return R.ok().put("data", page);
    }

    // 前端详情（点击次数+1）
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        JingdianEntity jingdian = jingdianService.selectById(id);
        if(jingdian != null){
            jingdian.setJingdianClicknum(jingdian.getJingdianClicknum()+1);
            jingdianService.updateById(jingdian);
            JingdianView view = new JingdianView();
            BeanUtils.copyProperties(jingdian, view);
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }
        return R.error(511,"查不到数据");
    }
}

5.3 权限拦截器 – AuthorizationInterceptor

@Component
public class AuthorizationInterceptor implements HandlerInterceptor {
    @Autowired
    private TokenService tokenService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        // 跨域设置
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        // 忽略注解的方法直接放行
        if (handler instanceof HandlerMethod) {
            IgnoreAuth annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
            if (annotation != null) return true;
        }
        // 获取Token并验证
        String token = request.getHeader("Token");
        TokenEntity tokenEntity = tokenService.getTokenEntity(token);
        if (tokenEntity != null) {
            request.getSession().setAttribute("userId", tokenEntity.getUserid());
            request.getSession().setAttribute("role", tokenEntity.getRole());
            return true;
        }
        // 未登录返回401
        response.setContentType("application/json;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.print(JSONObject.toJSONString(R.error(401, "请先登录")));
        return false;
    }
}

5.4 前端路由配置 – router-static.js（后台管理）

const routes = [{
    path: '/index',
    component: Index,
    children: [
        { path: '/', component: Home, meta: { title: '首页' } },
        { path: '/users', component: users },        // 管理员管理
        { path: '/fangjian', component: fangjian },  // 房间信息
        { path: '/fnagjianYuye', component: fnagjianYuye }, // 房间预约
        // ... 其他路由
    ]
},{
    path: '/login',
    component: Login
}];

6. 部分截图

7. 项目总结

景区民宿预约系统是一个功能完整的综合性预约平台，覆盖了游客、工作人员、管理员三方角色的需求。通过本次源码分析可以看出：

1. 业务完整性：系统不仅支持基础的CRUD，还包含了预约-审核流程、留言回复、防疫信息采集（体温+行程）、工作日志记录等细节，符合实际景区管理场景。
2. 技术选型合理：后端采用Spring Boot + MyBatis-Plus简化数据操作，Shiro实现Token认证，配合拦截器保证接口安全；前端后台使用Vue+Element UI提供现代化管理界面，前台使用LayUI兼顾轻量级和移动端适配。
3. 代码规范：项目结构清晰，分为controller、service、dao、entity、utils等包；使用@RestController统一返回R对象；利用MyBatis-Plus的EntityWrapper简化条件查询；字典表通过监听器加载至ServletContext，减少数据库查询。
4. 扩展性：预留了百度AI人脸识别、Excel批量导入、图表统计等接口，便于后期功能升级。
5. 可维护性：数据库字典表统一配置，前端展示时自动转换枚举值，修改枚举值无需改代码；配置文件分离，便于环境切换。

该项目适合作为毕业设计或中小企业景区/民宿预约系统的参考实现。

资源：https://fifteen.xiaobias.com/source/191