在本篇文章中，我们将学习如何使用 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 文件中添加以下代码：
-- -------------------- ---- -------
----- ----- - -
- --- -- ----- ---- ------ ----- ----- --
- --- -- ----- ----- --- --- ------- ----- ---- --
- --- -- ----- --- --------- ----- ----- --
--
--- ------ - --
--------------------- ----- ---- -- -
----------------
---
---------------------- ----- ---- -- -
----- ---- - -
--- ---------
----- --------------
----- ------
--
-----------------
---------------
---
------------------------- ----- ---- -- -
----- -- - ----------------------- ----
----- ---- - -------------- -- ---- --- ----
-- ------ -
--------- - --------------
--------- - --------------
---------------
- ---- -
---------------------- ------ ----- --- ------ ---
-
---
---------------------------- ----- ---- -- -
----- -- - ----------------------- ----
----- ----- - ------------------- -- ---- --- ----
-- ------ --- --- -
------------------- ---
---------- -------- ---- ---
- ---- -
---------------------- ------ ----- --- ------ ---
-
---这将创建一个 /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 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----------- -----------
------- -------------------------------------
------- --------------------------------------------
-------
------
---- ---------------
------- ----------------------
-------
-------这将创建一个基本的 HTML 文件，并引入 Vue.js 和 Vue Router 库。
接下来，我们需要创建一个新的 Vue.js 应用。在 app.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
- ----- ---- ---------- -------- --
- ----- ------- ---------- ------- --
- ----- ------------ ---------- -------- --
--
---
----- --- - --- -----
-------
------------------这将创建一个新的 Vue.js 应用，并创建一个新的 Vue Router 实例。我们将创建三个路由：/ 路由将显示 Todo 列表，/add 路由将显示添加 Todo 的表单，/edit/:id 路由将显示更新 Todo 的表单。
现在，我们需要创建三个组件：TodoList、TodoAdd 和 TodoEdit。在 app.js 文件中添加以下代码：
-- -------------------- ---- -------
----- -------- - -------------------------- -
------ -
------ -
------ ---
--
--
--------- -
-------------------
----------- -- -----------
------------- -- -
---------- - ------
---
--
-------- -
-------------- -
-- ------------- --- ---- --- ---- -- ------ ---- -------- -
------------------------- -
------- ---------
--
----------- -- -----------
-------- -- -
---------- - --------------------- -- ---- --- ----
---
-
--
--
--------- -
-----
-------- ---------
----
--- ----------- -- -------
------------ ------ ----- ------- ------- - --- ------- - ----- --------- ----------------
------- --------------------------------------------
-----
-----
------------ ------ ----- ----- ------ ------------------
------
--
---
----- ------- - ------------------------- -
------ -
------ -
----- ---
--
--
-------- -
--------- -
------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
----- ----------
---
--
----------- -- -----------
------------ -- -
-----------------------
---
--
--
--------- -
-----
------- ---------
----- --------------------------
-----
------ ------------------------
------ ----------- --------- -------------- ---------
------
-----
------- --------------------------
------------ ------ ----- ------ -----------------------
------
-------
------
--
---
----- -------- - -------------------------- -
------ -
------ -
--- -----
----- ---
----- ------
--
--
--------- -
------- - ----------------------
------------------------------
----------- -- -----------
------------ -- -
--------- - ----------
--------- - ----------
---
--
-------- -
------------ -
------------------------------ -
------- ------
-------- -
--------------- -------------------
--
----- ----------------
----- ----------
----- ----------
---
--
----------- -- -----------
------------ -- -
-----------------------
---
--
--
--------- -
-----
-------- ---------
----- -----------------------------
-----
------ ------------------------
------ ----------- --------- -------------- ---------
------
-----
------ ------------------------
------ --------------- --------- ---------------
------
-----
------- -----------------------------
------------ ------ ----- ------ -----------------------
------
-------
------
--
---这将创建三个组件，分别用于显示 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