简介
Express.js 是一个基于 Node.js 的 Web 应用开发框架，而 MySQL 是一款流行的关系型数据库。结合它们两者可以构建出高性能的 Node.js 应用。本文将介绍如何使用 Express.js 和 MySQL 构建一个简单的 Todo 应用，同时讲解其中的细节和注意事项。
前置知识
在开始之前，你需要了解一些基础的 Node.js、Express.js 和 MySQL 知识。如果你还不熟悉它们，请先自学一下。
步骤
1. 准备工作
首先，我们需要在本地搭建一个 Node.js 和 MySQL 的开发环境。在安装之前，你需要确保已经安装了 Node.js 和 MySQL。
2. 创建 Express.js 项目
接着，我们创建一个新的 Express.js 项目。在命令行中执行下面的命令：
$ mkdir node-todo && cd node-todo $ npm init -y $ npm install express mysql body-parser --save
这个命令将创建一个新的项目目录 node-todo，并执行了 npm init -y 初始化 package.json。接着安装了 express、mysql 和 body-parser 三个依赖。
3. 创建 MySQL 数据库
在开始构建应用之前，我们需要在本地创建一个 MySQL 数据库。假设我们创建了一个名为 node_todo 的数据库，同时创建一个名为 todo 的表，具体的 SQL 语句如下：
-- -------------------- ---- -------
------ -------- ----------
--- ----------
------ ----- -----
-- --- ------- --- --- -----
----- ---- --- -----
----------- ---- --- -----
---------- -------- --- -----
---------- -------- --- ----
--4. 编写 Express.js 后端代码
现在我们开始编写 Express.js 后端代码。首先在项目根目录下创建一个名为 app.js 的文件，并输入以下内容：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----- - -----------------
----- ---------- - -----------------------
----- --- - ----------
----- ---- - -----
----- ---- - ------------------------
----- ------------
----- -------
--------- -----------
--------- -----------
---
-- ------- -- --------
------------------ -- -
-- ----- ----- ----
---------------------- -- ----- ------------
---
---------------------------
------------------------------- --------- ---- ----
------------ ----- ---- -- -
--------------- ---------
---
---------------- -- -- -
------------------- ------- -- ----------------------------
---这里我们创建了一个 Express.js 应用，并使用 mysql 模块连接到本地 node_todo 数据库。同时我们使用 body-parser 中间件来处理 post 请求。
接下来，我们添加一些路由来实现获取 Todo、创建 Todo、更新 Todo 和删除 Todo 的功能。在 app.js 文件中添加如下代码：
-- -------------------- ---- -------
-- --- --- -----
----------------- ----- ---- -- -
----- --- - ------- - ---- ------
--------------- ----- -------- -- -
-- ----- ----- ----
------------------
---
---
-- ------ - --- ----
------------------ ----- ---- -- -
----- - ------ ----------- - - ---------
----- ---------- - --- -------
----- ---------- - --- -------
----- --- - ------- ---- ---- ------- ------------ ----------- ----------- ------ --- -- -- ----
--------------- ------- ------------ ----------- ------------ ----- ------- -- -
-- ----- ----- ----
---------- --- ---------------- ------ ------------ ----------- ---------- ---
---
---
-- ------ - ----
--------------------- ----- ---- -- -
----- - -- - - -----------
----- - ------ ----------- - - ---------
----- ---------- - --- -------
----- --- - ------- ---- --- ----- - -- ----------- - -- ---------- - - ----- -- - ---
--------------- ------- ------------ ----------- ---- ----- ------- -- -
-- ----- ----- ----
---------- --- ------ ------------ ---------- ---
---
---
-- ------ - ----
------------------------ ----- ---- -- -
----- - -- - - -----------
----- --- - ------- ---- ---- ----- -- - ---
--------------- ----- ----- ------- -- -
-- ----- ----- ----
---------- -- ---
---
---5. 编写前端代码
最后，我们编写前端代码，使用 Axios 发送请求来获取、创建、更新和删除 Todo。在项目根目录下创建一个名为 index.html 的文件，并添加如下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
-------
------
-------- ---------
--- --------------------
------
------ ----------- ---------- --------------------
----
--------- ---------------- -------------------------------------
----
------- ------------- -------------------------------
-------
------- --------------------------------------------------------------------
--------
-------- ------------ -
-------------------
---------------- -- -
----- ----- - --------------
----- -- - -------------------------------------
------------ - ---
-------------------- -- -
----- -- - -----------------------------
------------ - -
------------------------------
--------------------------
------- ----------------------------------------
------- --------------------------------------------
--
-------------------
---
--
-------------- -- -
---------------------
---
-
-------- -------- -
----- ----- - ---------------------------------------
----- ----------- - ---------------------------------------------
-------------------- - ------ ----------- --
---------------- -- -
-------------
--
-------------- -- -
---------------------
---
-
-------- ---------- ------ ------------ -
------------------------- - ------ ----------- --
---------------- -- -
-------------
--
-------------- -- -
---------------------
---
-
-------- ---------- -
----------------------------
---------------- -- -
-------------
--
-------------- -- -
---------------------
---
-
------------- - -- -- -
-------------
--
---------
-------
-------这里我们使用 Axios 发送请求来获取、创建、更新和删除 Todo。同时我们使用了 ES6 中的箭头函数语法来简化代码。
总结
在本文中，我们介绍了如何使用 Express.js 和 MySQL 构建一个简单的 Todo 应用。我们学习了如何连接到 MySQL 数据库、如何使用 Express.js 路由来处理请求、如何使用 Axios 发送请求来获取、创建、更新和删除 Todo。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6544bd6c7d4982a6ebe92ff1