旅游景点推荐系统

Name: 旅游景点推荐系统
Brand: AI源码
SKU: travel-spot-web-pc
Price: 300 CNY
Availability: InStock

这是一个完整的旅游景点推荐管理系统，采用前后端分离架构，实现了景点管理、城市管理、景点分类、新闻资讯、公告通知、用户收藏等核心功能。系统支持管理员和普通用户两种角色，适合作为Vue3全栈开发学习项目或计算机设计参考。

评分:4.8/5.0

销量:22

发布:2025/12/2

难度:L2 进阶级

💬 联系咨询观看视频介绍

✓永久使用权限

✓免费更新维护

✓技术支持服务

项目封面

项目说明

旅游景点推荐系统

项目简介

这是一个完整的旅游景点推荐管理系统，采用前后端分离架构，实现了景点管理、城市管理、景点分类、新闻资讯、公告通知、用户收藏等核心功能。系统支持管理员和普通用户两种角色，适合作为Vue3全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql / mysql2
身份认证	jsonwebtoken (JWT)
密码加密	bcryptjs
文件上传	multer
跨域处理	cors
环境变量	dotenv
热重载	nodemon

前端技术

技术	版本/说明
前端框架	Vue 3.5.10
构建工具	Vite 5.4.19
UI组件库	Element Plus 2.9.10
路由管理	Vue Router 4.5.0
状态管理	Pinia 2.3.1
HTTP请求	Axios 1.9.0
图表库	ECharts 5.6.0
日期处理	Day.js 1.11.13
富文本编辑器	Quill 2.0.3
CSS预处理器	Sass
3D效果	Three.js + Vanta
Markdown渲染	marked + highlight.js

项目特点

前后端分离：后端提供RESTful API，前端独立开发部署
双角色系统：支持管理员和普通用户两种角色
景点推荐：按城市、分类浏览景点，支持收藏功能
地图定位：景点包含经纬度信息，支持地图展示
数据可视化：管理后台集成ECharts图表展示
富文本支持：支持富文本景点详情编辑
登录日志：记录用户登录历史

功能模块

管理员端功能

1. 首页仪表盘 (`admin/Dashboard.vue`)

数据统计概览
图表展示

2. 轮播图管理 (`admin/Banner.vue`)

轮播图列表
新增/编辑/删除轮播图
状态管理（启用/禁用）

3. 城市管理 (`admin/City.vue`)

城市列表
新增/编辑/删除城市
省份关联

4. 景点分类管理 (`admin/SpotCate.vue`)

分类列表
新增/编辑/删除分类

5. 景点管理 (`admin/Spot.vue`)

景点列表
新增/编辑/删除景点
景点图片上传
富文本详情编辑
关联城市和分类
经纬度设置
上下架管理

6. 新闻管理 (`admin/News.vue`)

新闻列表
新增/编辑/删除新闻
新闻分类管理
发布状态管理

7. 公告管理 (`admin/Notice.vue`)

公告列表
新增/编辑/删除公告
公告类型管理
发布状态管理

8. 收藏管理 (`admin/Star.vue`)

用户收藏记录列表

9. 用户管理 (`admin/User.vue`)

用户列表
用户信息查看
用户状态管理

10. 个人资料 (`admin/Profile.vue`)

管理员信息编辑
密码修改

用户端功能

1. 首页 (`user/Home.vue`)

轮播图展示
热门景点推荐
景点分类导航

2. 景点浏览 (`user/Spot.vue`)

景点列表
按城市筛选
按分类筛选
搜索功能

3. 景点详情 (`user/SpotDetail.vue`)

景点图片展示
景点详细信息
地址和地图
收藏功能

4. 新闻资讯 (`user/News.vue`)

新闻列表
新闻详情 (user/newsDetail.vue)

5. 公告通知 (`user/Notice.vue`)

公告列表
公告详情

6. 我的收藏 (`user/MyFavorites.vue`)

收藏景点列表
取消收藏

7. 个人资料 (`user/Profile.vue`)

用户信息编辑
密码修改

项目结构

