uniapp+vue2+json-server+uView项目(day4)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

上一篇文章中我们引入了uView组件库并且完成了配置，接下来我们就可以使用uView组件库中的组件了，我们需要使用其中的button按钮组件，我们找到官网地址： www.uviewui.com/components/… ，然后选择自己需要的按钮样式即可，这里选择镂空的按钮，具体的按钮样式代码如下所示：

 <view>
          <u-button
            text="x"
            type="primary"
            :plain="true"
            size="mini"
            color="#5be3a9"
            @click="tapBtn(item.id)"
          ></u-button>
        </view>

• 这里传入item.id是为了确认用户需要删除的是哪一个文章，当用户点击叉号的时候，通过request发送的delete请求进行数据的删除，在这之前为了增加用户的体验感我们需要引入一个模态框，当用户点击按钮的时候弹出询问用户是否需要减少该类文章的推荐，然后有取消和确认这两个选项，模态框的组件地址在：www.uviewui.com/components/… ,我们选择带取消按钮的模态框，然后在data中的return一个show，并且初始值为false即为开始时不展示这个模态框，当用户点击button按钮的时候我们令this.show = true，让模态框展示出来，然后确认和取消两个按钮都要绑定事件，取消按钮就是令this.show = false ,确定按钮也是让show为false，然后通过request发送delete请求，删除这篇文章，具体的按钮代码如下所示：

<u-modal
      :show="show"
      :title="title"
      :content="content"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>

按钮绑定的删除事件：

 cancel() {
      this.show = false;
    },
    confirm() {
      this.show = false;
      uni.request({
        url: "http://localhost:3000/news/" + this.ID,
        method: "DELETE",
      });
      this.getNewsData();
    },

这个ID是将点击按钮传过过来的item.id赋值给了ID，然后再发送请求的时候携带出去