快速使用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 的文件。

  
  
  
  
  


  

    
用户数据查询
    

      
      查询
    
    
        <% users.forEach(function(user, index) { %>
        
        <% }); %>
      

      

        

          
ID
          
用户名
          
密码
        
      
      

          
<%= index+1 %>
          
<%= user.username %>
          
<%= user.password %>
        
    
  

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开发图书管理系统