使用NetBeans IDE创建简单Node.js，Express和MySQL CRUD Web应用程序

古城微笑少年丶 2023-10-04 13:33 34阅读 0赞

在本教程中，我将与您分享如何使用node.js和mysql创建CRUD（创建读取更新删除）应用程序。

不仅如此，我还将分享如何使用引导程序模式进行输入和更新表单。

这样，CRUD应用程序将具有响应性并且对用户友好。

**让我们开始吧。**

#### **第1步、介绍** ####

这个很重要！

在本教程中，您将学习如何使用node.js和mysql创建CRUD操作。

在本教程中，我将使用Bootstrap和Jquery。

如果没有引导和jQuery，请下载它的官方网站上[**getbootstrap.com**][getbootstrap.com]和[**jquery.com**][jquery.com]。

#### **第2步、创建数据库结构** ####

创建一个新数据库，在这里我创建一个名为**crud\_db**的数据库。

如果使用相同的名称创建它，则更好。

要在MySQL中创建数据库，可以通过执行以下查询来完成：

`CREATE` `DATABASE` `crud_db;`

上面的SQL命令将创建一个名为**crud\_db**的数据库。

接下来，在**crud\_db**数据库中创建一个表。

在这里，我创建了一个名为“ **product** ”的表。

如果使用相同的名称创建它，则更好。

要创建**“产品”**表，可以通过执行以下SQL命令来完成：

