博客模式的购物一体系统（小红书）

源码下载

地址：virtual_red: 使用Express框架完成的小红书后台(固定json数据)，超轻便，更环保 (gitee.com)

运行请看目录的：如何运行

主要功能需求：

• 博客进行书籍或者美食的推荐，主要目的是引导链接购物，涉及返利，收益。
• 视频上传编辑，电商嵌入地址链接
• 基本功能：
• 前台：1，博客主体视频推荐，2 引导购物
• 后台：3，商城（商品的管理） 4，返利管理（报表） 5 收益管理及展示（报表图等） 。

前排友情提示：

• 本项目暂时只是个精简快速体验版demo
• 后端使用nodeJS的express搭建，但并没有连接数据库，而是模拟api路径，将固定json数据返回
• 前端使用Vue2全家桶，UI使用elementUI
• 前端已经打包好，并且放置在public目录下，运行后浏览器输入localhost:3000/apifox.html可以查看api接口文档
• 完整后端也有，但是需要部署redis，docker，还需要centOS虚拟机，非常吃电脑性能
• 前端源代码可以查看：red: 使用Vue2和elementUI模仿的小红书 (gitee.com)
• 后端源代码可以查看：xiaolanshu: xiaolanshu (gitee.com)

预览

如何运行

在运行前，需要这些环境，如果没有，可以参考我提供的相关文章进行安装

• nodeJS 参考文章：NodeJS安装 NodeJS第一行代码 - 掘金 (juejin.cn)

有了node环境后，进入项目根目录执行以下提供的命令

1、初始化

npm install

2、直接运行 或者 按开发模式的热编译运行

直接运行

node app.js

热更新

node start

项目效果预览

登录注册

主要内容

发现

笔记支持视频笔记也支持图文笔记，视频使用了video.js来播放

登录之后就可以查看发现内容，里面都是些笔记小卡片，上方有切换内容的按钮，点击可以切换内容

上方还有搜索栏，使用搜索功能，也可以切换内容

可以点击小卡片查看博客笔记详情，可以进行点赞评论

笔记详情还可以点击返利促销按钮来查看博主推广的商品

推广的商品可以购买，推广商品会更便宜，购买后博主可以的到返利

发布

用户可以发布图文笔记也可以发布视频笔记

购物

潮品闲逛

购物一样可以查看商品小卡片，点击可以查看商品内容

商品内容这里可以将喜欢的商品添加到购物车，也可以选择数量然后添加到购物车

购物小车

在购物车可以删除不想要的商品，也可以更换商品数量，还可以批量对喜欢的商品进行结算

更可以分页查看购物车内容

我的订单

在订单界面，可以查看购买的商品，也可以对订单进行评论，当然，分页功能也是有的

我

这是个人中心界面，在这里可以查看自己的资料，也可以查看自己点赞收藏的笔记

点击修改资料按钮可以修改个人资料

点击头像上传按钮可以修改个人头像，当然，这里为了省事，把修改头像功能放在了修改资料那里

那么问题来了，为什么要有这个按钮，嘿嘿，为了好看

最后要说的是金额提现按钮，在返利促销购买的商品，会返利给博主，点击此按钮，会把待返利金额转化为余额

普通用户管理界面

普通用户和管理员用户的区别就是没有商品管理功能

管理员管理界面

管理笔记

在这里可以分页查看笔记，对笔记进行删除

管理商品

这里可以修改商品数据，也可以删除不要的商品

返利报表

报表使用了echarts，具体内容可以看图