Cara menggunakan PHP dan Vue untuk membina fungsi tetapan lokasi daftar masuk untuk kehadiran pekerja

Cara menggunakan PHP dan Vue untuk membina fungsi penetapan lokasi daftar masuk untuk kehadiran pekerja

Dalam beberapa tahun kebelakangan ini, dengan perkembangan teknologi dan kemajuan sosial, semakin banyak perusahaan dan institusi telah mula menggunakan kaedah elektronik untuk menguruskan kehadiran pekerja . Salah satu pautan penting ialah penetapan lokasi daftar masuk pekerja. Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk membina fungsi tetapan lokasi daftar masuk untuk kehadiran pekerja dan memberikan contoh kod khusus.

1. Persediaan

Sebelum kita mula, kita perlu menyediakan persekitaran pembangunan yang diperlukan. Kami memerlukan pelayan, yang boleh dibina menggunakan Apache atau Nginx. Pada masa yang sama, kami juga perlu memasang PHP dan MySQL sebagai bahasa pembangunan back-end dan pangkalan data. Selain itu, kami juga perlu memasang Node.js dan Vue.js sebagai alat pembangunan bahagian hadapan.

2. Cipta pangkalan data

Pertama, kita perlu mencipta pangkalan data untuk menyimpan maklumat berkaitan pekerja dan lokasi daftar masuk. Anda boleh menggunakan alatan seperti Navicat atau phpMyAdmin untuk mencipta pangkalan data bernama "kehadiran" dan mencipta dua jadual di dalamnya, "pekerja" dan "lokasi".

Struktur jadual pekerja adalah seperti berikut:

CREATE TABLE employees (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  job_title VARCHAR(50) NOT NULL,
  department VARCHAR(50) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Struktur jadual lokasi adalah seperti berikut:

CREATE TABLE locations (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  address VARCHAR(100) NOT NULL,
  latitude DECIMAL(10, 6) NOT NULL,
  longitude DECIMAL(10, 6) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. Pembangunan bahagian belakang

1. Buat fail api.php untuk mengendalikan permintaan yang dihantar oleh bahagian hadapan -tamat dan berinteraksi dengan pangkalan data.

<?php
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];

// 处理GET请求，查询数据库中的员工和签到地点信息
if ($method === 'GET') {
  $action = $_GET['action'];
  
  // 查询员工信息
  if ($action === 'employees') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");
    
    // 查询数据库中的员工信息
    $result = $conn->query('SELECT * FROM employees');
    $employees = $result->fetch_all(MYSQLI_ASSOC);
    
    // 返回员工信息
    echo json_encode($employees);
    
    // 关闭数据库连接
    $conn->close();
  }
  
  // 查询签到地点信息
  else if ($action === 'locations') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");
    
    // 查询数据库中的签到地点信息
    $result = $conn->query('SELECT * FROM locations');
    $locations = $result->fetch_all(MYSQLI_ASSOC);
    
    // 返回签到地点信息
    echo json_encode($locations);
    
    // 关闭数据库连接
    $conn->close();
  }
}

// 处理POST请求，添加员工和签到地点信息到数据库
else if ($method === 'POST') {
  $data = json_decode(file_get_contents('php://input'), true);
  $action = $data['action'];

  // 添加员工信息
  if ($action === 'addEmployee') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");
    
    // 添加员工信息到数据库
    $name = $data['name'];
    $job_title = $data['job_title'];
    $department = $data['department'];
    $conn->query("INSERT INTO employees (name, job_title, department) VALUES ('$name', '$job_title', '$department')");

    // 返回成功信息
    echo json_encode(['status' => 'success']);

    // 关闭数据库连接
    $conn->close();
  }
  
  // 添加签到地点信息
  else if ($action === 'addLocation') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");

    // 添加签到地点信息到数据库
    $name = $data['name'];
    $address = $data['address'];
    $latitude = $data['latitude'];
    $longitude = $data['longitude'];
    $conn->query("INSERT INTO locations (name, address, latitude, longitude) VALUES ('$name', '$address', '$latitude', '$longitude')");

    // 返回成功信息
    echo json_encode(['status' => 'success']);

    // 关闭数据库连接
    $conn->close();
  }
}
?>

