Node入门---后台服务与访问接口

简单摸索了 React + TypeScrip 因为没有新项目要用到，就开始摸一下node，今天写个hello world分享一下过程。(默认安装了node)

1.如何启动一个服务器

创建一个JS文件：

先引入http：使用createServer方法创建一个服务器，端口为：8080，js代码如下：

const http = require('http');

http.createServer((req, res) => {
  console.log('启动：127.0.0.1:8080');
  res.end('hello world');

}).listen(8080);

console.log('启动完成');

文件创建完成后，你找到你的demo.js文件并在node环境下启动它：

node demo.js

现在已经启动了本地服务器，可以在浏览器上验证一下，打开 127.0.0.1:8080：

浏览器上打印出来我们的 hello world，终端上也打印出了我们的 console.log

恭喜，验证成功~！！

这样很清晰的看出来 res.end() 方法里面就是我们返回给前端的参数。

2.前端访问接口

这里我们用刚刚学到的react来发出一个请求：

import React from 'react';

class demo extends React.Component {
  constructor(props) { //构造函数
    super(props);
    this.state = {
      mytext: '',
    }
  }

  getData() {
    //请求数据函数
    fetch(`http://127.0.0.1:8080`,{
      method: 'POST',
    }).then(res => res.text()).then(
      data => {
        this.setState({mytext:data})
      }
    )
  }

  componentWillMount() {
    this.getData();
  }

  render() {
    return(
    <div>
      <div>{this.state.mytext}</div>
    </div>
    );
  }
}

export default demo;

我们向刚刚启动的127.0.0.1:8080发出一个请求，但是可以看到报错了：

这个是我们经常遇到的跨域问题，解决方法很简单，就是在我们的服务端加上允许访问：

const http = require('http');

http.createServer((req, res) => {

  console.log('启动：127.0.0.1:8080');

  res.writeHead(200,
    {
      'Content-Type':'text/html',
      'Access-Control-Allow-Origin': '*', // 允许跨域访问
      'Access-Control-Allow-Headers': '*', // 允许访问
    }
  );

  res.end('hello world');

}).listen(8080);

console.log('启动完成');

再访问就可以到数据已经返回来了：

3.前端传参 + 服务器过滤

我们在前端请求时加上访问参数 name: 'demo':

import React from 'react';

class demo extends React.Component {
  constructor(props) { //构造函数
    super(props);
    this.state = {
      mytext: '',
    }
  }

  getData() {
    //请求数据函数
    fetch(`http://127.0.0.1:8080`,{
      method: 'POST',
      // 加入参数
      body: JSON.stringify(
        {name: 'demo'}
      )
    }).then(res => res.text()).then(
      data => {
        this.setState({mytext:data})
      }
    )
  }

  componentWillMount() {
    this.getData();
  }

  render() {
    return(
    <div>
      <div>{this.state.mytext}</div>
    </div>
    );
  }
}

export default demo;

服务端代码：

const http = require('http');

http.createServer((req, res) => {

  console.log('启动：127.0.0.1:8080');
  
  res.writeHead(200,
    {
      'Content-Type':'text/html',
      'Access-Control-Allow-Origin': '*', // 允许跨域访问
      'Access-Control-Allow-Headers': '*', // 允许访问
    }
  );

  let post = '';
  req.on('data', (chunk) => {
    post += chunk;
  })

  req.on('end', () => {
    res.end(post);
  })


}).listen(8080);

console.log('启动完成');

创建一个 post 用来存放前端传出来的参数，使用 req.on('data') 获取，req.on('end') 则是处理和输出。

浏览器输出：

4.简单过滤

const http = require('http');

http.createServer((req, res) => {

  console.log('启动：127.0.0.1:8080');

  res.writeHead(200,
    {
      'Content-Type':'text/html',
      'Access-Control-Allow-Origin': '*', // 允许跨域访问
      'Access-Control-Allow-Headers': '*', // 允许访问
    }
  );

  let post = '';
  req.on('data', (chunk) => {
    post += chunk;
  })

  req.on('end', () => {
    // 把单引号改为双引号
    post = JSON.parse(post.replace(/'/g, '"'));
    // 检查响应代码，检查正文是否为空，确保它是有效的JSON
    if(res.statusCode === 200) {
      if(post.name === 'demo') {
        res.end(JSON.stringify(post));
      } else {
        res.end('没有该接口');
      }
    } else {
      res.end('访问失败');
    }

  })


}).listen(8080);

console.log('启动完成');

当前端参数 name 不为 demo 时接口返回错误信息~

这里我就不打印出来，希望你们自己试一下咯。