基于Spring Boot的“爱辽宁”文旅导航网站的设计与实现-平芜编程栈

摘要

本文详细阐述了基于Spring Boot框架的“爱辽宁”文旅导航网站的设计与实现全过程。文章首先分析了项目的背景与意义，明确了其在推动辽宁文旅产业数字化、智能化发展中的价值。随后，系统介绍了项目采用的技术栈，包括Spring Boot、MyBatis-Plus、Vue.js、MySQL、Redis等核心组件。文章重点剖析了系统的整体架构设计、数据库设计以及前后端核心模块的实现逻辑，并提供了关键代码片段进行说明。最后，对项目的功能特点、技术亮点进行了总结，并展望了未来的优化方向。

1. 项目背景与意义

辽宁省拥有丰富的历史文化遗产和独特的自然风光，文旅资源禀赋优越。然而，在数字化时代，传统的文旅信息传播方式存在信息分散、更新滞后、互动性差、个性化服务不足等问题，难以满足现代游客，尤其是年轻一代对便捷、智能、个性化旅游体验的需求。

“爱辽宁”文旅导航网站旨在构建一个集景点信息查询、旅游路线规划、文化活动预告、在线预订、社区互动于一体的综合性数字平台。其意义在于：

整合文旅资源：将分散的景点、酒店、美食、交通等信息进行数字化整合，为用户提供“一站式”查询服务。
提升游客体验：通过智能路线推荐、个性化内容推送、在线预订等功能，极大提升游客的出行便利性和满意度。
赋能文旅产业：为文旅商家提供线上展示和营销渠道，助力辽宁文旅产业的数字化转型和高质量发展。
塑造品牌形象：打造一个权威、便捷、友好的官方文旅门户，增强“辽宁文旅”品牌的线上影响力和吸引力。

2. 技术栈选型

本项目采用前后端分离的架构模式，确保系统的高性能、可维护性和可扩展性。

2.1 后端技术栈

核心框架：Spring Boot 2.7.x。提供了快速构建、自动配置、内嵌Web服务器等特性，极大提升了开发效率。
持久层框架：MyBatis-Plus 3.5.x。在MyBatis基础上进行了增强，提供了通用的CRUD操作、分页插件、代码生成器等，简化了数据库操作。
数据库：MySQL 8.0。作为核心业务的关系型数据库，存储用户、景点、订单等结构化数据。
缓存：Redis 7.x。用于缓存热点数据（如首页推荐景点）、用户会话（Spring Session）以及提升系统并发性能。
安全框架：Spring Security + JWT (JSON Web Token)。实现用户认证与授权，保障API接口的安全访问。
其他组件：
- Lombok：简化Java Bean的编写。
- Hibernate Validator：进行请求参数校验。
- Swagger / Knife4j：自动生成和可视化API文档。
- Logback：日志记录。

2.2 前端技术栈

核心框架：Vue.js 3.x (Composition API)。提供响应式、组件化的开发体验。
UI框架：Element Plus。基于Vue 3的桌面端组件库，提供丰富的UI组件，加速页面开发。
状态管理：Pinia。Vue官方推荐的状态管理库，替代Vuex，语法更简洁。
路由：Vue Router 4.x。
HTTP客户端：Axios。用于发起HTTP请求，与后端API进行交互。
地图服务：高德地图JavaScript API。用于实现景点地图展示、位置搜索、路线规划等LBS功能。

2.3 开发与部署

项目管理：Maven。
版本控制：Git。
容器化：Docker + Docker Compose。实现应用与环境的一键部署。
服务器：Linux (CentOS/Ubuntu) + Nginx (反向代理、静态资源服务)。

3. 系统设计与核心实现

3.1 系统架构设计

系统采用典型的分层架构，自下而上分为：

数据层：MySQL、Redis。
持久层：MyBatis-Plus，负责数据访问。
业务逻辑层：Service层，封装核心业务逻辑。
控制层：Controller层，接收前端请求，调用Service，返回JSON数据。
表现层：Vue.js构建的单页面应用(SPA)，通过Axios与后端交互。

前后端通过RESTful API进行通信，使用JWT进行无状态认证。

3.2 数据库设计（核心表举例）

景点表 (scenic_spot)：存储景点基本信息。

CREATE TABLE `scenic_spot` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键', `name` varchar(100) NOT NULL COMMENT '景点名称', `description` text COMMENT '景点描述', `address` varchar(200) COMMENT '详细地址', `latitude` decimal(10,8) COMMENT '纬度', `longitude` decimal(11,8) COMMENT '经度', `cover_image` varchar(500) COMMENT '封面图URL', `open_time` varchar(100) COMMENT '开放时间', `ticket_info` varchar(200) COMMENT '门票信息', `recommend_level` tinyint DEFAULT 0 COMMENT '推荐等级(0-5)', `view_count` int DEFAULT 0 COMMENT '浏览量', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_recommend` (`recommend_level`), KEY `idx_location` (`latitude`, `longitude`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='景点信息表';

