NodeJs——对数据库CRUD

比眉伴天荒 2022-12-13 14:14 169阅读 0赞

#### 学生成绩管理系统 ####

在这里使用数据库进行获取数据：先进行建表，建表的数据如下图所示：

![在这里插入图片描述][20201012120251593.png_pic_center]

在numjs当中找到第三方库mysql：[npm.js /mysql][npm.js _mysql]  
使用命令进行安装`npm install mysql`

![在这里插入图片描述][20201012115004750.png_pic_center]  
之后我们在npm.js当中进行查看mysql的使用：简单的连接：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]  
复制上面的代码进行简单的测试，看连接数据库是否成功

直接运行这个js文件：没有报错，表示连接成功。里面的results也就是对应查出来的数据。

![在这里插入图片描述][20201012120548148.png_pic_center]  
而对于数据库crud的开发，我们需要用到的模块有 http、art-template、mysql，来进行页面的展示，

首先加一个http服务：文件名：http.js

var http = require("http");
    var luyou = require("./luyou");
    
    var server = http.createServer();
    
    luyou.bind(server);
    
    server.listen(8080, function () { 
      console.log("localhost:8080");
    });

这里还引入了一个luyou，这个是同级下的js文件，用来对 http 进行监听，文件名：luyou.js

在路由当中继续引入了一个file，这个就是用来对 art-template 模板进行写入的。文件名：file.js

var template = require("art-template");
    var db = require("./db");
    template.defaults.root = "./";
    db.getData(function (res) { 
      module.exports.data = template("./index.html", {  data: res });
    });

模板文件如下：这里为了页面显示的更加美观以及方便展示，模板加载还使用了模板的语法，通过\{ \{$value.id\}\}进行获取数据，这里也就直接对返回数据进行渲染，这里也需要根据自己的查询反参进行调整。对于样式就直接拿bootstrap来进行样式设置，不了解bootstrap可前往：[官网（https://v3.bootcss.com/）单击前往][https_v3.bootcss.com]

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>table demo</title>
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
          crossorigin="anonymous"
        />
      </head>
      <body>
        <table class="table table-hover">
          <tr>
            <th>id</th>
            <th>项目编号</th>
            <th>项目名称</th>
            <th>项目经理</th>
          </tr>
          { { each data}}
          <tr>
            <td>{ { $value.id}}</td>
            <td>{ { $value.projectName}}</td>
            <td>{ { $value.projectNumber}}</td>
            <td>{ { $value.projectManager}}</td>
          </tr>
          { { /each}}
        </table>
      </body>
    </html>

这里也就对当前目录下的index.html文件进行引入，作为模板，而所带参数是由mysql进行暴露过来得到的。最后面就是mysql查询服务的js，文件名：db.js

这里添加对应的回调函数进行向外暴露，回调函数可以来进行避免页面加载完了，来获取mysql查询得到的数据，而mysql还没查询完，而导致页面渲染的数据未空。回调函数是作为参数传递给另一个函数并在其父函数完成后执行的函数。

而后对于页面所展示的数据，我们需要获取到单条数据的所有信息，也就是`select * from table where id` ，这又应当如何处理呢？

在模板当中我们添加一干对应的a标签，a标签所指向的地址进行携带当前行id，

之后就是在路由监听当中监听这个路由地址，而这个路由地址带了参数，所以用前面监听根路由的方式可以使用indexOf进行判断，在这里我们可以使用url库，直接进行引入这个url，该`url.parse()`方法接受一个 URL 字符串，对其进行解析，然后返回一个 URL 对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
在代码当中，使用`var urlObj = url.parse(res.url, true);` 获取到url对象，而后通过pathname方法进行解析出路径，所以对应的路径判断可改写为：`if (urlObj.pathname == "/get")`  
![在这里插入图片描述][c6636ce3554f49bcaf67a7591dea8ed0.png]  
而后对于url链接所携带参数可通过query方法进行获取，`urlObj.query.id`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]  
在这里获取到所携带参数，就需要去到模板当中调用对应方法，

file.getOne(urlObj.query.id,function(data){ 
    	resp.write(data);
    })

在模板当中需要对getOne方法进行暴露

module.exports.getOne = function (id, callback) { 
      db.getDataById(id, function (res) { 
        callback(template("./getDataById.html", {  data: res }));
      });
    };

最后就是调用了db进行查询

module.exports.getDataById = function (id, callback) { 
      connection.query(
        "select * from t_to_do where id =" + id,
        function (error, results) { 
          callback(results);
        }
      );
    };

[20201012120251593.png_pic_center]: /images/20221123/b9698b8ccfcc40949879e6ec80e8f909.png
[npm.js _mysql]: https://www.npmjs.com/package/mysql
[20201012115004750.png_pic_center]: /images/20221123/6f7d6aff3a71406baa14b853e1a751ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/98aef3c49f7f4cbbaf388b3bd0460159.png
[20201012120548148.png_pic_center]: /images/20221123/c282dd2e9be14b7a890d48de8674e349.png
[https_v3.bootcss.com]: https://v3.bootcss.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20221123/678fd73996d6438e91e40c39ad945deb.png
[c6636ce3554f49bcaf67a7591dea8ed0.png]: /images/20221123/9232151c1e134928b825b985a8e4bd28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20221123/9be86e72aff145b78f5e771c6bf9e241.png