更新路由，Request

mock/package/query.js

+/*
+ * query.js
+ * Created by 还有醋v on 2020/11/10.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+(function main() {
+    return {
+        "code": 0,
+        "data": {
+            "packages": [
+                {
+                    "id": "projectx",
+                    "name": "星速台相关的过程",
+                    "type": null,
+                    "remark": null,
+                    "versions": "0.0.1",
+                    "gmt_create": "2020-11-02T07:39:34.000Z",
+                    "gmt_modified": "2020-11-02T07:39:34.000Z"
+                },
+                {
+                    "id": "games",
+                    "name": "游戏模块包",
+                    "type": null,
+                    "remark": null,
+                    "versions": "0.0.1",
+                    "gmt_create": "2020-09-24T07:47:19.000Z",
+                    "gmt_modified": "2020-09-24T07:47:19.000Z"
+                }
+            ],
+            "total": 2
+        }
+    }
+}())

package.json

@@ -20,6 +20,7 @@
     "marked": "^1.2.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "typescript": "^4.0.3",

src/App.tsx

 import React, {Component, ReactNode} from 'react';
-import ReactDOM from 'react-dom';
 
 import './App.less';
 
-import {BackTop} from "antd";
-import AppHeader from "./Element/AppHeader/AppHeader";
-import AppFooter from "./Element/AppFooter/AppFooter";
-import SearchList from "./Element/SearchLIst/SearchList";
-import AppSearch from "./Component/AppSearch/AppSearch";
-import {VerticalAlignTopOutlined} from "@ant-design/icons";
-import Details from "./Pages/Details/Details";
-import Index from "./Pages/Index/Index";
-import {Tools} from "./Tools";
-import BasicRoute from "./BasicRoute";
-import {HashRouter, Route, Switch} from "react-router-dom";
+class App extends Component {
 
-export enum PAGE {
-    INDEX = 'index',
-    SEARCH = 'search',
-    DETAILS = 'details',
-}
-
-export let changePage = function (page: PAGE, data: any = null) {
-
-}
-
-class App extends HashRouter {
-
-    public state: any = {
-        page: PAGE.INDEX,
-        pageData: null,
-    }
-    
     public componentDidMount(): void {
-        this.setHeaderEffect();
-    }
-
-    private setHeaderEffect() {
 
     }
 
     public render(): ReactNode {
         return (
-            <div>
-                {/* app */}
-                <div className='app'>
-                    {/* main */}
-                    <div className='main'>
-                        <BasicRoute ref='route'/>
-                    </div>
-
-                    {/* footer */}
-                    <div className='footer'>
-                        <AppFooter/>
-                    </div>
-                </div>
-
-                {/* BackTop */}
-                <BackTop
-                    visibilityHeight={100}
-                >
-                    <VerticalAlignTopOutlined
-                        style={{
-                            height: 50,
-                            width: 50,
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            borderRadius: 4,
-                            backgroundColor: '#101010',
-                            color: '#fff',
-                            fontSize: 30,
-                        }}/>
-                </BackTop>
-            </div>
+            <div/>
         );
     }
 }

src/BaseRouter.tsx

+import React, {Component} from 'react';
+import {Router, Route, Switch} from 'react-router';
+import Index from "./Pages/Index/Index";
+import SearchList from "./Pages/SearchLIst/SearchList";
+import Details from "./Pages/Details/Details";
+import {createBrowserHistory} from 'history';
+import App from "./App";
+
+import './App.less'
+import AppHeader from "./Element/AppHeader/AppHeader";
+import AppFooter from "./Element/AppFooter/AppFooter";
+import {BackTop} from "antd";
+import {VerticalAlignTopOutlined} from "@ant-design/icons";
+
+export const history = createBrowserHistory();
+
+export class BaseRouter extends Component {
+    render() {
+        return (
+            <div className='app'>
+                {/* AppHeader */}
+                <AppHeader/>
+
+                {/* main */}
+                <Router history={history}>
+                    <Switch>
+                        <Route path="/" component={App} exact children={() => {
+                            return <Index/>
+                        }}/>
+                        <Route path="/index" exact component={Index}/>
+                        <Route path="/search" exact component={SearchList}/>
+                        <Route path="/details" exact component={Details}/>
+                    </Switch>
+                </Router>
+
+                {/* footer */}
+                <div className='footer'>
+                    <AppFooter/>
+                </div>
+
+                {/* BackTop */}
+                <BackTop visibilityHeight={100}>
+                    <VerticalAlignTopOutlined
+                        style={{
+                            height: 50,
+                            width: 50,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderRadius: 4,
+                            backgroundColor: '#101010',
+                            color: '#fff',
+                            fontSize: 30,
+                        }}/>
+                </BackTop>
+            </div>
+        );
+    }
+}
+
+export default BaseRouter;

