P32：后台管理系统开发11

1. 选择类别后调用方法
2. 对发布时间文本框修改
3. 再对文章标题文本框进行修改
4. 编写文章保存方法
5. 编写中台的 addArticle 接口
6. 编写对应的路由
7. 配置 apiUrl.js 文件
8. 编写 saveArticle 方法
9. 编写中台接口方法
10. 后台 apiUrl.js 的配置
11. 后台保存方法的修改

本文主要内容是把文章中的内容添加到数据库中，内容虽然比较多，但是很多知识我们已经熟悉，都是利用 axios 对数据库进行操作。

选择类别后调用方法

现在选择文章类别后，前台还没办法根据选择的内容进行改变，这是我们使用了 React Hooks 的后遗症，必须使用对应 set 方法才可以改变 state 的值。

先编写selectTypeHangdler方法，代码如下：

//选择类别后的便哈
const selectTypeHandler = (value) = >{
    setSelectType(value)
}

然后再<Select>组件上的onChange事件上进行调用，代码如下：

<Select defaultValue={selectedType} size="large" onChange={selectTypeHandler}>
    {
        typeInfo.map((item,index)=>{
            return (<Option key={index} value={item.Id}>{item.typeName}</Option>)
        })
    }
</Select>

然后进行调试修改，对selectedType初始值进行初始化设置。

对发布时间文本框修改

选择文章可用后，修改发布日期对应的文本框，增加相应方法，让选择日期文本框也变的可用，代码如下:

<Col span={12}>
    <div className="date-select">
        <DatePicker
            onChange={(date,dateString)=>setShowDate(dateString)} 
            placeholder="发布日期"
            size="large"
        />
        </div>
</Col>

再对文章标题文本框进行修改

标题对应的文本框也要进行对相应的操作，代码如下:

<Col span={16}>
    <Input 
            value={articleTitle}
            placeholder="博客标题" 
            onChange={e=>{setArticleTitle(e.target.value)}}
            size="large" />
</Col>

编写文章保存方法

这些基本的操作都完成后，我们可以编写文章的保存方法，这里我先只作为空的验证，先不向数据库里插入数据，之后在编写玩中台接口后，我们再进行插入。

const saveArticle = () => {
    if(!selectedType){
        message.error('必须选择文章类型！');
        return false;
    } else if (!articleTitle) {
        message.error('文章名称不能为空！');
        return false;
    } else if (!articleContent) {
        message.error('文章内容不能为空！');
        return false;
    } else if (!introducemd) {
        message.error('文章简介不能为空！');
        return false;
    } else if (!showDate) {
        message.error('发布日期不能为空！');
        return false;
    }
    message.success('检验通过！');
}

然后在保存按钮的部分添加上 onClick 事件，代码如下：

<Col span={24}>
    <Button  size="large">暂存文章</Button>&nbsp;
    <Button type="primary" size="large" onClick={saveArticle}>发布文章</Button>
    <br/>
</Col>

然后就可以点击预览了，看看是否可以操作，进行调试。