travel-spot-web-pc/
├── express/                        # 后端服务（Express + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── config/
│   │   ├── db.js                   # 数据库配置
│   │   └── index.js                # 全局配置
│   ├── controllers/                # 控制器
│   ├── public/
│   │   └── images/                 # 上传图片存储
│   ├── routes/
│   │   ├── admin/                  # 管理端API
│   │   │   ├── alldata.js          # 统计数据接口
│   │   │   ├── banner.js           # 轮播图接口
│   │   │   ├── city.js             # 城市接口
│   │   │   ├── news.js             # 新闻接口
│   │   │   ├── notice.js           # 公告接口
│   │   │   ├── spot.js             # 景点接口
│   │   │   ├── spotCate.js         # 景点分类接口
│   │   │   └── star.js             # 收藏接口
│   │   ├── user/                   # 用户端API
│   │   │   ├── banner.js           # 轮播图接口
│   │   │   ├── city.js             # 城市接口
│   │   │   ├── news.js             # 新闻接口
│   │   │   ├── notice.js           # 公告接口
│   │   │   ├── spot.js             # 景点接口
│   │   │   ├── spotCate.js         # 景点分类接口
│   │   │   └── star.js             # 收藏接口
│   │   ├── index.js                # 路由入口
│   │   ├── public-user.js          # 公共用户接口
│   │   └── upload.js               # 文件上传
│   ├── services/                   # 业务逻辑层
│   ├── test/                       # 测试文件
│   ├── util/                       # 工具函数
│   ├── app.js                      # Express应用配置
│   └── package.json
│
├── web/                            # 前端（Vue3 + Element Plus）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── router/                 # 路由配置
│   │   ├── stores/                 # Pinia状态管理
│   │   ├── styles/                 # 样式文件
│   │   ├── views/                  # 页面视图
│   │   │   ├── admin/              # 管理员页面
│   │   │   │   ├── Banner.vue      # 轮播图管理
│   │   │   │   ├── City.vue        # 城市管理
│   │   │   │   ├── Dashboard.vue   # 仪表盘
│   │   │   │   ├── Layout.vue      # 管理员布局
│   │   │   │   ├── News.vue        # 新闻管理
│   │   │   │   ├── Notice.vue      # 公告管理
│   │   │   │   ├── Profile.vue     # 个人资料
│   │   │   │   ├── Spot.vue        # 景点管理
│   │   │   │   ├── SpotCate.vue    # 景点分类
│   │   │   │   ├── Star.vue        # 收藏管理
│   │   │   │   └── User.vue        # 用户管理
│   │   │   ├── user/               # 用户页面
│   │   │   │   ├── Home.vue        # 首页
│   │   │   │   ├── Layout.vue      # 用户布局
│   │   │   │   ├── MyFavorites.vue # 我的收藏
│   │   │   │   ├── News.vue        # 新闻列表
│   │   │   │   ├── newsDetail.vue  # 新闻详情
│   │   │   │   ├── Notice.vue      # 公告列表
│   │   │   │   ├── Profile.vue     # 个人资料
│   │   │   │   ├── Spot.vue        # 景点列表
│   │   │   │   └── SpotDetail.vue  # 景点详情
│   │   │   ├── Login.vue           # 登录页
│   │   │   └── Register.vue        # 注册页
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vite.config.js              # Vite配置
│
├── tourism_management.sql          # 数据库SQL文件
├── 数据库创建方法.md                # 数据库创建说明
├── mysql操作手册.md                 # MySQL操作说明
├── mysql.sh                        # MySQL脚本
├── 演示视频.mp4                     # 功能演示视频
└── 新 - 运行必读.docx              # 运行说明文档

数据模型

用户表 (user)

