P35：后台管理系统开发14-修改文章功能

本文将带大家实现修改文章功能，我们再发布一篇文章难免会遇到文章内容不对或者需要补充知识的问题，所以修改文章每天都会发生，也尤为重要。 其实做到这里，你完全已经知道我们开发的流程和基本结构了，你也可以停下阅读，自己先做做试试，如果做不出来，你可以再回来看这个文章。

编写中台接口方法

到/service/app/controller/admin/main.js文件中，新增加一个根据文章 ID 得到文章详情的方法getArticleById(),代码如下:

// 根据文章 ID 得到文章详情，用于修改文章
async getArticleById() {
  const id = this.ctx.params.id;
  const sql = 'SELECT article.id as id,' +
  'article.title as title,' +
  'article.introduce as introduce,' +
  "FROM_UNIXTIME(article.addTime,'%Y-%m-%d' ) as addTime," +
  'article.view_count as view_count ,' +
  'type.typeName as typeName ' +
  'type.id as typeId' +
  'FROM article LEFT JOIN type ON article.type_id = type.Id ' +
  'WHERE article.id = ' + id;

  const result = await this.app.mysql.query(sql);
  this.ctx.body = { data: result };
}

写完方法后，设置到/service/app/router/admin.js中进行设置，代码如下：

'use strict';
module.exports = app => {
  const { router, controller } = app;
  // const adminauth = app.middleware.adminauth();
  router.get('/admin/index', controller.admin.main.index);
  router.post('/admin/checkLogin', controller.admin.main.checkLogin);
  router.get('/admin/getTypeInfo', controller.admin.main.getTypeInfo);
  router.post('/admin/addArticle', controller.admin.main.addArticle);
  router.post('/admin/updateArticle', controller.admin.main.updateArticle);
  router.get('/admin/getArticleList', controller.admin.main.getArticleList);
  router.get('/admin/delArticle/:id', controller.admin.main.delArticle);
  router.get('/admin/getArticleById/:id', controller.admin.main.getArticleById);
};

修改 apiUrl.js 文件

打开/admin/src/config/apiUrl.js文件，编写接口路径。

let ipUrl = 'http://127.0.0.1:7001/admin/' 

let servicePath = {
    getTypeInfo: ipUrl + 'getTypeInfo', // 获得文章类别信息
    checkLogin: ipUrl + 'checkLogin', // 检查用户名密码是否正确
    addArticle: ipUrl + 'addArticle', // 添加文章
    updateArticle: ipUrl + 'updateArticle', // 修改文章
    getArticleList: ipUrl + 'getArticleList',  // 文章列表 
    delArticle: ipUrl + 'delArticle/', // 删除文章
    getArticleById: ipUrl + 'getArticleById/', // 根据 id 获取文章详情
}

export default servicePath;

updateArticle 方法编写

到/admin/src/pages/ArticleList.js文件中，编写用于跳转到添加页面的方法，只不过这个跳转需要带一个文章id过去，代码如下：

//修改文章
const updateArticle = (id,checked)=>{
    props.history.push('/index/add/'+id)
}

其实这个只是一个跳转的方法，然后我们在修改按钮上把这个方法加上

<Button type="primary" onClick={()=>{updateArticle(item.id)}}>修改</Button>

这个时候我们点击页面上的修改大家会看到页面虽然跳转了，但是是一个空白页面，路径不正确，如下效果：

这是因为我们没有配置对应的路由，我们找到/admin/src/pages/AdminIndex.js下配置路由：

<Route path="/index/add/:id" exact component={AddArticle} />

剩下的业务逻辑部分会放到AddArticle.js中进行

getArticleById 方法的编写

我们打开/admin/src/pages/AddArticle.js文件，然后在里边也添加一个getArticleById()方法，其实这个方法就是调用中台接口获得数据。

代码如下：

const getArticleById = (id) => {
    axios(servicePath.getArticleById + id,{withCredentials: true}).then(
        res => {
            let articleInfo = res.data.data[0];
            setArticleTitle(articleInfo.title);
            setArticleContent(articleInfo.article_content);
            let html = marked(articleInfo.article_content);
            setMarkdownContent(html);
            setIntroducemd(articleInfo.introduce);
            let tmpInt = marked(articleInfo.introduce);
            setIntroducehtml(tmpInt);
            setShowDate(articleInfo.addTime);
            setSelectType(articleInfo.typeId);
        }
    )
}

这样我们就完成了对页面上内容的赋值，现在只需要找个合适的机会调用这个方法就可以了。调用这个方法依然选择在useEffect方法中进行。

useEffect()方法的编写

其实我们原来已经多次使用过 useEffect 方法了，这里我们先获得 ID，如果可以获得到值，说明就是修改，这时候我们再调用刚才写的getArticleById()方法。

代码如下：

useEffect(()=>{
    getTypeInfo()
    //获得文章 ID
    let tmpId = props.match.params.id
    if(tmpId){
        setArticleId(tmpId)
        getArticleById(tmpId)
    } 
},[])

这样就可以通过传递过来的 ID，获得对应的文章详细信息，并进行修改。做完这一步就可以到浏览器中测试一下，看看有什么 Bug 进行调试就可以了。

到目前为止，我们已经完成了博客文章增、删、改、查的所有后台管理操作。当然一个博客还会有很多其它不同内容，但是你学知识应该是一通百通的。

我相信小伙伴们接下来一定可以根据自己的需要做出更好的博客系统。那代码部分的课程就到这里了，下节我会介绍一下如何把这套博客布置到公网上去，让所有人进行访问。

以上关于P35：后台管理系统开发14-修改文章功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。