Nodejs 开发中的 Plan It (项目管理类web app)

Nodejs 开发中的 Plan It (项目管理类web app)

planittba.meteor.com

随便看看吧 这是开发中的

6 回复

当然，我可以帮您编写一个关于“Node.js 开发中的 Plan It (项目管理类web app)”的帖子内容。我们将使用一些流行的库和框架，如Express.js来搭建后端服务，并使用EJS作为模板引擎来渲染页面。我们还会简单介绍如何使用MongoDB作为数据库。

Node.js 开发中的 Plan It (项目管理类web app)

欢迎来到Plan It，一个用Node.js开发的项目管理类web应用。Plan It旨在帮助团队更高效地协作和管理项目。目前，这是一个开发中的项目，但已经可以展示一些基本功能。

技术栈

  • 前端: HTML, CSS, JavaScript
  • 后端: Node.js, Express.js
  • 数据库: MongoDB
  • 模板引擎: EJS

示例代码

首先，确保你安装了Node.js和npm。然后创建一个新的项目目录并初始化npm：

mkdir planit
cd planit
npm init -y

接下来，安装必要的依赖：

npm install express mongoose ejs body-parser

创建一个简单的服务器文件server.js：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/planit', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义任务模型
const taskSchema = new mongoose.Schema({
    title: String,
    description: String,
    status: { type: String, default: 'To Do' }
});

const Task = mongoose.model('Task', taskSchema);

// 路由定义
app.get('/', async (req, res) => {
    const tasks = await Task.find({});
    res.render('index', { tasks });
});

app.post('/add-task', async (req, res) => {
    const { title, description } = req.body;
    const task = new Task({ title, description });
    await task.save();
    res.redirect('/');
});

app.listen(3000, () => console.log('Server started on port 3000'));

创建一个简单的HTML模板文件views/index.ejs：

<!DOCTYPE html>
<html>
<head>
    <title>Plan It</title>
</head>
<body>
    <h1>Project Tasks</h1>
    <form action="/add-task" method="POST">
        <input type="text" name="title" placeholder="Title" required />
        <textarea name="description" placeholder="Description" required></textarea>
        <button type="submit">Add Task</button>
    </form>

    <ul>
        <% tasks.forEach(task => { %>
            <li>
                <strong><%= task.title %></strong> - <%= task.description %> - Status: <%= task.status %>
            </li>
        <% }) %>
    </ul>
</body>
</html>

结论

这是一个非常基础的项目管理应用的实现。你可以在此基础上添加更多功能，如用户认证、任务状态更新等。目前，这个应用已经在本地运行，你可以通过访问http://localhost:3000查看效果。

链接

希望这能给你提供一个清晰的起点！如果你有任何问题或建议，请随时留言。


用户名密码都是 demo

或者随便注册

功能不完整 感兴趣的可以联系我一起开发

http://planittba.meteor.com/projects/FbnpoRDqv3LBuyPdk/view

Plan It 公开项目，可以在这里参与创建功能需求。

居然是meteor 开发的…开源不?

更新了很多功能，看下~

当然可以！以下是一个关于“Plan It”项目管理类Web应用的Node.js开发示例。我们将使用Express框架来构建后端服务，并使用MongoDB作为数据库。

示例代码

安装依赖

首先，确保你已经安装了Node.js和npm。然后创建一个新的项目文件夹，并初始化项目：

mkdir planit
cd planit
npm init -y

安装所需的依赖包：

npm install express mongoose body-parser

创建基本的服务器

创建一个app.js文件，并添加以下代码：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 连接到MongoDB
mongoose.connect('mongodb://localhost:27017/planit', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// 定义项目模型
const ProjectSchema = new mongoose.Schema({
    name: String,
    description: String,
    tasks: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Task' }]
});

const TaskSchema = new mongoose.Schema({
    title: String,
    description: String,
    completed: { type: Boolean, default: false }
});

const Project = mongoose.model('Project', ProjectSchema);
const Task = mongoose.model('Task', TaskSchema);

// 路由定义
app.post('/projects', async (req, res) => {
    const project = new Project(req.body);
    await project.save();
    res.status(201).send(project);
});

app.get('/projects', async (req, res) => {
    const projects = await Project.find();
    res.send(projects);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

启动服务器

运行以下命令启动服务器：

node app.js

解释

  1. Express: 用于构建RESTful API。
  2. Mongoose: 用于连接和操作MongoDB数据库。
  3. Body Parser: 用于解析请求体中的JSON数据。

我们定义了两个模型：Project 和 Task。每个项目可以包含多个任务。我们还定义了一些基本的路由来处理项目的增删改查操作。

你可以通过访问http://localhost:3000/projects来查看所有的项目，或者通过POST请求来创建新的项目。

这个简单的示例展示了如何开始构建一个项目管理应用的基本框架。你可以在此基础上继续扩展更多功能，如用户认证、任务状态跟踪等。

回到顶部