MySQL と JavaScript を使用して単純なタスク マネージャーを開発する方法

MySQL と JavaScript を使用してシンプルなタスク マネージャーを開発する方法

概要:
タスク マネージャーは、毎日のタスクの完了を整理および追跡するのに役立つ一般的なアプリケーションです。タスク。この記事では、MySQL と JavaScript を使用して単純なタスク マネージャーを開発する方法を学びます。管理者はタスクの追加、編集、削除ができるほか、タスクリストの表示や検索機能も持つことができます。タスク情報を保存するデータベースとして MySQL を使用し、フロントエンド ユーザー インターフェイスを実装してデータベースと対話するために JavaScript を使用します。

準備:

• MySQL データベースをインストールします。
• データベース (task_manager など) を作成し、タスク名、期限、優先度などのタスク情報を保存するタスク テーブル (タスクなど) を作成します。

開発タスク マネージャー:

1. データベース接続の確立
   JavaScript では、MySQL 接続ライブラリを使用してデータベースとの接続を確立する必要があります。サンプル コードは次のとおりです。

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. タスクの追加
   タスク マネージャーでタスクを追加できます。フロントエンド フォームを通じてタスク関連情報を取得し、それをタスク テーブルに挿入します。サンプル コードは次のとおりです。

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. タスクの編集
   既存のタスクを編集できます。フロントエンドフォームから更新されたタスク情報を取得し、タスクテーブルに更新します。サンプル コードは次のとおりです。

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. タスクの削除
   タスク マネージャーからタスクを削除できます。サンプルコードは以下のとおりです。

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

5. タスクリストの表示
   データベースからタスクリストを取得し、フロントエンドに表示します。サンプル コードは次のとおりです。

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

6. タスクの検索
   キーワードに基づいてタスク リストを検索できます。サンプル コードは次のとおりです。

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

概要:
MySQL と JavaScript を使用してタスク マネージャーを開発すると、タスクの追加、編集、削除、タスク リストの表示や検索が可能になります。フロントエンドインターフェイス上 タスク固有の機能。上記は簡単なコード例ですが、必要に応じてコードを変更および拡張して、より多くの機能とより良いユーザー エクスペリエンスを実現できます。この記事が、すぐに始めて、MySQL と JavaScript を使用してタスク マネージャーを開発する方法を理解するのに役立つことを願っています。

以上がMySQL と JavaScript を使用して単純なタスク マネージャーを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。