快速使用Express编写查询功能

目录

阅读前必读 

一、前期准备

1.1 创建项目目录

1.2 初始化项目

1.3 安装项目包

1.3.1 安装Express

1.3.2 安装MySQL

2.1 创建数据库

2.3 创建用户表

三、编写代码

3.1 编写前端页面

3.2 后端代码

3.2.1 引入模块

3.2.2 创建express应用程序

3.2.3 注册“body-parser”中间件

3.2.4 创建与数据库的连接

3.2.5 设置ejs模版和指定视图目录

3.2.6 默认查询全部用户数据

3.2.7 通过用户名查询数据

3.2.8 配置项目监听端口

3.4 后端整体代码

3.5 整体目录结构

3.6 运行项目

阅读前必读 

在1分钟内，使用 Express 快速编写一个简单的登录功能

Express EJS渲染技术详解

10分钟学习如何使用 Express+Mysql开发图书管理系统

在开始之前，请确保已在您的电脑上安装了 Node.js 和 npm，并且它们的版本分别为：

  • node v16.14.2
  • npm 8.5.0

请按照以下步骤进行安装和确认版本：

  1. 打开终端或命令行界面。
  2. 输入以下命令以检查 Node.js 版本。
node -v

     3. 输入以下命令以检查 npm 版本：

npm -v

 如果您的没有Nodejs和npm，请前往 Node.js 官方网站（https://nodejs.org）下载并安装相应版本的 Node.js。

一、前期准备

1.1 创建项目目录

首先，我们可以创建一个项目目录，命名为 "express-user"，这个目录将用于存放我们的项目文件。

?

1.2 初始化项目

我们在终端输入 "npm init -y" 命令对项目进行初始化。

npm init -y

1.3 安装项目包

1.3.1 安装Express

使用以下命令可以快速下载并安装 Express：

npm install express
1.3.2 安装MySQL
npm install mysql

1.3.3 安装body-parser

npm install body-parser

1.3.4 安装ejs

npm install ejs

?二、创建数据表

2.1 创建数据库

首先我们需要创建一个数据库 “express_data”:

CREATE DATABASE express_data;

2.2 打开数据库

打开“express_data”数据库:

USE express_data;

2.3 创建用户表

创建用户 user 表

CREATE TABLE user (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(255) NOT NULL,
  password VARCHAR(255) NOT NULL
);

插入用户数据 

INSERT INTO `user` (`id`, `username`, `password`) VALUES (1, 'user1', '123');
INSERT INTO `user` (`id`, `username`, `password`) VALUES (2, 'user2', '123');

三、编写代码

3.1 编写前端页面

我们在项目目录下创建一个名为 views 的文件夹，用来存放登录页面,并且在 views 文件夹中创建一个名为 index.ejs 的文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <style>

    body {
      background-color: #fffaf6;
    }

    .container {
      width: 300px;
      margin: 0 auto;
    }

    .container h2{
      text-align: center;
    }

    .container input{
      color: #d3d3d3;
      background-color: #FFF;
      border: 0;
      border-radius: 10px;
      width: 180px;
      height: 35px;
      padding: 0 10px;
    }

    .container input::placeholder {
      color: #d3d3d3;
    }
    
    .container button {
      color: #FFF;
      background-color: #ff6038;
      border: none;
      border-radius: 10px;
      width: 80px;
      height: 35px;
      margin-left: 10px;
    }

    .table {
      width: 100%;
      background-color: #f5efea;
      border-radius: 10px;
      margin-top: 20px;
      text-align: center;
    }

    .table th {
      color: #050505;
      border-bottom: 1px solid #424140;
    }

    .table td {
      color: #424140
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>用户数据查询</h2>
    <form method="get" action="/getUserByName">
      <input name="username" placeholder="请输入用户名"/>
      <button type="submit">查询</button>
    </form>
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>密码</th>
        </tr>
      </thead>
      <tbody>
        <% users.forEach(function(user, index) { %>
        <tr>
          <td><%= index+1 %></td>
          <td><%= user.username %></td>
          <td><%= user.password %></td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</body>
</html>

3.2 后端代码

在您的应用程序根目录下，创建一个名为app.js的文件，并编写相应的代码。

3.2.1 引入模块
  1. express: 帮助我们更方便地构建和管理Web应用程序。
  2. body-parser: 它是一个处理请求体数据的中间件。
  3. mysql: 它是mysql驱动包。
  4. path: 它是Node.js内置的模块之一，用于处理文件路径。
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const mysql = require("mysql");
3.2.2 创建express应用程序
 const app = express();
3.2.3 注册“body-parser”中间件
  1. app.use() 用于注册中间件。
  2. bodyParser.urlencoded() 用于解析 URL 编码的请求体数据，并将其转换为 JavaScript 对象。
app.use(bodyParser.urlencoded({ extended: false }));
3.2.4 创建与数据库的连接

需要将数据库的用户名和密码填在对应的位置

// 创建与数据库的连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: '你的用户名',
  password: '你的密码',
  database: 'express_data'
});

// 连接到数据库
connection.connect((err) => {
  if (err) throw err;
  console.log('连接数据库成功');
});
3.2.5 设置ejs模版和指定视图目录
// 设置ejs模板引擎
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views")); // 指定视图文件夹路径
3.2.6 默认查询全部用户数据
  1. app.get() 用于处理 HTTP GET 请求的方法。
  2. res.render() 将数据返回到页面。
app.get("/", (req, res) => {
  connection.query("SELECT * FROM user", (error, results) => {
    if (error) throw error;
    res.render("index", { users: results }); 
  });
});
3.2.7 通过用户名查询数据
app.get("/getUserByName", (req, res) => {
  const username = req.query.username;
  connection.query(
    "select * from user WHERE username = ?",
    username,
    (error, result) => {
      if (error) throw error;
      console.log(result);
      res.render("index", { users: result });
    }
  );
});
3.2.8 配置项目监听端口

app.listen() 用于启动 HTTP 服务器的方法。

app.listen(8080, () => {
  console.log("http://127.0.0.1:8080");
});

3.4 后端整体代码

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const mysql = require("mysql");

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
// 创建数据库连接
const connection = mysql.createConnection({
  host: "localhost",
  user: "你的用户名",
  password: "你的数据库密码",
  database: "express_data",
});

// 连接数据库
connection.connect();

// 设置ejs模板引擎
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views")); // 指定视图文件夹路径

// 默认查询全部用户数据
app.get("/", (req, res) => {
  connection.query("SELECT * FROM user", (error, results) => {
    if (error) throw error;
    res.render("index", { users: results }); 
  });
});

// 通过用户名查询用户信息
app.get("/getUserByName", (req, res) => {
  const username = req.query.username;
  connection.query(
    "select * from user WHERE username = ?",
    username,
    (error, result) => {
      if (error) throw error;
      console.log(result);
      res.render("index", { users: result });
    }
  );
});

app.listen(8080, () => {
  console.log("http://127.0.0.1:8080");
});

3.5 整体目录结构

3.6 运行项目

在终端中输入以下命令来启动您的项目

node app.js

其他文章推荐:

在1分钟内，使用 Express 快速编写一个简单的登录功能

Express EJS渲染技术详解

10分钟学习如何使用 Express+Mysql开发图书管理系统