简单摸索了 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 时接口返回错误信息~
这里我就不打印出来,希望你们自己试一下咯。