PHP와 Vue를 사용하여 창고 관리의 문서 관리 기능을 개발하는 방법
- PHPz원래의
- 2023-09-24 08:12:281377검색
PHP 및 Vue를 사용하여 창고 관리의 문서 관리 기능을 개발하는 방법
머리말:
창고 관리는 현대 기업에게 없어서는 안될 작업이며 문서 관리는 창고 관리의 중요한 부분입니다. 문서 관리에는 입고 주문, 출고 주문, 이전 주문 등 다양한 유형의 문서가 포함됩니다. 이러한 문서를 관리하면 창고 물품을 추적하고 모니터링할 수 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 창고 관리의 문서 관리 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 프로젝트 설정
1.1 환경 준비
이 프로젝트를 사용하려면 컴퓨터에 PHP, MySQL, Node.js가 설치되어 있는지 확인해야 합니다. 아직 이러한 도구를 설치하지 않았다면 먼저 설치하세요.
1.2 데이터베이스 생성
MySQL에 "warehouse"라는 데이터베이스를 생성하고, 문서 정보를 저장할 "documents"라는 테이블을 생성합니다. 테이블의 구조는 다음과 같습니다.
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;1.3 프로젝트 폴더 생성
프로젝트 폴더에 다음 파일과 폴더를 생성합니다.
- index.html - index.php - api.php - js/ - vue.js - axios.js - app.js
2. 프런트 엔드 페이지 개발
2.1 index.html
index.html에서 파일, Vue 프레임워크를 사용하여 프런트엔드 페이지 개발을 구현하겠습니다. 먼저 Vue.js 및 axios.js의 CDN을 소개합니다.
<!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>2.2 app.js
app.js 파일에서 Vue 인스턴스를 정의하고 문서 관리 기능의 특정 로직을 구현합니다. 먼저 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);
});
},
// 其他功能代码
}
});2.3 문서 목록 렌더링
페이지에서 v-for 명령을 통해 문서를 탐색하고 테이블을 사용하여 문서 정보를 렌더링합니다.
<!-- 这里是页面内容 -->
<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>3. 백엔드 인터페이스 개발
3.1 index.php
index.php 파일에는 프론트엔드 페이지와 통신하기 위한 인터페이스를 정의하겠습니다. 먼저 데이터베이스 구성 파일 db_config.php를 소개하고 "API"라는 클래스를 만듭니다.
<?php
include 'db_config.php';
class API {
// 其他功能代码
}3.2 api.php
api.php 파일에서는 프런트 엔드에서 보낸 요청을 처리하고 해당 메서드를 호출하여 데이터를 가져옵니다. 먼저 프런트 엔드에서 보낸 "작업" 매개변수를 가져오고 API 클래스를 인스턴스화한 다음 다양한 작업에 따라 다양한 메서드를 호출합니다.
<?php
$action = $_GET['action']; // 获取前端发送的action参数
$api = new API();
switch ($action) {
case 'getDocuments':
$api->getDocuments();
break;
// 其他功能代码
}3.3 getDocuments 메소드 구현
API 클래스에서는 데이터베이스에서 문서 목록을 가져오기 위해 "getDocuments"라는 메소드를 구현합니다.
<?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);
}
}이 시점에서 PHP와 Vue를 이용하여 창고관리의 문서관리 기능 개발을 완료했습니다. index.html에서 api.php에 접근하여 문서 목록 데이터를 불러오고, app.js에서 기타 특정 함수 코드를 추가할 수 있습니다. 물론 이는 단지 예비적인 예일 뿐이며 특정 비즈니스 요구 사항에 따라 기능을 확장할 수 있습니다.
본 샘플 코드에는 데이터 추가, 삭제, 수정 등의 기능이 포함되어 있지 않으니 필요에 따라 직접 작성하셔도 됩니다. 동시에 데이터 보안을 보장하려면 백엔드 인터페이스에 인증, 신원 확인 및 기타 보안 조치도 추가해야 합니다.
이 글이 도움이 되길 바라며, 창고관리 문서관리 기능 개발에 성공하시길 기원합니다!
위 내용은 PHP와 Vue를 사용하여 창고 관리의 문서 관리 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!