在本篇文章中，我们将学习如何使用 Express.js 和 Vue.js 构建一个简单的 Todo 应用。这个应用将使用 Express.js 作为后端框架，并使用 Vue.js 作为前端框架。我们将深入探讨如何从头开始构建这个应用，并提供示例代码和指导意义。
简介
Todo 应用是一个非常基础的应用，用于展示如何使用前端和后端技术构建一个应用。在这个应用中，我们将展示如何使用 Vue.js 构建一个简单的前端界面，以及如何使用 Express.js 构建一个简单的后端 API。
准备工作
在开始构建 Todo 应用之前，我们需要安装一些必要的软件和工具。你需要安装以下软件：
- Node.js（版本 8 或更高版本）
- NPM（通常随 Node.js 一起安装）
创建项目
首先，我们需要创建一个新的项目目录，并在其中创建一个新的 Node.js 项目。打开命令行工具，并执行以下命令：
mkdir todo-app cd todo-app npm init -y
这将创建一个名为 todo-app 的新目录，并在其中创建一个新的 Node.js 项目。我们使用 -y 选项来自动接受默认设置，以便快速创建项目。
安装依赖
接下来，我们需要安装一些必要的依赖。我们将使用 Express.js 和 Vue.js，因此需要安装它们的依赖。在命令行工具中执行以下命令：
npm install express body-parser cors --save npm install vue vue-router --save
这将安装 Express.js、body-parser、cors、Vue.js 和 Vue Router 的依赖。
创建后端 API
我们将从创建后端 API 开始。打开项目目录，并创建一个名为 server.js 的新文件。在这个文件中，我们将创建一个简单的 Express.js 应用，并创建一些路由来处理 HTTP 请求。
首先，我们需要引入依赖：
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');接下来，我们需要创建一个新的 Express.js 应用：
const app = express();
然后，我们需要配置应用，以便使用 body-parser 和 cors 中间件：
app.use(bodyParser.json()); app.use(cors());
现在，我们可以创建一些路由来处理 HTTP 请求。我们将创建一个 /api/todos 路由来处理 Todo 相关的请求。在 server.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const todos = [
{ id: 1, text: 'Buy milk', done: false },
{ id: 2, text: 'Take out the trash', done: true },
{ id: 3, text: 'Do laundry', done: false },
];
let nextId = 4;
app.get('/api/todos', (req, res) => {
res.json(todos);
});
app.post('/api/todos', (req, res) => {
const todo = {
id: nextId++,
text: req.body.text,
done: false,
};
todos.push(todo);
res.json(todo);
});
app.put('/api/todos/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const todo = todos.find((t) => t.id === id);
if (todo) {
todo.text = req.body.text;
todo.done = req.body.done;
res.json(todo);
} else {
res.status(404).json({ error: 'Todo not found' });
}
});
app.delete('/api/todos/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const index = todos.findIndex((t) => t.id === id);
if (index !== -1) {
todos.splice(index, 1);
res.json({ success: true });
} else {
res.status(404).json({ error: 'Todo not found' });
}
});这将创建一个 /api/todos 路由，并添加 GET、POST、PUT 和 DELETE 请求处理程序。GET 请求处理程序将返回所有 Todo，POST 请求处理程序将添加一个新的 Todo，PUT 请求处理程序将更新一个 Todo，DELETE 请求处理程序将删除一个 Todo。
现在，我们已经创建了后端 API，我们可以测试它是否工作。在命令行工具中执行以下命令：
node server.js
这将启动 Express.js 应用，并监听在默认端口（3000）上。现在，我们可以使用浏览器或 curl 来测试 API：
curl http://localhost:3000/api/todos
这将返回所有 Todo。
创建前端界面
现在，我们已经创建了后端 API，我们可以开始创建前端界面。我们将使用 Vue.js 创建一个简单的界面，以便用户可以查看、添加、更新和删除 Todo。
首先，我们需要创建一个新的 Vue.js 应用。在 index.html 文件中添加以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>这将创建一个基本的 HTML 文件，并引入 Vue.js 和 Vue Router 库。
接下来，我们需要创建一个新的 Vue.js 应用。在 app.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const router = new VueRouter({
routes: [
{ path: '/', component: TodoList },
{ path: '/add', component: TodoAdd },
{ path: '/edit/:id', component: TodoEdit },
],
});
const app = new Vue({
router,
}).$mount('#app');这将创建一个新的 Vue.js 应用，并创建一个新的 Vue Router 实例。我们将创建三个路由：/ 路由将显示 Todo 列表，/add 路由将显示添加 Todo 的表单，/edit/:id 路由将显示更新 Todo 的表单。
现在，我们需要创建三个组件：TodoList、TodoAdd 和 TodoEdit。在 app.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const TodoList = Vue.component('todo-list', {
data() {
return {
todos: [],
};
},
created() {
fetch('/api/todos')
.then((res) => res.json())
.then((todos) => {
this.todos = todos;
});
},
methods: {
deleteTodo(id) {
if (confirm('Are you sure you want to delete this todo?')) {
fetch(`/api/todos/${id}`, {
method: 'DELETE',
})
.then((res) => res.json())
.then(() => {
this.todos = this.todos.filter((t) => t.id !== id);
});
}
},
},
template: `
<div>
<h1>Todo List</h1>
<ul>
<li v-for="todo in todos">
<router-link :to="{ name: 'edit', params: { id: todo.id } }">{{ todo.text }}</router-link>
<button @click="deleteTodo(todo.id)">Delete</button>
</li>
</ul>
<router-link :to="{ name: 'add' }">Add Todo</router-link>
</div>
`,
});
const TodoAdd = Vue.component('todo-add', {
data() {
return {
text: '',
};
},
methods: {
addTodo() {
fetch('/api/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: this.text,
}),
})
.then((res) => res.json())
.then((todo) => {
this.$router.push('/');
});
},
},
template: `
<div>
<h1>Add Todo</h1>
<form @submit.prevent="addTodo">
<div>
<label for="text">Text:</label>
<input type="text" id="text" v-model="text" required>
</div>
<div>
<button type="submit">Add</button>
<router-link :to="{ name: 'home' }">Cancel</router-link>
</div>
</form>
</div>
`,
});
const TodoEdit = Vue.component('todo-edit', {
data() {
return {
id: null,
text: '',
done: false,
};
},
created() {
this.id = this.$route.params.id;
fetch(`/api/todos/${this.id}`)
.then((res) => res.json())
.then((todo) => {
this.text = todo.text;
this.done = todo.done;
});
},
methods: {
updateTodo() {
fetch(`/api/todos/${this.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: this.text,
done: this.done,
}),
})
.then((res) => res.json())
.then((todo) => {
this.$router.push('/');
});
},
},
template: `
<div>
<h1>Edit Todo</h1>
<form @submit.prevent="updateTodo">
<div>
<label for="text">Text:</label>
<input type="text" id="text" v-model="text" required>
</div>
<div>
<label for="done">Done:</label>
<input type="checkbox" id="done" v-model="done">
</div>
<div>
<button type="submit">Update</button>
<router-link :to="{ name: 'home' }">Cancel</router-link>
</div>
</form>
</div>
`,
});这将创建三个组件，分别用于显示 Todo 列表、添加 Todo 和更新 Todo。TodoList 组件将从 API 中获取所有 Todo，并允许用户删除它们。TodoAdd 组件将允许用户添加新的 Todo。TodoEdit 组件将允许用户更新现有的 Todo。
现在，我们已经创建了前端界面，我们可以测试它是否工作。在命令行工具中执行以下命令：
npm install -g http-server http-server
这将启动一个 HTTP 服务器，并监听在默认端口（8080）上。现在，我们可以使用浏览器访问 http://localhost:8080，并测试 Todo 应用是否工作。
总结
在本篇文章中，我们学习了如何使用 Express.js 和 Vue.js 构建一个简单的 Todo 应用。我们深入探讨了如何从头开始构建这个应用，并提供了示例代码和指导意义。现在，你已经学会了如何使用这些技术构建一个简单的应用，你可以使用这些技术来构建更复杂的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65746864d2f5e1655dda9168