Cara menggunakan PHP dan Vue untuk mereka bentuk antara muka mudah alih sistem kehadiran pekerja-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk mereka bentuk antara muka mudah alih sistem kehadiran pekerja

王林

Lepaskan： 2023-09-25 09:16:01

asal

1404 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk mereka bentuk antara muka mudah alih sistem kehadiran pekerja

Dengan perkembangan pesat Internet mudah alih, reka bentuk antara muka mudah alih sistem kehadiran pekerja menjadi penting. PHP dan Vue ialah dua alatan pembangunan yang biasa digunakan Gabungan mereka boleh membantu kami mereka bentuk antara muka mudah alih yang berkuasa dan mesra pengguna. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk antara muka mudah alih sistem kehadiran pekerja dan memberikan contoh kod khusus.

1. Persediaan
Sebelum anda mula, sila pastikan anda telah memasang persekitaran pembangunan PHP dan Vue. Jika anda belum memasangnya lagi, anda boleh memasangnya mengikut dokumentasi rasmi.

2 Bina rangka kerja asas
Pertama, kami perlu mencipta rangka kerja HTML asas dan memperkenalkan pautan CDN Vue serta fail CSS dan JavaScript tersuai kami.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤系统</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <!-- Your app content here -->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="app.js"></script>
</body>
</html>

Salin selepas log masuk

3 Reka bentuk antara muka mudah alih
Seterusnya, kita boleh mula mereka bentuk antara muka mudah alih. Mula-mula, buat contoh Vue dan tentukan objek data di dalamnya untuk menyimpan data pada antara muka.

var app = new Vue({
  el: '#app',
  data: {
    employees: []
  }
});

Salin selepas log masuk

Kami kemudiannya boleh menggunakan arahan Vue dan sintaks templat untuk membina antara muka.

Pertama, kita boleh menggunakan arahan v-for untuk melingkari senarai pekerja dan memaparkan maklumat setiap pekerja.

<ul>
  <li v-for="employee in employees">{{ employee.name }}</li>
</ul>

Salin selepas log masuk

Seterusnya, kita boleh menggunakan arahan model-v untuk mengikat kotak input teks dan menetapkan nilai yang dimasukkan kepada pembolehubah data yang ditentukan.

<input type="text" v-model="newEmployeeName">
<button @click="addEmployee">添加员工</button>

Salin selepas log masuk

Dalam contoh Vue, kami perlu menambah kaedah berkaitan untuk mengendalikan operasi pengguna. Sebagai contoh, kita boleh menambah kaedah addEmployee untuk menambah pekerja baharu pada senarai.

var app = new Vue({
  el: '#app',
  data: {
    employees: [],
    newEmployeeName: ''
  },
  methods: {
    addEmployee: function() {
      this.employees.push({ name: this.newEmployeeName });
      this.newEmployeeName = '';
    }
  }
});

Salin selepas log masuk

4 Interaksi dengan bahagian belakang
Dalam sistem kehadiran pekerja, kita biasanya perlu berinteraksi dengan bahagian belakang untuk data. PHP ialah bahasa back-end yang berkuasa yang boleh membantu kami mengendalikan operasi data.

Pertama, kita perlu mencipta fail PHP untuk menerima permintaan yang dihantar oleh bahagian hadapan dan mengembalikan data yang sepadan.

<?php
// 获取所有员工的信息
function getAllEmployees() {
  // 在这里编写查询数据库的代码
  return json_encode($employees);
}

// 添加新员工
function addEmployee($name) {
  // 在这里编写插入数据库的代码
}

// 根据员工ID删除员工
function deleteEmployee($employeeId) {
  // 在这里编写删除数据库中员工的代码
}

// 根据员工ID更新员工信息
function updateEmployee($employeeId, $newName) {
  // 在这里编写更新数据库中员工信息的代码
}

// 根据员工ID获取单个员工信息
function getEmployeeById($employeeId) {
  // 在这里编写查询数据库的代码
  return json_encode($employee);
}

// 处理前端发送的请求
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
  echo getAllEmployees();
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $data = json_decode(file_get_contents("php://input"), true);
  addEmployee($data['name']);
} elseif ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
  deleteEmployee($_GET['id']);
} elseif ($_SERVER['REQUEST_METHOD'] === 'PUT') {
  $data = json_decode(file_get_contents("php://input"), true);
  updateEmployee($_GET['id'], $data['name']);
}
?>

Salin selepas log masuk

Seterusnya, dalam contoh Vue di bahagian hadapan, kita boleh menggunakan fungsi cangkuk kitaran hayat Vue untuk meminta data dari bahagian belakang dan mengemas kini antara muka.

var app = new Vue({
  el: '#app',
  data: {
    employees: [],
    newEmployeeName: ''
  },
  created: function() {
    this.fetchData();
  },
  methods: {
    fetchData: function() {
      fetch('/api/employees')
        .then(response => response.json())
        .then(data => {
          this.employees = data;
        });
    },
    addEmployee: function() {
      fetch('/api/employees', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: this.newEmployeeName })
      })
      .then(response => response.json())
      .then(data => {
        this.employees.push(data);
        this.newEmployeeName = '';
      });
    }
  }
});

Salin selepas log masuk

Pada ketika ini, kami telah selesai mereka bentuk antara muka mudah alih sistem kehadiran pekerja menggunakan PHP dan Vue. Anda boleh menambah baik dan mengoptimumkan antara muka dan kod fungsi mengikut keperluan sebenar anda.

Ringkasan
Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk antara muka mudah alih sistem kehadiran pekerja, dan menyediakan contoh kod khusus. Saya harap kandungan ini dapat membantu anda mereka bentuk antara muka mudah alih anda. Jika anda mempunyai sebarang soalan atau kekeliruan, sila berasa bebas untuk meminta bantuan kami. Semoga berjaya mereka bentuk sistem kehadiran pekerja yang berkuasa dan mesra pengguna!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk mereka bentuk antara muka mudah alih sistem kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!