├── public
├── favicon.ico
├── img
│ ├── glc.jpg
│ ├── hbb.jpg
│ ├── jt.jpg
│ ├── kl.jpg
│ ├── mt.jpg
│ ├── st.jpg
│ ├── xb.jpg
│ └── ysr.jpg
├── manifest.json
└── index.html
├── src
├── font
│ ├── iconfont.eot
│ ├── iconfont.ttf
│ ├── iconfont.woff
│ └── iconfont.css
├── view
│ ├── mine.js
│ ├── order.js
│ ├── default
│ │ ├── detail.js
│ │ ├── content.js
│ │ └── outside.js
│ ├── home.js
│ └── find.js
├── store
│ ├── store.js
│ ├── reducers
│ │ └── list.reducer.js
│ └── action
│ │ └── list.action.js
├── index.js
├── router
│ ├── routerConfig.js
│ ├── routerView.js
│ └── routes.js
├── mock
│ └── mock.js
└── index.scss
├── .gitignore
├── README.md
└── package.json
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/img/glc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/glc.jpg
--------------------------------------------------------------------------------
/public/img/hbb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/hbb.jpg
--------------------------------------------------------------------------------
/public/img/jt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/jt.jpg
--------------------------------------------------------------------------------
/public/img/kl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/kl.jpg
--------------------------------------------------------------------------------
/public/img/mt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/mt.jpg
--------------------------------------------------------------------------------
/public/img/st.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/st.jpg
--------------------------------------------------------------------------------
/public/img/xb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/xb.jpg
--------------------------------------------------------------------------------
/public/img/ysr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/public/img/ysr.jpg
--------------------------------------------------------------------------------
/src/font/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/src/font/iconfont.eot
--------------------------------------------------------------------------------
/src/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/src/font/iconfont.ttf
--------------------------------------------------------------------------------
/src/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waitingmh/hungry/HEAD/src/font/iconfont.woff
--------------------------------------------------------------------------------
/src/view/mine.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class Mine extends Component {
4 | render() {
5 | return (
6 |
7 | Mine
8 |
9 | )
10 | }
11 | }
12 | export default Mine;
--------------------------------------------------------------------------------
/src/view/order.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class Order extends Component {
4 | render() {
5 | return (
6 |
7 | Order
8 |
9 | )
10 | }
11 | }
12 | export default Order;
--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
1 | import {createStore,applyMiddleware} from 'redux'
2 |
3 | import thunk from 'redux-thunk'
4 |
5 | import ListReducer from '../store/reducers/list.reducer'
6 |
7 | const Store = createStore(ListReducer,applyMiddleware(thunk))
8 |
9 | export default Store;
--------------------------------------------------------------------------------
/src/store/reducers/list.reducer.js:
--------------------------------------------------------------------------------
1 |
2 | const initState = {
3 | list:[]
4 | }
5 |
6 | const ListReducer = (state = initState, action) => {
7 | switch (action.type) {
8 | case 'ALLDATA':
9 | return {...state,list:[...action.data]}
10 | default:
11 | return state;
12 | }
13 | };
14 | export default ListReducer;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.scss';
4 | import './font/iconfont.css'
5 | import RouterConfig from './router/routerConfig'
6 | import {Provider} from 'react-redux'
7 | import Store from './store/store'
8 | ReactDOM.render(, document.getElementById('root'));
9 |
10 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/src/router/routerConfig.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import {BrowserRouter} from 'react-router-dom'
3 | import RouterView from './routerView'
4 | import Routes from './routes'
5 |
6 | class RouterConfig extends Component {
7 | render() {
8 | return (
9 |
10 |
11 |
12 | )
13 | }
14 | }
15 | export default RouterConfig;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### DEMO
2 | 展示数据通过mock.js,基于react框架(create-react-app+项目名)
3 |
4 | ### `npm install` (下依赖)
5 |
6 | ### serve with hot reload at localhost:8080
7 | ### `npm start` (起服务)
8 |
9 | ### `npm run build` （构建生成环境）
10 |
11 | ### 目录结构
12 |
13 |
14 | ├── pulic // 静态资源相关
15 | ├── src // 源代码
16 | │ ├── font // 引入icon
17 | │ ├── mock // mock数据
18 | │ ├── router // 路由
19 | │ ├── store // 全局store管理
20 | │ ├── view // 视图
21 | │ ├── index.js // 入口 初始化
22 | │ └── index.scss // 全局样式
23 | ├── .gitignore // 用于Git配置不需要加入版本管理的文件
24 | └── package.json // 项目依赖管理
25 |
26 |
27 | ### 技术栈
28 |
29 | * axios
30 | * vue-router
31 |
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hungry",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^16.8.4",
7 | "react-dom": "^16.8.4",
8 | "react-scripts": "2.1.8"
9 | },
10 | "scripts": {
11 | "start": "react-scripts start",
12 | "build": "react-scripts build",
13 | "test": "react-scripts test",
14 | "eject": "react-scripts eject"
15 | },
16 | "eslintConfig": {
17 | "extends": "react-app"
18 | },
19 | "browserslist": [
20 | ">0.2%",
21 | "not dead",
22 | "not ie <= 11",
23 | "not op_mini all"
24 | ],
25 | "devDependencies": {
26 | "axios": "^0.18.0",
27 | "better-scroll": "^1.14.1",
28 | "mockjs": "^1.0.1-beta3",
29 | "react-redux": "^6.0.1",
30 | "react-router-dom": "^4.3.1",
31 | "redux": "^4.0.1",
32 | "redux-thunk": "^2.3.0"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/view/default/detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import axios from 'axios'
3 | class Detail extends Component {
4 | constructor(props){
5 | super(props)
6 | this.state = {
7 | data:[]
8 | }
9 | }
10 | componentDidMount(){
11 | const {
12 | match:{
13 | params:{
14 | id
15 | }
16 | }
17 | } = this.props;
18 | axios.get(`/list`,{
19 | data:{
20 | id:id
21 | }
22 | }).then(res=>{
23 | this.setState({
24 | data:res.data.newlist
25 | })
26 | })
27 | }
28 | render() {
29 | const {data} = this.state;
30 |
31 | return (
32 |
33 | {
34 | data && data.map((v,i)=>{
35 | return
36 |
{v.title}
37 |
月售{v.num}
38 |
39 | })
40 | }
41 |
11 |
12 | {
13 | list && list.map((v,i)=>{
14 | return
this.getDetail(v.id)}>
15 |
16 |
17 |
{v.title}
18 |
月销 {v.num}
19 |
{v.km}m
20 |
21 |
22 | })
23 | }
24 |
25 |
9 |
10 |
36 |
26 |
27 |
28 | this.getData('all')} className={type==='all'?'blakC':''}>综合排序
29 | this.getData('high')} className={type==='high'?'blakC':''}>销量最高
30 | this.getData('slow')} className={type==='slow'?'blakC':''}>距离最近
31 |
32 |
33 |
36 |
42 |
43 |
44 | {
45 | list && list.map((v,i)=>{
46 | return
this.getDetail(v.id)}>
47 |
48 |
49 |
{v.title}
50 |
月销 {v.num}
51 |
{v.km}m
52 |
53 |
54 | })
55 | }
56 |
57 |
58 |