博客首页

}> 工作台 } title='文章管理'> 添加文章文章列表修改文章 } >留言管理 } >用户管理

这是头部

博客管理系统工作台

工作台的内容

); } export default AdminIndex; ``` ![image-20200609174933385](https://gitee.com/mus-z/blogImage/raw/master/img/20200609174934.png) #### 5.5 添加文章页面示意图 ![image-20200609184000350](https://gitee.com/mus-z/blogImage/raw/master/img/20200609184002.png) 配置router ![image-20200609183641672](https://gitee.com/mus-z/blogImage/raw/master/img/20200609183643.png) 然后使用栅格布局 ```js import React, { useState } from "react"; import marked from "marked"; import "../css/addArticle.css"; import { Row, Col, Input, Select, Button, DatePicker } from "antd"; const { Option } = Select; const { TextArea } = Input; function AddArticle() { return (

</Col>
                <Col span={12}>
                <div className='show-html'></div>
                </Col>
          </Row>
        </Col>
        <Col span={6}></Col>
      </Row>
    </div>
  );
}
export default AddArticle;

```

![image-20200609183733608](https://gitee.com/mus-z/blogImage/raw/master/img/20200609183737.png)

然后添加右面的

```js
import React, { useState } from "react";
import marked from "marked";
import "../css/addArticle.css";
import { Row, Col, Input, Select, Button, DatePicker } from "antd";

const { Option } = Select;
const { TextArea } = Input;
function AddArticle() {
  return (
    <div>
      <Row gutter={20}>
        <Col span={18}>
          {/* 左边 */}
          <Row gutter={10}>
            <Col span={20}>
              <Input placeholder='博客标题' size='large' />
            </Col>
            <Col span={4}>
              <Select defaultValue='1' size='large'>
                <Option value='1'>视频教程</Option>
                <Option value='2'>视频教程</Option>
                <Option value='3'>视频教程</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} style={{ borderLeft: "10px solid #067" }}>
          {/* 右边 */}
          <Row gutter={10}>
            <Col span='24'>
              <Button size='large'>暂存</Button>
              <Button size='large' type='primary'>
                发布
              </Button>
            </Col>
          </Row>
          <Row gutter={10}>
            <br />
            <Col span='18'>
              <div className='date-select'>
                <DatePicker placeholder='发布日期' size='middle'></DatePicker>
              </div>
            </Col>
            <Col span='24'>
              <br />
              <TextArea rows={4} placeholder='文章简介'>

); } export default AddArticle; ``` ![image-20200609185941478](https://gitee.com/mus-z/blogImage/raw/master/img/20200609185942.png) 配置之前使用过的marked 然后定义些state并绑定 ![image-20200609210612510](https://gitee.com/mus-z/blogImage/raw/master/img/20200609210618.png) ![image-20200609210639441](https://gitee.com/mus-z/blogImage/raw/master/img/20200609210640.png) 大致效果有一些了，但是还没有解决换行和多行代码块的问题。。发现之前的highlight.js没装上，另外注意多行代码块的第一行不要放文本不然会渲染的时候布局有问题 ![image-20200609215345967](https://gitee.com/mus-z/blogImage/raw/master/img/20200609215352.png) 而且想要出现换行需要两次回车 #### 5.6 搞定导入解析通过antd的Upload组件，我们这里用子组件Dragger ```js import React, { useState, useEffect } from "react"; import "../css/addArticle.css"; import { Row, Col, Input, Select, Button, DatePicker } from "antd"; import Marked from "../component/Marked"; import { Upload } from "antd"; import { InboxOutlined } from "@ant-design/icons"; const { Dragger } = Upload; const { Option } = Select; const { TextArea } = Input; function AddArticle() { const [articleId, setArticleId] = useState(0); // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改 const [articleTitle, setArticleTitle] = useState(""); //文章标题 const [articleContent, setArticleContent] = useState(""); //markdown的编辑内容 const [markdownContent, setMarkdownContent] = useState("预览内容"); //html内容 const [introducemd, setIntroducemd] = useState(""); //简介的markdown内容 const [introducehtml, setIntroducehtml] = useState("等待编辑"); //简介的html内容 const [showDate, setShowDate] = useState(); //发布日期 const [updateDate, setUpdateDate] = useState(); //修改日志的日期 const [typeInfo, setTypeInfo] = useState([]); // 文章类别信息 const [selectedType, setSelectType] = useState(1); //选择的文章类别 let [filename, setFile] = useState(""); //存储导入文件名 let props = { name: "file", beforeUpload(file, list) { //注意：IE9 不支持该方法。 console.log(list); if (window.FileReader) { let filename = file.name; //文件名 var reader = new FileReader(); reader.onload = function () { //加载完毕之后 //console.log(this.result); setArticleContent(reader.result); //文件传给输入栏 setArticleTitle(filename.split(".") ? filename.split(".").slice(0,filename.split(".").length-1).join('.') : "");//文件标题处理，把后缀去掉 setFile(filename); }; reader.readAsText(file); } return false; }, showUploadList: false, //不显示文件list }; const changeTitle = (e) => { setArticleTitle(e.target.value); }; const changeContent = (e) => { //console.log(e.target.value); setArticleContent(e.target.value); //setMarkdownContent(Marked(e.target.value)); }; const changeIntroduce = (e) => { setIntroducemd(e.target.value); //setIntroducehtml(Marked(e.target.value)); }; useEffect(() => { setMarkdownContent(Marked(articleContent)); }, [articleContent]); //预览随articleContent更新 useEffect(() => { setIntroducehtml(Marked(introducemd)); }, [introducemd]); //预览随articleContent更新 return (

{/* 第一行 */}
{/* 第二行 */}

{filename.length == 0 ? ( <>

导入markdown

拖拽上传/点击上传

) : (

{filename}

)}

{ console.log(value); }} >

