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进行调试就可以了。

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

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

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

发表评论

提供最优质的资源集合

立即查看 了解详情