express安装、配置、接受请求、响应

我不是女神ヾ 2022-05-18 04:59 186阅读 0赞

1、在cmd中进入项目的根目录下，安装express：npm  install   express

2、express只是在原生的nodejs中添加了一些功能，保留了原生的 功能

比如res.write()和res.end()都保留，多了res.send()---可以直接返回json格式的数据，而res.write()则会报错

3、介绍

// 1、创建服务
    const express = require('express');
    let server = express();
    // 2、监听端口
    server.listen(8080);
    // 3、处理请求
    server.use('地址', (req,res)=>{
    	// 返回数据，可以 直接返回json
    	res.send({a:1});
    	// 断开连接
    	res.end();
    });
    
    --------------------
    // 处理请求有3种方法
    server.get('/',(req,res)=>{});   //接受用户的get请求
    server.post('/',(req,res)=>{});  //接受用户的post请求
    server.use('/',(req,res)=>{});   //接受用户的get  post请求

具体例子

服务端：

客户端：

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
        </head>
        <body>
            <form action='http://localhost:8080' method="POST">
                用户名：<input type='text' name="user" value=''><br />
                密码：<input type='password' name="pass" value=""/><br />
                <input type="submit" value='提交'>
            </form>
        </body>
    </html>

4、express的中间件（插件）---express-static：用于处理静态文件

例子：

服务端代码：

const express = require('express');
    let server = express();
    
    let expressStatic = require('express-static');
    // 告诉服务器去哪里读取静态文件
    // 参数是静态文件的路径
    server.use(expressStatic('./www'));
    
    server.listen(8080);

![70][]

在浏览器的地址栏输入如下：

![70 1][]

5、模拟一个客户端进行登录的简单场景

客户端代码：

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <script src='jquery-3.1.1.min.js'></script>
        </head>
        <body>
            <form action='http://localhost:8080'>
                用户名：<input type='text' name="user" id="user" value=''><br />
                密码：<input type='password' name="pass" id="pass" value=""/><br />
                <input type="button" value='登陆' id="btn">
            </form>
           <script>
               $(function(){
                   document.getElementById('btn').addEventListener('click',function(e){
                       let user = $('#user').val();
                       let pass = $('#pass').val();
                       let data = {user:user,pass:pass};
                        //这个请求处理的地址和服务器端相配合
                       let url = '/login';
                       $.ajax({
                           url:url,
                           data:data,
                           dataType:'json',
                           type:'GET',
                           success:(data)=>{
                               console.log(data);
                           },
                           error:(res)=>{
                               console.log(res);
                           }
                       });
                   });
               });
           </script>
        </body>
    </html>

服务端代码：

[70]: /images/20220518/50c676913ed84736b6c9c337980a626e.png
[70 1]: /images/20220518/2ffcbbd1da2e4c91a3ada9b55b481ff0.png