Comment utiliser PHP et Vue pour développer la fonction de gestion documentaire de la gestion d'entrepôt
Avant-propos :
La gestion d'entrepôt est une tâche indispensable pour les entreprises modernes, et la gestion documentaire est une partie importante de la gestion d'entrepôt. La gestion des documents comprend différents types de documents tels que les commandes entrantes, les commandes sortantes et les ordres de transfert. En gérant ces documents, le suivi et la surveillance des marchandises en entrepôt peuvent être réalisés. Cet article expliquera comment utiliser PHP et Vue pour développer la fonction de gestion documentaire de la gestion d'entrepôt et fournira des exemples de code spécifiques.
1. Configuration du projet
1.1 Préparation de l'environnement
Pour utiliser ce projet, vous devez vous assurer que PHP, MySQL et Node.js sont installés sur votre ordinateur. Si vous n'avez pas encore installé ces outils, veuillez d'abord les installer.
1.2 Créer une base de données
Créez une base de données nommée « entrepôt » dans MySQL et créez une table nommée « documents » pour stocker les informations du document. La structure du tableau est la suivante :
CREATE TABLE `documents` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`type` varchar(50) NOT NULL,
`number` varchar(50) NOT NULL,
`create_time` datetime NOT NULL,
`status` enum('待审核','已审核','已取消') NOT NULL,
`remark` text,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;Copier après la connexion
1.3 Créer un dossier de projet
Créez les fichiers et dossiers suivants dans votre dossier de projet :
- index.html
- index.php
- api.php
- js/
- vue.js
- axios.js
- app.js
Copier après la connexion
2. Développement de la page frontale
2.1 index.html
Dans l'index.html fichier, Nous utiliserons le framework Vue pour implémenter le développement de pages frontales. Présentez d'abord le CDN de Vue.js et axios.js :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仓库管理单据管理功能</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<!-- 这里是页面内容 -->
</div>
<script src="js/app.js"></script>
</body>
</html>Copier après la connexion
2.2 app.js
Dans le fichier app.js, nous définirons l'instance Vue et implémenterons la logique spécifique de la fonction de gestion de documents. Définissez d'abord une instance Vue :
var app = new Vue({
el: '#app',
data: {
documents: [] // 存储单据列表
},
mounted: function() {
this.fetchDocuments(); // 在页面加载完成后获取单据列表
},
methods: {
fetchDocuments: function() {
axios.get('api.php?action=getDocuments')
.then(function(response) {
app.documents = response.data; // 将获取到的单据列表赋值给data中的documents
})
.catch(function(error) {
console.log(error);
});
},
// 其他功能代码
}
});Copier après la connexion
2.3 Rendu de la liste des documents
Dans la page, nous allons parcourir les documents via l'instruction v-for et utiliser le tableau pour restituer les informations du document :
<!-- 这里是页面内容 -->
<table>
<thead>
<tr>
<th>单据类型</th>
<th>单据编号</th>
<th>创建时间</th>
<th>状态</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="document in documents">
<td>{{ document.type }}</td>
<td>{{ document.number }}</td>
<td>{{ document.create_time }}</td>
<td>{{ document.status }}</td>
<td>{{ document.remark }}</td>
</tr>
</tbody>
</table>Copier après la connexion
3. Développement de l'interface back-end
3.1 index.php
Dans le fichier index.php, nous définirons l'interface pour communiquer avec la page front-end. Introduisez d'abord le fichier de configuration de la base de données db_config.php et créez une classe nommée "API".
<?php
include 'db_config.php';
class API {
// 其他功能代码
}Copier après la connexion
3.2 api.php
Dans le fichier api.php, nous traiterons la requête envoyée par le front-end et appellerons la méthode correspondante pour obtenir les données. Obtenez d'abord le paramètre "action" envoyé par le front-end, instanciez la classe API, puis appelez différentes méthodes en fonction de différentes actions.
<?php
$action = $_GET['action']; // 获取前端发送的action参数
$api = new API();
switch ($action) {
case 'getDocuments':
$api->getDocuments();
break;
// 其他功能代码
}Copier après la connexion
3.3 Implémenter la méthode getDocuments
Dans la classe API, nous implémenterons une méthode nommée "getDocuments" pour obtenir la liste des documents de la base de données.
<?php
class API {
// 其他功能代码
public function getDocuments() {
global $mysqli;
$sql = "SELECT * FROM documents";
$result = $mysqli->query($sql);
$documents = array();
while ($row = $result->fetch_assoc()) {
$documents[] = $row;
}
echo json_encode($documents);
}
}Copier après la connexion
À ce stade, nous avons terminé le développement de la fonction de gestion documentaire de la gestion d'entrepôt en utilisant PHP et Vue. Vous pouvez charger les données de la liste de documents en accédant à api.php dans index.html et ajouter d'autres codes de fonction spécifiques dans app.js. Bien entendu, il ne s’agit que d’un exemple préliminaire et vous pouvez étendre les fonctionnalités en fonction des besoins spécifiques de votre entreprise.
Il convient de noter que cet exemple de code n'inclut pas de fonctions telles que l'ajout, la suppression et la modification de données. Vous pouvez le compléter vous-même si nécessaire. Dans le même temps, afin de garantir la sécurité des données, vous devez également ajouter une authentification, une vérification d'identité et d'autres mesures de sécurité à l'interface back-end.
J'espère que cet article pourra vous aider, et je vous souhaite du succès dans le développement de la fonction de gestion documentaire de la gestion d'entrepôt !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
