简介
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 语句如下：
// javascriptcn.com 代码示例
CREATE DATABASE node_todo;
USE node_todo;
CREATE TABLE todo(
id INT PRIMARY KEY NOT NULL,
title TEXT NOT NULL,
description TEXT NOT NULL,
created_at DATETIME NOT NULL,
updated_at DATETIME NOT NULL
);4. 编写 Express.js 后端代码
现在我们开始编写 Express.js 后端代码。首先在项目根目录下创建一个名为 app.js 的文件，并输入以下内容：
// javascriptcn.com 代码示例
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'node_todo'
});
// connect to database
conn.connect((err) => {
if (err) throw err;
console.log('Connected to MySQL database!');
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server running at http://127.0.0.1:${port}/`);
});这里我们创建了一个 Express.js 应用，并使用 mysql 模块连接到本地 node_todo 数据库。同时我们使用 body-parser 中间件来处理 post 请求。
接下来，我们添加一些路由来实现获取 Todo、创建 Todo、更新 Todo 和删除 Todo 的功能。在 app.js 文件中添加如下代码：
// javascriptcn.com 代码示例
// get all todos
app.get('/todos', (req, res) => {
const sql = 'SELECT * FROM todo';
conn.query(sql, (err, results) => {
if (err) throw err;
res.json(results);
});
});
// create a new todo
app.post('/todos', (req, res) => {
const { title, description } = req.body;
const created_at = new Date();
const updated_at = new Date();
const sql = `INSERT INTO todo (title, description, created_at, updated_at) VALUES (?, ?, ?, ?)`;
conn.query(sql, [title, description, created_at, updated_at], (err, result) => {
if (err) throw err;
res.json({ id: result.insertId, title, description, created_at, updated_at });
});
});
// update a todo
app.put('/todos/:id', (req, res) => {
const { id } = req.params;
const { title, description } = req.body;
const updated_at = new Date();
const sql = `UPDATE todo SET title = ?, description = ?, updated_at = ? WHERE id = ?`;
conn.query(sql, [title, description, updated_at, id], (err, result) => {
if (err) throw err;
res.json({ id, title, description, updated_at });
});
});
// delete a todo
app.delete('/todos/:id', (req, res) => {
const { id } = req.params;
const sql = `DELETE FROM todo WHERE id = ?`;
conn.query(sql, [id], (err, result) => {
if (err) throw err;
res.json({ id });
});
});5. 编写前端代码
最后，我们编写前端代码，使用 Axios 发送请求来获取、创建、更新和删除 Todo。在项目根目录下创建一个名为 index.html 的文件，并添加如下内容：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<ul id="todo-list"></ul>
<form>
<input type="text" id="title" placeholder="Title">
<br>
<textarea id="description" placeholder="Description"></textarea>
<br>
<button type="button" onclick="create()">Add</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function fetchTodos() {
axios.get('/todos')
.then((response) => {
const todos = response.data;
const ul = document.getElementById('todo-list');
ul.innerHTML = '';
todos.forEach((todo) => {
const li = document.createElement('li');
li.innerHTML = `
<strong>${todo.title}</strong>
<p>${todo.description}</p>
<button onclick="edit(${todo.id})">Edit</button>
<button onclick="remove(${todo.id})">Remove</button>
`;
ul.appendChild(li);
});
})
.catch((error) => {
console.error(error);
});
}
function create() {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
axios.post('/todos', { title, description })
.then((response) => {
fetchTodos();
})
.catch((error) => {
console.error(error);
});
}
function update(id, title, description) {
axios.put(`/todos/${id}`, { title, description })
.then((response) => {
fetchTodos();
})
.catch((error) => {
console.error(error);
});
}
function remove(id) {
axios.delete(`/todos/${id}`)
.then((response) => {
fetchTodos();
})
.catch((error) => {
console.error(error);
});
}
window.onload = () => {
fetchTodos();
};
</script>
</body>
</html>这里我们使用 Axios 发送请求来获取、创建、更新和删除 Todo。同时我们使用了 ES6 中的箭头函数语法来简化代码。
总结
在本文中，我们介绍了如何使用 Express.js 和 MySQL 构建一个简单的 Todo 应用。我们学习了如何连接到 MySQL 数据库、如何使用 Express.js 路由来处理请求、如何使用 Axios 发送请求来获取、创建、更新和删除 Todo。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544bd6c7d4982a6ebe92ff1