技術堆疊-的node.js（快遞）服務器，反應前端
組件的檔案夾結構
--src
--components
--App
--App.js
--App.css
-商務
--Business.js
--Business.css
--BusinessList
--BusinessList.js
--BusinessList.css
--SearchBar
--img
--SearchBar.js
--SearchBar.css
--util
--yelp.js
我想會發生什么
當用戶在“搜索企業”中輸入輸入并在“哪里？”中輸入輸入時 并點擊“讓我們開始按鈕”，它應該檢索輸入的類別，例如：“披薩”和輸入的位置，例如：“丹佛”
換句話說，用戶應該能夠“搜索企業”并輸入位置“哪里”并過濾結果
這是如何作業的
單擊 Let's Go 按鈕時，它呼叫 searchYelp 函式，該函式從 yelp.js 匯入到 App.js 中的 yelp.js searchYelp 函式中，它從中獲取端點“/api/hello”呼叫 API 的快速服務器。
當前發生了什么
所以目前沒有過濾發生，當你點擊“讓我們開始”按鈕時，它會回傳一個隨機業務串列
我有過濾代碼設定我只是不知道如何實作它以使其正常作業......
這是代碼
搜索欄.js
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
term: '',
location: '',
sortBy: 'best_match'
}
this.handleTermChange = this.handleTermChange.bind(this)
this.handleLocationChange = this.handleLocationChange.bind(this)
this.handleSearch = this.handleSearch.bind(this)
this.sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
};
}
getSortByClass(sortByOption) {
if (this.state.sortBy === sortByOption) {
return 'active'
}
return ''
}
handleSortByChange(sortByOption) {
this.setState({
sortBy: sortByOption
})
}
handleTermChange(event) {
this.setState({
term: event.target.value
})
}
handleLocationChange(event) {
this.setState({
location: event.target.value
})
}
handleSearch(event) {
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)
event.preventDefault()
}
renderSortByOptions() {
return Object.keys(this.sortByOptions).map(sortByOption => {
let sortByOptionValue = this.sortByOptions[sortByOption]
return <li onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>;
})
}
render() {
return (
<div className="SearchBar">
{this.searchYelp}
<div className="SearchBar-sort-options">
<ul>
{this.renderSortByOptions()}
</ul>
</div>
<div className="SearchBar-fields">
<input onChange={this.handleTermChange} placeholder="Search Businesses" />
<input onChange={this.handleLocationChange} placeholder="Where?" />
<button className="SearchBar-submit" onClick={this.handleSearch}>Let's Go</button>
</div>
</div>
)
}
};
export default SearchBar;
應用程式.js
import React from 'react';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';
import Yelp from '../../util/yelp';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
businesses: [],
};
this.searchYelp = this.searchYelp.bind(this);
}
searchYelp(term) {
Yelp.searchYelp(term).then((businesses) => {
this.setState({ businesses: businesses })
})
}
render() {
return (
<div className="App">
<SearchBar searchYelp={this.searchYelp} />
<BusinessList businesses={this.state.businesses} />
</div>
)
}
}
export default App;
Yelp.js
const { default: SearchBar } = require("../components/SearchBar/SearchBar");
const Yelp = {
searchYelp(term) {
return fetch('/api/hello/:term')
.then((response) => {
console.log(response)
return response.json()
}).then((jsonResponse) => {
console.log(jsonResponse)
if (jsonResponse.businesses) {
return jsonResponse.businesses.map((business) => {
return {
id: business.id,
imageSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zip_code,
category: business.categories.title,
rating: business.rating,
reviewCount: business.review_count,
}
})
}
})
}
}
export default Yelp
而服務器
我試圖過濾該術語只是為了測驗但沒有成功，如果我能讓術語和位置作業，我認為我會很好，并且省略 sortBy ...
Server.js
const express = require('express');
const axios = require('axios');
require('dotenv').config();
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
app.use(cors());
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const apiKey = process.env.APIKEY
app.get('/api/hello/:term', (req, res) => {
const term = req.params.term
const config = {
method: 'get',
url: 'https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}',
headers: {
'Authorization': `Bearer ${apiKey}`
}
};
axios(config)
.then(function (response) {
// res.send(JSON.stringify(response.data, null, 2));
// res.send(term)
return JSON.stringify(response.data, null, 2)
})
.then(function (jsonResponse) {
res.send(jsonResponse)
})
.catch(function (error) {
console.log(error);
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
這是網路應用程式的螢屏截圖
uj5u.com熱心網友回復：
如果你想使用 yelplocation過濾器的內置功能，你最好在你的 express 應用程式中表達它（雙關語！）：
app.get('/api/hello/', (req, res) => {
// use query instead of params,
// and destruct location as well
const {term, location} = req.query
const config = {
method: 'get',
url: 'https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}',
headers: {
'Authorization': `Bearer ${apiKey}`
}
};
}
...并在前端傳遞查詢引數：
const Yelp = {
// take care to update any existing calls
// to this function with the location parameter
searchYelp(term, location) {
return fetch(`/api/hello?term=${term}&location=${location}`)
// etc. etc. ...
如果您只想在前端對其進行過濾（不推薦），并且位置輸入將始終包含一個城市名稱（并且您可以強制執行它）-您就快到了，剩下要做的就是宣告新的函式引數，并過濾結果：
function searchYelp(term, location, sortBy) {
// ...
this.setState({ businesses: businesses.filter(business => business.city === location) })
// ...
}
如果您仍然不想使用 yelp API 的location，并且想要更模糊的搜索（即能夠提供一般術語，如“布魯克林”，并輸出準確的資訊，如城市、州、郵政編碼等），您必須在位置輸入上實作某種自動完成機制，這將涉及對某些后端服務的進一步呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339478.html
上一篇：繪制多列的平均值，包括標準偏差