PHPとVueを使って倉庫管理の会員管理機能を実装する方法-PHPチュートリアル-php.cn

PHPとVueを使って倉庫管理の会員管理機能を実装する方法

PHPz

リリース： 2023-09-24 13:32:01

オリジナル

1298 人が閲覧しました

PHPとVueを使って倉庫管理の会員管理機能を実装する方法

PHP と Vue を使用して倉庫管理のメンバー管理機能を実装する方法

今日のビジネス社会において、メンバー管理は企業の発展において重要な役割を果たしています。メンバー情報をより適切に管理し、倉庫管理の効率を向上させるために、PHP と Vue を使用して倉庫管理のメンバー管理機能を実装できます。以下では、具体的な実装手順を紹介し、関連するコード例を示します。

1. データベース設計

まず、メンバー情報を保存するメンバーシップテーブルを設計する必要があります。テーブルには、メンバー ID、メンバー名、メンバーの携帯電話番号、メンバー ID カード番号、およびその他の情報のフィールドを含めることができます。このテーブルは、MySQL データベースを使用して作成できます。

2. バックエンドの実装

メンバーシップ関連のリクエストを処理するために、「member.php」という名前の PHP ファイルを作成します。
「member.php」ファイルでは、最初にデータベースに接続し、次のコードを使用できます:

$conn = new mysqli("localhost", "username", "password", "database");

if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
}

ログイン後にコピー

「ユーザー名」と「パスワード」をユーザー名に置き換えてください。とデータベースのパスワード。「データベース」をデータベースの名前に置き換えます。

すべてのメンバー情報を取得する機能を実現するには、次のコードを使用できます。

$sql = "SELECT * FROM members";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $members = array();
    while ($row = $result->fetch_assoc()) {
        $members[] = $row;
    }
    echo json_encode($members);
} else {
    echo "暂无会员信息";
}

ログイン後にコピー

このコードは、データベースからすべてのメンバー情報をクエリし、それを返します。フロントエンドへの JSON 形式。

メンバーを追加する機能を実装するには、次のコードを使用できます。

$name = $_POST["name"];
$phone = $_POST["phone"];
$idCard = $_POST["idCard"];

$sql = "INSERT INTO members (name, phone, id_card) VALUES ('$name', '$phone', '$idCard')";

if ($conn->query($sql) === TRUE) {
    echo "添加会员成功";
} else {
    echo "添加会员失败: " . $conn->error;
}

ログイン後にコピー

このコードは、メンバーの名前、携帯電話番号、ID 番号をフロントエンド、およびデータベースに挿入されるウィル。

メンバーを削除する機能を実装するには、次のコードを使用できます。

$id = $_POST["id"];

$sql = "DELETE FROM members WHERE id=$id";

if ($conn->query($sql) === TRUE) {
    echo "删除会员成功";
} else {
    echo "删除会员失败: " . $conn->error;
}

ログイン後にコピー

このコードは、フロントエンドからメンバーの ID を取得し、それをフロントエンドから削除します。データベース。

3. フロントエンドの実装

Vue インスタンスを作成し、「index.html」ファイルに Vue ライブラリと Axios ライブラリを導入します。
Vue インスタンスで、Axios を使用してリクエストを送信し、メンバーリストを取得してページに表示します。次のコードを使用できます。

new Vue({
  el: '#app',
  data: {
    members: []
  },
  mounted() {
    this.fetchMembers();
  },
  methods: {
    fetchMembers() {
      axios.get('member.php')
        .then(response => {
          this.members = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

ログイン後にコピー

このコードは、バックエンドにリクエストを送信し、メンバーリストを取得し、それを Vue インスタンスの「members」属性に割り当てます。

ページにメンバーリストを表示します。次のコードを使用できます:

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>手机号码</th>
        <th>身份证号码</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="member in members">
        <td>{{ member.id }}</td>
        <td>{{ member.name }}</td>
        <td>{{ member.phone }}</td>
        <td>{{ member.id_card }}</td>
        <td>
          <button @click="deleteMember(member.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

ログイン後にコピー

このコードは、ページにメンバーリストを表示し、各メンバーに削除ボタンを追加します。

メンバーを追加する機能を実装します。次のコードを使用できます:

<div id="app">
  <form @submit.prevent="addMember">
    <input type="text" v-model="name" placeholder="姓名" required>
    <input type="tel" v-model="phone" placeholder="手机号码" required>
    <input type="text" v-model="idCard" placeholder="身份证号码" required>
    <button type="submit">添加</button>
  </form>
  <table>
    <!-- 省略会员列表展示的代码 -->
  </table>
</div>

ログイン後にコピー

このコードは、新しいメンバー情報を追加するためのフォームをページに表示します。ユーザーが「追加」ボタンをクリックすると、「addMember」メソッドが呼び出されます。

methods: {
  addMember() {
    axios.post('member.php', {
      name: this.name,
      phone: this.phone,
      idCard: this.idCard
    })
    .then(response => {
      alert(response.data);
      this.fetchMembers();
      this.name = '';
      this.phone = '';
      this.idCard = '';
    })
    .catch(error => {
      console.log(error);
    });
  }
}

ログイン後にコピー

このコードは、バックエンドにリクエストを送信し、データベースにメンバー情報を追加し、メンバーリストを更新します。

メンバーを削除する機能を実現します。次のコードを使用できます:

methods: {
  deleteMember(id) {
    axios.post('member.php', {
      id: id
    })
    .then(response => {
      alert(response.data);
      this.fetchMembers();
    })
    .catch(error => {
      console.log(error);
    });
  }
}

ログイン後にコピー

このコードはバックエンドにリクエストを送信し、選択したメンバーをデータベースから削除し、メンバーリストを更新します。

上記の手順により、PHP と Vue を使用して倉庫管理のメンバー管理機能を実装できます。これにより会員情報の管理がより便利になり、倉庫管理の効率化が図れます。上記の内容がお役に立てば幸いです。

以上がPHPとVueを使って倉庫管理の会員管理機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。