uni-app中如何删除文章

发布于 1周前 作者 eggper 来自 Uni-App

uni-app中如何删除文章

Harmonyos Next教程
1 回复

在uni-app中删除文章通常涉及后端服务和前端操作的配合。以下是一个基本的实现流程，包括前端调用接口请求删除文章以及后端处理删除请求的代码示例。假设你有一个文章列表，并且每篇文章都有一个唯一的ID。

前端代码（uni-app）

  1. 假设页面结构：在pages/article/list.vue中展示文章列表，并添加一个删除按钮。
<template>
  <view>
    <view v-for="article in articles" :key="article.id">
      <text>{{ article.title }}</text>
      <button @click="deleteArticle(article.id)">删除</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  methods: {
    async deleteArticle(id) {
      try {
        const res = await uni.request({
          url: 'https://your-server.com/api/articles/' + id,
          method: 'DELETE',
          header: {
            'Content-Type': 'application/json'
          }
        });
        if (res.statusCode === 200) {
          this.articles = this.articles.filter(article => article.id !== id);
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error(error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      }
    }
  },
  onLoad() {
    // 加载文章列表
    uni.request({
      url: 'https://your-server.com/api/articles',
      success: (res) => {
        this.articles = res.data;
      }
    });
  }
};
</script>

后端代码（示例：Node.js + Express）

  1. 后端API处理删除请求：在服务器端处理DELETE请求。
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const articles = []; // 假设这是你的文章数据库

app.use(bodyParser.json());

app.delete('/api/articles/:id', (req, res) => {
  const articleId = parseInt(req.params.id, 10);
  const articleIndex = articles.findIndex(article => article.id === articleId);
  
  if (articleIndex !== -1) {
    articles.splice(articleIndex, 1);
    res.status(200).send({ message: '文章删除成功' });
  } else {
    res.status(404).send({ message: '文章未找到' });
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

在这个示例中，前端uni-app通过uni.request发送DELETE请求到后端API，后端API处理请求并删除指定ID的文章，然后返回响应。前端根据响应更新文章列表并显示相应的提示信息。

注意：这只是一个基本示例，实际开发中需要考虑更多的细节，如权限验证、错误处理、数据库操作等。

回到顶部