搜索接口有问题

mock/search/list.js

@@ -0,0 +1,68 @@
+module.exports = {
+ hasMore: true,
+ data: [
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022145742279-606202974.jpg',
+ title: '河束人家',
+ subTitle: '南锣鼓巷店',
+ price: '150',
+ distance: '120m',
+ mumber: '389',
+ id: Math.random().toString().slice(2)
+ },
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022145750123-1745839503.jpg',
+ title: '漫漫火锅',
+ subTitle: '[王府井]自助火锅',
+ price: '113',
+ distance: '140m',
+ mumber: '689',
+ id: Math.random().toString().slice(2)
+ },
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022145755545-1770557408.jpg',
+ title: '北方涮肉',
+ subTitle: '什刹海店',
+ price: '92',
+ distance: '160',
+ mumber: '106',
+ id: Math.random().toString().slice(2)
+ },
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022145800732-576947550.jpg',
+ title: '姓高火锅',
+ subTitle: '知春里店',
+ price: '90',
+ distance: '160',
+ mumber: '58',
+ id: Math.random().toString().slice(2)
+ },
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022145806201-1193851669.jpg',
+ title: '八重牛府',
+ subTitle: '最好吃的牛丸',
+ price: '85',
+ distance: '160',
+ mumber: '1426',
+ id: Math.random().toString().slice(2)
+ },
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022150855185-1659375763.jpg',
+ title: '蜀乡涮锅',
+ subTitle: '[王府井]自助火锅',
+ price: '113',
+ distance: '140m',
+ mumber: '689',
+ id: Math.random().toString().slice(2)
+ },
+ {
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161022145800732-576947550.jpg',
+ title: '满楼福火锅',
+ subTitle: '知春路店',
+ price: '90',
+ distance: '160',
+ mumber: '58',
+ id: Math.random().toString().slice(2)
+ }
+ ]
+}

mock/server.js

@@ -8,7 +8,6 @@ const app = new Koa();
 
 // 首页 —— 轮播图数据
 const homeCateGory = require('./home/homeCategory');
-
 router.get('/api/homeCategory', (ctx, next) => {
  ctx.body = homeCateGory;
 });
