P26:后台管理系统开发05-添加文章页面UI制作

目录
文章目录隐藏
  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>

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

后台管理系统开发 05-添加文章页面 UI 制作(一)

暂存按钮和发布按钮

先来制作右侧最顶部的两个按钮,这个两个按钮一个是暂存,就是你可以把文章存一下,但是不发布,一个是直接发布。(如果你感觉比较麻烦,可以先不做暂存功能,只做一个发布功能)。

<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>

这样我们整个后台添加文章的界面就编写完成了。可以到浏览器中预览一下结果了。如果界面不满意,你可以自己调整一下。

后台添加文章的界面

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P26:后台管理系统开发05-添加文章页面UI制作

发表回复