第一步:在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行为因为要是未登录应该展示喜欢   然后还可以定向到登录也页面

如果登录的是自己的那么就展示编辑 删除  如果是别人的就展示喜欢

大体是这样下一篇详细表达

文章列表的显示 以及创建文章 还有文章详情的基本--react项目5相关推荐

  1. Ecshop文章列表页显示内容摘要

    本教程中讲到的"内容摘要"指的是文章内容的前 60个字符(当然也可以是前40个,前50个等等) 下面以 2.7.2版 + 官方默认模板 为例进行讲解: 1).修改 includes ...

  2. layui获得列表json数据_golang实战开发之博客功能篇:文章列表的读取与展示和分类筛选展示处理...

    前面我们介绍了文章详情页面的展示的逻辑代码实现,这一节,我们将继续讲解文章列表的读取和展示.文章根据分类进行筛选.最新文章.热门文章等的调用处理逻辑. 首先,我们先编写文章列表页的前端代码.这里,我们 ...

  3. 前端学习(2456):文章列表

    # 四.文章列表模块## 创建组件并配置路由1.创建 `src/views/article/index.vue````html <template><div class=" ...

  4. 仿今日头条项目——首页(展示文章列表)

    1.头部导航栏组件 1.使用导航栏组件 2.在导航栏组件中插入按钮 <template><div class="home-container"><!- ...

  5. zblog php getlist,zblog php调用自定义文章列表函数GetList()介绍

    在zblog asp版本制作zblog CMS模板时,调用自定义的文章列表时,通常会选择使用功能强大的YTCMS插件,而zblog php版本提供了GetList函数,通过该函数可以获取自定义的文章列 ...

  6. python 下载公众号文章_Python爬虫实现的微信公众号文章下载器

    平时爱逛知乎,收藏了不少别人推荐的数据分析.机器学习相关的微信公众号(这里就不列举了,以免硬广嫌疑).但是在手机微信上一页页的翻阅历史文章浏览,很不方便,电脑端微信也不方便. 所以我就想有什么方法能否 ...

  7. 表格最多两行,超出显示...移入可以查看超出的详情。

    表格最多两行,超出显示...移入可以查看超出的详情. 在vue3项目里. 思路是1.循环生成表格,给每个表格加上ref,vue3获取dom方式. 2  ref="tr" ;let ...

  8. laravel大型项目系列教程(四)之显示文章列表和用户修改文章

    小编心语:不知不觉已经第四部分了,非常感谢很多人给小编提的意见,改了很多bug,希望以后能继续帮小编找找茬~小编也不希望误导大家~这一节,主要讲的是如何显示文章列表和让用户修改文章,小编预告一下(一共 ...

  9. springboot分页展示功能_基于SpringBoot从零构建博客网站 - 分页显示文章列表功能...

    显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...

最新文章

  1. C++读取文件名,过滤文件路径及后缀
  2. 一步步构建多层架构系列二之设计模式运用篇
  3. linux mmap 内存映射
  4. 使用FuncT, TResult 委托实现API日志的记录
  5. Leetcode--450. 删除二叉搜索树中的节点
  6. python 的基础 学习 第六天 基础数据类型的操作方法 字典
  7. UIKit框架类层次图
  8. bootstrap 检验 法 原理_检验检测技术分享课程:公共场所集中空调通风系统 卫生标准及其检测要点...
  9. 玩转Excel快捷键和常用函数和图表,赶紧学起来
  10. oracle优化之driving_site
  11. 设计一个AOA蓝牙精准室内定位系统
  12. 单引号在c语言中作用,我想知道单引号在C语言的具体作用
  13. python读取数据集前十行,python数据分析万字干货!一个数据集全方位解读pandas
  14. N个鸡蛋放进M个篮子问题
  15. 包政讲营销录音(1)
  16. 计算机更新失败项怎么强制关闭,电脑卡在配置Windows Update失败界面无法开机怎么办...
  17. PyCharm vs VSCode 到底谁更牛?
  18. python读书心得体会_Python学习心得体会
  19. 如何对图像进行卷积操作
  20. HTML网页设计制作——初音动漫(6页) dreamweaver作业静态HTML网页设计模板

热门文章

  1. 让你的 CDN 费用省 50% 以上!图片瘦身的正确姿势
  2. 拒绝一心多用的工作学习方式(转)
  3. 基于视觉导航机器人的快递分拣系统(开放源码附带论文和github仓库)
  4. “MPX4115型压力传感器+PCF8591型AD+模拟IIC总线”的Proteus仿真
  5. 用c语言做记忆测试小游戏,用C语言实现简单小游戏
  6. js 拖动图片移动位置插件jquery.dad.js
  7. c语言程序项目任务教程 杨东芳 答案,c语言项目化教程 c语言程序设计
  8. Oracle Sqlplus命令登录的几种方式
  9. 你看那只追风的风筝,它好像是在发电?
  10. 图卷积神经网络GCN中的关键公式推导---干货