基于 PHP + Vue 实现的项目管理系统：详细教程与代码实现

基于 PHP + Vue 实现的项目管理系统：详细教程与代码实现

一、引言

在现代软件开发过程中，项目管理系统是不可或缺的一部分。它能帮助团队更高效地进行任务分配、进度追踪和资源管理。基于PHP和Vue实现一个项目管理系统，不仅能利用PHP的强大后端处理能力，还能借助Vue的灵活前端框架，实现一个界面美观、功能丰富的项目管理系统。本文将详细介绍如何通过PHP和Vue构建一个项目管理系统，包括环境搭建、代码实现和功能解析，帮助读者全面掌握这一技术。

二、项目概述

2.1 系统功能介绍

本项目管理系统主要功能包括：

• 用户管理：用户注册、登录、权限管理。
• 项目管理：项目的创建、修改、删除、查看。
• 任务管理：任务的分配、进度更新、状态管理。
• 评论系统：用户可以对任务进行评论，便于沟通和反馈。
• 通知系统：通过邮件或系统消息通知用户任务的状态变化。

2.2 技术栈

• 后端：PHP 7.x
• 前端：Vue.js 2.x
• 数据库：MySQL
• 服务器：Apache或Nginx

三、开发环境搭建

3.1 后端环境配置

1. 安装PHP：可以通过官方网站（https://www.php.net/）下载并安装最新版本的PHP。
2. 安装MySQL：从MySQL官网（https://dev.mysql.com/downloads/mysql/）下载并安装MySQL数据库。
3. 安装Apache/Nginx：选择合适的Web服务器并安装。

3.2 前端环境配置

1. 安装Node.js：从Node.js官网（https://nodejs.org/）下载并安装Node.js，Node.js自带npm（Node Package Manager）。
2. 安装Vue CLI：使用npm安装Vue CLI，命令如下：

   npm install -g @vue/cli
   

四、数据库设计

4.1 数据库表结构

设计数据库表结构，包括用户表、项目表、任务表和评论表等。

CREATE DATABASE project_management;

USE project_management;

-- 用户表
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(255) NOT NULL,
    email VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 项目表
CREATE TABLE projects (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 任务表
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    project_id INT,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    status ENUM('pending', 'in_progress', 'completed') DEFAULT 'pending',
    assigned_to INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (project_id) REFERENCES projects(id),
    FOREIGN KEY (assigned_to) REFERENCES users(id)
);

-- 评论表
CREATE TABLE comments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task_id INT,
    user_id INT,
    comment TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (task_id) REFERENCES tasks(id),
    FOREIGN KEY (user_id) REFERENCES users(id)
);

五、后端实现

5.1 用户注册和登录

实现用户注册和登录功能，使用PHP处理表单提交并操作数据库。

// db.php - 数据库连接文件
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "project_management";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
   
    die("Connection failed: " . $conn->connect_error);
}
?>

// register.php - 用户注册
<?php
include 'db.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   
    $username = $_POST["username"];
    $password = password_hash($_POST["password"], PASSWORD_BCRYPT);
    $email = $_POST["email"];

    $sql = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')";
    if ($conn->query($sql) === TRUE) {
   
        echo "Registration successful";
    } else {
   
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    $conn->close();
}
?>

// login.php - 用户登录
<?php
include 'db.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   
    $username = $_POST["username"];
    $password = $_POST["password"];

    $sql = "SELECT * FROM users WHERE username='$username'";
    $result = $conn-><