# travel_tips **Repository Path**: mrlib/travel_tips ## Basic Information - **Project Name**: travel_tips - **Description**: 这是一个关于旅游攻略的平台,包括移动端、服务端和管理端 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-10-09 - **Last Updated**: 2023-10-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 该项目包括 ## 移动端 travel_tips_app #### 介绍 这是一款服务于旅游管理平台的用户端App系统,主要是为用户提供旅游管理平台移动端的使用,主要有浏览游记、点赞收藏评论游记、游记搜索、位置定位、文章和用户推荐、发布游记、设置个人资料等功能。 #### 技术栈 Vue3+Vite+Vant4+Axios+Pinia+Scss+Vue-Router #### 主要成果 * 控制件处理模块主要是对常用的一些处理方法进行封装,主要有图片压缩、上传文件到COS、防抖函数、Mitt插件实现Event-Bus事件总线、公用定位、对token进行base64加密、封装请求拦截器和响应拦截器; * 路由模块主要是进行页面路由的配置和实现路由守卫和重定向; * 首页瀑布流主要是竖直平铺排列各种图片和文章模块大小不对称的游记,供用户上拉加载游记和下拉刷新页面; * 关键词搜索模块有利用localStorage存储的搜索历史记录和展示了实时搜索列表; * 发布游记页面实现了多图片上传功能,用户可以用腾讯地图API服务定位游玩地点,百度AI关键词识别会根据用户输入的文章内容来分析并提取出标签关键词; * 登录模块实现了可以利用账号和密码的方式登录,也可以用手机号和验证码的方式登录,也提供了忘记密码和重设密码的功能。 #### 项目截图 1. 登录页 ![](./travel_tips_app/public/旅游攻略平台移动端登录页.png) 2. 首页 ![](./travel_tips_app/public/旅游攻略平台移动端首页.png) 3. 首页导航页 ![](./travel_tips_app/public/旅游攻略平台移动端导航页.png) 4. 首页搜索页 ![](./travel_tips_app/public/旅游攻略平台移动端搜索页.png) 5. 首页搜索结果页 ![](./travel_tips_app/public/旅游攻略平台移动端搜索结果页.png) 6. 游记详情页 ![](./travel_tips_app/public/旅游攻略平台移动端详情页.png) 7. 目的地页 ![](./travel_tips_app/public/旅游攻略平台移动端目的地页.png) 8. 搜索目的地页 ![](./travel_tips_app/public/旅游攻略平台移动端搜索目的地页.png) 9. 关注页 ![](./travel_tips_app/public/旅游攻略平台移动端关注页.png) 10. 发布页 ![](./travel_tips_app/public/旅游攻略平台移动端发布页.png) 11. 腾讯地图定位页 ![](./travel_tips_app/public/旅游攻略平台移动端腾讯地图定位页.png) 12. 我的页 ![](./travel_tips_app/public/旅游攻略平台移动端我的页.png) 13. 编辑资料页 ![](./travel_tips_app/public/旅游攻略平台移动端编辑资料页.png) 14. 设置密码页 ![](./travel_tips_app/public/旅游攻略平台移动端设置密码页.png) ## 服务端 travel_tips_node #### 介绍 这是一款服务于旅游管理平台的后端系统,主要是为旅游管理平台App提供实现接口,可以用于操作数据库数据,并提供数据给旅游管理平台的前端。 #### 技术栈 NodeJS+Koa2+MongoDB #### 主要成果 * 路由与接口模块主要是实现首页接口、文章接口、用户接口和目的地接口的逻辑功能; * token主要使用basicAuth方法生成,并用jsonwebtoken加密和验证token; * MongoDB数据集用mongoose的model方法生成每个数据集的模型; * 主要封装全局异常处理中间件、公用参数校验、给前端返回的响应数据处理、上传图片裁剪方法、公用连表查; * 腾讯云COS对象存储桶用的是cos-nodejs-sdk-v5插件,主要用于存储用户上传的图片数据; * 短信验证码功能调用的是阿里云短信验证服务的接口,主要用于用户登录和修改密码的验证; * 百度AI关键词提取调用的是百度智能云的AI接口,主要用于用户发布游记的标签关键词提取; * 腾讯地图服务调用了腾讯地图的API接口,主要用于用户发布游记的地位服务。 #### 接口文档 1. 管理端接口文档 https://jiayuanwu.gitee.io/website/node/management-interface.html 2. 移动端接口文档 https://jiayuanwu.gitee.io/website/node/mobile-interface.html ## 管理端 travel_tips_admin #### 介绍 这是一款服务于旅游管理平台的管理端PC系统,主要有图表和地图等各种形式统计用户端的用户、游记文章、热度、性别占比和各省发布数等等各种数据、审核用户发表的游记文章、管理游记文章、管理管理员和用户等功能。 #### 技术栈 Vue2+ElementPlus+Vite+Vue-Router+Vuex+Axios+Echarts+Scss #### 主要成果 * 利用Echarts插件进行用户、游记文章、热度、性别占比和各省发布数等等各种数据的统计; * 审核通过或者不通过用户发表的游记文章,并且可以对游记文章进行编辑和删除等操作; * 可以通过标题或内容的关键字来对文章进行检索,也可以对文章进行导出为excel和打印成pdf等操作; * 可以对管理员列表进行分类查询,也可添加、修改和删除管理员和用户。 #### 项目截图 1. 登录页 ![](./travel_tips_admin/public/旅游攻略平台管理端登录页.png) 2. 首页 ![](./travel_tips_admin/public/旅游攻略平台管理端首页.png) 3. 文章审核列表 ![](./travel_tips_admin/public/旅游攻略平台管理端审核列表.png) 4. 文章审核不通过列表 ![](./travel_tips_admin/public/旅游攻略平台管理端不通过列表.png) 5. 文章列表 ![](./travel_tips_admin/public/旅游攻略平台管理端文章列表.png) 6. 导航列表 ![](./travel_tips_admin/public/旅游攻略平台管理端导航列表.png) 7. 当地列表 ![](./travel_tips_admin/public/旅游攻略平台管理端当地列表.png) 8. 管理员列表 ![](./travel_tips_admin/public/旅游攻略平台管理端管理员列表.png) 9. 用户列表 ![](./travel_tips_admin/public/旅游攻略平台管理端用户列表.png)