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>

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

后台管理系统开发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>

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

后台添加文章的界面

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P26:后台管理系统开发05-添加文章页面UI制作

发表评论

提供最优质的资源集合

立即查看 了解详情