这个是我的js文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
const express = require(
'express'
)
const app = express()
const bodyParser = require(
'body-parser'
)
app.use(express.static(
'public'
))
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:
false
}))
app.all(
'*'
,
function
(req,res,next) {
res.header(
"Access-Control-Allow-Origin"
,
"*"
);
res.header(
"Access-Control-Allow-Methods"
,
"PUT, GET, POST, DELETE, OPTIONS"
);
res.header(
"Access-Control-Allow-Methods"
,
"X-Requested-With"
);
res.header(
"Access-Control-Allow-Methods"
,
"Content-Type"
);
next();
});
//fetch传统方式
app.get(
'/fetchdata'
,(req,res)=>{
res.send(
'传统方法获取参数'
+req.query.id)
})
// fetch第二种方式
app.get(
'/fetchdata/:id'
,(req,res)=>{
res.send(
'2方法获取参数'
+req.params.id)
})
app.
delete
(
'/fetchdata/:id'
,(req,res)=>{
res.send(
'delete方法获取参数'
+req.params.id)
})
app.post(
'/fetchdata'
,(req,res)=>{
res.send(
'dpost方法获取参数'
+req.body.username+
'----------'
+req.body.password)
})
app.get(
'/a1'
,(req,res)=>{
setTimeout(
function
(){
res.send(
'a1'
)
},1000);
})
app.get(
'/a2'
,(req,res)=>{
setTimeout(
function
(){
res.send(
'a2'
)
},2000);
})
app.get(
'/a3'
,(req,res)=>{
setTimeout(
function
(){
res.send(
'a3'
)
},3000);
})
app.get(
'/data'
,(req,res)=>{
res.send(
'Hello World'
)
})
app.get(
'/data1'
,(req,res)=>{
res.send(
'Hello tom'
)
})
app.get(
'/data2'
,(req,res)=>{
res.send(
'Hello jerry'
)
})
app.listen(
'3000'
,()=>{
console.log(
"running"
)
})
|
## 这个是我的html文件，用来请求js数据，用get方法可以成功
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
script
src
=
"vue.js"
></
script
>
<
title
>Document</
title
>
</
head
>
<
body
>
<
script
>
// fetch('http://localhost:3000/a1').then(function (data) {
// //这个必须的，用于获取后台对象
// return data.text();
// }).then(function (data) {
// console.log(data);
// })
// fetch传参
// fetch('http://localhost:3000/fetchdata?id=156', {
// method:'get'
// }).then(function (data) {
// return data.text();
// })
// .then(function (data) {
// console.log(data);
// })
//第二种方式（这里用get方法可以成功的）
// fetch('http://localhost:3000/fetchdata/456', {
// method:'get'
// }).then(function (data) {
// return data.text();
// })
// .then(function (data) {
// console.log(data);
// })
//这里用delete方法就失败了
fetch('http://localhost:3000/fetchdata/741', {
method: 'delete'
}).then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data);
})
</
script
>
</
body
>
</
html
>
|
import React from 'react';
import './App.css';
const apiKey = '53df5b52f003d1bd1df16a7f6f299393';
class App extends React.Component{//Initial value
constructor(){
super();
this.state={
zipcode:'27403',
weather:null,
}
this.handleChange = this.handleChange.bind(this);
}
async componentDidMount(){ //get weather data
const weather=await this.fetchWeather();
this.setState(
{
weather,
}
);
console.log(weather)
}
fetchWeather=async () =>{// reading weather data
return await fetch(`http://api.openweathermap.org/data/2.5/forecast?zip=${this.state.zipcode}&appid=53df5b52f003d1bd1df16a7f6f299393
`).then(data=>{ return data.json();})
}//api.openweathermap.org/data/2.5/weather?zip=${zipcode}&appid=${apiKey}`
render(){
const list = () => {
let {weather}=this.state;
const res = [];
for(let i = 0; i < weather.list.length; i++) {
res.push(<li key={i}> <span className="colorFont">The{i+1}Day </span> {weather.list[i].main.temp}</li>)
}
return res
}
if(!this.state.weather){
return null;
}
if(!this.state.zipcode){
return null;
}
let {weather}=this.state;
return(
<div className="App">
<h2> {weather.city.country} {weather.city.name} {weather.cnt} days weather forecast </h2>
<ul className="deteleUnderLine">
{list() } {/*调用函数释*/}
</ul>
<input type="text" value={this.state.value} onChange={this.handleChange} placeholder="Zip Code"/>
</div>
)
}
handleChange(event) {
this.setState(
{zipcode: event.target.value}
);
}
}
export default App;