uni-app 商品规格添加

在处理 uni-app 中的商品规格添加功能时，我们通常会涉及到前端页面的动态渲染和后端数据的交互。以下是一个简化的示例，展示如何在 uni-app 中实现商品规格添加功能。

前端部分（uni-app）

首先，我们需要在前端页面创建一个表单，允许用户添加商品规格。我们可以使用 v-for 指令来动态渲染规格列表，并使用 @click 事件监听器来添加新的规格项。

<template>
  <view>
    <view v-for="(spec, index) in specs" :key="index">
      <input v-model="spec.name" placeholder="规格名称" />
      <input v-model="spec.value" placeholder="规格值" />
    </view>
    <button @click="addSpec">添加规格</button>
    <button @click="submitSpecs">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      specs: [
        { name: '', value: '' }
      ]
    };
  },
  methods: {
    addSpec() {
      this.specs.push({ name: '', value: '' });
    },
    submitSpecs() {
      uni.request({
        url: 'https://your-backend-api/specs',
        method: 'POST',
        data: {
          specs: this.specs
        },
        success: (res) => {
          console.log('规格提交成功', res.data);
        },
        fail: (err) => {
          console.error('规格提交失败', err);
        }
      });
    }
  }
};
</script>

后端部分（示例，Node.js + Express）

在后端，我们需要一个API来处理规格数据的接收和存储。以下是一个使用Node.js和Express的简单示例：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/specs', (req, res) => {
  const specs = req.body.specs;
  // 在这里处理规格数据，例如存储到数据库
  console.log('接收到的规格数据:', specs);

  // 模拟成功响应
  res.json({ message: '规格数据接收成功' });
});

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

总结

以上代码展示了如何在 uni-app 中实现商品规格的动态添加和提交功能，以及在后端使用Node.js和Express处理这些规格数据。在实际项目中，你可能需要根据具体需求对代码进行调整，例如添加表单验证、错误处理、数据持久化等功能。