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}>
                        &nbsp;
                        <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>&nbsp;
                <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制作的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。