蓝桥第四课：新增商品页面开发和接口调用

新增商品页面开发和接口调用

打造全面的商品管理系统

在构建一个完整的商品管理系统时，新增商品功能至关重要。本博客将指导您完成创建新增商品页面和调用接口添加商品的步骤，让您轻松掌握这一关键功能。

1. 创建新增商品页面

要创建新增商品页面，请在 src/views/shopModel 文件夹下创建一个新的页面 addShop，并在其中定义一个用于跳转至该页面的方法。

// 点击“添加商品”按钮的跳转方法
const toAddShop = () => {
  router.push({
    name: 'AddShop',
  });
};

2. 接口调用

接下来，让我们使用 axios 库调用接口添加商品。

import axios from 'axios';

// 调用接口添加商品
const addShop = (data) => {
  return axios.post('/api/addShop', data);
};

在 addShop 方法中，我们向 /api/addShop 接口发送了一个 POST 请求，并传递了商品数据。

3. 页面实现

在 addShop 页面，使用 Form 表单收集商品信息：

<template>
  <div>
    <Form :model="formData" :rules="rules" ref="formData">
      <FormItem label="商品名称" prop="name">
        <Input v-model="formData.name"></Input>
      </FormItem>
      <FormItem label="商品价格" prop="price">
        <Input v-model="formData.price"></Input>
      </FormItem>
      <FormButton type="primary" @click="submitForm('formData')">添加</FormButton>
    </Form>
  </div>
</template>

当用户点击“添加”按钮时，触发 submitForm 方法验证表单并调用 addShop 接口添加商品。

4. 提交表单

// 提交表单
submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      addShop(this.formData).then((res) => {
        // 处理添加结果
      });
    }
  });
}

5. 添加成功后跳转

添加成功后，跳转到商品列表页面：

this.$router.push({
  name: 'ShopList',
});

6. 代码示例

// 新增商品页面
<template>
  <div>
    <Form :model="formData" :rules="rules" ref="formData">
      <FormItem label="商品名称" prop="name">
        <Input v-model="formData.name"></Input>
      </FormItem>
      <FormItem label="商品价格" prop="price">
        <Input v-model="formData.price"></Input>
      </FormItem>
      <FormButton type="primary" @click="submitForm('formData')">添加</FormButton>
    </Form>
  </div>
</template>

<script>
import { Form, FormItem, Input, FormButton } from 'element-ui';
import { addShop } from '@/api/shop';

export default {
  components: { Form, FormItem, Input, FormButton },
  data() {
    return {
      formData: {
        name: '',
        price: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1-20 个字符', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', message: '价格必须为数字', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addShop(this.formData).then((res) => {
            // 处理添加结果
          });
        }
      });
    },
  },
};
</script>

// 接口调用
import axios from 'axios';

// 调用接口添加商品
const addShop = (data) => {
  return axios.post('/api/addShop', data);
};

7. 常见问题解答

• 如何限制商品名称长度？

在 rules 中设置 min 和 max 属性。

• 如何处理表单验证失败的情况？

在 submitForm 方法中，检查 valid 参数，并在验证失败时提示错误信息。

• 如何将新增的商品添加到列表中？

在添加成功后，使用事件总线或其他状态管理技术通知列表页面刷新数据。

• 如何使用其他方式调用接口？

除了 axios，还可以使用 fetch 或其他第三方库。

• 如何优化新增商品页面的性能？

使用缓存、按需加载和代码拆分等技术。

总结

通过掌握新增商品页面开发和接口调用，您将大大提升您的商品管理系统。遵循本指南中的步骤，您将能够轻松实现这一关键功能。