Django+React全栈开发:界面优化
时间处理
不少博客都会在文章列表界面仅显示文章发布距今的时间(如下图),之前我们是粗暴地将后台传回的ISO 8601
格式的时间字符串显示出来,现在我们来处理一下。
首先让我们看看后台的数据经rest_framework
序列化后是什么样子:2021-04-10T08:56:01.576834Z
,这样显示太不体面了,给它修改一下。
这里我们可以使用dayjs
来处理时间,现在来到前端部分,打开DjangoWithReact/frontend
目录,使用yarn
安装依赖,运行命令yarn add dayjs
。为了直接看到效果,别忘了把前后端两个程序都启动起来。现在来修改frontend/src/ArticleList.js
:
现在打开浏览器浏览localhost:3000
,你就能看到和上面图中一样的效果了,Django默认使用的是UTC时间,我们这里自动根据时区做了本地化,可以把格式化字符串改成YYYY-MM-DD HH:mm
与后端数据对比。
为了简洁起见,可以把时间改成相对时间,如昨天、上个月等,这需要引入dayjs
的relativeTime
插件:
效果如下:
其实这里的需求很简单,不太需要用到dayjs
这种时间处理库,也可以拿原生的IntlAPI来实现,这里就不讲了。
条件渲染
之前我们自己定义的名为articleList
的数组对象现在还在代码中,但是事实上我们并不需要它,我们的文章数据是从后台API
中取出的。现在删去原本定义articleList
部分的代码,并在我们的类组件ArticleList的构造函数
中修改以下部分:
现在来关注一个组件中的render
函数:
增加这一行代码,从this.state
对象中直接取出articleList
,这样之前JSX
中的this.state.articleList
就都可以直接简写为articleList
了。目前我们在本地环境中,获取API非常快速,并且数据量也很少,那么如果在网络不好的情况下,后台的数据还没有取到,我们的页面当然不能一片空白吧?
修改render
函数的返回值部分如下:
这里我们在JSX
中使用了三元运算符,代码很简单,只是当articleList
数组不为空时显示文章列表,否则渲染<p>加载中...</p>
。不过在JS
中判断一个数组是否为空不能用Python的思维,例如arr == []
或arr === []
都只会返回false
。(PS:忍不住又想吐槽JS了。。。
现在打开浏览器刷新,不过由于这里获取到数据很快,所以会“加载中”的字样会一闪而过,可以将整个componentDidMount
函数注释掉看看效果。
这就是React
中的条件渲染了,可以根据情况来决定组件的渲染,目前我们的页面还非常简单,等以后我们添加了导航栏、侧边栏等元素时,你当然不希望因为文章数据还没取到而使得页面空空如也吧。
后续讲到Hooks
的时候,会用react-query
这个强大的库来替代原生fetch,现在先用简陋实现吧。
可以尝试封装ErrorPage组件,在请求错误时显示
提示
对代码做以下修改,将fetch
捕获到的错误,设置到this.state
中。完成练习后,暂停Django
的运行,验证你做的是否正确吧。
添加样式
可能你已经发现了,frontend/src
目录下,除了后缀名为js
的文件,还有后缀为css
的同名文件,打开App.js
看一看(如果你还没有删除它),还能发现import './App.css';
这一行代码。
现在让我们也来写一个ArticleList.css
:
只是个文本居中显示,注意到我们已经在组件render
函数的JSX
中定义了div
元素的className
。现在只要在App.js
中引入样式文件就行,在代码顶部添加import './ArticleList.css';
。现在可以在页面中看到文字居中显示了。
也可以在JSX
中直接设定样式,例如:
现在可以看到标题变成了红色。
还可以使用CSS Module
,我们使用了类名选择器,如className="btn"
,浏览器会对拥有这个类名的元素应用对应的样式规则,但是在不同组件里的按钮可能是不一样的样式,那么我们就要注意命名,名字相同很可能会导致意想不到的效果。CSS模块可以解决这个问题,这种样式文件的命名规则为组件名.module.css
,例如ArticleList.module.css
:
接着修改组件:
浏览器查看元素,可以发现这个元素的类名被自动格式化成这样<div class="ArticleList_title__m5rub">React</div>
,如果在这个组件引入了其它样式文件,并且有同名的选择器,那么也不怕样式覆盖了。
原子化CSS
简单来说原子CSS就是每个类名对于唯一的CSS规则,通过在HTML中组合类名,而不是修改CSS文件来改变样式。下面使用TailwindCSS来感受下,首先按照官网教程配置好,然后可以删掉之前的文章列表组件的样式文件不用,修改组件:
此外,如果某个组合样式重复出现,那么也可以使用@apply
方法:
可以尝试修改类名,通过tailwindcss去美化页面。
其实React中是有像AntDesign这样的美观易用的组件库存在的,但是样式不是这个系列的重点,同时库提供的组件已经预先实现了很多我们要做的需求,学习嘛,还是以手动实现为主。