├── .gitignore
├── app
    ├── App.js
    ├── main.js
    ├── reducers
    │   ├── all.js
    │   └── escRedcer.js
    └── sagas
    │   └── rootSaga.js
├── css
    └── antd.min.css
├── images
    ├── guanxiaotong
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   └── 5.jpg
    ├── jindong
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   └── 5.jpg
    ├── yangmi
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   └── 5.jpg
    └── yiyangqianxi
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   └── 5.jpg
├── index.html
├── package-lock.json
├── package.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/app/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import {connect} from "react-redux"
 3 | import { Table, Checkbox } from 'antd'
 4 | 
 5 | @connect(
 6 |     ({esc})=>({
 7 |         results:esc.results,
 8 |         current:esc.current,
 9 |         pageSize:esc.pageSize,
10 |         total:esc.total,
11 |         color:esc.color
12 |     }),
13 |     dispatch=>({
14 |         dispatch
15 |     })
16 | )
17 | export default class App extends Component {
18 |     componentWillMount() {
19 |         this.props.dispatch({type:"INIT"})
20 |     }
21 |     
22 |     render() {
23 |         return (
24 |             <div style={{width:800 ,margin:"100px auto"}} >
25 |                 {console.log(this.props.color+222222222222222)}
26 |                 <Checkbox.Group 
27 |                     value={this.props.color}
28 |                     onChange={(v)=>{
29 |                         this.props.dispatch({type:"CHANGECOLOR_SAGA",k:"color",v})
30 |                     }}
31 |                 >
32 |                     {["红","黄","蓝","绿","黑","灰","白",].map(item=> <Checkbox key={item} value={item}>{item}</Checkbox>)}
33 |                 </Checkbox.Group>
34 |                 <Table
35 |                     rowKey="id"
36 |                     columns={[
37 |                         {'title': '图片', 'key':'image' , 'dataIndex': 'image',render:(txt,{id})=><div>
38 |                             <img src={`http://192.168.2.250:3000/images/carimages_small/${id}/view/${txt}`} alt=""/>
39 |                         </div>},
40 |                         {'title': '编号', 'key':'id' , 'dataIndex': 'id'},
41 |                         {'title': '品牌', 'key':'brand' , 'dataIndex': 'brand'},
42 |                         {'title': '车系', 'key':'series' , 'dataIndex': 'series'},
43 |                         {'title': '颜色', 'key':'color' , 'dataIndex': 'color'},
44 |                         {'title': '发动机', 'key':'engine' , 'dataIndex': 'engine'},
45 |                         {'title': '尾气', 'key':'exhaust' , 'dataIndex': 'exhaust'},
46 |                         {'title': '燃料', 'key':'fuel' , 'dataIndex': 'fuel'}
47 |                     ]}
48 |                     dataSource={this.props.results}
49 |                     pagination={{
50 |                         current:this.props.current,
51 |                         pageSize:this.props.pageSize,
52 |                         total:this.props.total,
53 |                         onChange:current=>{
54 |                             this.props.dispatch({type:"CHANGECURRENT_SAGA","current":current})
55 |                         }
56 |                     }}
57 |                 />
58 |             </div>
59 |         )
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/app/main.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom"
 3 | import {createStore,applyMiddleware } from "redux"
 4 | import createSagaMiddleware from 'redux-saga'
 5 | import {Provider} from "react-redux"
 6 | import rootSaga from "./sagas/rootSaga"
 7 | import App from "./App"
 8 | 
 9 | import reducer from "./reducers/all"
10 | const sagaMiddleware = createSagaMiddleware()
11 | const store=createStore(reducer,applyMiddleware(sagaMiddleware))
12 | sagaMiddleware.run(rootSaga)
13 | // console.log(store.getState())
14 | ReactDOM.render(
15 |     <Provider store={store} >
16 |         <App/>
17 |     </Provider>
18 |     ,
19 |     document.querySelector("#app")
20 | )
21 | 


--------------------------------------------------------------------------------
/app/reducers/all.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from "redux"
2 | import escRedcer from "./escRedcer"
3 | export default combineReducers({
4 |     esc:escRedcer
5 | })


--------------------------------------------------------------------------------
/app/reducers/escRedcer.js:
--------------------------------------------------------------------------------
 1 | const initObj = {
 2 |     results: [],
 3 |     current: 2,
 4 |     pageSize: 0,
 5 |     total: 0,
 6 |     color:["红"]
 7 | }
 8 | export default (state = initObj, action) => {
 9 |     switch (action.type) {
10 | 
11 |         case "CHANGERESULTS":
12 |             return {
13 |                 ...state,
14 |                 results: action.results
15 | 
16 |             }
17 |         case "CHANGESTATE":
18 |             return {
19 |                 ...state,
20 |                 // current: action.page,
21 |                 pageSize: action.pageSize,
22 |                 total: action.total
23 | 
24 |             }
25 |         case "CHANGECURRENT":
26 |             return{
27 |                 ...state,
28 |                 current:action.current
29 |             }
30 |         case "CHANGECOLOR":
31 |                 return{
32 |                     ...state,
33 |                     current:1,
34 |                     [action.k]:action.v
35 |                 }
36 |     }
37 |     return state
38 | }


--------------------------------------------------------------------------------
/app/sagas/rootSaga.js:
--------------------------------------------------------------------------------
 1 | import { call, put, takeEvery, select} from 'redux-saga/effects'
 2 | import Axios from 'axios'
 3 | import querystring from "querystring"
 4 | export default function*(){
 5 |     yield takeEvery("INIT",function*(){
 6 |         const { current, color } = yield select(({ esc }) => esc)     
 7 |         const {results,page,pageSize,total} = yield Axios.get("http://192.168.2.250:3000/car?"+querystring.stringify({
 8 |             page:current,
 9 |             color:color.join("v")
10 |         })).then(data=>data.data)
11 |     yield put({type:"CHANGERESULTS",results})
12 |     yield put({type:"CHANGESTATE",page,pageSize,total})
13 |     })
14 |     yield takeEvery("CHANGECURRENT_SAGA",function*({current}){
15 |         yield put({type:"CHANGECURRENT",current})
16 |         yield put({type:"INIT"})
17 |     })
18 |     yield takeEvery("CHANGECOLOR_SAGA",function*({k,v}){
19 |         yield put({type:"CHANGECOLOR",k,v})
20 |         yield put({type:"INIT"})
21 |     })
22 | }
23 | 


--------------------------------------------------------------------------------
/images/guanxiaotong/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/guanxiaotong/1.jpg


--------------------------------------------------------------------------------
/images/guanxiaotong/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/guanxiaotong/2.jpg


--------------------------------------------------------------------------------
/images/guanxiaotong/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/guanxiaotong/3.jpg


--------------------------------------------------------------------------------
/images/guanxiaotong/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/guanxiaotong/4.jpg


--------------------------------------------------------------------------------
/images/guanxiaotong/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/guanxiaotong/5.jpg


--------------------------------------------------------------------------------
/images/jindong/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/jindong/1.jpg


--------------------------------------------------------------------------------
/images/jindong/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/jindong/2.jpg


--------------------------------------------------------------------------------
/images/jindong/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/jindong/3.jpg


--------------------------------------------------------------------------------
/images/jindong/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/jindong/4.jpg


--------------------------------------------------------------------------------
/images/jindong/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/jindong/5.jpg


--------------------------------------------------------------------------------
/images/yangmi/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yangmi/1.jpg


--------------------------------------------------------------------------------
/images/yangmi/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yangmi/2.jpg


--------------------------------------------------------------------------------
/images/yangmi/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yangmi/3.jpg


--------------------------------------------------------------------------------
/images/yangmi/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yangmi/4.jpg


--------------------------------------------------------------------------------
/images/yangmi/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yangmi/5.jpg


--------------------------------------------------------------------------------
/images/yiyangqianxi/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yiyangqianxi/1.jpg


--------------------------------------------------------------------------------
/images/yiyangqianxi/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yiyangqianxi/2.jpg


--------------------------------------------------------------------------------
/images/yiyangqianxi/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yiyangqianxi/3.jpg


--------------------------------------------------------------------------------
/images/yiyangqianxi/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yiyangqianxi/4.jpg


--------------------------------------------------------------------------------
/images/yiyangqianxi/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deqiang233/github_study/26509588a65e5d9343a7a8eaee01a176b8806570/images/yiyangqianxi/5.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="css/antd.min.css">
 9 | </head>
10 | <body>
11 |     <div id="app"></div>
12 |     <script src="xuni/bundle.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my_project",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --content-base ./ --port 8080 --host 0.0.0.0"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "devDependencies": {
12 |     "@babel/core": "^7.6.2",
13 |     "@babel/plugin-proposal-decorators": "^7.6.0",
14 |     "@babel/preset-react": "^7.0.0",
15 |     "babel-loader": "^8.0.6",
16 |     "babel-plugin-import": "^1.12.2",
17 |     "css-loader": "^3.2.0",
18 |     "less": "^3.10.3",
19 |     "less-loader": "^5.0.0",
20 |     "style-loader": "^1.0.0",
21 |     "webpack": "^4.41.0"
22 |   },
23 |   "dependencies": {
24 |     "antd": "^3.23.6",
25 |     "axios": "^0.19.0",
26 |     "classnames": "^2.2.6",
27 |     "react": "^16.9.0",
28 |     "react-dom": "^16.9.0",
29 |     "react-redux": "^7.1.1",
30 |     "redux": "^4.0.4",
31 |     "redux-logger": "^3.0.6",
32 |     "redux-saga": "^1.1.1",
33 |     "style-jsx": "0.0.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     mode: 'development',
 3 |     entry: './app/main.js',
 4 |     output: {
 5 |         filename: 'bundle.js',
 6 |         publicPath: 'xuni'
 7 |     },
 8 |     module: {
 9 |         rules: [
10 |             {
11 |                 test: /\.less$/,
12 |                 use: [
13 |                     {
14 |                         loader: 'style-loader', // creates style nodes from JS strings
15 |                     },
16 |                     {
17 |                         loader: 'css-loader', // translates CSS into CommonJS
18 |                     },
19 |                     {
20 |                         loader: 'less-loader', // compiles Less to CSS
21 |                     },
22 |                 ],
23 |             },
24 |             {
25 |                 test: /\.m?js$/,
26 |                 exclude: /(node_modules|bower_components)/,
27 |                 use: {
28 |                     loader: 'babel-loader',
29 |                     options: {
30 |                         presets: ['@babel/preset-react'],
31 |                         plugins: [
32 |                             ["import", {
33 |                                 "libraryName": "antd",
34 |                                 "libraryDirectory": "lib",   // default: lib
35 |                                 "style": false
36 |                             }], 
37 |                             ['@babel/plugin-proposal-decorators', {
38 |                                 'legacy': true
39 |                             }]
40 |                         ]
41 |                     }
42 |                 }
43 |             }
44 |         ],
45 |     },
46 | }
47 | 


--------------------------------------------------------------------------------