使用Angular和MongoDB创建博客应用：编辑帖子

最新推荐文章于 2021-03-18 23:05:55 发布

cunjie3951

最新推荐文章于 2021-03-18 23:05:55 发布

阅读量184

点赞数

文章标签： java python javascript vue git ViewUI

本教程介绍如何在Angular应用中实现编辑博客文章的功能。从克隆上一部分的代码开始，添加编辑和删除图标，实现点击编辑时在弹窗中填充文章详情，并创建更新POST的REST API。此外，还涵盖了如何进行API调用来更新数据库中的文章信息。

摘要由CSDN通过智能技术生成

在本教程系列的上一部分中，您学习了如何创建添加帖子组件以添加新博客帖子。您学习了如何创建REST API端点，以将新帖子添加到MongoDB数据库。

在本系列教程的这一部分中，您将学习如何实现从博客文章列表中编辑现有博客文章的功能。

让我们从克隆本系列最后一部分的源代码开始。

git clone https://github.com/royagasthyan/AngularBlogApp-Post EditPost

导航到项目目录并安装所需的依赖项。

cd EditPost/client
npm install
cd  EditPost/server
npm install

安装依赖项后，请重新启动客户端和服务器应用程序。

cd EditPost/client
npm start
cd  EditPost/server
node app.js

将浏览器指向http：// localhost：4200 ，您将运行该应用程序。

在ShowPostComponent ，您将添加两个用于编辑和删除博客文章的图标。您将使用Font Awesome来显示编辑和删除图标。

下载字体真棒文件夹并将其包含在assets文件夹中。

在src/app/index.html页面中，包括对字体真棒CSS样式的引用。

<link rel="stylesheet" type="text/css" href="./assets/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

现在，修改show-post/show-post.component.html文件，使其包含用于编辑和删除图标HTML。

<div>
    <i title="Edit" class="fas fa-edit" aria-hidden="true"></i>
    <i title="Delete" class="fas fa-trash-alt" aria-hidden="true"></i>
</div>

这是show-post.component.html文件的外观：

<div class=

关注