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);
    // 检查响应代码,检查正文是否为空,确保它是有效的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 时接口返回错误信息~

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章