P26：后台管理系统开发05

1. 创建增加文章页面
2. 编写标题和文章内容区域
3. 暂存按钮和发布按钮
4. 编写文章简介部分
5. 编写发布时间界面

大体的 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>

这步完成可以到浏览器中预览一下啊，看看是否是我们想要的效果，然后根据个人喜好进行微调。