用户表 (user)、路线表 (travel_route)、订单表 (order)等表结构类似，此处省略。

3.3 后端核心代码示例

1. 景点分页查询接口 (Controller)

@RestController @RequestMapping("/api/scenic") @Api(tags = "景点管理") public class ScenicSpotController { @Autowired private ScenicSpotService scenicSpotService; @GetMapping("/page") @ApiOperation("分页查询景点列表") public R<Page<ScenicSpotVO>> getScenicSpotPage( @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) String keyword, @RequestParam(required = false) Integer recommendLevel) { Page<ScenicSpotVO> page = scenicSpotService.pageQuery(pageNum, pageSize, keyword, recommendLevel); return R.ok(page); } }

2. 景点服务层实现 (Service)

@Service @Slf4j public class ScenicSpotServiceImpl extends ServiceImpl<ScenicSpotMapper, ScenicSpot> implements ScenicSpotService { @Autowired private RedisTemplate<String, Object> redisTemplate; private static final String CACHE_KEY_HOT_SPOTS = "scenic:hot:list"; @Override public Page<ScenicSpotVO> pageQuery(Integer pageNum, Integer pageSize, String keyword, Integer recommendLevel) { Page<ScenicSpot> page = new Page<>(pageNum, pageSize); LambdaQueryWrapper<ScenicSpot> queryWrapper = new LambdaQueryWrapper<>(); if (StringUtils.isNotBlank(keyword)) { queryWrapper.like(ScenicSpot::getName, keyword) .or().like(ScenicSpot::getDescription, keyword); } if (recommendLevel != null) { queryWrapper.ge(ScenicSpot::getRecommendLevel, recommendLevel); } queryWrapper.orderByDesc(ScenicSpot::getRecommendLevel, ScenicSpot::getViewCount); Page<ScenicSpot> spotPage = this.page(page, queryWrapper); // 转换为VO对象，可在此处进行数据脱敏、字段加工等 return spotPage.convert(ScenicSpotVO::fromEntity); } @Override @Cacheable(value = "scenic", key = "'hotList'", unless = "#result == null || #result.isEmpty()") public List<ScenicSpotVO> getHotSpots() { // 业务逻辑：查询推荐等级高且浏览量大的前10个景点 LambdaQueryWrapper<ScenicSpot> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.ge(ScenicSpot::getRecommendLevel, 4) .orderByDesc(ScenicSpot::getViewCount) .last("LIMIT 10"); List<ScenicSpot> list = this.list(queryWrapper); return list.stream().map(ScenicSpotVO::fromEntity).collect(Collectors.toList()); } }

3. 统一响应封装 (R)

@Data @NoArgsConstructor @AllArgsConstructor public class R<T> implements Serializable { private Integer code; private String msg; private T data; private Long timestamp; public static <T> R<T> ok() { return ok(null); } public static <T> R<T> ok(T data) { return new R<>(200, "success", data, System.currentTimeMillis()); } public static <T> R<T> error(String msg) { return new R<>(500, msg, null, System.currentTimeMillis()); } // ... 其他状态码封装 }

3.4 前端核心代码示例 (Vue 3 + Element Plus)

1. 景点列表页面组件 (ScenicList.vue)

<template> <div class="scenic-list"> <el-row :gutter="20"> <el-col :span="6" v-for="item in scenicList" :key="item.id"> <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="goDetail(item.id)"> <img :src="item.coverImage" class="cover-image" /> <div style="padding: 14px;"> <h3>{{ item.name }}</h3> <div class="bottom"> <el-rate v-model="item.recommendLevel" disabled show-score /> <span class="address">{{ item.address }}</span> </div> </div> </el-card> </el-col> </el-row> <el-pagination @current-change="handlePageChange" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"> </el-pagination> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { useRouter } from 'vue-router' import { getScenicPage } from '@/api/scenic' const router = useRouter() const scenicList = ref([]) const total = ref(0) const queryParams = ref({ pageNum: 1, pageSize: 12, keyword: '', recommendLevel: null }) const loadData = async () => { try { const res = await getScenicPage(queryParams.value) if (res.code === 200) { scenicList.value = res.data.records total.value = res.data.total } } catch (error) { console.error('加载景点列表失败:', error) } } const handlePageChange = (page) => { queryParams.value.pageNum = page loadData() } const goDetail = (id) => { router.push(`/scenic/detail/${id}`) } onMounted(() => { loadData() }) </script>

2. API请求封装 (api/scenic.js)

import request from '@/utils/request' export function getScenicPage(params) { return request({ url: '/api/scenic/page', method: 'get', params }) } export function getScenicDetail(id) { return request({ url: `/api/scenic/${id}`, method: 'get' }) }