Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan dokumen pengurusan gudang-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan dokumen pengurusan gudang

PHPz

Lepaskan： 2023-09-24 08:18:01

asal

1429 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan dokumen pengurusan gudang

Kata Pengantar:
Pengurusan gudang adalah tugas yang amat diperlukan untuk perusahaan moden, dan pengurusan dokumen merupakan bahagian penting dalam pengurusan gudang. Pengurusan dokumen merangkumi pelbagai jenis dokumen seperti pesanan masuk, pesanan keluar, dan pesanan pemindahan Dengan menguruskan dokumen ini, pengesanan dan pemantauan barangan gudang boleh dicapai. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan dokumen pengurusan gudang, dan menyediakan contoh kod khusus.

1. Persediaan projek

1.1 Persediaan persekitaran
Untuk menggunakan projek ini, anda perlu memastikan PHP, MySQL dan Node.js dipasang pada komputer anda. Jika anda belum memasang alat ini lagi, sila pasangkannya dahulu.

1.2 Cipta pangkalan data
Buat pangkalan data bernama "gudang" dalam MySQL, dan buat jadual bernama "dokumen" untuk menyimpan maklumat dokumen. Struktur jadual adalah seperti berikut:

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;

Salin selepas log masuk

1.3 Buat folder projek
Buat fail dan folder berikut dalam folder projek anda:

- index.html
- index.php
- api.php
- js/
  - vue.js
  - axios.js
  - app.js

Salin selepas log masuk

2. Pembangunan halaman hadapan

2.1 index.html
Dalam index.html fail, Kami akan menggunakan rangka kerja Vue untuk melaksanakan pembangunan muka surat hadapan. Mula-mula memperkenalkan CDN Vue.js dan 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>

Salin selepas log masuk

2.2 app.js
Dalam fail app.js, kami akan mentakrifkan contoh Vue dan melaksanakan logik khusus fungsi pengurusan dokumen. Mula-mula tentukan contoh 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);
        });
    },
    // 其他功能代码
  }
});

Salin selepas log masuk

2.3 Memaparkan senarai dokumen
Dalam halaman, kami akan melintasi dokumen melalui arahan v-untuk dan menggunakan jadual untuk memberikan maklumat dokumen:

<!-- 这里是页面内容 -->
<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>

Salin selepas log masuk

3. Pembangunan antara muka belakang

3.1 index.php
Dalam fail index.php, kami akan menentukan antara muka untuk berkomunikasi dengan halaman hujung hadapan. Mula-mula memperkenalkan fail konfigurasi pangkalan data db_config.php dan buat kelas bernama "API".

<?php
include 'db_config.php';

class API {
  // 其他功能代码
}

Salin selepas log masuk

3.2 api.php
Dalam fail api.php, kami akan mengendalikan permintaan yang dihantar oleh bahagian hadapan dan memanggil kaedah yang sepadan untuk mendapatkan data. Mula-mula dapatkan parameter "tindakan" yang dihantar oleh bahagian hadapan, nyatakan kelas API, dan kemudian panggil kaedah yang berbeza mengikut tindakan yang berbeza.

<?php
$action = $_GET['action']; // 获取前端发送的action参数
$api = new API();

switch ($action) {
  case 'getDocuments':
    $api->getDocuments();
    break;
  // 其他功能代码
}

Salin selepas log masuk

3.3 Laksanakan kaedah getDocuments
Dalam kelas API, kami akan melaksanakan kaedah bernama "getDocuments" untuk mendapatkan senarai dokumen daripada pangkalan data.

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

Salin selepas log masuk

Pada ketika ini, kami telah menyelesaikan pembangunan fungsi pengurusan dokumen pengurusan gudang menggunakan PHP dan Vue. Anda boleh memuatkan data senarai dokumen dengan mengakses api.php dalam index.html dan menambah kod fungsi khusus lain dalam app.js. Sudah tentu, ini hanyalah contoh awal dan anda boleh melanjutkan fungsi berdasarkan keperluan perniagaan khusus anda.

Perlu diambil perhatian bahawa kod sampel ini tidak termasuk fungsi seperti menambah, memadam dan mengubah suai data Anda boleh melengkapkannya sendiri mengikut keperluan. Pada masa yang sama, untuk memastikan keselamatan data, anda juga perlu menambah pengesahan, pengesahan identiti dan langkah keselamatan lain pada antara muka belakang.

Saya harap artikel ini dapat membantu anda, dan saya doakan anda berjaya dalam pembangunan fungsi pengurusan dokumen pengurusan gudang!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan dokumen pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!