珠峰培训，专注前端

一、项目结构

  1. |- index.html
  2. |- package.json
  3. |- webpack.config.js
  4. src
  5. │  index.js
  6. │  utils.js
  7. │  原型图.png
  8. │
  9. ├─api
  10. │  │  home.js
  11. │  │  session.js
  12. │  │
  13. │  └─config
  14. │          index.js
  15. │
  16. ├─common
  17. │      index.less
  18. │
  19. ├─component
  20. │  ├─Aleart
  21. │  │      Alert.js
  22. │  │      index.less
  23. │  │
  24. │  ├─Header
  25. │  │      Header.js
  26. │  │      index.less
  27. │  │
  28. │  ├─Loading
  29. │  │      index.less
  30. │  │      Loading.js
  31. │  │
  32. │  └─TabBar
  33. │          index.less
  34. │          TabBar.js
  35. │
  36. ├─container
  37. │  ├─Home
  38. │  │      Home.js
  39. │  │      HomeHeader.js
  40. │  │      HomeList.js
  41. │  │      HomeSlider.js
  42. │  │      index.less
  43. │  │
  44. │  ├─Lesson
  45. │  │      Lesson.js
  46. │  │
  47. │  ├─Login
  48. │  │      index.less
  49. │  │      Login.js
  50. │  │
  51. │  ├─Profile
  52. │  │      index.less
  53. │  │      Profile.js
  54. │  │
  55. │  └─Reg
  56. │          index.less
  57. │          Reg.js
  58. │
  59. ├─images
  60. │      default.png
  61. │      login_bg.png
  62. │      logo.png
  63. │      profile.png
  64. │
  65. └─store
  66.     │  action-types.js
  67.     │  index.js
  68.     │
  69.     ├─actions
  70.     │      home.js
  71.     │      session.js
  72.     │
  73.     └─reducers
  74.             home.js
  75.             index.js
  76.             session.js

