如何用PHP将AngularJS中的卡组数组插入MySQL数据库？

嘿，我来帮你搞定这个卡组构建器的数据库插入问题！看起来你已经有了基础的表单和空卡组数组，接下来咱们一步步把数据存到数据库里～

第一步：补全并优化你的表单 #

先把你截断的表单补全，加上卡组类型输入和提交按钮，还要加个区域让用户能看到当前选的卡牌，同时做基础的提交校验：

<form name="myform">
  <div class="form-group">
    <label for="name">Deck Name</label>
    <input type="text" id="name" name="name" ng-model="showCrudData.name" class="form-control" required />
  </div>
  <div class="form-group">
    <label for="type">Deck Type</label>
    <input type="text" id="type" name="type" ng-model="showCrudData.type" class="form-control" required />
  </div>
  <!-- 显示当前已选卡牌，方便用户确认 -->
  <div class="form-group mt-3">
    <h4>Selected Cards:</h4>
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="card in deck">{{card.name}} ({{card.type}})</li>
    </ul>
  </div>
  <!-- 只有表单有效且卡组有卡牌时才能提交 -->
  <button type="button" ng-click="submitDeck()" class="btn btn-primary mt-3" ng-disabled="myform.$invalid || deck.length === 0">Save Deck to Database</button>
</form>

第二步：AngularJS控制器里的提交逻辑 #

在你的控制器里，把表单数据和卡组数组合并，用$http发送POST请求到后端接口，同时处理成功和失败的情况：

angular.module('DeckBuilderApp', [])
.controller('DeckController', function($scope, $http) {
  // 初始空卡组
  $scope.deck = [];
  // 表单数据初始化
  $scope.showCrudData = {
    name: '',
    type: ''
  };

  // 假设你已经有添加卡牌到卡组的函数，比如这样（如果还没有可以参考这个）
  $scope.addCardToDeck = function(card) {
    // 可选：避免重复添加同一张卡牌
    const cardExists = $scope.deck.some(existing => existing.id === card.id);
    if (!cardExists) {
      $scope.deck.push(card);
    }
  };

  // 提交卡组到数据库的核心函数
  $scope.submitDeck = function() {
    // 把表单信息和卡组卡牌合并成一个对象
    const deckToSave = {
      name: $scope.showCrudData.name,
      type: $scope.showCrudData.type,
      cards: $scope.deck
    };

    // 发送POST请求到后端的卡组接口
    $http.post('/api/save-deck', deckToSave)
      .then(function(response) {
        // 成功后的操作：清空表单和卡组，给用户提示
        alert('Deck saved successfully! 🎉');
        $scope.showCrudData = { name: '', type: '' };
        $scope.deck = [];
      })
      .catch(function(error) {
        // 错误处理：打印日志+提示用户
        console.error('Failed to save deck:', error);
        alert('Oops, something went wrong. Try again later!');
      });
  };
});

第三步：后端接收并插入数据库（以Node.js/Express+MongoDB为例） #

后端需要先定义卡组的数据模型，然后写接口接收前端传来的数据并存入数据库：

1. 定义Mongoose模型（MongoDB）

const mongoose = require('mongoose');

// 先定义卡牌的子文档结构
const CardSchema = new mongoose.Schema({
  id: { type: String, required: true }, // 卡牌唯一标识
  name: { type: String, required: true },
  type: { type: String, required: true },
  // 可以加其他卡牌属性，比如cost、attack等
});

// 再定义卡组的主模型
const DeckSchema = new mongoose.Schema({
  name: { type: String, required: true },
  type: { type: String, required: true },
  cards: [CardSchema], // 嵌套卡牌数组
  createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Deck', DeckSchema);

2. 编写POST接口

const express = require('express');
const router = express.Router();
const Deck = require('../models/Deck');

// 接收前端的卡组数据并保存
router.post('/api/save-deck', async (req, res) => {
  try {
    const newDeck = new Deck(req.body);
    await newDeck.save();
    res.status(201).json({ message: 'Deck saved!', deck: newDeck });
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

module.exports = router;

几个关键注意事项 #

• 表单验证：用ng-disabled确保只有表单填完且卡组有卡牌时才能提交，避免无效数据。
• 数据校验：后端也要做校验，比如卡组名称不能为空，卡牌数组格式正确，防止脏数据。
• 卡牌唯一性：添加卡牌时最好判断是否已存在，避免卡组里重复卡牌。

内容的提问来源于stack exchange，提问作者can1