普歌-智音团队 Vue用element-ui调用后端API实现添加功能

1.请求接口

//引入axios的配置
import request from '@/utils/request'

export default {
  addbanner(pugebanner) {
    return request({
      url: “后端接口”,
      method: "post",
      data: pugebanner
    })
  },
  }

2.添加按钮

    <!-- 添加按钮 -->
    <div class="button">
      <el-button type="primary" size="small" @click="adddialogVisible = true"
        >添加轮播图</el-button
      >
    </div>

3.添加对话框

<!-- 添加对话框 -->
    <el-dialog
      title="添加轮播图"
      :visible.sync="adddialogVisible"
      width="70%"
      @close="addDislogClosed"
    >
      <!-- 图片标题 -->
      <el-form
        ref="addFormRef"
        :rules="rules"
        :model="pugebanner"
        label-width="80px"
      >
        <el-form-item label="图片标题" prop="name">
          <el-input v-model="pugebanner.name"></el-input>
        </el-form-item>
        <!-- 上传轮播图 -->
        <el-form-item label="图片上传" prop="bannerUrl">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            action="https://www.pugetd.com/lsoss/fileoss"
            class="avatar-uploader"
            ref="my-upload"
          >
            <el-button>点击上传</el-button>
          </el-upload>
          <img :src="pugebanner.bannerUrl" height="200" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </span>
    </el-dialog>

4.data里

 data() {
    return {
    //全部数据
      tableData: [],
      //   添加对话框
      adddialogVisible: false,
      //   添加轮播图表单验证
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur"
          }
        ]
      },
      
      pugebanner: {
        bannerUrl:
          "",
        name: ""
      },
      //   修改信息
      modFrom: {}
    };
  },

5.methods里

 methods:{
      // 添加对话框重置操作
    addDislogClosed() {
      this.$refs.addFormRef.resetFields();
      // 上传组件的重置
      this.$refs["my-upload"].clearFiles();
    },
    // 上传成功后
    handleAvatarSuccess(response) {
      // 把返回的图片路径给到回显部分
      this.pugebanner.bannerUrl = response.data.url;
    },
    // 上传成功前，判断图片大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 确定按钮
    adduser() {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return;
        bannerApi
          .addbanner(this.pugebanner)
          .then(() => {
            this.$message.success("添加数据成功");
            this.getBanner();
          })
          .catch(() => {
            this.$message.error("添加数据失败");
          });
        this.adddialogVisible = false;
      });
    },
 }

效果图（点击按钮之后弹出添加对话框）

---

相关内容请浏览《普歌-智音团队 vue后端返回时间，转化为天数》

---

作者：lihaijin8090
本文源自：lihaijin8090的《普歌-智音团队 Vue用element-ui调用后端API实现添加功能》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。