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 时接口返回错误信息~

这里我就不打印出来，但愿大家本身试一下咯。