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

PHPz
Release: 2023-09-24 13:32:01
Original
1195 people have browsed it

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); }
Copy after login

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

  1. 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 "暂无会员信息"; }
Copy after login

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

  1. 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; }
Copy after login

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.

  1. 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; }
Copy after login

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); }); } } });
Copy after login

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

  1. Display the member list on the page. You can use the following code:
ID 姓名 手机号码 身份证号码 操作
{{ member.id }} {{ member.name }} {{ member.phone }} {{ member.id_card }}
Copy after login

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

  1. Implement the function of adding members. You can use the following code:
Copy after login

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); }); } }
Copy after login

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

  1. 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); }); } }
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!