服务器是个媒婆，做好事不留名？！

最新推荐文章于 2024-11-13 23:13:53 发布

zsnymdr

最新推荐文章于 2024-11-13 23:13:53 发布

阅读量835

点赞数 5

文章标签：服务器运维

本文链接：https://blog.csdn.net/amy1019/article/details/141937000

版权

刚开始觉得服务器才是大boss，掌管着各种数据的“生死大权”，但现在不这么觉得了，倒觉得它像个“媒婆”，哈哈哈，这位“媒婆”到底牵了谁与谁的线？探究一下这位“小媒婆”。

【1.0前情了解】

我们浏览网页时，想从网页上获取的信息就是向服务器发请求，服务器再从数据库中查找到结果反馈给我们，实质上就是：对存在数据库中的数据进行的增、删、改、查

增：【如：网页中出现的一些注册页面】---通过post方式，提交表单信息到服务器，通过服务器与数据库的连接，使用sql语句的添加语句，将数据添加到数据库，保存起来

删：【如：删除个人用户的一些数据】---通过get方式，向服务器发送请求，服务器与数据库连接，根据数据唯一标识使用sql语句的删除语句，将数据库中数据删除，再将删除成功信息返回

改：【如：对个人信息表的修改】---分两步进行，

第一步：通过get方式，向服务器发送请求，服务器与数据库连接，执行sql查询语句，根据唯一标识获得要修改的页面的信息，并把服务器从数据库中查到的数据显示到页面上

第二步：再次通过post方式，向服务器发送提交数据的请求，与增的过程相似，通过服务器与数据库的连接执行sql更新语句，将更改的信息在数据库更新

查：【如：获取网页的整页信息】---通过get方式，向服务器发送请求，服务器与数据库建立连接，根据数据的唯一标识，执行sql语句的查询语句，从数据库中查询到我们需要的数据，并将查询的结果返回给服务器，服务器在返回给浏览器，最后显示给我们

【2.0揭示庐山真面目】：“媒婆的工作原理”

【准备工作】加载第三方模块（所有）: npm i express mysql multer body-parser

【配置服务器】完成app.js / db.js(数据库)文件

app.js文件：

编写有点乱，可以优化一下，如下：

db.js文件：

【正式工作流程】

“媒婆”（服务器）连接着浏览器和数据库，从浏览器发送请求开始，浏览器向服务器发送请求的方式有两种：GET或者POST，“媒婆”（服务器）也会对应“招待”这两种请求，是GET请求，就用GET方式招待，POST请求，就用POST方式招待。

【2.1GET方式】

浏览器发送GET方式请求：

在html页面使用jq发get请求，用于获取页面信息

$.get('请求url/接口地址'，{ }，function(res) {

//代码体，可能会使用模板引擎

},'json')

第1个参数：后台编写的接口地址或要请求的地址

第2个参数：请求时传递的参数，无参数可以不写，也可以直接写在第一个参数后面

第3个参数：一个回调函数，里面是从服务器响应返回的结果，有时可以配合模板引擎将数据显示在页面中，有时也可以直接使用res这个结果，将数据直接呈现在页面上

第4个参数：是返回数据的显示格式，是个json格式的数据，易于阅读

服务器接收GET方式请求，并且处理请求后作出响应：

在app.js中使用express接受get请求：浏览器发起get请求，服务器就要接受get请求

app.get('接口名', (req, res) => {

        //req：包含浏览器所有的请求信息

        //res：保存着服务器响应给浏览器的所有信息

     

       //sql:为查询语句，let sql = '语句 ?';

       //values:为sql中占位符?的确切的值

      db(sql, values,  (err, data) =>{ //调用db函数

              if(err) {

                 throw err;

                 res.send({code:201});

              }  else {

                 res.send(data);//将查询到的数据返回给浏览器

                  //或不需要返回的数据，只需一个提示时写：

                 res.send('响应成功的信息提示')

              }

       });

})

【2.1POST方式】

浏览器发送POST方式请求：

表单有文件上传提交（注册信息或修改信息提交时）浏览器发起post方式的请求

步骤：

（1）收集表单信息，使用FormData收集后保存到fd，

（2）单独处理上传文件时的图片预览（使用临时url）

（3）在html页面使用jq发起ajax（post）请求

$.ajax({

        contentType: false,

        processData: false,

        type: ’post‘,

        url: '要请求的url或接口地址',

        data: {},//请求时传的参数，即收集的表单数据的name值

        dataType: 'json',

        error: function() {

             //可以捕获异常或错误信息

         }，

        success: function(res) {

            //请求成功后，实现页面跳转

        }

})

服务器接收POST方式请求，处理请求后作出响应：

在app.js使用multer处理有上传文件的post请求：浏览器发起post请求，服务器就要接受post请求

app.post('接口名', upload.single('表单上传文件控件的name值'),function(req, res) {

       //req：包含浏览器所有的请求信息

        //res：保存着服务器响应给浏览器的所有信息

     

      //sql:为查询语句    //values:为sql中占位符?的确切的值

       let sql = '语句 ?';

       let values = {

            //数据库字段名：服务器接受的表单的各项name名

                  name : req.body.heroName;  

                      file : req.file.path

        }

       db(sql, values,  (err, data) =>{ //调用db函数

              if(err) {

                 throw err;

                 res.send({code:201});

               }  else {

                 res.send(data);//将查询到的数据返回给浏览器

                  //或不需要返回的数据，只需一个提示时写：

                 res.send('响应成功的信息提示')

              }

       });

})

【2.3与数据库联系】

不管浏览器发送get请求，服务器对应接收get请求，还是浏览器发送post请求，服务器接收post请求，都要与数据库产生联系，都要经服务器执行sql语句，到数据库中查询数据，并返回查询的结果。

sql语句查询数据：

增：insert into 表名 set 字段名=’值‘

删：delete from 表名 where id = ?

改：update 表名 set 字段名=’值‘ where id =?

查：select * from where 要查询的条件

注意：删和改都要加条件，且是数据的唯一标识，不写条件会全部删除或全部修改！！！

三者关系大致如图

【3.0小知识点】

【1】服务器接收请求时的参数

为什么？因为在做修改页面时，