基于NodeJS和Vue2实现一个PC端小红书

您所在的位置:网站首页 免费下载小红书美食 基于NodeJS和Vue2实现一个PC端小红书

基于NodeJS和Vue2实现一个PC端小红书

2023-06-24 13:37| 来源: 网络整理| 查看: 265

博客模式的购物一体系统(小红书)

源码下载

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

image.png

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

主要功能需求: 博客进行书籍或者美食的推荐,主要目的是引导链接购物,涉及返利,收益。 视频上传编辑,电商嵌入地址链接 基本功能: 前台: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)

预览

屏幕截图 2023-05-08 213826.png

image.png

如何运行

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

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

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

1、初始化 npm install 2、直接运行 或者 按开发模式的热编译运行

直接运行

node app.js

热更新

node start 项目效果预览 登录注册

image.png

image.png

主要内容 发现

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

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

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

image.png

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

image.png

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

image.png

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

image.png

发布

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

image.png

image.png

购物 潮品闲逛

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

image.png

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

image.png

购物小车

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

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

image.png

我的订单

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

image.png

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

image.png

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

image.png

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

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

image.png

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

image.png

普通用户管理界面

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

管理员管理界面 管理笔记

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

image.png

管理商品

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

image.png

image.png

返利报表

报表使用了echarts,具体内容可以看图 image.png

image.png



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3