Comment développer un gestionnaire de tâches simple en utilisant MySQL et JavaScript

Comment développer un gestionnaire de tâches simple en utilisant MySQL et JavaScript

Présentation :
Un gestionnaire de tâches est une application courante qui nous aide à organiser et à suivre l'achèvement des tâches quotidiennes. Dans cet article, nous apprendrons comment développer un gestionnaire de tâches simple utilisant MySQL et JavaScript. Le gestionnaire aura la possibilité d'ajouter, de modifier et de supprimer des tâches, ainsi que des fonctions d'affichage et de recherche de listes de tâches. Nous utiliserons MySQL comme base de données pour stocker les informations sur les tâches, et JavaScript pour implémenter l'interface utilisateur frontale et interagir avec la base de données.

Préparation :

• Installer la base de données MySQL.
• Créez une base de données (par exemple, task_manager) et créez une table de tâches (par exemple, tâches), qui stockera les informations de la tâche, telles que le nom de la tâche, la date limite, la priorité, etc.

Gestionnaire des tâches de développement :

1. Établissement d'une connexion à la base de données
   En JavaScript, nous devons utiliser la bibliothèque de connexion MySQL pour établir une connexion à la base de données. L'exemple de code est le suivant :

const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'task_manager'
});

connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database');
});

2. Ajouter une tâche
   Nous pouvons ajouter une tâche dans le gestionnaire de tâches. Obtenez des informations relatives aux tâches via des formulaires frontaux et insérez-les dans le tableau des tâches. L'exemple de code est le suivant :

function addTask(taskName, deadline, priority) {
  const task = { name: taskName, deadline: deadline, priority: priority };
  connection.query('INSERT INTO tasks SET ?', task, (err, res) => {
    if (err) throw err;
    console.log('Task added successfully');
  });
}

3. Modifier les tâches
   Nous pouvons modifier les tâches existantes. Obtenez les informations mises à jour sur la tâche via le formulaire frontal et mettez-les à jour dans la table des tâches. L'exemple de code est le suivant :

function editTask(taskId, updatedTask) {
  connection.query('UPDATE tasks SET ? WHERE id = ?', [updatedTask, taskId], (err, res) => {
    if (err) throw err;
    console.log('Task updated successfully');
  });
}

4. Supprimer la tâche
   Nous pouvons supprimer des tâches du gestionnaire de tâches. L'exemple de code est le suivant :

function deleteTask(taskId) {
  connection.query('DELETE FROM tasks WHERE id = ?', taskId, (err, res) => {
    if (err) throw err;
    console.log('Task deleted successfully');
  });
}

5. Afficher la liste des tâches
   Nous pouvons obtenir la liste des tâches de la base de données et l'afficher sur le front-end. L'exemple de code est le suivant :

function displayTasks() {
  connection.query('SELECT * FROM tasks', (err, rows) => {
    if (err) throw err;
    console.log('Tasks:', rows);
  });
}

6. Rechercher des tâches
   Nous pouvons rechercher la liste des tâches en fonction de mots-clés. L'exemple de code est le suivant :

function searchTasks(keyword) {
  connection.query('SELECT * FROM tasks WHERE name LIKE ?', "%" + keyword + "%", (err, rows) => {
    if (err) throw err;
    console.log('Search results:', rows);
  });
}

Résumé :
En utilisant MySQL et JavaScript pour développer le gestionnaire de tâches, nous pouvons ajouter, modifier et supprimer des tâches, afficher la liste des tâches et rechercher des tâches spécifiques au premier plan. interface finale. Ce qui précède est un exemple de code simple. Vous pouvez modifier et étendre le code en fonction de vos propres besoins pour obtenir plus de fonctions et une meilleure expérience utilisateur. J'espère que cet article pourra vous aider à démarrer rapidement et à comprendre comment développer un gestionnaire de tâches à l'aide de MySQL et JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!