数码产品网站建设策划书端口扫描站长工具
前言
偶尔会用小红书发一些笔记 闲来无事 想自己实现一个小红书
正好可以学习一下 帖子 留言 im 好友 推送 等功能
下面我们就从零 开发一个小红书
后台依旧用我们的会员系统的脚手架
演示 http://120.26.95.195:8889/
客户端我们使用uniapp
我们首先对主页进行一个分解
顶部我们使用 gui-switch-navigation 进行菜单的选择
主体部分 我们使用瀑布流
参考了框架瀑布流的实现方式 我大概了解到
他把页面分成左右部分 左右各一个列表
所以获取到数据时我们需要转换成一个二维数组 再进行遍历操作
uni.app.get('/notes', null, '', (res => {if (res.code == 200) {let notes = res.data.records;var lArr = this.noteList[0];var rArr = this.noteList[1];//填充数组[此处的 notes 数据应该来自与api接口数据]//数据格式见 "/data/data.js"for (var i = 0; i < notes.length; i++) {if (i % 2 == 0) {lArr.push(notes[i]);} else {rArr.push(notes[i]);}}this.noteList = [lArr, rArr];......后台的话我们创建notes表 进行生成
CREATE TABLE `business_note` (`NOTE_ID` varchar(32) NOT NULL COMMENT '笔记id',`NOTE_TITLE` varchar(255) DEFAULT NULL COMMENT '笔记标题',`NOTE_CONTENT` varchar(255) DEFAULT NULL COMMENT '笔记内容',`NOTE_CATEGORY` varchar(32) DEFAULT NULL COMMENT '类型id',`NOTE_CATEGORY_NAME` varchar(255) DEFAULT NULL COMMENT '笔记类型名',`NOTE_TYPE` tinyint(2) DEFAULT '1' COMMENT '1 图文 2视频 3文字',`AUTHOR_ID` varchar(32) DEFAULT NULL COMMENT '作者ID',`AUTHOR_AVATAR` varchar(255) DEFAULT NULL COMMENT '作者头像',`AUTHOR_NAME` varchar(255) DEFAULT NULL COMMENT '作者名字',`FIRST_PICTURE` varchar(255) DEFAULT NULL COMMENT '首图URL',`VERSION` bigint(10) DEFAULT '0' COMMENT '乐观锁字段',`DELETED` tinyint(2) DEFAULT '0' COMMENT '0正常 1删除',`CREATE_TIME` datetime DEFAULT NULL COMMENT '创建时间',`UPDATE_TIME` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',`IP_ADDRESS` varchar(255) DEFAULT NULL COMMENT 'ip地址',`IP_REAL_ADDRESS` varchar(255) DEFAULT NULL COMMENT '真实ip地址',`UP_COUNT` bigint(10) DEFAULT '0' COMMENT '点赞数',`STAR_COUNT` bigint(10) DEFAULT '0' COMMENT '收藏数',`NOTE_STATUS` tinyint(2) DEFAULT '0' COMMENT '0正常 1审核不通过 2限流',PRIMARY KEY (`NOTE_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='笔记表';除了基础信息外 我们还添加了点赞数 收藏数 帖子状态用于后期对帖子的管理
由于用户管理还未开发 我们首页的数据先保持一致 后续根据用户推送相应内容
主页还需完善 滑动到底部刷新 等 后面进行完善
代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs