旅游攻略系统产品系统

某旅游新媒体团队运营着一款面向自由行游客的攻略小程序，目标是持续提供新鲜、实用的目的地指南。团队使用一套轻量级内容管理系统（CMS），支撑从内容生产到用户浏览的全流程。

后台管理：多人协作，内容可控
团队设编辑与主编两个角色，系统通过用户权限控制实现分工：编辑负责撰写与更新，主编拥有审核、发布及运营管理权。

新增与发布：编辑小张准备推出一篇“杭州西湖小众徒步路线”攻略。他登录后台，点击“添加文章”，插入图文、路线地图和周边美食推荐卡片，填写标题、标签后保存为草稿并提交审核。主编收到待审通知，预览后确认无误，一键“发布”至小程序。同时，主编进入“轮播图管理”，点击“添加轮播图”，将攻略封面设置为首页轮播位，并设置一周有效期以提升曝光。

更新与下架：三个月后，部分路线因施工调整，编辑对原文进行修订，重新提交审核后自动更新。若某篇合作推广文章到期，主编直接在文章列表点击“删除”，将其彻底移除，确保平台内容时效性。

前端展示：精准触达，提升粘性
后台发布的文章即时同步至小程序。用户小李计划去杭州，打开小程序，首页轮播图正展示“西湖小众路线”，点击进入阅读。文章结构清晰，包含分段路线、避坑提示及一键导航入口。阅读后，底部推荐了“灵隐周边探秘”等关联文章，他继续浏览并收藏，对平台产生信赖。

场景价值
这套功能支撑了团队的高效协作：权限分明保障内容安全；文章增删实现内容快速迭代；轮播图灵活运营热点；小程序纯净呈现，让用户轻松获取可靠攻略，形成“后台生产—前台消费”的良性闭环。

本系统是为旅游内容团队量身打造的轻量级内容管理及展示平台，核心功能涵盖后台内容生产与小程序端用户展示，实现攻略的快速发布、灵活运营与高效触达。
一、后台管理系统：高效协作，精准运营
后台采用多角色权限管理，确保内容生产流程规范、安全。
1. 用户权限控制
系统支持自定义角色与权限，典型配置包括：
编辑：拥有文章撰写、编辑、提交审核权限，但无法直接发布或删除。
主编：拥有文章审核、发布、删除及轮播图管理的全部权限。
游客：仅限小程序端访问，无后台操作权限。
权限细粒度高，可根据团队实际需求灵活分配，保障内容安全。
2. 文章管理
添加文章：支持富文本编辑，可插入图文、视频、地图定位、景点卡片、餐厅推荐等丰富元素，打造沉浸式攻略内容。填写标题、封面图、标签、摘要等信息后，可保存为草稿或提交审核。
编辑与修订：已发布文章支持随时编辑，新版本提交后需经主编审核方可更新，确保内容准确。
删除文章：支持单篇或批量删除，已删除内容从小程序端自动下架，保持内容时效性。
3. 轮播图管理
添加轮播图：上传图片并绑定目标文章或链接，可设置轮播标题、展示顺序及有效期（如“一周内有效”）。发布后立即在首页轮播位展示，适用于热点推荐、专题推广等运营场景。
删除轮播图：支持手动删除或到期自动失效，运营位随时调整，灵活配合内容策略。
二、小程序端展示：纯净阅读，流畅体验
小程序作为内容分发前端，将后台发布的文章以最佳体验呈现给用户。
1. 首页轮播图
后台配置的轮播图在小程序首页醒目位置自动展示，用户点击即可进入对应文章详情，实现热点内容快速引流。
2. 文章列表与详情
列表页：按分类、标签或发布时间展示文章封面、标题、摘要，支持下拉刷新、上滑加载更多。
详情页：图文混排，支持图片放大、视频播放、地图导航跳转、外部链接打开等功能，提供沉浸式阅读体验。
三、系统价值
团队协同：权限分明，内容生产流程规范。

本系统由个人独立开发，采用前后端分离架构。前端基于 Vue 2 搭建单页应用，使用 Ant Design of Vue 构建后台界面，通过 axios 与后端交互；后端基于 Node.js + Express 提供 RESTful API，数据库使用 MySQL 存储用户、文章、轮播图及权限数据。
技术栈与架构
前端：Vue 2 + Vue Router + Vuex + Ant Design of Vue + axios
后端：Node.js + Express + JWT + Sequelize
数据库：MySQL
认证：JWT 无状态认证
实现亮点
前后端分离：独立开发部署，提升效率与可维护性。
RESTful API 设计：接口语义清晰，便于调用与迭代。
JWT 认证：无状态、跨域友好，适合分布式部署。
RBAC 权限模型：基于角色的权限控制，灵活分配操作范围。
难点与解决方案：用户权限与动态路由菜单
核心难点是实现不同角色登录后显示不同菜单，且 URL 直接访问需拦截。解决方案：
后端权限设计：数据库设计用户、角色、权限表，登录接口返回用户权限标识列表（如 article:add）。
前端动态路由
定义静态路由（登录页、404）和动态路由（需权限页面，meta 标记所需权限）。
路由全局前置守卫中，根据权限列表通过 router.addRoutes() 动态添加可访问路由，并将权限存入 Vuex。
侧边栏菜单基于权限列表递归生成，与动态路由同步。
按钮级权限控制：通过自定义指令控制页面内操作按钮的显示，实现细粒度权限管理。
该方案使权限变更仅需修改数据库配置，前端自动适配，无需重新发布，大幅提升系统灵活性与可维护性。