当前位置:网站首页>文章列表的显示 以及创建文章 还有文章详情的基本
文章列表的显示 以及创建文章 还有文章详情的基本
2022-08-03 08:30:00 【我叫LiLi】
第一步:在render之前设置一个状态state 在点击我的文章按钮得时候绑定事件 执行一个函数进行如果Tab=1 样式为高亮 当点击喜欢文章得时候 tab为2 样式为高亮
进行高亮事件
第二步:在我默认一加载得时候需要默认显示我的文章
思路:
1:在mapdispatch 添加两个获取作者得文章还有获取作者喜欢得文章 参数为用户名username 默认获取第一页
2:在action里面写一下这两个action
3:在用户中心刚刚加载得时候也可以载DIdmount生命周期里面获取用户得文章this.props.getArticleByAuthor(username)
然后发送action 调用getFavorite方法里面在调用get request请求 然后reducer接收到action 进行批量查询我的文章以及喜欢得文章
上面得基础都是得先在按钮上绑定 this.props.getArticlesByAuthor(profile.username) 以及this.props.getArticlesByFavorite(profile.username)进行触发显示得
到现在能拿到回来得数据了
创建文章基本步骤:
1:from表单创建 有文章标题 文章描述 还有编辑文章 , 输入标签的框 和注册页面差不多
搭建一个基础的表单页面
注意 : 把输入标签需要绑定一个onKeyUp事件
2:创建reducer 关于单个文章的
设置初始标题 描述 内容 标签 ,标签数组,错误
创建的单个文章的创建常量 Fileld 在reducer里面去应用返回新的值
因为每个描述都绑定一个事件 有这个事件 会生成一个action身上会有一个方法(例如更新文章,获取文章。。。的那种)然后一个对象 然后这个action返回去由dispatch 去发送action,进入到reducer里面去进行修改数据,最后然后通过value绑定的进行回显。、
到这 数据可以完好的输入了
标签实现功能:输入标签 ,标签挂到文章上,并且再发布文章上点击小图标可以删除标签
1:现在就利用onkeyup属性绑定的this.watcherEnter事件
2:监听的这个事件keyCode属性当我点击回车的时候发现控制台输出是13所以
进行判断如果keyCode==13 那么去处理 通过This.props.addTag去添加标签,同时addTag也需要在mapDispatch定义一下,在写一个相应得对应actions和相应得reducer,
3:最后这样在reduce中返回新的数组const tags = state.tags.concat([state.tag])
这样就返回一个新数组了 可以在页面中取出tags 然后在输入标签下面进行遍历,展示出来
同时还可以在我遍历得tag上面写一个事件方便去删除
4:Bug描述:在进行添加标签得时候,没有考虑深拷贝问题,直接push把标签放里,直接return state
执行事件,标签并没有进行显示。
解决思路:首先出现这个问题是因为我没有考虑到深拷贝得问题 initState【】是一个数组 tags又是一个数组 return 得还是原先的地址值 并没有进行一个深拷贝,
解决办法:用concat方法把新标签和原有标签进行合并,这样就返回一个新数组 然后进行return 覆盖
5:删除标签
在删除标签得图标上绑定一个remove Tag事件定义常量然后去action在去reduce,进行删除
6:创建文章
一套流程
7:进入文章 详情
在挂载的生命周期里面进行根据id获取文章
mapState中获取到文章里面的数值,还有登录的用户信息
头部展示文章的标题 作者名字 以及文章内容 其中还有评论
其中在头部信息还要封装一个button行为因为要是未登录应该展示喜欢 然后还可以定向到登录也页面
如果登录的是自己的那么就展示编辑 删除 如果是别人的就展示喜欢
大体是这样下一篇详细表达
边栏推荐
猜你喜欢
Transformer、BERT、GPT 论文精读笔记
MySQL数据库————数据库与vs的连接
Evaluate: A detailed introduction to the introduction of huggingface evaluation indicator module
手把手教你如何自制目标检测框架(从理论到实现)
长短期记忆网络 LSTM
【Kaggle实战】泰坦尼克号生存人数预测(从零到提交到Kaggle再到模型的保存与恢复)
AI mid-stage sequence labeling task: three data set construction process records
热部署系统实现
【论文笔记】一种基于启发式奖赏函数的分层强化学习方法
【TPC-DS】25张表的详细介绍,SQL的查询特征
随机推荐
获取JDcookie的方法
HCIP实验(06)
vim 折叠函数
SQL每日一练(牛客新题库)——第5天:高级查询
Guava-字符串工具
Laya中关于摄像机跟随人物移动或者点击人物碰撞器触发事件的Demo
积分商城系统设计
C# 一周入门高级编程之《C#-继承》Day One
JS函数获取本月的第一天和最后一天
Redis的基础与django使用redis
dflow入门1——HelloWorld!
redis键值出现 xacxedx00x05tx00&的解决方法
Redis分布式锁
ArcEngine(五)用ICommand接口实现放大缩小
实时目标检测新高地之#YOLOv7#更快更强的目标检测器
品牌方发行NFT时,应如何考量实用性?
数仓4.0(一)
并发之固定运行和交替运行方案
内存模型之可见性
行业 SaaS 微服务稳定性保障实战