{/* 第三行 */}

</Col>
        <Col span={12}>
          <div
            className='show-html'
            dangerouslySetInnerHTML={{ __html: markdownContent }}
          />
        </Col>
      </Row>
    </div>
  );
}
export default AddArticle;

```

`beforeUpload`  return false 阻止上传

`showUploadList` 不展示list

![image-20200613111108475](https://gitee.com/mus-z/blogImage/raw/master/img/20200613111117.png)

### day 06 后台的接口、添加/修改文章

#### 6.1 后台接口初始化

![image-20200613131454378](https://gitee.com/mus-z/blogImage/raw/master/img/20200613131502.png)

admin/main.js

```js
"use strict";

const Controller = require("egg").Controller;

class MainController extends Controller {
  // async index() {
  //   const { ctx } = this;
  //   ctx.body = "api";
  // }
  //获得所有文章
  async index() {
    this.ctx.body = "hi maincontrol";
  }
}

module.exports = MainController;
```

router/admin.js

```js
module.exports=app=>{
    const {router,controller}=app
    // router.get('/default/index',controller.default.home.index)
    router.get('/admin/index',controller.admin.main.index)
    
}
```

router.js

![image-20200613131642697](https://gitee.com/mus-z/blogImage/raw/master/img/20200613131644.png)

![image-20200613131711095](https://gitee.com/mus-z/blogImage/raw/master/img/20200613131712.png)

初始配置一个数据库

![image-20200613133208809](https://gitee.com/mus-z/blogImage/raw/master/img/20200613133210.png)

```js
async checkLogin() {
    let {userName, password} = this.ctx.request.body;
    const sql =
      "SELECT userName FROM admin_user WHERE userName = '" +
      userName +
      "'AND psssword = '" +
      password +
      "' ";
    const res = await this.app.mysql.query(sql);
    if (res.length > 0) {
      let openId = new Date().getTime();
      this.ctx.session.openId = { openId: openId };//如果有说明登陆成功
      this.ctx.body = { data: "success" ,openId: openId};
    } else {
      this.ctx.body = { data: "fali" };
    }
  }
