vue笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_52906070/article/details/132267945

本文介绍了如何在Vue.js项目中使用组件和异步请求实现数据获取，包括从后端接口/bbs/topic/获取数据，以及处理删除操作的逻辑，展示了组件的生命周期管理和数据处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是写接口所需要导入的工具模块

import request from '@/utils/request'

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

提示：所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

import TopicList from "./components/TopicList";

示例以下代码功能为这个前端页面返回的是 TopicLIst.vue 这个页面，后端接口是/bbs/topic/

import TopicList from "./components/TopicList";

export default {
  name: "Topic",
  components: { TopicList },
  data() {
    return {
      mainHeight: "300px",
      results: [],
      listLoading: false,
      page: {page: 1, limit: 10},
      filters: {
        status: 0,
      },
      selectedRows: [],
    };
  },
  mounted() {
    mainHeight(this);
    this.list();
  },
  methods: {
    async list() {
      const me = this;
      me.listLoading = true;
      const params = Object.assign(me.filters, {
        // page: me.page.page,
        // limit: me.page.limit,
      });
      const result = await request({
        url: '/bbs/topic/',
        method: 'get',
        params
      })
      me.results = result.data;
      me.page = result.data.page;
      me.listLoading = false;
      // this.axios
      //   .form("/api/bbs/topic", params)
      //   .then((data) => {
      //     me.results = data.results;
      //     me.page = data.page;
      //   })
      //   .finally(() => {
      //     me.listLoading = false;
      //   });
    },

`const result`：`result` 是一个变量，用于存储请求的结果

注意me.results 这些代码，这里就是后端返回给前端的数据给接收起来。使 results这个变量能在Toplist这个页面调用

<el-link class="action-item" type="danger" icon="el-icon-delete"
             @click="deleteSubmit(topic.id)">删除</el-link>


methods: {
    async deleteSubmit(topicId) {

      try {
        const me = this;
        const flag = await this.$confirm("是否确认删除该帖子?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        if (flag) {

          const result = await request({
            url: `/bbs/topic/${topicId}/`,
            method: 'delete',
            params: {
              // topicId,
            }
          });
        }
        me.$message({ message: "删除成功", type: "success" });
        // 刷新
        this.$emit("change");

      }
      catch (err) {
        this.$notify.error({ title: "错误", message: err.message || err });

      }

使用了 async/await 来处理异步操作，主要是执行删除帖子的操作。

`/bbs/topic/${id}/recommend/` url如果加入的是pk

deleteSubmit 方法是一个异步函数，用于处理删除帖子的操作。
首先，使用 this.$confirm 方法弹出确认框，询问用户是否确认删除帖子。await 关键字等待用户点击确认或取消，根据用户的选择，flag 变量将包含 true（确认）或 false（取消）。
如果用户确认删除，使用 this.$message 方法显示一个提示消息，说明帖子删除成功。
使用 this.$emit("change") 发出一个自定义事件，通知父组件进行刷新操作。
如果出现异常，catch 代码块会捕获错误，并使用 this.$notify.error 方法显示一个错误通知。
<el-link> 是 Element UI 框架中的一个组件，用于创建链接按钮。class="action-item" 设置了样式类，type="danger" 设置按钮样式为危险类型，icon="el-icon-delete" 设置按钮图标。
@click 是 Vue.js 中的事件绑定语法，当用户点击这个链接按钮时，会触发组件中的 deleteSubmit 方法，并将当前帖子的 id 作为参数传递给该方法。
deleteSubmit(topic.id) 调用了组件中的 deleteSubmit 方法，并将当前帖子的 id 作为参数传递给该方法。这个操作会触发删除帖子的异步操作
'/bbs/topic/'：这是单引号这个 URL 是一个固定的字符串，没有包含任何变量。如果你发送 DELETE 请求到这个 URL，那么将会删除 '/bbs/topic/' 这个路径所表示的资源，而不会针对特定的帖子进行操作。
'/bbs/topic/${topicId}/'：这个 URL 使用了模板字符串，并插入了 topicId 变量的值。这意味着你可以根据具体的 topicId 值来删除对应的帖子资源。如果你不加 $，那么模板字符串中的变量将会被当作普通的字符串来处理，而不会被解析成变量的值。
这里是` 顿号` 不是单引号