【Node.js从基础到高级运用】二十六、用Nodejs完成简易TODO

引言

利用以往学习过的知识：mongodb、mongose、express来完成一个简易的TODO项目！

项目结构

• controllers
  – toDoController.js
• models
  – toDoModel.js
  – toDoRepository.js
  – toDoService.js
• public
  – index.html
  – styles.css
• to-do-list.js

项目成果

项目代码

controllers

// 引入服务层
const taskService = require('../models/toDoService');

const express= require('express');

const router = express.Router();


router.get('/tasks/:id?',async (req,res)=> {
  try {
    const tasks = await taskService.getTasks(req.params.id);
    res.status(200).send(tasks);
  } catch (error) {
    console.log('error',error)
    res.status(500).send(error);
  }
})

router.post('/tasks',async(req,res)=> {
  let data = req.body;
  try {
    await taskService.addTask(data);
    res.status(200).send({
      code:200,
      msg:'ok'
    });
  } catch (error) {
    console.log('error',error)
    res.status(500).send(error);
  }
})

router.post('/tasks/update',async(req,res)=> {
  let {id, taskName} = req.body;
  try {
    const tasks = await taskService.updateTaskById(id, taskName);
    res.status(200).send(tasks);
  } catch (error) {
    console.log('error',error)
    res.status(500).send(error);
  }
})

router.post('/tasks/del',async(req,res)=> {
  let {id} = req.body;
  try {
    await taskService.deleteTaskById(id);
    res.status(200).send({
      code:200,
      msg:'delete:ok'
    });
  } catch (error) {
    console.log('error',error)
    res.status(500).send(error);
  }
})

module.exports = router

toDoModel

// 引入mongoose，用于定义模型和操作MongoDB
const mongoose = require('mongoose');

const toDoSchema = new mongoose.Schema({
  taskName:{type: String}
})

module.exports = mongoose.model('ToDoList', toDoSchema)

toDoRepository

const toDoModel = require('./toDoModel');

class ToDoRepo {
  async createTask(data) {
    const task = new toDoModel(data);
    return await task.save();
  }
  // 查找所有
  async getTasks() {
    return await toDoModel.find();
  }
  // 查找特定数据
  async getTaskById(id) {
    return await toDoModel.findById(id);
  }
  // 修改特定数据
  async upTaskById(id,data) {
    return await toDoModel.findByIdAndUpdate(id,{taskName:data },{new:true})
  }
  // 删除特定数据
  async delTaskById(id) {
    return await toDoModel.findByIdAndRemove(id)
  }
}

module.exports = new ToDoRepo();

toDoService

可以在该文件夹中对数据库操作前的一些业务逻辑

// 引入用户仓储

const toDoRepository = require('./toDoRepository');
    // 可以在这里添加前的业务逻辑，如校验数据格式等
class toDoService  {
  async addTask(data) {
    return await toDoRepository.createTask(data);
  }
  async getTasks(data) {
    if(data) {
      return await this.getTaskById(data)
    }
    return await toDoRepository.getTasks(data);
  }
  async getTaskById(id) {
    return await toDoRepository.getTaskById(id); 
  }
  async updateTaskById(id,data) {
    return await toDoRepository.upTaskById(id,data); 
  }
  async deleteTaskById(id) {
    return await toDoRepository.delTaskById(id); 
  }
}

// 导出服务实例
module.exports = new toDoService();

to-do-list

const mongose = require('mongoose');
const express = require('express');
const toDoRoutes = require('./controllers/toDoController')
// var bodyParser = require('body-parser')
const app = express();
app.use(express.json());
// app.use(bodyParser.json())
app.use(express.static('public')); // `public`目录下的文件现在可以通过Web访问了
app.use(toDoRoutes);
mongose.connect('mongodb://localhost:27017/mydb').then(res=> {
  console.log('服务器启动成功')
})


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

开启mogodb数据库

mongo

HTML

<div class="todo-container">
        <h1>我的待办事项</h1>
        <input type="text" id="todo-input" placeholder="添加新任务...">
        <button id="add-btn">添加</button>
        <ul id="todo-list"></ul>
    </div>

JS

<script>
        var addBtn = document.getElementById('add-btn')
        var todoInpt = document.getElementById('todo-input')
        var list = document.getElementById('todo-list');
        getList();

        addBtn.addEventListener('click', function () {
            var value = todoInpt.value;
            if (value) {
                addTask(value)
                todoInpt.value = '';
            }
        });

        async function getList() {
            const response = await fetch('http://localhost:9500/tasks');

            const data = await response.json();
            createItems(data)
        }
        
        // 添加api
        async function addTask(taskName) {
            const response = await fetch('http://localhost:9500/tasks', {
                method: 'POST',
                headers: {
                    'Content-Type': "application/json"
                },
                body: JSON.stringify({  // 请求体需要转换为 JSON 字符串
                    taskName: taskName
                })
            });
            const data = await response.json();
            if (data.code === 200) {
                // alert('添加成功')
                getList()
            }
        }

        // 更新Api
        async function updateTask(id, taskName) {
            const response = await fetch('http://localhost:9500/tasks/update', {
                method: 'POST',
                headers: {
                    'Content-Type': "application/json"
                },
                body: JSON.stringify({  // 请求体需要转换为 JSON 字符串
                    id,
                    taskName
                })
            });
            const data = await response.json();
            if (data) {
                getList()
            }
        }
        
        // 删除api
        async function removeTask(id) {
            const response = await fetch('http://localhost:9500/tasks/del', {
                method: 'POST',
                headers: {
                    'Content-Type': "application/json"
                },
                body: JSON.stringify({  // 请求体需要转换为 JSON 字符串
                    id,
                })
            });
            const data = await response.json();
            if (data) {
                getList()
            }
        }

        // 创建button
        function createButton(className, text, handler) {
            const button = document.createElement('button');
            button.classList.add(className);
            button.textContent = text;
            button.addEventListener('click', handler);
            return button;
        }

        // 循环创建dom
        function createItems(data) {
            list.innerHTML = '';
            data.forEach(item => {
                const listItem = document.createElement('li');
                listItem.textContent = item.taskName;
                listItem.setAttribute('id', item._id);

                const buttons = document.createElement('div');

                const editButton = createButton('edit-btn', '编辑', () => {
                    const newText = prompt('修改任务:', item.taskName);
                    if (newText) {
                        updateTask(item._id, newText);
                    }
                });

                const removeButton = createButton('delete-btn', '删除', () => {
                    removeTask(item._id);
                });

                buttons.appendChild(editButton);
                buttons.appendChild(removeButton);
                listItem.appendChild(buttons);
                list.appendChild(listItem);
            });
        }


    </script>