CREATE TABLE \`product\` (  
\`product\_id\` INT(10,0) NOT NULL AUTO\_INCREMENT,  
\`product\_name\` VARCHAR(200) NULL DEFAULT NULL COLLATE 'utf8mb4\_unicode\_ci',  
\`product\_price\` INT(10,0) NULL DEFAULT NULL,  
PRIMARY KEY (\`product\_id\`) USING BTREE  
)  
COLLATE='utf8mb4\_unicode\_ci'  
ENGINE=InnoDB  
;

上面的SQL命令将创建一个具有以下字段的“ **product** ”表：product\_id，product\_name和product\_price。

#### **第3步、安装依赖项** ####

在安装依赖项之前，请创建一个NetBeans Project，并将其命名为**nodejs-mysql-crud**。

如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70][]

在本教程中，我们需要以下4个依赖项：

**1. [Express][]**（node.js框架）

**2. MySQL**（node.js的mysql驱动程序）

**3.****[Body-parser][]**（用于处理正文请求的中间件）

**4.****[Handlebars][]** （模板引擎）

使用“ NPM”（节点程序包管理器）可以很容易地在node.js上安装依赖项。

您可以在“终端”或“命令提示符”中运行NPM。

但是，在本教程中，我不使用命令提示符，而是使用NetBeans IDE Project右键菜单中的npm install。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 1][]

在安装依赖项之前，我们需要为项目创建**package.json**文件。

NetBeans IDE创建项目时自动创建一个package.json文件。

打开并修改**package.json**文件，它将如下所示：

{
        "name": "nodejs-mysql-crud",
        "version": "1.0.0",
        "keywords": [
            "util",
            "functional",
            "server",
            "client",
            "browser"
        ],
        "author": "Administrator",
        "contributors": [],
        "dependencies": {
            "body-parser": "^1.18.3",
            "express": "^4.16.3",
            "hbs": "^4.0.1",
            "mysql": "^2.16.0"
        }
    }

也可以通过在终端中键入以下命令来安装所需的所有依赖项：

`npm install --save express mysql body-parser hbs`

上面的命令将安装您需要的所有依赖项：express，mysql，body-parser和handlebars。

#### **第4步、项目结构** ####

然后在NetBeans IDE项目Sources中创建一个新文件夹。在这里，我创建了两个文件夹，**public**和**views**文件夹。

如下图所示：

![项目结构][109fe2551d191b1c2a9137a15784f572.png]

之后，在**公共**文件夹内创建**css**和**js**文件夹。

然后将先前下载的**bootstrap.css**文件复制到**public / css /**文件夹中。

然后将bootstrap.js和jquery文件复制到**public / js /**文件夹中。

这样我们的项目结构如下图所示：

![结构项目][d72c1f194ae52c0226a06dac18270299.png]

#### **第5步、Index.js** ####

创建一个名为**index.js**的文件。如下图所示：

![索引号][07c4a13a511b2030d5dc9dd4afc349ea.png]

然后打开**index.js**并输入以下代码：

//use path module
    const path = require('path');
    //use express module
    const express = require('express');
    //use hbs view engine
    const hbs = require('hbs');
    //use bodyParser middleware
    const bodyParser = require('body-parser');
    //use mysql database
    const mysql = require('mysql');
    const app = express();
    
    //Create connection
    const conn = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: 'root',
        database: 'crud_db'
    });
    
    //connect to database
    conn.connect((err) => {
        if (err)
            throw err;
        console.log('Mysql Connected...');
    });
    
    //set views file
    app.set('views', path.join(__dirname, 'views'));
    //set view engine
    app.set('view engine', 'hbs');
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: false}));
    //set public folder as static folder for static file
    app.use('/assets', express.static(__dirname + '/public'));
    
    //route for homepage
    app.get('/', (req, res) => {
        let sql = "SELECT * FROM product";
        let query = conn.query(sql, (err, results) => {
            if (err)
                throw err;
            res.render('product_view', {
                results: results
            });
        });
    });
    
    //route for insert data
    app.post('/save', (req, res) => {
        let data = {product_name: req.body.product_name, product_price: req.body.product_price};
        let sql = "INSERT INTO product SET ?";
        let query = conn.query(sql, data, (err, results) => {
            if (err)
                throw err;
            res.redirect('/');
        });
    });
    
    //route for update data
    app.post('/update', (req, res) => {
        let sql = "UPDATE product SET product_name='" + req.body.product_name + "', product_price='" + req.body.product_price + "' WHERE product_id=" + req.body.id;
        let query = conn.query(sql, (err, results) => {
            if (err)
                throw err;
            res.redirect('/');
        });
    });
    
    //route for delete data
    app.post('/delete', (req, res) => {
        let sql = "DELETE FROM product WHERE product_id=" + req.body.product_id + "";
        let query = conn.query(sql, (err, results) => {
            if (err)
                throw err;
            res.redirect('/');
        });
    });
    
    //server listening
    app.listen(8000, () => {
        console.log('Server is running at port 8000');
    });

#### **第6步、视图** ####

在views文件夹中创建一个名为**product\_view.hbs**的文件。如下图：

![产品浏览][3665671d000fa9bf6ec267562f12154e.png]

然后打开**product\_view.hbs**并键入以下代码：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CRUD Node.js and Mysql</title>
      <link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
      <div class="container">
        <h2>Product List</h2>
            <button class="btn btn-success" data-toggle="modal" data-target="#myModalAdd">Add New</button>
        <table class="table table-striped" id="mytable">
          <thead>
            <tr>
              <th>Product ID</th>
              <th>Product Name</th>
              <th>Price</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
             {
          {#each results}}
            <tr>
              <td>{
          { product_id }}</td>
              <td>{
          { product_name }}</td>
              <td>{
          { product_price }}</td>
              <td>
                <a href="javascript:void(0);" class="btn btn-sm btn-info edit" data-id="{
          { product_id }}" data-product_name="{
          { product_name }}" data-product_price="{
          { product_price }}">Edit</a>
                <a href="javascript:void(0);" class="btn btn-sm btn-danger delete" data-id="{
          { product_id }}">Delete</a>
              </td>
            </tr>
            {
          {/each}}
          </tbody>
        </table>
      </div>
     
        
          <form action="/save" method="post">
            <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
             <div class="modal-dialog" role="document">
               <div class="modal-content">
                 <div class="modal-header">
                   <h5 class="modal-title" id="exampleModalLabel">Add New Product</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">×</span>
                   </button>
                 </div>
                 <div class="modal-body">
                   <div class="form-group">
                       <input type="text" name="product_name" class="form-control" placeholder="Product Name" required>
                   </div>
     
                   <div class="form-group">
                       <input type="text" name="product_price" class="form-control" placeholder="Price" required>
                   </div>
                 </div>
                 <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                   <button type="submit" class="btn btn-primary">Save</button>
                 </div>
               </div>
             </div>
            </div>
         </form>
     
         
       <form action="/update" method="post">
           <div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Edit Product</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="form-group">
                      <input type="text" name="product_name" class="form-control product_name" placeholder="Product Name" required>
                  </div>
     
                  <div class="form-group">
                      <input type="text" name="product_price" class="form-control price" placeholder="Price" required>
                  </div>
                </div>
                <div class="modal-footer">
                  <input type="hidden" name="id" class="product_id">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Update</button>
                </div>
              </div>
            </div>
           </div>
      </form>
     
         
          <form id="add-row-form" action="/delete" method="post">
             <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                   <div class="modal-content">
                       <div class="modal-header">
                                            <h5 class="modal-title" id="myModalLabel">Delete Product</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                       </div>
                       <div class="modal-body">
                                                     <strong>Are you sure to delete this data?</strong>
                       </div>
                       <div class="modal-footer">
                                                <input type="hidden" name="product_id" class="form-control product_id2" required>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Delete</button>
                       </div>
                        </div>
                </div>
             </div>
         </form>
     
    <script src="/assets/js/jquery-3.6.0.js"></script>
    <script src="/assets/js/bootstrap.js"></script>
    <script>
        $(document).ready(function(){
                //showing data to edit modal      $('#mytable').on('click','.edit',function(){
            var product_id = $(this).data('id');
            var product_name = $(this).data('product_name');
            var product_price = $(this).data('product_price');
            $('#EditModal').modal('show');
            $('.product_name').val(product_name);
            $('.price').val(product_price);
            $('.product_id').val(product_id);
          });
                //showing delete record modal
                $('#mytable').on('click','.delete',function(){
            var product_id = $(this).data('id');
            $('#DeleteModal').modal('show');
            $('.product_id2').val(product_id);
          });
     
        });
    </script>
    </body>
    </html>

####  **第7步、测试** ####

测试该应用程序，以确保我们创建的原始应用程序运行良好。

要运行该应用程序，请鼠标右键点击index.文件，在右键菜单中选择Run File。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 2][]

或在终端上键入以下命令。

`node index`

然后它将出现在控制台消息“服务器正在端口8000上运行”和“ Mysql Connected”上。

如下图所示：

![20210514210608378.png][]

然后打开浏览器并输入以下URL：

[http：//本地主机：8000 /][http_8000]

如果运行良好，则它将如下图所示：

![产品列表][b6a9828ab008bb2d0bf13365b1d7971b.png]

单击“**添加新产品**”按钮，然后将出现“**添加新产品**”模式，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 3][]

然后输入产品名称和价格，然后单击**保存**按钮。

然后您可以看到如下图所示的结果：

![产品清单已保存][dfd9f261767f3f6565b52f96804f806d.png]

单击“编辑”按钮以编辑记录，然后将出现“编辑产品”模式，如下图所示：

![编辑模式][c7bd435a3a630532dbefa50f2e7bd251.png]

编辑要编辑的数据，然后单击“**更新”**按钮。

然后您可以看到如下图所示的结果：

![产品更新][0b061bbe87eda9015922d97c8ff03e91.png]

要删除记录，请单击“**删除”**按钮，然后将显示确认模式，如下所示：

![删除模态][681c0f9d664eec67894beab87d855a33.png]

然后单击**删除**按钮删除记录。

**完成**。

**结论：**

今天的教程是关于如何使用node.js和mysql构建CRUD应用程序（创建读取更新删除）的。

在本教程中，您学习了如何使用node.js和mysql制作CRUD应用程序。

不仅如此，您还学习了如何将引导程序模式用于输入和更新表单。

**那你还在等什么。让我们编码吧！**

[getbootstrap.com]: http://getbootstrap.com/
[jquery.com]: http://jquery.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210514204807654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[Express]: http://expressjs.com/
[Body-parser]: https://www.npmjs.com/package/body-parser
[Handlebars]: https://www.npmjs.com/package/handlebars
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021051420545072.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[109fe2551d191b1c2a9137a15784f572.png]: https://img-blog.csdnimg.cn/img_convert/109fe2551d191b1c2a9137a15784f572.png
[d72c1f194ae52c0226a06dac18270299.png]: https://img-blog.csdnimg.cn/img_convert/d72c1f194ae52c0226a06dac18270299.png
[07c4a13a511b2030d5dc9dd4afc349ea.png]: https://img-blog.csdnimg.cn/img_convert/07c4a13a511b2030d5dc9dd4afc349ea.png
[3665671d000fa9bf6ec267562f12154e.png]: https://img-blog.csdnimg.cn/img_convert/3665671d000fa9bf6ec267562f12154e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210514210341857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[20210514210608378.png]: https://img-blog.csdnimg.cn/20210514210608378.png
[http_8000]: http://localhost:8000/
[b6a9828ab008bb2d0bf13365b1d7971b.png]: https://img-blog.csdnimg.cn/img_convert/b6a9828ab008bb2d0bf13365b1d7971b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210514204246318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[dfd9f261767f3f6565b52f96804f806d.png]: https://img-blog.csdnimg.cn/img_convert/dfd9f261767f3f6565b52f96804f806d.png
[c7bd435a3a630532dbefa50f2e7bd251.png]: https://img-blog.csdnimg.cn/img_convert/c7bd435a3a630532dbefa50f2e7bd251.png
[0b061bbe87eda9015922d97c8ff03e91.png]: https://img-blog.csdnimg.cn/img_convert/0b061bbe87eda9015922d97c8ff03e91.png
[681c0f9d664eec67894beab87d855a33.png]: https://img-blog.csdnimg.cn/img_convert/681c0f9d664eec67894beab87d855a33.png