# red **Repository Path**: AppOrGameDev/red ## Basic Information - **Project Name**: red - **Description**: 使用Vue2和elementUI模仿的小红书 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2024-01-20 - **Last Updated**: 2024-01-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > 博客模式的购物一体系统（小红书） # 主要功能需求： - 博客进行书籍或者美食的推荐，主要目的是引导链接购物，涉及返利，收益。 - 视频上传编辑，电商嵌入地址链接 - 基本功能： - 前台：1，博客主体视频推荐，2 引导购物 - 后台：3，商城（商品的管理） 4，返利管理（报表） 5 收益管理及展示（报表图等） 。 **前排友情提示：** - 此项目有一个轻量demo版可供体验，项目地址：[virtual_red: 使用Express框架完成的小红书后台(固定json数据)，超轻便，更环保 (gitee.com)](https://gitee.com/kang-zhenbin/virtual_red) - 后端源代码可以查看：[xiaolanshu: xiaolanshu (gitee.com)](https://gitee.com/xmjy717/xiaolanshu) **预览** ![屏幕截图 2023-05-08 213826.png](./markdown_img/预览01.png) ![屏幕截图](./markdown_img/预览02.png) # 如何运行 在运行前，需要这些环境，如果没有，可以参考我提供的相关文章进行安装 - nodeJS 参考文章：[NodeJS安装 NodeJS第一行代码 - 掘金 (juejin.cn)](https://juejin.cn/post/7128601942447620104) 有了node环境后，进入项目根目录执行以下提供的命令 ## 1、初始化 ``` npm install ``` ## 2、直接运行 或者 基于vue-cli脚手架的热编译运行 直接运行 ``` npm runserve ``` 基于vue-cli脚手架的热编译运行 ``` vue ui ``` 启动脚手架的图形化界面后，导入项目，进行热编译 # 项目效果预览 ## 登录注册 ![屏幕截图](./markdown_img/登录注册01.png) ![屏幕截图](./markdown_img/登录注册02.png) ## 主要内容 ### 发现 笔记支持`视频笔记`也支持`图文笔记`，视频使用了video.js来播放 登录之后就可以查看发现内容，里面都是些笔记小卡片，上方有切换内容的按钮，点击可以切换内容 上方还有搜索栏，使用搜索功能，也可以切换内容 ![屏幕截图](./markdown_img/发现01.png) 可以点击小卡片查看博客笔记详情，可以进行点赞评论 ![屏幕截图](./markdown_img/发现02.png) 笔记详情还可以点击`返利促销`按钮来查看博主推广的商品 ![屏幕截图](./markdown_img/发现03.png) 推广的商品可以购买，推广商品会更便宜，购买后博主可以的到返利 ![屏幕截图](./markdown_img/发现04.png) ### 发布 用户可以发布`图文笔记`也可以发布`视频笔记` ![屏幕截图](./markdown_img/发布01.png) ![屏幕截图](./markdown_img/发布02.png) ### 购物 #### 潮品闲逛 购物一样可以查看商品小卡片，点击可以查看商品内容 ![屏幕截图](./markdown_img/潮品闲逛01.png) 商品内容这里可以将喜欢的商品添加到购物车，也可以选择数量然后添加到购物车 ![屏幕截图](./markdown_img/购物小车01.png) #### 购物小车 在购物车可以删除不想要的商品，也可以更换商品数量，还可以批量对喜欢的商品进行结算 更可以分页查看购物车内容 ![屏幕截图](./markdown_img/购物小车02.png) #### 我的订单 在订单界面，可以查看购买的商品，也可以对订单进行评论，当然，分页功能也是有的 ![屏幕截图](./markdown_img/我的订单01.png) ### 我 这是个人中心界面，在这里可以查看自己的资料，也可以查看自己点赞收藏的笔记 ![屏幕截图](./markdown_img/我01.png) 点击`修改资料`按钮可以修改个人资料 ![屏幕截图](./markdown_img/我02.png) 点击`头像上传`按钮可以修改个人头像，当然，这里为了省事，把修改头像功能放在了修改资料那里 ~~那么问题来了，为什么要有这个按钮，嘿嘿，为了好看~~ ![屏幕截图](./markdown_img/我03.png) 最后要说的是`金额提现按钮`，在返利促销购买的商品，会返利给博主，点击此按钮，会把待返利金额转化为余额 ![屏幕截图](./markdown_img/普通用户管理界面01.png) ### 普通用户管理界面 普通用户和管理员用户的区别就是没有商品管理功能 ### 管理员管理界面 #### 管理笔记 在这里可以分页查看笔记，对笔记进行删除 ![屏幕截图](./markdown_img/管理笔记01.png) #### 管理商品 这里可以修改商品数据，也可以删除不要的商品 ![屏幕截图](./markdown_img/管理商品01.png) ![屏幕截图](./markdown_img/返利报表01.png) #### 返利报表 报表使用了echarts，具体内容可以看图 ![屏幕截图](./markdown_img/返利报表02.png) ![屏幕截图](./markdown_img/返利报表03.png)