博客平台:专栏创建与管理、专栏订阅与取消订阅、专栏文章管理

<template>
  <div class="column-management">
    <h2>Create New Column</h2>
    <form @submit.prevent="createColumn">
      <input v-model="columnTitle" placeholder="Column Title" required />
      <textarea v-model="columnDescription" placeholder="Column Description"></textarea>
      <button type="submit">Create</button>
    </form>
    <h2>Your Columns</h2>
    <ul>
      <li v-for="column in columns" :key="column.id">
        {
   
   { column.title }}
        <button @click="deleteColumn(column.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columnTitle: "",
      columnDescription: "",
      columns: [],
    };
  },
  async mounted() {
    await this.fetchColumns();
  },
  methods: {
    async createColumn() {
      // ... 创建专栏的逻辑 ...
      this.columnTitle = "";
      this.columnDescription = "";
    },
    async fetchColumns() {
      // ... 获取专栏的逻辑 ...
    },
    async deleteColumn(columnId) {
      // ... 删除专栏的逻辑 ...
    },
  },
};
</script>

2.后端专栏创建与管理

在后端项目中，创建一个新的 Column 实体类，表示专栏。

@Entity
public class Column {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;

    private String description;

    @ManyToOne
    private User author;

    // ... getter 和 setter ...
}

然后，创建一个 ColumnRepository，用于操作 Column 实体。

public interface ColumnRepository extends JpaRepository<Column, Long> {
    List<Column> findByAuthorId(Long authorId);
}

接下来，在 ColumnController 中添加创建专栏、获取专栏和删除专栏的接口。

@RestController
@RequestMapping("/api/columns")
public class ColumnController {

    @Autowired
    private ColumnRepository columnRepository;

    @PostMapping
    public ResponseEntity<?> createColumn(@RequestBody Column column, Principal principal) {
        // ... 创建专栏的逻辑 ...
        return ResponseEntity.ok("Column created successfully.");
    }

    @GetMapping
    public ResponseEntity<?> getColumns(Principal principal) {
        // ... 获取专栏的逻辑 ...
    }

    @DeleteMapping("/{columnId}")
    public ResponseEntity<?> deleteColumn(@PathVariable Long columnId, Principal principal) {
        // ... 删除专栏的逻辑 ...
        return ResponseEntity.ok("Column deleted successfully.");
    }
}

二、专栏订阅与取消订阅

1.前端专栏订阅与取消订阅

在专栏详情页面添加一个订阅按钮，用户可以点击该按钮订阅或取消订阅专栏。

<template>
  <div class="column-detail">
    <!-- ... -->
    <button @click="toggleSubscription">{
   
   { isSubscribed ? 'Unsubscribe' : 'Subscribe' }}</button>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...
      isSubscribed: false,
    };
  },
  methods: {
    // ...
    async toggleSubscription() {
      if (!this.isAuthenticated) {
        alert("Please log in to subscribe to the column.");
        return;
      }

      if (this.isSubscribed) {
        // 取消订阅专栏的逻辑 ...
      } else {
        // 订阅专栏的逻辑 ...
      }
      this.isSubscribed = !this.isSubscribed;
    },
  },
};
</script>

2.后端专栏订阅与取消订阅

在后端项目中，创建一个新的 Subscription 实体类，表示用户订阅的专栏。

@Entity
public class Subscription {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @ManyToOne
    private User subscriber;

    @ManyToOne
    private Column column;

    // ... getter 和 setter ...
}

然后，创建一个 SubscriptionRepository，用于操作 Subscription 实体。

public interface SubscriptionRepository extends JpaRepository<Subscription, Long> {
    Optional<Subscription> findBySubscriberIdAndColumnId(Long subscriberId, Long columnId);
    List<Subscription> findBySubscriberId(Long subscriberId);
    void deleteBySubscriberIdAndColumnId(Long subscriberId, Long columnId);
}

接下来，在 SubscriptionController 中添加订阅专栏和取消订阅专栏的接口。

@RestController
@RequestMapping("/api/subscriptions")
public class SubscriptionController {

    @Autowired
    private SubscriptionRepository subscriptionRepository;

    @PostMapping("/{columnId}")
    public ResponseEntity<?> subscribeColumn(@PathVariable Long columnId, Principal principal) {
        // ... 订阅专栏的逻辑 ...
        return ResponseEntity.ok("Column subscribed successfully.");
    }

    @DeleteMapping("/{columnId}")
    public ResponseEntity<?> unsubscribeColumn(@PathVariable Long columnId, Principal principal) {
        // ... 取消订阅专栏的逻辑 ...
        return ResponseEntity.ok("Column unsubscribed successfully.");
    }
}

至此，我们已经实现了专栏订阅与取消订阅功能。用户可以在专栏详情页面订阅或取消订阅专栏。接下来，你可以实现专栏文章管理模块。

三、专栏文章管理模块

