Node.js(二)

834 阅读5分钟

实现服务器步骤和核心代码

  1. 导入 http 模块

    const http = require('http')  // Node 自带核心内置模块
    
  2. 创建 web服务器实例

    // 调用 http.createServer() 方法,即可快速创建一个 web 服务器实例
    
    const server = http.createServer() 
    
  3. 为服务器实例绑定 request 事件

    // 为服务器实例绑定 request 事件,即可监听客户端发送过来的网络请求
    
    // 使用服务器实例的 .on() 方法,为服务器绑定一个 request 事件
    server.on('request', (req, res) => {
      // 只要有客户端来请求我们自己的服务器,就会被触发 request 事件,从而调用这个事件处理程序
      console.log('访问服务器成功')
    })
    
  4. 启动服务器

    // 调用服务器实例的 .listen() 方法,即可启动当前的 web 服务器实例
    //设置 端口 3000 
    server.listen(3000,=> {
        console.log('running……')
    })
    
  5. 注意

    1.如果终端关闭就相当于 web服务关闭了
    2.ctrl+c 停止当前的进程
    3.前端请求的内容是中文乱码 需要 设置响应头res.setHeader('Content-Type', 'text/html;      charset=utf-8')
    

创建基本的服务器

// 1. 导入 http 模块
const http = require('http')

// 2. 创建 web 服务器实例
const server = http.createServer()

// 3. 为服务器实例绑定 request 事件,监听客户端的请求
server.on('request', function (req, res) {
  console.log('访问服务器成功')
})

// 4. 启动服务器
server.listen(8080, function () {  
  console.log('running……')
})

// 为了防止中文乱码问题,需要设置响应头,
  res.setHeader('Content-Type', 'text/html; charset=utf-8')

req请求对象 ( request )

服务器 后台接收到前端的请求,就会调用 server.on为服务器绑定 request事件处理程序,监听前端发送的请求。如果想在事件处理程序中,访问与客户端相关的数据与属性,可以使用如下方式:

server.on('request', function (req, res) {
  // req 是请求对象,它包含了与客户端相关的数据和属性
  // req.url 获取客户端请求的 url 地址
  // req.method 获取客户端请求的类型

  const str = `${req.url} -- ${req.method}`

  console.log(str)
})

res响应对象(response)

服务器 后台返回给前端的内容

在服务器的 request 事件处理程序中,如果想访问与服务器相关的数据和属性,可以使用如下方式

res响应对象给前端 所携带的内容有如下

  • 响应对象,服务器给浏览器返回的响应内容,可以通过该对象设置
  • res.setHeader() 设置响应头,响应内容格式和编码
  • res.statusCode 设置状态码
  • res.end() 把响应报文(响应行、响应头、响应体)发送给浏览器
server.on('request', function (req, res) {
  // res 是响应对象,它包含了与服务器相关的数据和属性
  // 例如:将字符串发送到客户端

  const str = `${req.url} -- ${req.method}`
  
  // res.end() 方法的作用
  // 向客户端发送指定的内容,并结束这次请求的处理过程
  res.end(str)
})

解决中文乱码问题

当调用 res.end() 方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式

server.on('request', function (req, res) {
  // 发送包含中文的内容
  const str = `您请求的 url 地址是:${req.url},请求的 method 类型是:${req.method}`

  // 为了防止中文乱码问题,需要设置响应头,
  res.setHeader('Content-Type', 'text/html; charset=utf-8')

  // 把包含中文的内容返回给客户端
  res.end(str)
})

请求对象_GET方式_

server.on('request', function (req, res) {  
  // 形参req 是 请求request的意思,所有和请求相关的信息,都在req对象中
})
  • 形参 req

    • 请求对象,浏览器发送的请求报文中的数据已经被解析到该对象上
    • req.url 获取请求行中的路径
    • req.method 获取请求行中的方式
    • req.headers 获取请求头数据
  • 代码实例

    const http = require('http');
    
    const server = http.createServer();
    
    server.on('request', (req, res) => { 
        console.log(req.method); // 获取前端使用的请求方式   GET
        console.log(req.url); // 获取前端使用的请求地址(从域名和端口往后的部分)   /?a=10&b=20&c=30
        console.log(req.headers); // 获取前端使用的请求头  
        res.end(); 
    });
    
    server.listen(3000, () => {
        console.log('服务器启动了');
    });
    

请求对象-POST方式 -接参数

const http = require('http');

const server = http.createServer();

server.on('request', (req, res) => {
    console.log(req.method); // POST
    console.log(req.url); 
    console.log(req.headers);

    // 接受参数
    let str = ''; // 定义一个用于保存数据的空字符串
    req.on('data', (chunk) => { // 给req注册data事件,只要有数据提交过来,就会触发;用于接收提交过来的数据(数据过大, 会多次触发, 接收字节)
        str += chunk; // 拼接到变量上
    });
    req.on('end', () => { // 给req注册end事件,当完全接收了提交过来的数据,就会触发
        console.log(str); // a=10&b=20&c=30
    });
    res.end(str);
});
// 前端请求插件: 发送POST请求和参数 a=10&b=20&c=30
server.listen(3000, () => {
    console.log('服务器启动了');
});

小结

req.url    //获取请求行中的路径
req.method  //获取请求行中的方式
req.headers  //获取请求头数据 
res.setHeader()  //设置响应头,响应内容格式和编码
res.statusCode  //设置状态码
res.end()     //把响应报文(响应行、响应头、响应体)发送给浏览器
res.setHeader('Content-Type', 'text/html; charset=utf-8')  // 为了防止中文乱码问题,需要设置响应头,

接口编写

需求: 后端监测前端发送的请求方式, 以及请求的url, 以及请求的参数

功能: GET /api/list 后台把数据返回给前端

功能: POST /api/add 前端把参数key=value&key=value字符串发到后台, 保存到数组里

const http = require('http');
const querystring = require("querystring");
const server = http.createServer();

let arr = []; // 不要写在下面的函数里, 不然每次请求都会初始化, 但是这个js重启代码会重新执行清空数组

server.on('request', (req, res) => {
    let { method, url } = req; // 提取请求方式, 和请求地址
    res.setHeader("Content-Type", "text/html; charset=utf-8;"); // 设置响应头, 返回的是中文

    // 1. GET方式 - 查询所有数据
    if (method == "GET" && url == "/api/list") {
        res.end(JSON.stringify({ // 把数据响应回给前端
            status: 200,
            msg: "获取成功",
            data: arr
        }));
    } else if (method == "POST" && url == "/api/add") { // 接收前端发来的数据, 组织格式保存到数组里
        // POST方式 - 添加数据到arr数组里 (要求前台传递一个JSON字符串数据)
        let str = '';
        req.on('data', (chunk) => {
            str += chunk;
        });
        req.on('end', () => {
            // 直接用queryString可以把key=value&key=value字符串转成对象格式
            let obj = querystring.parse(str.replace("?", ""));
            arr.push(obj); // 把发来的数据对象保存到全局 数组里
            res.end(JSON.stringify({
                status: 201,
                msg: "添加成功"
            }));
        });
    } else {
        res.end("请确认接口地址和对应的请求方式是否正确");
    }
});

server.listen(3000, () => {
    console.log('服务器启动了, http://127.0.0.1:3000');
});

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️,鼓励笔者创作更好的文章,谢谢🙏大家。