Cara menggunakan PHP dan Vue untuk membina antara muka kemasukan kehadiran pekerja dalam talian

Cara menggunakan PHP dan Vue untuk membina antara muka kemasukan kehadiran pekerja dalam talian

Dalam perusahaan moden, kehadiran pekerja merupakan masalah yang mesti dihadapi dan diselesaikan oleh pengurus. Dengan perkembangan teknologi, kehadiran kertas tradisional secara beransur-ansur telah digantikan dengan sistem kehadiran elektronik. Membina antara muka kemasukan kehadiran pekerja dalam talian ialah kaedah yang sangat praktikal, yang boleh memudahkan pengurus merekodkan kehadiran pekerja dan menjalankan analisis statistik. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membina antara muka kemasukan dalam talian sedemikian, dan memberikan contoh kod khusus.

1. Persediaan awal

Pertama pastikan anda telah memasang persekitaran operasi PHP dan Vue dengan betul. PHP ialah bahasa skrip sebelah pelayan, manakala Vue ialah rangka kerja JavaScript yang popular yang menyediakan alatan untuk membina antara muka pengguna.

2. Buat pangkalan data

Mula-mula kita perlu buat pangkalan data bernama "kehadiran" dan buat jadual bernama "pekerja" di dalamnya. Jadual akan mengandungi maklumat asas pekerja, seperti nombor pekerja, nama, dsb., serta data kehadiran. Struktur jadual khusus adalah seperti berikut:

CREATE TABLE employees (
  id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  emp_id INT(11) UNSIGNED,
  name VARCHAR(50),
  attendance_date DATE,
  time_in TIME,
  time_out TIME
);

3. Pembangunan bahagian belakang

Kami menggunakan PHP untuk mengendalikan logik bahagian belakang. Mula-mula buat fail bernama "index.php" dan tambahkan kod berikut:

<?php
 
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$host = "localhost";
$db_name = "attendance";
$username = "root";
$password = "";

$conn = new PDO("mysql:host=".$host.";dbname=".$db_name, $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$data = json_decode(file_get_contents("php://input"));

$emp_id = $data->emp_id;
$name = $data->name;
$attendance_date = $data->attendance_date;
$time_in = $data->time_in;
$time_out = $data->time_out;

$query = "INSERT INTO employees (emp_id, name, attendance_date, time_in, time_out) VALUES (:emp_id, :name, :attendance_date, :time_in, :time_out)";
$stmt = $conn->prepare($query);
$stmt->bindParam(":emp_id", $emp_id);
$stmt->bindParam(":name", $name);
$stmt->bindParam(":attendance_date", $attendance_date);
$stmt->bindParam(":time_in", $time_in);
$stmt->bindParam(":time_out", $time_out);

if($stmt->execute()){
    http_response_code(201);
    echo json_encode(array("message" => "Attendance record was created."));
}
else{
    http_response_code(503);
    echo json_encode(array("message" => "Unable to create attendance record."));
}
?>

Kod di atas mula-mula menetapkan pengepala respons untuk membenarkan permintaan merentas domain. Kemudian sambung ke pangkalan data, huraikan data yang diterima ke dalam format JSON, dan masukkannya ke dalam jadual pekerja.

4. Pembangunan bahagian hadapan

Di bahagian hadapan, kami menggunakan Vue untuk membina antara muka pengguna. Gunakan Vue CLI untuk membuat projek dengan cepat dan memasang pemalam axios Anda boleh melaksanakan arahan berikut dalam terminal:

vue create attendance
cd attendance
npm install axios

Seterusnya kita perlu mengubah suai fail src/App.vue dan menambah kod berikut:

<template>
  <div id="app">
    <h1>员工考勤录入</h1>

    <form @submit.prevent="submit">
      <label for="emp_id">员工编号:</label>
      <input type="text" v-model="emp_id"> <br>

      <label for="name">员工姓名:</label>
      <input type="text" v-model="name"> <br>

      <label for="attendance_date">考勤日期:</label>
      <input type="date" v-model="attendance_date"> <br>

      <label for="time_in">签到时间:</label>
      <input type="time" v-model="time_in"> <br>

      <label for="time_out">签退时间:</label>
      <input type="time" v-model="time_out"> <br>

      <button type="submit">提交</button>
    </form>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      emp_id: '',
      name: '',
      attendance_date: '',
      time_in: '',
      time_out: '',
      message: ''
    }
  },
  methods: {
    submit() {
      axios.post('http://localhost/index.php', {
        emp_id: this.emp_id,
        name: this.name,
        attendance_date: this.attendance_date,
        time_in: this.time_in,
        time_out: this.time_out
      })
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          this.message = error.response.data.message
        })
    }
  }
}
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

Di atas. kod mencipta borang ringkas , termasuk medan seperti nombor pekerja, nama, tarikh kehadiran, masa daftar masuk dan masa daftar keluar. Apabila butang hantar diklik, permintaan POST akan dihantar ke fail index.php di bahagian belakang melalui axios. Selepas menerima respons, maklumat segera yang sepadan akan dipaparkan pada antara muka.

5. Jalankan dan uji

Lakukan arahan berikut dalam terminal untuk memulakan halaman hujung hadapan:

npm run serve

Pada masa yang sama, anda perlu meletakkan fail back-end index.php dalam direktori akar Apache atau pelayan Nginx. Pastikan anda telah memulakan pelayan web dan pelayan MySQL.

Dengan melawati http://localhost:8080, anda sepatutnya dapat melihat antara muka kemasukan kehadiran yang ringkas. Selepas mengisi borang dan mengklik hantar, rekod kehadiran yang sepadan akan disimpan ke pangkalan data.

Ringkasan

Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk membina antara muka kemasukan kehadiran pekerja dalam talian. Kami mencipta jadual yang mengandungi maklumat asas pekerja dan data kehadiran, menggunakan PHP untuk mengendalikan logik bahagian belakang, dan menggunakan Vue untuk membina antara muka pengguna. Melalui antara muka ini, pengurus boleh memasukkan rekod kehadiran pekerja dengan mudah. Saya harap contoh ini dapat membantu pembaca lebih memahami cara menggunakan PHP dan Vue untuk pembangunan web.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membina antara muka kemasukan kehadiran pekerja dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!