1.前端专栏文章管理

在专栏管理页面，为每个专栏添加一个文章管理按钮，点击该按钮可以进入专栏文章管理页面。在专栏文章管理页面，用户可以查看、添加、编辑和删除专栏文章。

<!-- ColumnManagement.vue -->
<template>
  <div class="column-management">
    <!-- ... -->
    <ul>
      <li v-for="column in columns" :key="column.id">
        {
   
   { column.title }}
        <button @click="deleteColumn(column.id)">Delete</button>
        <button @click="navigateToArticleManagement(column.id)">Manage Articles</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    // ...
    navigateToArticleManagement(columnId) {
      this.$router.push({ name: "ColumnArticleManagement", params: { columnId } });
    },
  },
};
</script>

创建一个新的 ColumnArticleManagement.vue 组件，用于管理专栏文章。

<template>
  <div class="column-article-management">
    <h2>Column Articles</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {
   
   { article.title }}
        <button @click="deleteArticle(article.id)">Delete</button>
        <button @click="navigateToArticleEdit(article.id)">Edit</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [],
    };
  },
  async mounted() {
    await this.fetchArticles();
  },
  methods: {
    async fetchArticles() {
      // ... 获取专栏文章的逻辑 ...
    },
    async deleteArticle(articleId) {
      // ... 删除专栏文章的逻辑 ...
    },
    navigateToArticleEdit(articleId) {
      this.$router.push({ name: "ArticleEdit", params: { articleId } });
    },
  },
};
</script>

2.后端专栏文章管理

在后端项目中，修改 Article 实体类，添加一个 Column 类型的属性，表示文章所属的专栏。

@Entity
public class Article {
    // ...

    @ManyToOne
    private Column column;

    // ...
}

在 ArticleRepository 中，添加一个方法，根据专栏 ID 查找文章。

public interface ArticleRepository extends JpaRepository<Article, Long> {
    // ...
    List<Article> findByColumnId(Long columnId);
}

接下来，在 ArticleController 中添加获取专栏文章和删除专栏文章的接口。

@RestController
@RequestMapping("/api/columns/{columnId}/articles")
public class ArticleController {

    @Autowired
    private ArticleRepository articleRepository;

    // ...

    @GetMapping
    public ResponseEntity<?> getColumnArticles(@PathVariable Long columnId) {
        // ... 获取专栏文章的逻辑 ...
    }

    @DeleteMapping("/{articleId}")
    public ResponseEntity<?> deleteColumnArticle(@PathVariable Long columnId, @PathVariable Long articleId, Principal principal) {
        // ... 删除专栏文章的逻辑 ...
        return ResponseEntity.ok("Article deleted successfully.");
    }
}

至此，我们已经实现了专栏文章管理模块。用户可以在专栏管理页面查看、添加、编辑和删除专栏文章。

3.文章添加与编辑

在专栏文章管理页面，添加一个"创建文章"按钮，点击该按钮可以进入文章创建页面。在文章创建页面，用户可以填写文章的标题、内容、分类和标签，然后提交表单以创建文章。文章编辑页面与文章创建页面类似，用户可以修改文章的标题、内容、分类和标签。

<!-- ColumnArticleManagement.vue -->
<template>
  <div class="column-article-management">
    <!-- ... -->
    <button @click="navigateToArticleCreate">Create Article</button>
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    // ...
    navigateToArticleCreate() {
      this.$router.push({ name: "ArticleCreate", params: { columnId: this.$route.params.columnId } });
    },
  },
};
</script>

创建一个新的 ArticleCreate.vue 组件，用于创建文章。

<template>
  <div class="article-create">
    <form @submit.prevent="createArticle">
      <!-- ... 文章标题、内容、分类和标签的表单字段 ... -->
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ... 文章标题、内容、分类和标签的数据 ...
    };
  },
  methods: {
    async createArticle() {
      // ... 创建文章的逻辑 ...
    },
  },
};
</script>

在后端项目中，修改 ArticleController，添加创建文章和编辑文章的接口。

@RestController
@RequestMapping("/api/columns/{columnId}/articles")
public class ArticleController {
    // ...

    @PostMapping
    public ResponseEntity<?> createArticle(@PathVariable Long columnId, @RequestBody ArticleDto articleDto, Principal principal) {
        // ... 创建文章的逻辑 ...
        return ResponseEntity.ok("Article created successfully.");
    }

    @PutMapping("/{articleId}")
    public ResponseEntity<?> updateArticle(@PathVariable Long columnId, @PathVariable Long articleId, @RequestBody ArticleDto articleDto, Principal principal) {
        // ... 更新文章的逻辑 ...
        return ResponseEntity.ok("Article updated successfully.");
    }
}

至此，我们已经实现了文章的添加与编辑功能。用户可以在专栏文章管理页面创建新文章，也可以对已有文章进行编辑。接下来，你可以继续完善其他功能，例如文章搜索与推荐、文章阅读统计等。

