# red **Repository Path**: lovecross/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**: 2023-07-30 - **Last Updated**: 2023-07-30 ## 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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce26cf2f13604b4f8c698cc88beb26b2~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72156109407c49d69eebf87c659e1dc4~tplv-k3u1fbpfcp-watermark.image?) # 如何运行 在运行前，需要这些环境，如果没有，可以参考我提供的相关文章进行安装 - nodeJS 参考文章：[NodeJS安装 NodeJS第一行代码 - 掘金 (juejin.cn)](https://juejin.cn/post/7128601942447620104) 有了node环境后，进入项目根目录执行以下提供的命令 ## 1、初始化 ``` npm install ``` ## 2、直接运行 或者 基于vue-cli脚手架的热编译运行 直接运行 ``` npm runserve ``` 基于vue-cli脚手架的热编译运行 ``` vue ui ``` 启动脚手架的图形化界面后，导入项目，进行热编译 # 项目效果预览 ## 登录注册 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53251ac7c65049fe81ea62650bf0f0ff~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a39bb47126844913b1173f9a70f73af4~tplv-k3u1fbpfcp-watermark.image?) ## 主要内容 ### 发现 笔记支持`视频笔记`也支持`图文笔记`，视频使用了video.js来播放 登录之后就可以查看发现内容，里面都是些笔记小卡片，上方有切换内容的按钮，点击可以切换内容 上方还有搜索栏，使用搜索功能，也可以切换内容 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7cdf510f83cc4c87ad9e5c82eb039046~tplv-k3u1fbpfcp-watermark.image?) 可以点击小卡片查看博客笔记详情，可以进行点赞评论 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/481035616ef94d5883b35eefabdca056~tplv-k3u1fbpfcp-watermark.image?) 笔记详情还可以点击`返利促销`按钮来查看博主推广的商品 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a673a3cab6a04e1a8510da1c68624e8f~tplv-k3u1fbpfcp-watermark.image?) 推广的商品可以购买，推广商品会更便宜，购买后博主可以的到返利 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56a32cc689a04e6892f41b83462652aa~tplv-k3u1fbpfcp-watermark.image?) ### 发布 用户可以发布`图文笔记`也可以发布`视频笔记` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc32003f492540e29e975cddb699ae57~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a87d1f67fda048df99819a1bd826d0de~tplv-k3u1fbpfcp-watermark.image?) ### 购物 #### 潮品闲逛 购物一样可以查看商品小卡片，点击可以查看商品内容 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bb70c62f4fb439fa7edf2c85314de4e~tplv-k3u1fbpfcp-watermark.image?) 商品内容这里可以将喜欢的商品添加到购物车，也可以选择数量然后添加到购物车 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/469ade18c06348868b43d6065ee5b3a6~tplv-k3u1fbpfcp-watermark.image?) #### 购物小车 在购物车可以删除不想要的商品，也可以更换商品数量，还可以批量对喜欢的商品进行结算 更可以分页查看购物车内容 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44c382c9cda94be29e75d959fe3788eb~tplv-k3u1fbpfcp-watermark.image?) #### 我的订单 在订单界面，可以查看购买的商品，也可以对订单进行评论，当然，分页功能也是有的 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/224bce83efa2402584e2d71598fa5709~tplv-k3u1fbpfcp-watermark.image?) ### 我 这是个人中心界面，在这里可以查看自己的资料，也可以查看自己点赞收藏的笔记 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ac9b4e0a9e847da892962a873266c3a~tplv-k3u1fbpfcp-watermark.image?) 点击`修改资料`按钮可以修改个人资料 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d17ecdd497424c63b0aacb3206218d6b~tplv-k3u1fbpfcp-watermark.image?) 点击`头像上传`按钮可以修改个人头像，当然，这里为了省事，把修改头像功能放在了修改资料那里 ~~那么问题来了，为什么要有这个按钮，嘿嘿，为了好看~~ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce294bfdc6e84ed1866902305985288a~tplv-k3u1fbpfcp-watermark.image?) 最后要说的是`金额提现按钮`，在返利促销购买的商品，会返利给博主，点击此按钮，会把待返利金额转化为余额 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c166511e5e484d37a5bf19b0d80b8f2b~tplv-k3u1fbpfcp-watermark.image?) ### 普通用户管理界面 普通用户和管理员用户的区别就是没有商品管理功能 ### 管理员管理界面 #### 管理笔记 在这里可以分页查看笔记，对笔记进行删除 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab43906f39a549cba5e2406d8a03b645~tplv-k3u1fbpfcp-watermark.image?) #### 管理商品 这里可以修改商品数据，也可以删除不要的商品 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00c9c73f29814aeaac34260a72ec7574~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfd754ce2f5a480a872c2cbcb72bdca0~tplv-k3u1fbpfcp-watermark.image?) #### 返利报表 报表使用了echarts，具体内容可以看图 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b8844e2e0824f479ec65a22b4ff87d9~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/963549125e8f4abda3ad1519f654a871~tplv-k3u1fbpfcp-watermark.image?)