二、项目代码

  • package.json
  1. {
  2.   "name": "day4",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "dev": "webpack-dev-server",
  9.     "build": "webpack"
  10.   },
  11.   "keywords": [],
  12.   "author": "",
  13.   "license": "ISC",
  14.   "devDependencies": {
  15.     "babel-core": "^6.26.3",
  16.     "babel-loader": "7.1.5",
  17.     "babel-preset-env": "^1.7.0",
  18.     "babel-preset-react": "^6.24.1",
  19.     "babel-preset-stage-0": "^6.24.1",
  20.     "css-loader": "^3.2.0",
  21.     "file-loader": "^4.2.0",
  22.     "html-webpack-plugin": "^3.2.0",
  23.     "less": "^3.10.2",
  24.     "less-loader": "^5.0.0",
  25.     "style-loader": "^1.0.0",
  26.     "url-loader": "^2.1.0",
  27.     "webpack": "^4.39.2",
  28.     "webpack-cli": "^3.3.7",
  29.     "webpack-dev-server": "^3.8.0"
  30.   },
  31.   "dependencies": {
  32.     "axios": "^0.19.0",
  33.     "babel-preset-es2015": "^6.24.1",
  34.     "react": "^16.9.0",
  35.     "react-dom": "^16.9.0",
  36.     "react-redux": "^7.1.0",
  37.     "react-router-dom": "^5.0.1",
  38.     "react-swipe": "^6.0.4",
  39.     "react-transition-group": "^4.2.2",
  40.     "redux": "^4.0.4",
  41.     "redux-logger": "^3.0.6",
  42.     "redux-promise": "^0.6.0",
  43.     "redux-thunk": "^2.3.0",
  44.     "swipe-js-iso": "^2.1.5"
  45.   }
  46. }
  • webpack.config.js
  1. let path = require('path')
  2. let HtmlWebpackPlugin = require('html-webpack-plugin')
  3. module.exports = {
  4.     entry: './src/index',
  5.     output: {
  6.         filename: 'bundle.js',
  7.         path: path.resolve('./dist')
  8.     },
  9.     devServer: {
  10.         open: true
  11.     },
  12.     module: {
  13.         rules: [
  14.             {
  15.                 test: /\.(js|jsx)$/,
  16.                 use: {
  17.                     loader: 'babel-loader',
  18.                     options: {
  19.                         presets: ['react', 'env', 'stage-0'] // react env state-0 没有stage-0 class 中不能用箭头函数
  20.                     }
  21.                 },
  22.                 exclude: /node_modules/
  23.             },
  24.             {
  25.                 test: /\.css$/,
  26.                 use: ['style-loader', 'css-loader']
  27.             },
  28.             {
  29.                 test: /\.less/,
  30.                 use: ['style-loader', 'css-loader', 'less-loader']
  31.             },
  32.             {
  33.                 test: /\.(jpg|png|gif)$/,
  34.                 use: 'file-loader'
  35.             }
  36.         ]
  37.     },
  38.     plugins: [
  39.         new HtmlWebpackPlugin({
  40.             template: './index.html'
  41.         })
  42.     ]
  43. }
  • index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <link rel="stylesheet" href="//at.alicdn.com/t/font_528226_1jsbl7286t7qfr.css">
  8. </head>
  9. <body>
  11. <div id="root"></div>
  13. </body>
  14. </html>
  • src/index.js
  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. import Home from './container/Home/Home'
  5. import Lesson from './container/Lesson/Lesson'
  6. import Profile from './container/Profile/Profile'
  7. import Login from './container/Login/Login'
  8. import TabBar from './component/TabBar/TabBar'
  10. import Reg from './container/Reg/Reg'
  12. import './common/index.less'
  13. import { HashRouter, Route, Switch } from 'react-router-dom'
  15. import store from './store'
  17. import { Provider } from 'react-redux'
  19. ReactDOM.render(<Provider store={store}>
  20.     <HashRouter>
  21.         <div>
  22.             <Switch>
  23.                 <Route path='/home' component={Home} />
  24.                 <Route path='/lesson' component={Lesson} />
  25.                 <Route path='/profile' component={Profile} />
  26.                 <Route path='/login' component={Login} />
  27.                 <Route path='/reg' component={Reg} />
  28.             </Switch>
  29.             <TabBar />
  30.         </div>
  31.     </HashRouter>
  32. </Provider>, document.getElementById('root'))
  • utils.js
  1. export const loadMore = (ele, cb) => {
  2.     ele.addEventListener('scroll', (e) => {
  3.         let  { offsetHeight, scrollTop, scrollHeight } = ele
  4.         clearTimeout(ele.timer)
  5.         ele.timer = setTimeout(() => {
  6.             // ?? 盒子模型关系
  7.             if (scrollTop + offsetHeight + 20 > scrollHeight) {
  8.                 cb()
  9.             }
  10.         }, 30)
  11.     }, false)
  12. }
  14. export const pullRefresh = (ele, cb) => {
  15.     // 当前元素的 offsetTop 偏移量，如果正在下拉，触发无效
  16.     let offsetTop = ele.offsetTop
  17.     let distance = 0
  18.     ele.addEventListener('touchstart', (e) => {
  19.         let startY = e.touches[0].pageY
  20.         console.log(startY)
  21.         let touchmove = function (e) {
  22.             // 计算手指移动的距离
  23.             let moveY = e.touches[0].pageY
  25.             // console.log(moveY - startY)
  26.             if (moveY - startY > 0) { // 正在下来刷新
  27.                 // 确保向下拉
  28.                 distance = moveY - startY
  29.                 if (distance > 50) {
  30.                     distance = 50
  31.                     return ele.style.top = offsetTop + distance + 'px'
  32.                 }
  33.                 if (distance > 10) {
  34.                     ele.style.top = offsetTop + distance + 'px'
  35.                 }
  36.             } else {
  37.                 ele.removeEventListener('touchmove', touchmove)
  38.                 ele.removeEventListener('touchend', touchend)
  39.             }
  40.         }
  41.         let touchend = function (e) {
  42.             let timer = null
  43.             if (distance !== 50) return ele.style.top = offsetTop + 'px'
  44.             timer = setInterval(() => {
  45.                 distance--
  46.                 if (distance <= 0) {
  47.                     clearInterval(timer)
  48.                     cb()
  49.                 }
  50.                 ele.style.top = offsetTop + distance + 'px'
  51.             }, 6)
  52.             ele.removeEventListener('touchmove', touchmove)
  53.             ele.removeEventListener('touchend', touchend)
  54.         }
  55.         console.log(ele.offsetTop, offsetTop)
  56.         console.log(ele.scrollTop === 0)
  57.         if (ele.offsetTop === offsetTop && ele.scrollTop === 0) {
  58.             ele.addEventListener('touchmove', touchmove)
  59.             ele.addEventListener('touchend', touchend)
  60.         } else {
  61.             ele.removeEventListener('touchmove', touchmove)
  62.             ele.removeEventListener('touchend', touchend)
  63.         }
  64.     })
  65. }
  • /store/index.js
  1. import { createStore, applyMiddleware } from 'redux'
  3. import reducer from './reducers'
  5. import reduxLogger from 'redux-logger'
  6. import reduxThunk from 'redux-thunk'
  7. import reduxPromise from 'redux-promise'
  9. let store = createStore(reducer, applyMiddleware(reduxLogger, reduxThunk, reduxPromise))
  11. window.__store = store
  13. export default store
  • /store/actions-types.js
  1. export const SET_CURRENT_LESSON = 'SET_CURRENT_LESSON'
  3. // 获取轮播图 获取轮播图之前 获取成功
  5. export const GET_SLIDERS = 'GET_SLIDERS'
  6. export const GET_SLIDERS_SUCCESS = 'GET_SLIDERS_SUCCESS'
  8. // 获取课程列表
  9. export const GET_LESSONS = 'GET_LESSONS'
  10. export const GET_LESSONS_SUCCESS = 'GET_LESSONS_SUCCESS'
  12. // 清除课程
  14. export const CLEAR_LESSON = 'CLEAR_LESSON'
  16. // 设置用户信息：
  18. export const SET_USER_INFO = 'SET_USER_INFO'
  • store/reducer/home.js
  1. import * as Types from '../action-types'
  3. let initState = {
  4.     currentLesson: '1',
  5.     slider: {
  6.         loading: false,
  7.         list: []
  8.     },
  9.     lesson: {
  10.         loading: false,
  11.         hasMore: true,
  12.         offset: 0,
  13.         limit: 5,
  14.         list: []
  15.     }
  16. }
  18. function home(state = initState, action) {
  19.     switch (action.type) {
  20.         case Types.SET_CURRENT_LESSON:
  21.             return {
  22.                 ...state,
  23.                 currentLesson: action.currentLesson
  24.             }
  25.         case Types.GET_SLIDERS:
  26.             return {
  27.                 ...state,
  28.                 slider: {
  29.                     ...state.slider,
  30.                     loading: true
  31.                 }
  32.             }
  33.         case Types.GET_SLIDERS_SUCCESS:
  34.             return {
  35.                 ...state,
  36.                 slider: {
  37.                     list: action.payload,
  38.                     loading: false
  39.                 }
  40.             }
  41.         case Types.GET_LESSONS:
  42.             return {
  43.                 ...state,
  44.                 lesson: {
  45.                     ...state.lesson,
  46.                     loading: true
  47.                 }
  48.             }
  49.         case Types.GET_LESSONS_SUCCESS:
  50.             return {
  51.                 ...state,
  52.                 lesson: {
  53.                     ...state.lesson,
  54.                     loading: false,
  55.                     hasMore: action.payload.hasMore,
  56.                     list: [
  57.                         ...state.lesson.list,
  58.                         ...action.payload.list
  59.                     ],
  60.                     offset: state.lesson.offset + action.payload.list.length
  61.                 }
  62.             }
  63.         case Types.CLEAR_LESSON:
  64.             return {
  65.                 ...state,
  66.                 lesson: {
  67.                     ...state.lesson,
  68.                     offset: 0,
  69.                     list: [],
  70.                     loading: false,
  71.                     hasMore: true
  72.                 }
  73.             }
  74.     }
  75.     return state
  76. }
  79. export default home
  • store/reducers/session.js
  1. import * as Types from '../action-types'
  3. let initState = {
  4.     msg: '',
  5.     err: 0,
  6.     user: null
  7. }
  10. function reducer(state = initState, action) {
  11.     switch (action.type) {
  12.         case Types.SET_USER_INFO:
  13.             return {...action.payload}
  15.     }
  16.     return state
  17. }
  20. export default reducer
  • store/reducer/index.js
  1. import { combineReducers } from 'redux'
  3. import home from './home'
  5. import session from './session'
  7. export default combineReducers({
  8.     home,
  9.     session
  10. })
  • store/actions/home.js
  1. import * as Types from '../action-types'
  3. import { getSliders, getLessons } from "../../api/home";
  5. let action = {
  6.     setCurrentLess (currentLesson) {
  7.         return (dispatch, getState) => {
  8.             dispatch({
  9.                 type: Types.SET_CURRENT_LESSON,
  10.                 currentLesson
  11.             })
  12.             dispatch({
  13.                 type: Types.CLEAR_LESSON
  14.             }) // 清除原有课程信息
  16.             // 按照最新信息去筛选
  17.             action.setLessons()(dispatch, getState)
  18.         }
  19.     },
  20.     refresh () {
  21.         return (dispatch, getState) => {
  22.             dispatch({
  23.                 type: Types.CLEAR_LESSON
  24.             })
  25.             action.setLessons()(dispatch, getState)
  26.         }
  27.     },
  28.     setSliders () {
  29.         return (dispatch) => {
  30.             dispatch({type: Types.GET_SLIDERS}) // 将 redux 中的数据改变成正在加载
  31.             dispatch({
  32.                 type: Types.GET_SLIDERS_SUCCESS,
  33.                 payload: getSliders()
  34.             }) // 将 redux 中的数据改变成正在加载
  35.         }
  36.     },
  37.     setLessons () {
  38.         return (dispatch, getState) => {
  39.             let {currentLesson, lesson: {limit, offset, hasMore, loading}} = getState().home
  40.             if (hasMore && !loading) {
  42.                 dispatch({type: Types.GET_LESSONS})
  43.                 dispatch({
  44.                     type:  Types.GET_LESSONS_SUCCESS,
  45.                     payload: getLessons(limit, offset, currentLesson)
  46.                 })
  47.             }
  48.         }
  49.     }
  50. }
  52. export default action
  • store/actions/session.js
  1. import * as Types from '../action-types'
  3. import { reg, login, validate } from "../../api/session";
  5. let actions = {
  6.     toReg (userInfo, push) {
  7.         return (dispatch) => {
  8.             reg(userInfo).then((res) => {
  9.                 dispatch({
  10.                     type: Types.SET_USER_INFO,
  11.                     payload: res
  12.                 })
  13.                 if (res.code === 0) {
  14.                     push('/login')
  15.                 }
  16.             })
  18.         }
  19.     },
  20.     toLogin (userInfo, push) {
  21.         return (dispatch) => {
  22.             login(userInfo).then((res) => {
  23.                 dispatch({
  24.                     type: Types.SET_USER_INFO,
  25.                     payload: res
  26.                 })
  27.                 if (res.code === 0) {
  28.                     push('/profile')
  29.                 }
  30.             })
  32.         }
  33.     },
  34.     toValidate () {
  35.         return (dispatch) => {
  36.             dispatch({
  37.                 type: Types.SET_USER_INFO,
  38.                 payload: validate()
  39.             })
  40.         }
  41.     }
  42. }
  44. export default actions
  • container/Home/Home.js
  1. import React, { Component } from 'react'
  2. import { connect } from 'react-redux'
  3. import actions from '../../store/actions/home'
  5. import './index.less'
  7. import HomeHeader from "./HomeHeader";
  9. import HomeSlider from "./HomeSlider";
  10. import HomeList from "./HomeList";
  11. import { loadMore, pullRefresh } from "../../utils";
  12. import Loading from "../../component/Loading/Loading";
  14. class Home extends Component {
  15.     changeType = (value) => {
  16.         // console.log(value)
  17.         this.props.setCurrentLess(value)
  18.     }
  19.     componentDidMount () {
  20.         // 页面一加载就去请求轮播图
  21.         this.props.setSliders()
  22.         this.props.setLessons() // 获取课程列表
  23.         loadMore(this.el, this.props.setLessons)
  24.         pullRefresh(this.el, this.props.refresh)
  25.     }
  26.   render () {
  27.     return (<div>
  28.         <HomeHeader changeType={this.changeType} />
  29.         <div className="content" ref={(el) => this.el = el}>
  30.             {
  31.                 this.props.slider.loading ? <Loading /> :  <HomeSlider list={this.props.slider.list}/>
  32.             }
  33.             <div className="container">
  34.                 <h3>
  35.                     <i className='iconfont icon-wode_kecheng'></i>
  36.                     我的课程
  37.                 </h3>
  38.                 <HomeList list={this.props.lesson.list} />
  39.                 {
  40.                     this.props.lesson.loading ? <Loading /> : null
  41.                 }
  42.                 <button onClick={() => {
  43.                     this.props.setLessons()
  44.                 }}>加载更多</button>
  45.             </div>
  46.         </div>
  47.     </div>)
  48.   }
  49. }
  51. export default connect(state => ({...state.home}), actions)(Home)
  • container/HomeHeader.js
  1. import React, {Component} from 'react'
  2. import logo from '../../images/logo.png'
  4. import {Transition} from 'react-transition-group'
  6. const duration = 150
  8. const defaultStyle = {
  9.     transition: `opacity ${duration}ms ease-in-out`,
  10.     opacity: 0,
  11.     display: 'none'
  12. }
  14. const transitionStyles = {
  15.     entering: {opacity: 0},
  16.     entered: {opacity: 1}
  17.     // entering: {opacity: 0, display: 'block'},
  18.     // entered: {opacity: 1, display: 'block'}
  19. }
  21. export default class HomeHeader extends Component {
  22.     constructor (props, context) {
  23.         super ()
  24.         this.state = {
  25.             isShow: false
  26.         }
  27.     }
  29.     changeShow = () => {
  30.         this.setState({
  31.             isShow: !this.state.isShow
  32.         })
  33.     }
  35.     changeType = (e) => {
  36.         // console.log(e.target.dataset.type)
  37.         this.props.changeType(e.target.dataset.type)
  38.         this.changeShow()
  39.     }
  41.     render () {
  42.         return (<div className='home-header'>
  43.             <div className="home-header-logo">
  44.                 <img src={logo} alt=""/>
  45.                 <div className="home-header-btn" onClick={this.changeShow}>
  46.                     {
  47.                         this.state.isShow
  48.                             ? <i className="iconfont icon-guanbi"></i>
  49.                             : <i className="iconfont icon-liebiao"></i>
  50.                     }
  51.                 </div>
  52.             </div>
  54.             <Transition in={this.state.isShow}
  55.                         onEnter={(node) => (node.style.display = 'block')}
  56.                         onExit={(node) => (node.style.display = 'none')}
  57.                         timeout={duration}>
  58.                 {
  59.                     state => (<ul className="home-header-list" style={{
  60.                         ...defaultStyle,
  61.                         ...transitionStyles[state]
  62.                     }} onClick={this.changeType}>
  63.                         <li data-type="0">全部课程</li>
  64.                         <li data-type="1">React 课程</li>
  65.                         <li data-type="2">Vue 课程</li>
  66.                     </ul>)
  67.                 }
  68.             </Transition>
  69.         </div>)
  70.     }
  71. }
  • container/Home/HomeList.js
  1. import React, { Component } from 'react'
  3. export default class HomeList extends Component {
  4.   render () {
  5.     return (<div className='home-list'>
  6.         <ul>
  7.             {
  8.                 this.props.list.map((item, index) => {
  9.                     return <li key={index}>
  10.                         <img src={item.url} alt=""/>
  11.                         <p>{item.title}</p>
  12.                         <span>{item.price}</span>
  13.                     </li>
  14.                 })
  15.             }
  16.         </ul>
  17.     </div>)
  18.   }
  19. }
  • container/Home/HomeSlider.js
  1. import React, { Component } from 'react'
  3. import ReactSwipe from 'react-swipe'
  5. export default class HomeSlider extends Component {
  6.     constructor () {
  7.         super()
  8.         this.state = {
  9.             index: 0
  10.         }
  11.     }
  12.   render () {
  13.       let reactSwipeEl
  15.       let that = this
  16.       let opts = {
  17.           continuous: true,
  18.           auto: 1000,
  19.           callback: (index) => {
  20.               // console.log(index)
  21.               // this.setState({index})
  22.           }
  23.       }
  25.       return (<div className="home-slider">
  26.           <ReactSwipe
  27.               className="carousel"
  28.               swipeOptions={opts}
  29.               ref={el => (reactSwipeEl = el)}
  30.           >
  31.               {
  32.                   this.props.list.map((item, index) => {
  33.                       return <div key={index}>
  34.                           <img src={item} alt=""/>
  35.                       </div>
  36.                   })
  37.               }
  38.           </ReactSwipe>
  39.           <ul className='home-slider-dots'>
  40.               {
  41.                   this.props.list.map((img, i) => {
  42.                       return <li key={i} className={this.state.index === i ? 'active' : '' }></li>
  43.                   })
  44.               }
  45.           </ul>
  46.       </div>)
  47.   }
  48. }
  • container/Home/index.less
  1. .home-header {
  2.     background: #2a2a2a;
  3.     color: #fff;
  4.     height: 56px;
  5.     line-height: 56px;
  6.     position: fixed;
  7.     top: 0;
  8.     left: 0;
  9.     width: 100%;
  10.     z-index: 9999;
  12.     .home-header-logo {
  13.         img {
  14.             width: 105px;
  15.             height: 30px;
  16.             margin-top: 13px;
  17.             margin-left: 7px;
  18.         }
  20.         .home-header-btn {
  21.             float: right;
  22.             margin-right: 11px;
  23.         }
  24.     }
  26.     .home-header-list {
  27.         position: absolute;
  28.         top: 50px;
  29.         left: 0;
  30.         width: 100%;
  32.         li {
  33.             width: 100%;
  34.             line-height: 46px;
  35.             background: #2a2a2a;
  36.             border-top: 1px solid #464646;
  37.             text-align: center;
  38.         }
  39.     }
  40. }
  41. .home-slider {
  42.     height: 170px;
  43.     position: relative;
  44.     text-align: center;
  45.     div {
  46.         height: 100%;
  47.         img {
  48.             width: 100%;
  49.             height: 100%;
  50.         }
  51.     }
  53.     .home-slider-dots {
  54.         position: absolute;
  55.         bottom: 10px;
  56.         width: 100%;
  57.         text-align: center;
  60.         li {
  61.             display: inline-block;
  62.             margin-right: 5px;
  63.             width: 10px;
  64.             height: 10px;
  65.             border-radius: 50%;
  66.             background: #fff;
  68.             &.active {
  69.                 background: red;
  70.             }
  71.         }
  72.     }
  73. }
  75. h3 {
  76.     line-height: 53px;
  77.     color: #3b3b3b;
  78. }
  80. .home-list {
  81.     text-align: center;
  82.     li {
  83.         box-shadow: 1px 1px 3px #c1c1c1, 1px 1px 3px 2px #c1c1c1;
  84.         margin-bottom: 17px;
  85.         img {
  86.             width: 100%;
  87.             height: 170px;
  88.         }
  90.         p {
  91.             color: #777;
  92.             line-height: 40px;
  93.         }
  94.         span {
  95.             color: red;
  96.             line-height: 30px;
  97.         }
  98.     }
  99. }

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】