Django+React全栈开发：界面优化

时间：2023-03-26 01:09:33 Python

时间处理很多博客只会在文章列表界面显示自文章发表以来的时间（如下图）。之前，我们粗暴的从后台返回了ISO8601格式的时间字符串显示出来，现在我们来处理一下。首先我们看看后台数据经过rest_framework序列化后是什么样子的：2020-04-05T11:10:56.880622+08:00。要得到这样的带时区的时间，需要更改Django设置，找到backend/backend/settings.py，找到下面两个变量修改：#对了，也可以更改语言设置LANGUAGE_CODE='zh-hans'#时区是上海，AsiaTIME_ZONE='Asia/Shanghai'这里我们可以使用moment.js来处理时间，现在来到前端部分，打开react_drf/frontend目录，使用yarn安装依赖，并运行命令yarnaddmoment。为了直接看到效果，不要忘记同时启动前后端程序。现在修改frontend/src/ArticleList.js:importReact,{Component}from"react";importmomentfrom'moment';importmomentLocalefrom'moment/locale/zh-cn';//importmoment.js并设置语言moment.updateLocale('zh-cn',momentLocale);......render(){return({this.state.articleList.map(item=>........创建时间：{moment(item.created).fromNow()}{''}更新时间：{moment(item.updated).fromNow()}em>

)}

);现在打开浏览器，浏览localhost:3000，可以看到和上图一样的效果。注意：moment在我们要实现的功能上的使用是大锤。我最近刚看到这个库，所以尝试使用它。请注意，有一行{''}，它实际上是使用JSX为呈现的HTML添加一个空格。我们在条件渲染之前定义的名为articleList的数组对象还在代码中，但实际上我们并不需要它，我们的文章数据是从后台API中获取的。现在删除原来定义articleList部分的代码，在我们类组件ArticleList的构造函数中修改如下部分：constructor(props){super(props);this.state={//将状态中的内容改为空数组articleList:[],};}......现在让我们关注组件中的渲染函数：render(){const{articleList}=this.state;......}添加这行代码，直接从this.state对象中取出articleList，这样之前JSX中的this.state.articleList可以直接简写为articleList。目前在本地环境下，我们获取API的速度非常快，而且数据量很小，所以如果网络不好的时候后台数据还没有取到，那我们的页面当然不可能是空白的吧？修改render函数的返回值如下：return((Array.isArray(articleList)&&articleList.length===0)?

:{articleList.map(item=>

{item.title}

{item.body}
创建：{moment(item.created).fromNow()}{''}更新：{moment(item.updated).fromNow()}

)}