src/BasicRoute.tsx

-import React, { Component } from 'react';
-import {HashRouter, Route, Switch, Redirect} from 'react-router-dom';
-import Index from "./Pages/Index/Index";
-import SearchList from "./Element/SearchLIst/SearchList";
-import Details from "./Pages/Details/Details";
-
-class BasicRoute extends Component {
-    render() {
-        return (
-            <HashRouter>
-                <Switch>
-                    <Route exact path="/" component={Index}/>
-                    <Route exact path="seacrh" component={SearchList}/>
-                    <Route exact path="details" component={Details}/>
-                </Switch>
-            </HashRouter>
-        );
-    }
-}
-
-
-export default BasicRoute;

src/Component/AppSearch/AppSearch.tsx

@@ -13,6 +13,7 @@ import logo from "../../logo.svg";
 
 import {SearchOutlined} from '@ant-design/icons';
 import {Tools} from "../../Tools";
+import {history} from "../../BaseRouter";
 
 
 export default class AppSearch extends React.Component<any> {
@@ -27,6 +28,15 @@ export default class AppSearch extends React.Component<any> {
 
     public componentDidMount(): void {
         this.input = this.refs.input as Input;
+
+        const queryParams: any = {};
+        for (let item of history.location.search.replace('?', '').split('&')) {
+            let arr = item.split('=');
+            queryParams[arr[0]] = arr.length === 1 ? true : arr[1] || '';
+        }
+
+        console.log(queryParams);
+        this.input.setState({value: decodeURI(queryParams.keyword || '')});
     }
 
     public componentWillUnmount(): void {
@@ -36,14 +46,9 @@ export default class AppSearch extends React.Component<any> {
     /**
      * 点击搜索按钮查询包
      */
-    private packageQuery = async () => {
-        console.log(this.input);
+    private clickSearch = async () => {
         const keyword = this.input!.state.value;
-        const res = await Tools.packageQuery({
-            keyword,
-        });
-        // @ts-ignore
-        this.props.history.push('/search');
+        history.push(`search?keyword=${keyword || ''}`);
     }
 
     private async updateTempList() {
@@ -56,7 +61,6 @@ export default class AppSearch extends React.Component<any> {
     }
 
     public render(): ReactNode {
-        const {packageQuery} = this.props;
 
         return (
             <div className='app-search'>
@@ -67,13 +71,14 @@ export default class AppSearch extends React.Component<any> {
                                ref='input'
                                size="large"
                                onChange={this.onInputChange}
+                               onPressEnter={this.clickSearch}
                                placeholder="Search packages"
                                prefix={
                                    <SearchOutlined className='app-search-input-icon'/>
                                }
                         />
                         <Button
-                            onClick={this.packageQuery}
+                            onClick={this.clickSearch}
                             className='app-search-btn'
                             type="primary"
                         >

src/Component/SearchListItem/SearchListItem.tsx

@@ -27,7 +27,7 @@ export default class SearchListItem extends React.Component<any> {
 
     public render(): ReactNode {
         const {id, name, type, remark, versions, gmt_create, gmt_modified, link, userNick} = this.props.data;
-        console.log(this.props.data);
+        // console.log(this.props.data);
         return (
             <div className='search-item'>
                 <div className='search-item-left'>

src/Element/AppHeader/AppHeader.tsx

@@ -35,7 +35,6 @@ export default class AppHeader extends React.Component<any> {
     }
 
     public render(): ReactNode {
-        const {history} = this.props;
         return (
             <div className='header' ref='searchDiv'>
                 <div className='app-header'>
@@ -48,7 +47,6 @@ export default class AppHeader extends React.Component<any> {
                 </div>
                 <div className='search'>
                     <AppSearch
-                        history={history}
                         ref={'appSearch'}
                         packageQuery={'this.packageQuery'}
                     />

src/Pages/Index/Index.tsx

@@ -10,6 +10,7 @@ import ReactDOM from 'react-dom';
 
 import './Index.less';
 import AppHeader from "../../Element/AppHeader/AppHeader";
+import {history} from "../../BaseRouter";
 
 export default class Index extends React.Component<any> {
 
@@ -34,16 +35,8 @@ export default class Index extends React.Component<any> {
     }
 
     public render(): ReactNode {
-        const {history} = this.props;
-
         return (
             <div className='index'>
-
-                <AppHeader
-                    ref='searchDiv'
-                    history={history}
-                />
-
                 <div className='index-bg' ref='indexTxt'>
                     <div className="index-txt">
                         <h1 className="index-txt-h1">

src/Element/SearchLIst/SearchList.less → src/Pages/SearchLIst/SearchList.less

@@ -6,9 +6,18 @@
 
 
 .search-list {
-  .search-list-cont{
+  .search-list-card{
     padding-left: 26px;
     padding-right: 26px;
+
+    .search-list-list{
+      min-height: 300px;
+
+      .search-list-spin{
+        position: absolute;
+        top: 100px;
+      }
+    }
   }
 
   .search-list-pagination-top {
@@ -16,6 +25,7 @@
     border-bottom-width: 1px;
     border-color: rgba(0, 0, 0, .1);
     background-color: #f9f9f9;
+    z-index: 1;
 
     .search-list-pagination-cont {
       display: flex;

src/Element/SearchLIst/SearchList.tsx → src/Pages/SearchLIst/SearchList.tsx

@@ -8,58 +8,66 @@
 import React, {ReactNode} from 'react';
 
 import './SearchList.less';
-import {Card, List, Pagination} from "antd";
+import {Card, List, Pagination, Spin} from "antd";
 import SearchListItem from "../../Component/SearchListItem/SearchListItem";
+import {Tools} from "../../Tools";
 
 export default class SearchList extends React.Component<any> {
 
     public state: any = {
         showData: [],
         total: 0,
-        pageIndex: 1,
         pageSize: 10,
+        pageNum: 1,
         current: 1,
+        loading: false,
     }
 
-    private totalData: any[] = [];
-
     constructor(props: any, context: any) {
         super(props, context);
     }
 
-    public componentDidMount(): void {
-        const {data} = this.props;
-        this.totalData = data.data.packages;
-        this.setState({
-            total: this.totalData.length,
-        });
-        this.showPage(1);
-
+    public async componentDidMount() {
+        this.queryParams = Tools.getQueryParams();
+        await this.queryPackage();
     }
 
-    public componentWillUnmount(): void {
+    private queryParams: any = {};
 
+    public componentWillReceiveProps(nextProps: Readonly<any>, nextContext: any) {
+        this.queryParams = Tools.getQueryParams();
+        this.queryPackage();
     }
 
-    private showPage(page: number, pageSize: number = this.state.pageSize) {
-        const showData = this.totalData.slice((page - 1) * pageSize, page * pageSize);
+    public async queryPackage(pageNum: number = 1, pageSize: number = this.state.pageSize) {
+        console.log(decodeURI(this.queryParams.keyword));
+        this.setState({loading: true});
+        const res = await Tools.packageQuery({
+            keyword: decodeURI(this.queryParams.keyword),
+            pageNum: pageNum,
+            pageSize: pageSize,
+        });
+        this.setState({loading: false});
+        if (!res) return;
+
         this.setState({
-            current: page,
-            showData,
-            pageSize
+            pageNum,
+            pageSize,
+            showData: res.data.packages,
+            total: res.data.total
         });
     }
 
-    private onPageChange = (page: number, pageSize?: number) => {
-        this.showPage(page, pageSize);
+    private onPageChange = (pageNum: number, pageSize?: number) => {
+        this.queryPackage(pageNum, pageSize);
     }
 
-    private onShowSizeChange = (current: number, pageSize?: number) => {
-        this.showPage(current, pageSize);
-    }
+    // private onShowSizeChange = (pageNum: number, pageSize?: number) => {
+    //     this.queryPackage(pageNum, pageSize);
+    // }
 
     public render(): ReactNode {
-        const {showData, total, pageSize, current} = this.state;
+        const {showData, total, pageSize, pageNum, loading} = this.state;
 
         const getPagination = () => {
             return (
@@ -70,13 +78,13 @@ export default class SearchList extends React.Component<any> {
                         </div>
                         <Pagination
                             className='search-list-pagination'
-                            current={current}
+                            current={pageNum}
                             total={total}
                             pageSize={pageSize}
                             hideOnSinglePage={false}
                             showSizeChanger
                             onChange={this.onPageChange}
-                            onShowSizeChange={this.onShowSizeChange}
+                            // onShowSizeChange={this.onShowSizeChange}
                         />
                     </div>
                 </div>
@@ -85,17 +93,45 @@ export default class SearchList extends React.Component<any> {
 
         return (
             <div className='search-list'>
-                {getPagination()}
-                <Card className='search-list-cont'>
-                    <List
-                        itemLayout="horizontal"
-                        dataSource={showData}
-                        renderItem={(item) => (
-                            <List.Item>
-                                <SearchListItem data={item}/>
-                            </List.Item>
-                        )}
-                    />
+                {/*{getPagination()}*/}
+                <div className='search-list-pagination-top'
+                     style={{
+                         position: "sticky",
+                         top: 0
+                     }}>
+                    <div className='search-list-pagination-cont'>
+                        <div>
+                            <h2 className="search-list-num">{`${total} packages found`}</h2>
+                        </div>
+                        <Pagination
+                            className='search-list-pagination'
+                            current={pageNum}
+                            total={total}
+                            pageSize={pageSize}
+                            hideOnSinglePage={false}
+                            showSizeChanger
+                            onChange={this.onPageChange}
+                            // onShowSizeChange={this.onShowSizeChange}
+                        />
+                    </div>
+                </div>
+
+                <Card className='search-list-card'>
+                    <List className='search-list-list'
+                          itemLayout="horizontal"
+                          dataSource={showData}
+                          renderItem={(item) => (
+                              <List.Item>
+                                  <SearchListItem data={item}/>
+                              </List.Item>
+                          )}
+                    >
+                        {loading && <Spin
+                            className='search-list-spin'
+                            size="large"
+                            tip="Loading..."
+                        />}
+                    </List>
                 </Card>
                 {getPagination()}
             </div>

src/Tools.ts

@@ -6,22 +6,32 @@
 
 import Request from "./request/Request";
 import {apiList} from "./request/apiList";
+import {history} from "./BaseRouter";
 
 export class Tools {
     constructor() {
     }
 
+    public static getQueryParams() {
+        const queryParams: any = {};
+        for (let item of history.location.search.replace('?', '').split('&')) {
+            let arr = item.split('=');
+            queryParams[arr[0]] = arr.length === 1 ? true : arr[1] || '';
+        }
+        return queryParams;
+    }
+
     public static async packageQuery(
         params: {
             keyword?: string,
             searchType?: 'id' | 'name' | 'remark',
             pkgType?: 1 | 2 | 3,
-            pageNum?: string,
-            pageSize?: string,
+            pageNum?: number,
+            pageSize?: number,
         } = {}
-    ) {
-        const res = await Request.api(apiList.packageQuery, params);
-        if (!res) {
+    ): Promise<any> {
+        const res: any = await Request.api(apiList.packageQuery, params);
+        if (!res || +res.code != 0) {
             return null;
         }
         return res;

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
+import BaseRouter from "./BaseRouter";
 
 ReactDOM.render(
-    <App/>,
+    <BaseRouter/>,
     document.getElementById('root')
 );
 

src/request/Request.ts

@@ -5,6 +5,7 @@
  */
 
 import {AxiosResponse} from "axios";
+import {apiUrl, mockUrl} from "./apiList";
 
 const axios = require('axios');
 
@@ -17,22 +18,40 @@ export default class Request {
      * 请求个接口
      * @param url
      * @param params
-     * @param type
+     * @param method
      */
     public static api(
         url: string,
         params: any = {},
-        type: 'get' | 'post' = 'get'
+        method: 'get' | 'post' = 'get'
     ) {
         return new Promise((resolve, reject) => {
-            Request[type](url, params)
+            const uri = (window.location.port == '3000') ? mockUrl : apiUrl;
+            Request[method](uri + url, params)
                 .then((res) => {
                     resolve(res.data);
+                    /* 打印参数和返回 */
+                    console.log(
+                        `\n%c[ request ]\n`
+                        + `URL   : ${uri + url} \n`
+                        + `METHOD: ${method} \n`
+                        + `PARAM : %o \n`
+                        + `DATA  : %o \n`
+                        , 'color:green'
+                        , params
+                        , res.data
+                    );
                 })
                 .catch((err) => {
                     resolve(null);
                 });
-        })
+        });
+    }
+
+
+    public static async fetchAsync(url: string) {
+        let response = await fetch(url);
+        return await response.text();
     }
 
     public static get<T = any, R = AxiosResponse<T>>(

src/request/apiList.ts

@@ -4,6 +4,8 @@
  * Copyright © 2020 haiyoucuv. All rights reserved.
  */
 
+export const apiUrl = 'http://spark.duiba.com.cn';
+export const mockUrl = 'https://docs.dui88.com/mock/178';
 export const apiList = {
-    packageQuery: 'http://spark.duiba.com.cn/package/query'
+    packageQuery: '/package/query'
 }
\ No newline at end of file

tsconfig.json

@@ -10,7 +10,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",

yarn.lock

@@ -9752,7 +9752,7 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.2.0:
+react-router@5.2.0, react-router@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npm.taobao.org/react-router/download/react-router-5.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-router%2Fdownload%2Freact-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
   integrity sha1-Qk51ZByodH+/duXsyml4GqN+opM=