2. Mulakan pelayan dan letakkan fail api.php dalam direktori akar pelayan.

4. Pembangunan bahagian hadapan

1. Buat fail index.html untuk memaparkan maklumat tentang pekerja dan lokasi daftar masuk, dan menyediakan fungsi menambah pekerja dan lokasi daftar masuk.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤签到地点设置</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>员工信息</h2>
    <table>
      <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>部门</th>
      </tr>
      <tr v-for="employee in employees">
        <td>{{ employee.name }}</td>
        <td>{{ employee.job_title }}</td>
        <td>{{ employee.department }}</td>
      </tr>
    </table>

    <form @submit.prevent="addEmployee">
      <input type="text" v-model="newEmployee.name" placeholder="姓名" required>
      <input type="text" v-model="newEmployee.job_title" placeholder="职位" required>
      <input type="text" v-model="newEmployee.department" placeholder="部门" required>
      <button type="submit">添加员工</button>
    </form>

    <h2>签到地点</h2>
    <table>
      <tr>
        <th>名称</th>
        <th>地址</th>
        <th>经度</th>
        <th>纬度</th>
      </tr>
      <tr v-for="location in locations">
        <td>{{ location.name }}</td>
        <td>{{ location.address }}</td>
        <td>{{ location.latitude }}</td>
        <td>{{ location.longitude }}</td>
      </tr>
    </table>

    <form @submit.prevent="addLocation">
      <input type="text" v-model="newLocation.name" placeholder="名称" required>
      <input type="text" v-model="newLocation.address" placeholder="地址" required>
      <input type="text" v-model="newLocation.latitude" placeholder="经度" required>
      <input type="text" v-model="newLocation.longitude" placeholder="纬度" required>
      <button type="submit">添加签到地点</button>
    </form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        employees: [],
        newEmployee: {
          name: '',
          job_title: '',
          department: ''
        },
        locations: [],
        newLocation: {
          name: '',
          address: '',
          latitude: '',
          longitude: ''
        }
      },
      methods: {
        addEmployee() {
          fetch('api.php', {
            method: 'POST',
            body: JSON.stringify({
              action: 'addEmployee',
              name: this.newEmployee.name,
              job_title: this.newEmployee.job_title,
              department: this.newEmployee.department
            })
          })
          .then(() => {
            this.employees.push(this.newEmployee);
            this.newEmployee = { name: '', job_title: '', department: '' };
          });
        },
        addLocation() {
          fetch('api.php', {
            method: 'POST',
            body: JSON.stringify({
              action: 'addLocation',
              name: this.newLocation.name,
              address: this.newLocation.address,
              latitude: this.newLocation.latitude,
              longitude: this.newLocation.longitude
            })
          })
          .then(() => {
            this.locations.push(this.newLocation);
            this.newLocation = { name: '', address: '', latitude: '', longitude: '' };
          });
        }
      },
      mounted() {
        fetch('api.php?action=employees')
          .then(response => response.json())
          .then(employees => {
            this.employees = employees;
          });

        fetch('api.php?action=locations')
          .then(response => response.json())
          .then(locations => {
            this.locations = locations;
          });
      }
    });
  </script>
</body>
</html>

2. Juga letakkan fail index.html dalam direktori akar pelayan.

5. Jalankan projek

1. Mulakan Apache (atau Nginx) dan pelayan MySQL.
2. Akses fail index.html dalam penyemak imbas, anda boleh melihat maklumat pekerja dan lokasi daftar masuk, dan anda boleh menambah pekerja baharu serta lokasi daftar masuk.

Melalui langkah di atas, kami berjaya menggunakan PHP dan Vue untuk membina fungsi tetapan lokasi daftar masuk untuk kehadiran pekerja, dan memberikan contoh kod khusus Kami berharap ia akan membantu anda. Sudah tentu, dalam aplikasi praktikal, pembangunan dan penambahbaikan lanjut diperlukan mengikut keperluan khusus.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membina fungsi tetapan lokasi daftar masuk untuk kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!