So verwenden Sie PHP und Vue, um die Check-in-Standorteinstellungsfunktion für die Mitarbeiteranwesenheit zu erstellen

So erstellen Sie mit PHP und Vue die Check-in-Standorteinstellungsfunktion für die Anwesenheit von Mitarbeitern

In den letzten Jahren haben mit der Entwicklung der Technologie und dem sozialen Fortschritt immer mehr Unternehmen und Institutionen begonnen, elektronische Methoden zu verwenden Verwalten Sie die Anwesenheit Ihrer Mitarbeiter. Einer der wichtigen Links ist die Festlegung der Check-in-Standorte für Mitarbeiter. In diesem Artikel stellen wir vor, wie Sie mit PHP und Vue eine Check-in-Standorteinstellungsfunktion für die Anwesenheit von Mitarbeitern erstellen und stellen spezifische Codebeispiele bereit.

1. Vorbereitung

Bevor wir beginnen, müssen wir die erforderliche Entwicklungsumgebung vorbereiten. Wir benötigen einen Server, der mit Apache oder Nginx erstellt werden kann. Gleichzeitig müssen wir auch PHP und MySQL als Back-End-Entwicklungssprache und Datenbank installieren. Darüber hinaus müssen wir Node.js und Vue.js als Front-End-Entwicklungstools installieren.

2. Erstellen Sie eine Datenbank

Zuerst müssen wir eine Datenbank erstellen, um mitarbeiterbezogene Informationen und Check-in-Standorte zu speichern. Sie können Tools wie Navicat oder phpMyAdmin verwenden, um eine Datenbank mit dem Namen „attendance“ zu erstellen und darin zwei Tabellen zu erstellen, „employees“ und „locations“.

Die Struktur der Mitarbeitertabelle ist wie folgt:

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

Die Struktur der Standorttabelle ist wie folgt:

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. Back-End-Entwicklung

1. Erstellen Sie eine api.php-Datei, um von der Front gesendete Anfragen zu verarbeiten -Ende und Interaktion mit der Datenbank.

<?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. Starten Sie den Server und legen Sie die Datei api.php im Stammverzeichnis des Servers ab.

4. Front-End-Entwicklung

1. Erstellen Sie eine index.html-Datei, um Informationen über Mitarbeiter und Check-in-Standorte anzuzeigen und die Funktion zum Hinzufügen von Mitarbeitern und Check-in-Standorten bereitzustellen.

<!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. Platzieren Sie außerdem die Datei index.html im Stammverzeichnis des Servers.

5. Führen Sie das Projekt aus.

1. Starten Sie den Apache- (oder Nginx-) und MySQL-Server.
2. Greifen Sie im Browser auf die Datei index.html zu, Sie können die Informationen zu Mitarbeitern und Check-in-Standorten anzeigen und neue Mitarbeiter und Check-in-Standorte hinzufügen.

Durch die oben genannten Schritte haben wir erfolgreich PHP und Vue verwendet, um die Check-in-Standorteinstellungsfunktion für die Mitarbeiteranwesenheit zu erstellen, und haben konkrete Codebeispiele bereitgestellt. Wir hoffen, dass dies für Sie hilfreich ist. Natürlich sind in der Praxis je nach Bedarf Weiterentwicklungen und Verbesserungen erforderlich.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie PHP und Vue, um die Check-in-Standorteinstellungsfunktion für die Mitarbeiteranwesenheit zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!