How to use PHP and Vue to implement the membership management function of warehouse management

How to use PHP and Vue to implement the member management function of warehouse management

In today's business society, member management plays an important role in the development of enterprises. In order to better manage member information and improve warehouse management efficiency, we can use PHP and Vue to implement the member management function of warehouse management. The following will introduce the specific implementation steps and provide relevant code examples.

1. Database design

First, we need to design a membership table to store member information. The table can contain the following fields: member ID, member name, member mobile phone number, member ID card number and other information. This table can be created using a MySQL database.

2. Back-end implementation

1. Create a PHP file named "member.php" to handle membership-related requests.
2. In the "member.php" file, first connect to the database, you can use the following code:

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

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

Please replace "username" and "password" with the username and password of the database , replace "database" with the name of your database.

3. To achieve the function of obtaining all member information, you can use the following code:

$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 "暂无会员信息";
}

This code will query all member information from the database and return it in JSON format to the front end.

4. To implement the function of adding members, you can use the following code:

$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;
}

This code will obtain the member’s name, mobile phone number and ID number from the front end, and will which is inserted into the database.

5. To implement the function of deleting members, you can use the following code:

$id = $_POST["id"];

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

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

This code will get the member's ID from the front end and delete it from the database.

3. Front-end implementation

1. Create a Vue instance and introduce the Vue library and Axios library in the "index.html" file.
2. In the Vue instance, use Axios to send a request, obtain the member list, and display it on the page. You can use the following code:

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);
        });
    }
  }
});

This code will send a request to the backend, obtain the member list, and assign it to the "members" attribute in the Vue instance.

3. Display the member list on the page. You can use the following code:

<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>

This code will display the member list on the page and add a delete button for each member.

4. Implement the function of adding members. You can use the following code:

<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>

This code will display a form on the page to add new member information. When the user clicks the "Add" button, the "addMember" method will be called.

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);
    });
  }
}

This code will send a request to the backend, add member information to the database, and refresh the member list.

5. Realize the function of deleting members. You can use the following code:

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

This code will send a request to the backend, delete the selected member from the database, and refresh the member list.

Through the above steps, we can use PHP and Vue to implement the member management function of warehouse management. In this way, we can manage member information more conveniently and improve the efficiency of warehouse management. Hope the above content is helpful to you!

The above is the detailed content of How to use PHP and Vue to implement the membership management function of warehouse management. For more information, please follow other related articles on the PHP Chinese website!