VUE-09 增加数据的功能（增加一个新的商品信息）

本节目的：在页面上可以看到，增加信息，比如：添加一个新的品牌， 新的用户信息，新的商品信息。

1.html,在输入框，进行数据的绑定，接收内容，点击上传

 

 2.script：方法功能，使用aixos接口的调用

 

3.路由的配置

import add   from "../pages/admin/goods_add"   //第一个add是指针，要和compoent的一致，第二个add是.vue文件的名字

const routes = [{

path: "/main", component: Main, children:

[{path: "/main/Goods_add", component: add},]//第一个Goods_add是网址的名字，第二个是指针

},]//这里是子路由

最后，完整添加信息的代码：

<template>
  <div>
    <el-form label-width="80px">
      <!-- 定义数组，来储存从服务器获取的信息，并具体指向 -->
   <!--1.双绑，在输入栏，绑定要添加的数据，之后添加到添加的数组，信息传递给服务器 -->
   <!-- goodsAddData是定义了一个数组，这数组里面的参数是需要传递给服务器的 -->
      <el-form-item label="商品名称">
        <el-input v-model="goodsAddData.name"></el-input>
      </el-form-item>
      <el-form-item label="购买限制">
        <el-input v-model="goodsAddData.butLimit"></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="goodsAddData.intro"></el-input>
      </el-form-item>

      <el-form-item label="库存">
        <el-input v-model="goodsAddData.stock"></el-input>
      </el-form-item>

      <el-form-item label="商品分类">
        <el-select v-model="goodsAddData.categoryId" placeholder="请选择分类">
          <el-option
            v-for="(item, index) in categorys"
            :key="'cate:' + index"
            :label="item.name"
            :value="item.id"
          >
          <!-- 这个是使用组件的，组件需要传递name，和id -->
          <!-- 之所以传id和name是因为我们看到的是name而计算机对比的是id，key是防止重复 -->
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品品牌">
        <el-input v-model="goodsAddData.brandId"></el-input>
      </el-form-item>
      <el-upload
        class="avatar-uploader"
        action="http://www.yhjtp.com:8761/upload/upload/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
      <!--action上传到服务器的网址， handleAvatarSuccess上传调用的方法 -->
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
     <!-- 2.点击上传，调用方法，实现数据上传 -->
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",//上传图片需要定义的路径变量
      categorys: [],//选择产品分类时，要先定义一个数组，接收从服务接收的分类信息
      goodsAddData: {
        // 1.需要向服务器传递的参数
        name: "",
        brandId: 1,
        categoryId: "",
        stock: "",
        intro: "",
        butLimit: 0,
        price: 0,
        covers: "",
      },
    };
  },
  created() {
    // 初始化，调用全部数据信息
    this.loadCategoryList();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // 上传图片的方法
      console.log(res);
      this.goodsAddData.covers = res.data.url;
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    loadCategoryList() {
      // 1.从服务器获取信息
      var that = this; //方便指对象
      this.axios.get(`/category/list/`).then(function (response) {
        // response接收服务的值之后，自定义的变量名
        that.categorys = response.data.data;
        // 这里输出的商品的分类
        console.log(response);
      });
    },
    onSubmit() {
      // 2.传送接收到的信息到服务器
      var that = this; //方便指对象
      this.axios
        .post(`/goods/add/`, this.goodsAddData, {
          headers: { adminToken: that.common.token },
          // axios调取接口获取功能，然后根据接口要求返回的参数
        })
        .then(function (response) {
          console.log(response);
        });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>