{
  id: bigint,                 // 用户ID
  username: varchar(50),      // 用户名（唯一）
  password: varchar(100),     // 密码（加密）
  name: varchar(50),          // 姓名
  phone: varchar(20),         // 手机号
  email: varchar(100),        // 邮箱
  role: varchar(20),          // 角色：admin-管理员，user-用户
  avatar: varchar(1000),      // 头像
  status: varchar(20),        // 状态：正常、禁用
  last_login: datetime,       // 最后登录时间
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

景点表 (spot)

{
  id: int,                    // 景点ID
  title: varchar(100),        // 景点名称
  spotCateTitle: varchar(50), // 景点类型名称
  spotCateId: int,            // 景点类型ID
  city: varchar(50),          // 所在城市
  cityId: int,                // 城市ID
  cover: varchar(255),        // 景点图片
  rating: decimal(2,1),       // 评分
  collectCount: int,          // 收藏数
  content: longtext,          // 景点描述（富文本）
  status: int,                // 状态（0下架 1上架）
  address: varchar(255),      // 景点地址
  lat: varchar(255),          // 纬度
  lng: varchar(255),          // 经度
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

景点分类表 (spotCate)

{
  id: int,                    // 分类ID
  title: varchar(50),         // 类型名称
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

城市表 (city)

{
  id: int,                    // 城市ID
  title: varchar(50),         // 城市名称
  province: varchar(50),      // 省份
  country: varchar(50),       // 国家
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

轮播图表 (banner)

{
  id: bigint,                 // 轮播图ID
  title: varchar(100),        // 标题
  image_url: varchar(200),    // 图片地址
  link: varchar(200),         // 链接地址
  sort: int,                  // 排序号
  status: varchar(20),        // 状态：启用、禁用
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

新闻表 (news)

{
  id: bigint,                 // 新闻ID
  title: varchar(100),        // 标题
  content: text,              // 内容
  cover: varchar(200),        // 封面图
  category: varchar(50),      // 分类
  status: varchar(20),        // 状态：草稿、发布
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

公告表 (notice)

{
  id: bigint,                 // 公告ID
  title: varchar(100),        // 标题
  content: text,              // 内容
  type: varchar(20),          // 类型：通知、公告
  status: varchar(20),        // 状态：草稿、发布
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

收藏表 (star)

{
  id: int,                    // 收藏ID
  user_id: int,               // 用户ID
  sp_id: int,                 // 景点ID
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

登录日志表 (login_log)

{
  id: int,                    // 日志ID
  user_id: int,               // 用户ID
  login_time: datetime,       // 登录时间
  login_ip: varchar(45),      // 登录IP
  role: varchar(50)           // 用户角色
}

运行环境要求

后端环境

Node.js 16.0+
MySQL 5.7+
npm 或 pnpm

前端环境

Node.js 16.0+
npm 或 pnpm
现代浏览器（Chrome、Firefox、Edge等）

快速开始

1. 数据库配置

创建MySQL数据库

CREATE DATABASE tourism_management CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

导入数据库文件

mysql -u root -p tourism_management < tourism_management.sql

修改数据库配置编辑 express/config/db.js：

var db = mysql.createConnection({
  database: 'tourism_management', // 数据库名称
  port: '3306', // 端口号
  host: 'localhost', // 主机地址
  user: 'root', // 用户名
  password: 'root', // 密码（修改为你的密码）
});

2. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install
# 或使用 pnpm
pnpm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:5002

3. 启动前端

# 进入前端目录
cd web

# 安装依赖
npm install
# 或使用 pnpm
pnpm install

# 启动开发服务器
npm run dev

前端默认运行在 http://localhost:5173

默认账号

角色	用户名	密码	说明
管理员	admin	123456	拥有所有管理权限
普通用户	zhangsan	123456	普通用户权限

预置测试数据

景点分类

分类名称
自然风光
历史古迹
主题公园
城市观光

城市数据

城市	省份
北京	北京市
杭州市	浙江省
阿坝藏族羌族自治州	四川省
张家界市	湖南省
黄山市	安徽省

景点数据

景点名称	分类	城市	评分
故宫博物院	历史古迹	北京	4.9
西湖	自然风光	杭州市	4.7
九寨沟	自然风光	阿坝藏族羌族自治州	4.9
张家界国家森林公园	自然风光	张家界市	4.6
黄山	自然风光	黄山市	4.8

界面预览

项目包含演示视频文件：

演示视频.mp4 - 系统完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

地图集成：接入高德/百度地图API，展示景点位置
评论系统：添加景点评论和评分功能
行程规划：根据用户收藏生成旅行路线
天气查询：集成天气API，显示景点天气
门票预订：添加景点门票预订功能
攻略分享：用户发布旅游攻略
智能推荐：基于用户偏好推荐景点
移动端适配：开发小程序或H5版本

注意事项

本项目为学习演示项目，部分数据为模拟数据
生产环境部署需要配置HTTPS
建议定期备份数据库数据
密码使用bcrypt加密存储

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 登录后页面空白？

A: 检查用户角色是否正确，确认路由配置

许可证

本项目仅供学习交流使用，请勿用于商业用途。

技术分类

Node Vue3 MySQL

包含内容

✓完整源码

✓项目说明文档

✓演示材料

适用人群

学习参考与二次开发

关于 AI源码

AI源码专注优质项目源码分享，提供完整源码、详细文档与技术支持，助力源码设计与课程作业。

•QQ: 861077046

•邮箱: 861077046@qq.com

•已服务 22+ 位用户

立即咨询

旅游景点推荐系统

项目封面

项目说明

旅游景点推荐系统

项目简介

技术栈

后端技术

前端技术

项目特点

功能模块

管理员端功能

1. 首页仪表盘 (admin/Dashboard.vue)

2. 轮播图管理 (admin/Banner.vue)

3. 城市管理 (admin/City.vue)

4. 景点分类管理 (admin/SpotCate.vue)

5. 景点管理 (admin/Spot.vue)

6. 新闻管理 (admin/News.vue)

7. 公告管理 (admin/Notice.vue)

8. 收藏管理 (admin/Star.vue)

9. 用户管理 (admin/User.vue)

10. 个人资料 (admin/Profile.vue)

用户端功能

1. 首页 (user/Home.vue)

2. 景点浏览 (user/Spot.vue)

3. 景点详情 (user/SpotDetail.vue)

4. 新闻资讯 (user/News.vue)

5. 公告通知 (user/Notice.vue)

6. 我的收藏 (user/MyFavorites.vue)

7. 个人资料 (user/Profile.vue)

项目结构

数据模型

用户表 (user)

景点表 (spot)

景点分类表 (spotCate)

城市表 (city)

轮播图表 (banner)

新闻表 (news)

公告表 (notice)

收藏表 (star)

登录日志表 (login_log)

运行环境要求

后端环境

前端环境

快速开始

1. 数据库配置

2. 启动后端服务

3. 启动前端

默认账号

预置测试数据

景点分类

城市数据

景点数据

界面预览

扩展建议

注意事项

常见问题

Q: 数据库连接失败？

Q: 图片无法显示？

Q: 登录后页面空白？

许可证

技术分类

包含内容

适用人群

关于 AI源码

相关推荐

本地生活小程序

电影购票网站

家乡介绍小程序

乡村振兴三农小程序

图书借阅小程序

垃圾上门回收小程序

关于 AI源码

1. 首页仪表盘 (`admin/Dashboard.vue`)

2. 轮播图管理 (`admin/Banner.vue`)

3. 城市管理 (`admin/City.vue`)

4. 景点分类管理 (`admin/SpotCate.vue`)

5. 景点管理 (`admin/Spot.vue`)

6. 新闻管理 (`admin/News.vue`)

7. 公告管理 (`admin/Notice.vue`)

8. 收藏管理 (`admin/Star.vue`)

9. 用户管理 (`admin/User.vue`)

10. 个人资料 (`admin/Profile.vue`)

1. 首页 (`user/Home.vue`)

2. 景点浏览 (`user/Spot.vue`)

3. 景点详情 (`user/SpotDetail.vue`)

4. 新闻资讯 (`user/News.vue`)

5. 公告通知 (`user/Notice.vue`)

6. 我的收藏 (`user/MyFavorites.vue`)

7. 个人资料 (`user/Profile.vue`)