```

![image-20200613133312377](https://gitee.com/mus-z/blogImage/raw/master/img/20200613133313.png)

#### 6.2 登录验证

```js
import React, { useState } from "react";
import "antd/dist/antd.css";
import { Card, Input, Button, Spin, message } from "antd";
import { UserOutlined, KeyOutlined } from "@ant-design/icons";
import "../css/Login.css";
import servicePath from "../config/apiUrl";
import axios from "axios";
function Login(props) {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setInLoading] = useState(false);
  const checkLogin = () => {
    setInLoading(true);
    if (!userName) {
      message.error("用户名不能为空");
      setInLoading(false);
      return false;
    }
    if (!password) {
      message.error("用户名不能为空");
      setInLoading(false);
      return false;
    }
    let dataProps = {
      userName: userName,
      password: password,
    };
    axios({
      method: "post",
      url: servicePath.checkLogin,
      data: dataProps,
      withCredentials: true, //共享session
    }).then((res) => {
      setInLoading(false);
      if (res.data.data == "success") {
        //message.success(res.data.openId)
        localStorage.setItem("openId", res.data.openId);
        props.history.push("/adminIndex");
      } else {
        message.error("账号或密码错误");
      }
    });
    setTimeout(() => {
      setInLoading(false);
    }, 1000);
  };
  return (
    <div className='login-div'>
      <Spin tip='loading...' spinning={isLoading}>
        <Card title='博客管理' bordered={true} style={{ width: "400px" }}>
          <Input
            value={userName}
            id='userName'
            size='large'
            placeholder='用户名'
            prefix={<UserOutlined style={{ color: "rgba(0,0,0,.55)" }} />}
            onChange={(e) => {
              setUserName(e.target.value);
            }}
          />
          <br />
          <br />
          <Input.Password
            value={password}
            id='password'
            size='large'
            placeholder='密码'
            prefix={<KeyOutlined style={{ color: "rgba(0,0,0,.55)" }} />}
            onChange={(e) => {
              setPassword(e.target.value);
            }}
          />
          <br />
          <br />
          <Button type='primary' size='large' block onClick={checkLogin}>
            登录
          </Button>
        </Card>
      </Spin>
    </div>
  );
}
export default Login;
```

#### 6.3 中台路由守卫配置

在service/app下新建middleware/adminauth

```js
module.exports= optinons=>{
    return async function adminauth(ctx,next){
        //console.log(ctx.session.openId)
        if(ctx.session.openId){
            await next()
        }else{
            ctx.body={data:'fali'}
        }
    }
}
```

![image-20200613143057214](https://gitee.com/mus-z/blogImage/raw/master/img/20200613143105.png)

暂时先配置好还没有引入

#### 6.4 获取文章类型（使用路由守卫中间件）

使用方法

service：

![image-20200613153712390](https://gitee.com/mus-z/blogImage/raw/master/img/20200613153726.png)

![image-20200613153818236](https://gitee.com/mus-z/blogImage/raw/master/img/20200613153820.png)

admin：

```js
  const getTypeInfo = () => {
    axios({
      method: "get",
      url: servicePath.getTypeInfo,
      withCredentials: true,
    }).then((res) => {
        console.log(res)
      if (res.data.data === "fail") {//守卫返回的错误信息
        localStorage.removeItem("openId");
        props.history.replace("/");//回到登录页面
      } else {
        setTypeInfo(res.data.data);
      }
    });
  };
```

登录情况，前端用localStorage共享，后端用session共享

#### 6.5 添加文章

输入还是要处理

针对解析和标题的部分直接用绑定就好了

现在有一个`DatePicker`的问题，不接收Date值，只能用`moment.js`类型的数据

```
yarn add moment
```

```js
import moment from 'moment'
...
const [showDate, setShowDate] = useState(moment()); //发布日期
...
<div className='date-select'>
            <DatePicker
              placeholder='发布日期'
              size='large'
              value={showDate}
              style={{ width: "100%" }}
              onChange={(date, dateString) => {
                //console.log(date, dateString)
                setShowDate(moment(dateString))
              }}
            ></DatePicker>
          </div>
```

然后是暂存检验

![image-20200613171119216](https://gitee.com/mus-z/blogImage/raw/master/img/20200613171127.png)

![image-20200613173114656](https://gitee.com/mus-z/blogImage/raw/master/img/20200613173117.png)

改进添加文章

```js
  const saveArticle = () => {
    //储存检验
    let flag = true;
    if (selectedType === "文章类型") {
      message.error("请选择文章类型");
      flag = false;
    }
    if (!articleTitle) {
      message.error("请输入文章标题");
      flag = false;
    }
    if (!articleContent) {
      message.error("请输入文章内容");
      flag = false;
    }
    // if (!introducemd) {
    //   message.error("请输入文章简介");
    //   flag = false;
    // }//可以没有简介
    if (!showDate) {
      message.error("请选择日期");
      flag = false;
    }
    if (flag) {
      message.success("验证通过");
      //console.log(showDate)
      let date=showDate._i.replace('-','/')
      let dataProps={
          type_id:selectedType,
          article_title:articleTitle,
          article_content:articleContent,
          article_introduce:introducemd,
          article_addtime:new Date(date).getTime()
      }
      console.log(dataProps)
      if(articleId===0){
          dataProps.article_viewcount=0;
          axios({
              method: "post",
              url:servicePath.addArticle,
              withCredentials:true,
              data:dataProps,
          }).then(res=>{
              console.log(res)
              //if(res.data.insertId)setArticleId(res.data.insertId)
              if(res.data.isSuccess){
                  message.success('文章保存成功')
              }else{
                  message.warn('文章保存失败')
              }
          })
      }
    }
  };
