从零用java实现 小红书 springboot vue uniapp (1)

前言

偶尔会用小红书发一些笔记 闲来无事 想自己实现一个小红书

正好可以学习一下 帖子 留言 im 好友 推送 等功能

下面我们就从零 开发一个小红书

后台依旧用我们的会员系统的脚手架
演示 http://120.26.95.195:8889/

客户端我们使用uniapp

我们首先对主页进行一个分解

顶部我们使用 gui-switch-navigation 进行菜单的选择

主体部分 我们使用瀑布流

参考了框架瀑布流的实现方式 我大概了解到

他把页面分成左右部分 左右各一个列表

所以获取到数据时我们需要转换成一个二维数组 再进行遍历操作

bash 复制代码
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表 进行生成

bash 复制代码
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

相关推荐
南尘NCA86661 小时前
企业微信防封防投诉拦截系统:从痛点解决到技术实现
java·网络·企业微信
怪兽20142 小时前
SQL优化手段有哪些
java·数据库·面试
ss2732 小时前
手写MyBatis第107弹:@MapperScan原理与SqlSessionTemplate线程安全机制
java·开发语言·后端·mybatis
Deschen2 小时前
设计模式-原型模式
java·设计模式·原型模式
麦麦鸡腿堡3 小时前
Java的动态绑定机制(重要)
java·开发语言·算法
それども3 小时前
SpringBootTest运行线程池被拒绝
java
2501_915909063 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106323 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909063 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007473 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview