P26:后台管理系统开发05-添加文章页面UI制作
大体的 UI 架构确定下来以后,就可以制作里边的业务逻辑页面了,第一个要作的页面是添加博客文章,这是本博客教程最难的一部分,所以要分成几节来讲。本文我们先做出标题和内容部分。
创建增加文章页面
在/src/pages
目录下面,新建一个AddArticle.js
的文件。建立完成后用import
引入下面需要使用的组件
import React,{useState} from 'react'; import marked from 'marked' import '../static/css/AddArticle.css' import { Row, Col ,Input, Select ,Button ,DatePicker } from 'antd' const { Option } = Select; const { TextArea } = Input
可以看到这里我们有一个AddArticle.css
文件是不存在的,这个是样式文件,我们可以在/src/static/css
文件夹下建立AddArticle.css
文件,然后把下面的 CSS 样式拷贝进去。
.markdown-content{ font-size:16px !important; max-height: 745px; } .show-html{ padding:10px; border:1px solid #ddd; border-radius: 5px; font-size:16px; height: 745px; background-color: #f0f0f0; overflow: auto; } .show-html h1{ font-size:30px; } .show-html h2{ font-size:28px; border-bottom: 1px solid #cbcbcb; } .show-html h3{ font-size:24px; } .show-html pre{ display: block; background-color: #f0f0f0; padding: 5px; border-radius: 5px; } .show-html pre>code{ color: #000; background-color: #f0f0f0; } .show-html code { background-color: #fff5f5; padding: 5px 10px; border-radius: 5px; margin: 0px 3px; color: #ff502c; } .show-html blockquote{ border-left:4px solid #cbcbcb ; padding: 10px 10px 10px 30px; background-color: #f8f8f8; } .introduce-html{ padding:10px; border:1px solid #ddd; border-radius: 5px; font-size:16px; background-color: #f0f0f0; } .introduce-html h1{ font-size:30px; } .introduce-html h2{ font-size:28px; border-bottom: 1px solid #cbcbcb; } .introduce-html h3{ font-size:24px; } .introduce-html pre{ display: block; background-color: #f0f0f0; padding: 5px; border-radius: 5px; } .introduce-html pre>code{ color: #000; background-color: #f0f0f0; } .introduce-html code { background-color: #fff5f5; padding: 5px 10px; border-radius: 5px; margin: 0px 3px; color: #ff502c; } .introduce-html blockquote{ border-left:4px solid #cbcbcb ; padding: 10px 10px 10px 30px; background-color: #f8f8f8; } .date-select{ margin-top:10px; }
然后你就可以编写 UI 部分的代码了,这部分我们依然使用Ant Desgin
的代码,先编写一个最基本的架构。
function AddArticle() { return ( <div>我是添加文章</div> ) } export default AddArticle
写完简单的这个,可以到AdminIndex.js
中去配置路由,新引入路由模块,然后再引入对应的 JS 文件。
import { Route } from "react-router-dom"; import AddArticle from './AddArticle'
然后在主界面的操作内容区域加入下面的路由代码。
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}> <div> <Route path="/index/" exact component={AddArticle} /> </div> </div>
做完这步可以到浏览器中预览看一下,是不是可以访问到添加文章页面,如果访问不到,可以到Main.js
文件中,删除exact
(精确匹配),应该就可以访问到了。
编写标题和文章内容区域
路由调通后,就可以编写基本的 UI 样式了,我们先把标题和 UI 部分做好。先把大体架构制作完成,也就是大体分区。
<div> <Row gutter={5}> <Col span={18}> </Col> <Col span={6}> </Col> </Row> </div>
这时我们把页面分成了两栏,我们先来完成左边的部分,也就是标题和文章内容。
<div> <Row gutter={5}> <Col span={18}> <Row gutter={10} > <Col span={20}> <Input placeholder="博客标题" size="large" /> </Col> <Col span={4}> <Select defaultValue="Sign Up" size="large"> <Option value="Sign Up">前端教程</Option> </Select> </Col> </Row> <br/> <Row gutter={10} > <Col span={12}> <TextArea className="markdown-content" rows={35} placeholder="文章内容" /> </Col> <Col span={12}> <div className="show-html"> </div> </Col> </Row> </Col> <Col span={6}> </Col> </Row> </div>
这步完成可以到浏览器中预览一下啊,看看是否是我们想要的效果,然后根据个人喜好进行微调。
暂存按钮和发布按钮
先来制作右侧最顶部的两个按钮,这个两个按钮一个是暂存,就是你可以把文章存一下,但是不发布,一个是直接发布。(如果你感觉比较麻烦,可以先不做暂存功能,只做一个发布功能)。
<Col span={6}> <Row> <Col span={24}> <Button size="large">暂存文章</Button> <Button type="primary" size="large" onClick={}>发布文章</Button> <br/> </Col> </Row> </Col>
编写文章简介部分
这部分我们也采用<TextArea>
组件,预览部分直接使用<div>
标签就可以实现。
<Col span={24}> <br/> <TextArea rows={4} placeholder="文章简介" /> <br/><br/> <div className="introduce-html"></div> </Col>
这个编写完成以后,就剩下最后一部,就是编写发布时间。
编写发布时间界面
目前我们只用一个编写时间,最后修改时间我们可以以后再添加,目前没有什么用处。所以只写一个日期选择框就可以了。
<Col span={12}> <div className="date-select"> <DatePicker placeholder="发布日期" size="large" /> </div> </Col>
这样我们整个后台添加文章的界面就编写完成了。可以到浏览器中预览一下结果了。如果界面不满意,你可以自己调整一下。
码云笔记 » P26:后台管理系统开发05-添加文章页面UI制作