```

接口

```js
async addArticle() {
    let tmpArticle = this.ctx.request.body;
    const result = await this.app.mysql.insert("article", tmpArticle);
    const insertSuccess = result.affectedRows === 1; //影响一行，说明成功
    const insertId = result.insertId;
    this.ctx.body = {
      isSuccess: insertSuccess,
      insertId: insertId,
    };
  }
```

![image-20200613195853218](https://gitee.com/mus-z/blogImage/raw/master/img/20200613195920.png)

#### 6.6 修改文章（缓存了id的情况下，如果刷新则还是重新添加）

```js
const saveArticle = () => {
    //储存检验
    let flag = true;
    if (selectedType === "文章类型") {
      message.error("请选择文章类型");
      flag = false;
    }
    if (!articleTitle) {
      message.error("请输入文章标题");
      flag = false;
    }
    if (!articleContent) {
      message.error("请输入文章内容");
      flag = false;
    }
    // if (!introducemd) {
    //   message.error("请输入文章简介");
    //   flag = false;
    // }//可以没有简介
    if (!showDate) {
      message.error("请选择日期");
      flag = false;
    }
    if (flag) {
      message.success("验证通过");
      //console.log(showDate)
      let date=showDate._i.replace('-','/')
      let dataProps={
          type_id:selectedType,
          article_title:articleTitle,
          article_content:articleContent,
          article_introduce:introducemd,
          article_addtime:new Date(date).getTime()
      }
      console.log(dataProps)
      if(articleId===0){
          dataProps.article_viewcount=0;
          axios({
              method: "post",
              url:servicePath.addArticle,
              withCredentials:true,
              data:dataProps,
          }).then(res=>{
              console.log(res)
              if(res.data.insertId)setArticleId(res.data.insertId)
              if(res.data.isSuccess){
                  message.success('文章保存成功')
              }else{
                  message.warn('文章保存失败')
              }
          })
      }else{
          dataProps.id=articleId
          axios({
            method: "post",
            url:servicePath.updateArticle,
            withCredentials:true,
            data:dataProps,
          }).then(res=>{
            if(res.data.isSuccess){
                message.success('文章保存成功')
            }else{
                message.warn('文章保存失败')
            }
          })
      }
    }
  };
```

```js
async updateArticle() {
    let tmpArticle = this.ctx.request.body;
    console.log(tmpArticle)
    const result = await this.app.mysql.update("article", tmpArticle);
    if(result.affectedRows==0&&result.message.indexOf('matched: 0')>0){//id无效的时候直接新插入
      result = await this.app.mysql.insert("article", tmpArticle);
    }
    const updateSuccess = result.affectedRows === 1; //影响一行，说明成功
    this.ctx.body = {
      isSuccess: updateSuccess,
    };
  }
```

### day 07 文章列表

#### 7.1 文章列表页初始ui

```js
import React, { useState, useEffect } from "react";
import { List, Row, Col, Modal, message, Button } from "antd";
import axios from "axios";
import servicePath from "../config/apiUrl";
const { confirm } = Modal;