@@ -22,7 +21,6 @@ router.get('/api/homead', (ctx, next) => {
 
 // 首页 —— 推荐雷彪（猜你喜欢）
 const homeListData = require('./home/list');
-
 router.get('/api/homelist/:city/:page', (ctx, next) => {
  // 参数
  const params = ctx.params;
@@ -41,6 +39,41 @@ router.get('/api/hotCityList', ctx => {
  ctx.body = hotCityListData;
 });
 
+// 搜索结果页 - 搜索结果 - 三个参数
+const searchListData = require('./search/list');
+router.get('/api/search/:page/:city/:category/:keyword', (ctx, next) => {
+ // 参数
+ const params = this.params
+ const paramsPage = params.page
+ const paramsCity = params.city
+ const paramsCategory = params.category
+ const paramsKeyword = params.keyword
+
+ console.log('当前页数：' + paramsPage)
+ console.log('当前城市：' + paramsCity)
+ console.log('当前类别：' + paramsCategory)
+ console.log('关键字：' + paramsKeyword)
+
+ ctx.body = searchListData;
+});
+
+// 搜索结果页 - 搜索结果 - 两个参数
+router.get('/api/search/:page/:city/:category', (ctx, next) => {
+ console.log('搜索结果页 - 搜索结果')
+
+ // 参数
+ const params = this.params
+ const paramsPage = params.page
+ const paramsCity = params.city
+ const paramsCategory = params.category
+
+ console.log('当前页数：' + paramsPage)
+ console.log('当前城市：' + paramsCity)
+ console.log('当前类别：' + paramsCategory)
+
+ ctx.body = searchListData;
+})
+
 // router.post('/api/post', koaBody, (ctx, next) => {
 // console.log(ctx.request.body);
 // ctx.body = JSON.stringify(ctx.request.body)

src/containers/Home/subpage/List.js

@@ -88,7 +88,6 @@ class List extends PureComponent {
  });
 
  };
-
 }
 
 export default List;

src/containers/Search/index.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 
 import SearchHead from '~components/SearchHeader';
+import SearchList from './subpage/List';
+
 
 class Search extends PureComponent {
  render() {
@@ -11,14 +13,13 @@ class Search extends PureComponent {
  keyword={params.keyword}
  history={this.props.history}
  />
+ <SearchList 
+ keyword={params.keyword}
+ category={params.category} 
+ />
  </div>
  );
  };
-
- componentDidMount() {
- console.log(this.props)
- }
-
 }
 
 export default Search;

src/containers/Search/subpage/List.js

@@ -0,0 +1,131 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+
+import ListComponent from '~components/List';
+import LoadMore from '~components/LoadMore';
+
+import { getSearchData } from '~fetch/search/search';
+
+// 初始化state
+
+const initialState = {
+ data: [], // 存储列表数据
+ hasMore: false, // 记录当前状态下，是否还有更多数据，后端返回的，true即还有
+ isLoadingMore: false, // 记录当前状态下，是否正在加载，true即正在加载
+ page: 0 // 记录下一页的页码，首页是0
+};
+
+class SearchList extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = initialState;
+ };
+
+ render() {
+ return (
+ <div>
+ {
+ this.state.data.length
+ ? <ListComponent data={this.state.data} />
+ : <div>loading...</div>
+ }
+ {
+ this.state.hasMore
+ ? <LoadMore isLoadingMore={this.state.isLoadingMore} loadMoreFn={this.loadMoreData} />
+ : ''
+ }
+ </div>
+ );
+ };
+
+ // 页面初次
+ componentDidMount() {
+ // 获取首页数据
+ this.loadFirstPageData();
+ };
+
+ // 页面第二次，重新搜索 只走componentDidUpdate
+ componentDidUpdate(prevProps, prevState) {
+ const { keyword, category } = this.props;
+
+ // 搜索条件完全相等时，忽略
+ if (keyword === prevProps.keyword && category === prevProps.category) {
+ return;
+ };
+
+ // 重置 state
+ this.setState(initialState);
+
+ // 重新加载数据
+ this.loadFirstPageData();
+ }
+
+ // 获取首页数据
+ loadFirstPageData = () => {
+ const cityName = this.props.userinfo.cityName;
+ const { keyword, category } = this.props;
+ const result = getSearchData(0, cityName, category, keyword);
+ console.log(result)
+ this.resultHandle(result);
+ };
+
+ // 数据处理
+ resultHandle = result => {
+ result.then(res => {
+ return res.json();
+ }).then(json => {
+ const hasMore = json.hasMore;
+ const data = json.data;
+
+ // 存储数据
+ this.setState({
+ hasMore: hasMore,
+ data: this.state.data.concat(data) // 将第n+1页的数据累加到第n页上
+ });
+ });
+ };
+
+ // 加载更多
+ loadMoreData = () => {
+ // 将状态变为加载中
+ this.setState({
+ isLoadingMore: true
+ });
+
+ const cityName = this.props.userinfo.cityName;
+ const page = this.state.page;
+ const { keyword, category } = this.props;
+ const result = getSearchData(0, cityName, category, keyword);
+
+ this.resultHandle(result);
+
+ // 增加page的计数
+ setTimeout(() =>{
+ this.setState({
+ page: page + 1,
+ isLoadingMore: false
+ });
+ });
+
+ };
+}
+
+// ==========================redux react 绑定==========================
+
+const mapStateToProps = state => {
+ return {
+ userinfo: state.userinfo
+ };
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ };
+};
+
+
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(SearchList);

src/fetch/get.js

@@ -2,6 +2,7 @@ import 'whatwg-fetch';
 import 'es6-promise';
 
 export default function get(url) {
+ console.log(url)
  const result = fetch(url, {
  credentials: 'include',
  headers: {

src/fetch/search/search.js

@@ -0,0 +1,9 @@
+import get from '../get';
+
+// 搜索结果
+export function getSearchData(page, cityName, category, keyword) {
+ const keywordStr = keyword ? '/' + keyword : '';
+ const result = get('/api/search/' + page + '/' + encodeURIComponent(cityName) + '/' + category + keywordStr);
+
+ return result;
+};