引言
利用以往学习过的知识:
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>