![image-20200614105801737](https://gitee.com/mus-z/blogImage/raw/master/img/20200614105810.png)

针对首页进行一个处理，语义化key值，onclick跳转路由

![image-20200614105839733](https://gitee.com/mus-z/blogImage/raw/master/img/20200614105843.png)

![image-20200614105925285](https://gitee.com/mus-z/blogImage/raw/master/img/20200614105926.png)

#### 7.2 删除文章

```js
  async deleteArticle() {
    let id=this.ctx.params.id;
    //console.log(this.ctx.params)
    const res= await this.app.mysql.delete('article',{id:id})
    this.ctx.body={data:res}
  }
```

![image-20200614120451597](https://gitee.com/mus-z/blogImage/raw/master/img/20200614120458.png)

```js
const delArticle=(id)=>{
      confirm({
          title:`确定删除(id:${id})？`,
          content:'ok--删除',
          onOk(){
              console.log(servicePath.deleteArticle+`${id}`)
              axios({
                  method:'get',
                  url:servicePath.deleteArticle+id,
                  withCredentials:true
                }).then(
                  res=>{
                      console.log(res)
                      message.success('删除成功')
                      getList()
                  }
              )
          },
          onCancel(){
              message.info('取消删除')
          },
      })
  }
```

#### 7.3 修改文章

根据路由跳转重新配置添加文章的页面，在动态路由中传递参数

再通过后端返回数据之后回调useState赋值（注意保存id，无id直接添加新文章）

```js
async getArticleById(){
    let id=this.ctx.params.id||0;
    //console.log(this.ctx.params,id)
    let sql=`SELECT article.id as id ,`+
    `article.article_title as title ,`+
    `article.article_content as content ,`+
    `article.article_introduce as introduce ,`+
    `article.article_addtime as addtime ,`+
    `article.article_viewcount as viewcount ,`+
    `type.id as t_id ,`+
    `type.typeName as typename ,`+
    `type.orderNum as ordernum `+
    `FROM article LEFT JOIN type ON article.type_id=type.Id `+
    `WHERE article.id = ${id} `
    const ids =await this.app.mysql.query('SELECT id FROM article ')//先调出所有id，判断是不是在里面
    let id_s=ids.map(a=>a.id)
    console.log(id,id_s,id_s.indexOf(+id))
    if(id_s.indexOf(+id)>=0){//如果id存在，就返回查询结果，不存在就返回失败消息
      const result =await this.app.mysql.query(sql)
      //console.log(result)
      this.ctx.body={data:result}
    }
    else{
      this.ctx.body={message:"can't fount the id"}
    }
  }
```

```js
import React, {
  useState,
  useEffect,
  useCallback,
  useMemo,
  useRef,
} from "react";
import "../css/addArticle.css";
import { Row, Col, Input, Select, Button, DatePicker, message } from "antd";
import Marked from "../component/Marked";
import { Upload } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import axios from "axios";
import servicePath from "../config/apiUrl";
import moment from "moment";
const { Dragger } = Upload;
const { Option } = Select;
const { TextArea } = Input;
function AddArticle(props) {
    //console.log(props)
    let changer_id;//如果是跳转过来修改文章，保存这个id
  const [articleId, setArticleId] = useState(0); // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
  const [articleTitle, setArticleTitle] = useState(""); //文章标题
  const [articleContent, setArticleContent] = useState(""); //markdown的编辑内容
  const [markdownContent, setMarkdownContent] = useState("预览内容"); //html内容
  const [introducemd, setIntroducemd] = useState(""); //简介的markdown内容
  const [introducehtml, setIntroducehtml] = useState("等待编辑"); //简介的html内容
  const [showDate, setShowDate] = useState(''); //发布日期
  const [updateDate, setUpdateDate] = useState(); //修改日志的日期
  const [typeInfo, setTypeInfo] = useState([]); // 文章类别信息
  const [selectedType, setSelectType] = useState("文章类型"); //选择的文章类别
  let [filename, setFile] = useState(""); //存储导入文件名
  let prop = {
    //用于文件上传的配置
    name: "file",
    beforeUpload(file, list) {
      //注意：IE9 不支持该方法。
      console.log(list);
      if (window.FileReader) {
        let filename = file.name; //文件名
        var reader = new FileReader();
        reader.onload = function () {
          //加载完毕之后
          //console.log(this.result);
          setArticleContent(reader.result); //文件传给输入栏
          setArticleTitle(
            filename.split(".")
              ? filename
                  .split(".")
                  .slice(0, filename.split(".").length - 1)
                  .join(".")
              : ""
          ); //文件标题处理，把后缀去掉
          setFile(filename);
        };
        reader.readAsText(file);
      }
      return false;
    },
    showUploadList: false, //不显示文件list
  };
  const changeTitle = (e) => {
    //改变标题
    setArticleTitle(e.target.value);
  };
  const changeContent = (e) => {
    //改变内容
    //console.log(e.target.value);
    setArticleContent(e.target.value);
    //setMarkdownContent(Marked(e.target.value));
  };
  const changeIntroduce = (e) => {
    //改变介绍
    setIntroducemd(e.target.value);
    //setIntroducehtml(Marked(e.target.value));
  };
  const saveArticle = () => {
    //储存检验
    let flag = true;
    if (selectedType === "文章类型") {
      message.error("请选择文章类型");
      flag = false;
    }
    if (!articleTitle) {
      message.error("请输入文章标题");
      flag = false;
    }
    if (!articleContent) {
      message.error("请输入文章内容");
      flag = false;
    }
    // if (!introducemd) {
    //   message.error("请输入文章简介");
    //   flag = false;
    // }//可以没有简介
    if (!showDate) {
      message.error("请选择日期");
      flag = false;
    }
    if (flag) {
      //message.success("验证通过");
      //console.log(showDate)
      let date=showDate.replace('-','/')
      let dataProps={
          type_id:selectedType,
          article_title:articleTitle,
          article_content:articleContent,
          article_introduce:introducemd,
          article_addtime:new Date(date).getTime()
      }
      console.log(dataProps)
      if(articleId===0){
          dataProps.article_viewcount=0;
          axios({
              method: "post",
              url:servicePath.addArticle,
              withCredentials:true,
              data:dataProps,
          }).then(res=>{
              console.log(res)
              if(res.data.insertId)setArticleId(res.data.insertId)
              if(res.data.isSuccess){
                  message.success('文章发布成功')
              }else{
                  message.warn('文章发布失败')
              }
          })
      }else{
          dataProps.id=articleId
          //虽然数据库中字段是Id，但是这个地方用大写id会无法查找到，可能是egg进行了某种封装
          axios({
            method: "post",
            url:servicePath.updateArticle,
            withCredentials:true,
            data:dataProps,
          }).then(res=>{
            if(res.data.isSuccess){
                message.success('文章修改成功')
            }else{
                message.warn('文章修改失败')
            }
          })
      }
    }
  };
//获取文章类型
  const getTypeInfo = () => {
    axios({
      method: "get",
      url: servicePath.getTypeInfo,
      withCredentials: true,
    }).then((res) => {
      //console.log(res)
      if (res.data.data === "fail") {
        //守卫返回的错误信息
        localStorage.removeItem("openId");
        props.history.replace("/");
      } else {
        setTypeInfo(res.data.data);
      }
    });
  };
  //通过id获取文章
  const getArticle=()=>{
    if(props.match.params.id){
        changer_id=props.match.params.id;
        axios({
            method:'get',
            withCredentials:true,
            url:servicePath.getArticleById+changer_id,
        }).then(
            res=>{
                if(res.data.data){
                    console.log(res.data.data[0])
                    let data=res.data.data[0]
                    setArticleId(data.id)
                    setArticleTitle(data.title)
                    setArticleContent(data.content)
                    setIntroducemd(data.introduce)
                    setShowDate(moment(new Date(+data.addtime)).format('YYYY-MM-DD'))
                    setSelectType(data.t_id)
                }else{
                    props.history.go(-1);
                }
            }
        )
    }
  }
  useEffect(() => {
    getTypeInfo();
    if(props.match.params.id)getArticle()
    //console.log(typeInfo)
  }, []);
  useEffect(() => {
    setMarkdownContent(Marked(articleContent));
  }, [articleContent]); //预览随articleContent更新
  useEffect(() => {
    setIntroducehtml(Marked(introducemd));
  }, [introducemd]); //预览随articleContent更新

return (
    <div className='addArticle'>
      <Row gutter={20}>
        {/* 第一行 */}
        <Col span={18}>
          <Input
            placeholder='博客标题'
            size='large'
            value={articleTitle}
            onChange={changeTitle}
          />
        </Col>
        <Col span={3}>
          <Button size='large' type='primary' style={{ width: "100%" }} onClick={saveArticle}>
            发布
          </Button>
        </Col>
      </Row>
      <br />
      <Row gutter={20}>
        {/* 第二行 */}
        <Col span={6}>
          <Dragger {...prop}>
            <p className='ant-upload-drag-icon' style={{ padding: "0" }}>
              <InboxOutlined />
            </p>
            {filename.length == 0 ? (
              <>
                <p className='ant-upload-text'>导入markdown</p>
                <p className='ant-upload-hint'>拖拽上传/点击上传</p>
              </>
            ) : (
              <p className='ant-upload-text'>{filename}</p>
            )}
          </Dragger>
          <Select
            value={selectedType}
            size='large'
            style={{ width: "100%" }}
            onChange={(value) => {
              //   console.log(value);
              setSelectType(value);
            }}
          >
            {typeInfo.map((item, index) => {
              return (
                <Option value={item.Id} key={index}>
                  {item.typeName}
                </Option>
              );
            })}
          </Select>
          <div className='date-select'>
            <DatePicker
              placeholder='发布日期'
              size='large'
              style={{ width: "100%" }}
              onChange={(date, dateString) => {
                //console.log(date, dateString);
                if (date) {
                  setShowDate(dateString);
                } else {
                  setShowDate(null);
                }
              }}
            ></DatePicker>
          </div>
        </Col>
        <Col span={18}>
          <Row gutter={20}>
            <Col span={12}>
              <TextArea
                rows={10}
                placeholder='文章简介'
                value={introducemd}
                onChange={changeIntroduce}
              >

{/* 第三行 */}

```

#### 7.4 微调+搜索功能

微调就不详细说了。。。

```js
  async getArticleListBytitle() {
    let title=this.ctx.params.title;
    //console.log(title)
    let sql=`SELECT article.id as id ,`+
    `article.article_title as title ,`+
    //`article.article_content as content ,`+
    //`article.article_introduce as introduce ,`+
    `article.article_addtime as addtime ,`+
    `article.article_viewcount as viewcount ,`+
    //`type.id as t_id ,`+
    `type.typeName as typename ,`+
    `type.orderNum as ordernum `+
    `FROM article LEFT JOIN type ON article.type_id=type.Id `+
    `WHERE article.article_title LIKE "%${title}%" `+
    `ORDER BY article.id DESC`//倒叙排列
    const { ctx } = this;
    const resList= await this.app.mysql.query(sql);//查询语句
    ctx.body = {list:resList};
  }
```

![image-20200614184850109](https://gitee.com/mus-z/blogImage/raw/master/img/20200614184859.png)

```js
      <Search
      placeholder="search article"
      onSearch={value => {getListBytitle(value)}}
      style={{ width: 200 }}
    />
```

```js
  const getListBytitle = (title) => {
    setIsLoading(true);
    axios({
      method: "get",
      url: servicePath.getArticleListBytitle+title,
      withCredentials: true,
    }).then(async (res) => {
      //console.log(res);
      setIsLoading(false);
      let list = await res.data.list.map((a) => {
        let b = a.addtime;
        b = moment(+b).format("YYYY-MM-DD"); //把时间戳format成需要的格式
        a._addtime = b; //保留原始时间戳为addtime,转换后的为_addtime
        return a;
      });
      setArticleList(list);
      //console.log(res.data.list)
    });
  };
```

![image-20200614185112483](https://gitee.com/mus-z/blogImage/raw/master/img/20200614185114.png)

#### 7.5 可伸缩列Table找到解决方案

关于不能拖拽的bug，从网上找到了解决办法。解决方法是在onResizeStop的时候触发重置事件而不是onResize

感谢：

[https://blog.csdn.net/qq_34398777/article/details/106303169](https://blog.csdn.net/qq_34398777/article/details/106303169)

```js
import React, { useState, useEffect, useRef } from "react";
import { List, Row, Col, Modal, message, Button, Table, Input } from "antd";
import { AudioOutlined } from "@ant-design/icons";
import axios from "axios";
import servicePath from "../config/apiUrl";
import moment from "moment";
import "../css/ArticleList.css";
import { Resizable } from "react-resizable";
const { confirm } = Modal;
const { Search } = Input;

export default ArticleList;

```

#### 7.6 端口修改

后台单页面(SPA)react-app改成9000端口

![image-20200615130219970](https://gitee.com/mus-z/blogImage/raw/master/img/20200615130407.png)

前台SSR渲染多页面应用（MPA）next-app改成9001端口

![image-20200615130427760](https://gitee.com/mus-z/blogImage/raw/master/img/20200615130428.png)

给中台服务的config.default.js的cors跨域做一下调整，设置白名单

![image-20200615130525437](https://gitee.com/mus-z/blogImage/raw/master/img/20200615130526.png)