接下来，我们将实现文章搜索与推荐功能以及文章阅读统计功能。

四、文章搜索与推荐功能

前端文章搜索与推荐

在前端项目中，创建一个新的 ArticleSearch.vue 组件，用户可以在此页面搜索文章。

<template>
  <div class="article-search">
    <input type="text" v-model="searchQuery" @input="searchArticles" />
    <ul>
      <li v-for="article in searchResults" :key="article.id">
        {
   
   { article.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: "",
      searchResults: [],
    };
  },
  methods: {
    async searchArticles() {
      // ... 搜索文章的逻辑 ...
    },
  },
};
</script>

2.后端文章搜索与推荐

在后端项目中，修改 ArticleRepository，添加一个方法，根据关键词搜索文章。

public interface ArticleRepository extends JpaRepository<Article, Long> {
    // ...
    List<Article> findByTitleContainingIgnoreCase(String keyword);
}

接下来，在 ArticleController 中添加搜索文章的接口。

@RestController
@RequestMapping("/api/articles")
public class ArticleController {
    // ...

    @GetMapping("/search")
    public ResponseEntity<?> searchArticles(@RequestParam String query) {
        // ... 搜索文章的逻辑 ...
    }
}

至此，我们已经实现了文章搜索功能。用户可以在文章搜索页面根据关键词搜索文章。接下来，你可以根据需要实现文章推荐功能，例如根据用户的阅读历史、兴趣标签等推荐相关文章。

五、文章阅读统计功能

1.前端文章阅读统计

在文章详情页面添加一个阅读次数计数器，每次用户浏览文章时，阅读次数加一。

<!-- ArticleDetail.vue -->
<template>
  <div class="article-detail">
    <!-- ... -->
    <div>Read: {
   
   { readCount }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...
      readCount: 0,
    };
  },
  async mounted() {
    await this.fetchArticle();
    await this.incrementReadCount();
  },
  methods: {
    // ...
    async incrementReadCount() {
      // ... 增加阅读次数的逻辑 ...
    },
  },
};
</script>

2.后端文章阅读统计

在 Article 实体类中添加一个 readCount 属性，用于存储文章阅读次数。

@Entity
public class Article {
    // ...

    private Long readCount;

    // ...
}

接下来，在 ArticleController 中添加一个接口，用于增加文章阅读次数。

@RestController
@RequestMapping("/api/articles")
public class ArticleController {
    // ...

    @PostMapping("/{articleId}/read")
    public ResponseEntity<?> incrementReadCount(@PathVariable Long articleId) {
        // ... 增加阅读次数的逻辑 ...
    }
}

阅读统计功能。每次用户浏览文章时，文章的阅读次数会自动增加。接下来，我们可以实现文章评论功能。

六、文章评论功能

1.前端文章评论

在文章详情页面，为每篇文章添加一个评论列表，用户可以在此查看文章的评论。同时，为用户提供一个评论表单，用户可以填写评论内容并提交评论。

<!-- ArticleDetail.vue -->
<template>
  <div class="article-detail">
    <!-- ... -->
    <div class="comments">
      <h3>Comments</h3>
      <ul>
        <li v-for="comment in comments" :key="comment.id">
          {
   
   { comment.content }}
        </li>
      </ul>
      <form @submit.prevent="submitComment">
        <textarea v-model="commentContent"></textarea>
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...
      comments: [],
      commentContent: "",
    };
  },
  async mounted() {
    await this.fetchArticle();
    await this.fetchComments();
  },
  methods: {
    // ...
    async fetchComments() {
      // ... 获取文章评论的逻辑 ...
    },
    async submitComment() {
      // ... 提交文章评论的逻辑 ...
    },
  },
};
</script>

2.后端文章评论

在后端项目中，创建一个新的 Comment 实体类，用于存储文章评论。

@Entity
public class Comment {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @ManyToOne
    private Article article;

    private String content;

    // ... getter 和 setter ...
}

接下来，在 CommentRepository 中，添加一个方法，根据文章 ID 查找评论。

public interface CommentRepository extends JpaRepository<Comment, Long> {
    List<Comment> findByArticleId(Long articleId);
}

接下来，在 CommentController 中添加获取文章评论和提交文章评论的接口。

@RestController
@RequestMapping("/api/articles/{articleId}/comments")
public class CommentController {
    @Autowired
    private CommentRepository commentRepository;

    @GetMapping
    public ResponseEntity<?> getArticleComments(@PathVariable Long articleId) {
        // ... 获取文章评论的逻辑 ...
    }

    @PostMapping
    public ResponseEntity<?> submitArticleComment(@PathVariable Long articleId, @RequestBody CommentDto commentDto, Principal principal) {
        // ... 提交文章评论的逻辑 ...
    }
}

至此，我们已经实现了文章评论功能。用户可以在文章详情页面查看文章评论，并提交自己的评论。