构建基于服务大厅门户的投标书管理系统

张工: 李工，最近公司需要开发一个投标书管理系统，听说你对这个领域比较熟悉？

李工: 是的，我之前参与过类似项目。我们可以通过服务大厅门户来实现，这样可以统一管理投标信息。

张工: 好啊！那我们需要哪些功能模块呢？

李工: 至少包括用户注册登录、投标书上传、项目查询、投标状态跟踪等模块。

张工: 明白了，那数据库怎么设计呢？

李工: 我建议使用MySQL，表结构如下：

                CREATE TABLE users (
                    id INT AUTO_INCREMENT PRIMARY KEY,
                    username VARCHAR(50) NOT NULL,
                    password VARCHAR(100) NOT NULL,
                    email VARCHAR(100)
                );

                CREATE TABLE projects (
                    project_id INT AUTO_INCREMENT PRIMARY KEY,
                    title VARCHAR(200) NOT NULL,
                    description TEXT,
                    deadline DATE
                );

                CREATE TABLE bids (
                    bid_id INT AUTO_INCREMENT PRIMARY KEY,
                    user_id INT,
                    project_id INT,
                    status ENUM('pending', 'approved', 'rejected'),
                    file_path VARCHAR(255),
                    FOREIGN KEY (user_id) REFERENCES users(id),
                    FOREIGN KEY (project_id) REFERENCES projects(project_id)
                );
            

张工: 这样看起来很清晰。前端页面该怎么搭建呢？

李工: 我推荐使用React框架，结合Ant Design组件库快速实现界面。

张工: React的话，登录页面的代码怎么写？

李工: 登录页面代码如下：

                import React, { useState } from "react";
                import axios from "axios";

                const Login = () => {
                    const [username, setUsername] = useState("");
                    const [password, setPassword] = useState("");

                    const handleSubmit = async (e) => {
                        e.preventDefault();
                        try {
                            const response = await axios.post("/api/login", {
                                username,
                                password
                            });
                            console.log("Login successful:", response.data);
                        } catch (error) {
                            console.error("Login failed:", error);
                        }
                    };

                    return (
                        

                             setUsername(e.target.value)} placeholder="Username" />
                             setPassword(e.target.value)} placeholder="Password" />
                            Login
                        
                    );
                };

                export default Login;
            

张工: 非常感谢！接下来我会继续完善其他功能。

李工: 不客气，有问题随时找我。