'react-app'

.babelrc

@@ -0,0 +1,6 @@
+{
+ "presets": ["stage-0","es2015","react"],
+ "plugins": [
+ "babel-plugin-transform-decorators-legacy"
+ ]
+}

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

README.md

@@ -0,0 +1,44 @@
+## react技术栈
+```
+yarn add react react-dom redux react-redux react-router-dom react-router-redux@next history redux-thunk 
+``` 
+## webpack
+```
+yarn add webpack webpack-dev-server html-webpack-plugin --dev
+```
+## babel
+```
+yarn add babel-core babel-preset-es2015 babel-loader babel-preset-stage-0 babel-preset-react babel-plugin-transform-decorators-legacy --dev
+```
+## 图片和less
+```
+yarn add css-loader style-loader less-loader less file-loader url-loader --dev
+```
+
+## 轮播图插件
+```
+yarn add react-swipe swipe-js-iso --dev
+```
+## react动画
+```
+yarn add react-addons-css-transition-group
+```
+## fetch 
+```
+yarn add whatwg-fetch es6-promise
+```
+## koa
+```
+yarn add koa koa-router koa-cors koa-bodyparser nodemon
+```
+
+
+
+## 服务端接口
+| 方法 | 路径 | 作用 | 返回值| 
+| ------------- |:-------------------------- |: -----| ------|
+| post | /api/login | 登录 | {nickName:''} |
+| get | /api/getLessonByUser/:user | 获取当前用户课程列表 | [{lessonName,url,timer,location,long,lessonId}] |
+| get | /api/getLessons/:type/:limit/:offset | 获取对应类型的课程 |{hasMore,lessons:[{url,lesson,lessonId,price}]}|
+| get | /api/getSliders | 获取轮播图数据 |[]|
+

mock/detail.js

@@ -0,0 +1,10 @@
+module.exports = {
+ url:'http:https://www.fullstackjavascript.cn/images/vue.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:111,
+ local:'珠峰',
+ price:'￥5000.00元',
+ timer:'2017-10-3',
+ introduce:'国内顶尖大神张仁阳教你如何写node.js。 从零开始，逐步推进。在20个校内成为全栈工程师。',
+ teacher:'张仁阳老师来自于爱奇艺。 2012年从离开去了百度。 从事开发12年，国内最早一批node.js使用者，MVVM框架的贡献。'
+};

mock/lessionList.js

@@ -0,0 +1,35 @@
+module.exports = {
+ hasMore:true,
+ lessons:[
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/vue.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:111,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/xiaochengxu.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:222,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/javascript.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:333,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/angular.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:444,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/reactnative.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:555,
+ price:'￥5000.00元'
+ }
+ ]
+}

mock/mock/lessonList.js

@@ -0,0 +1,35 @@
+module.exports = {
+ hasMore:true,
+ lessons:[
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/vue.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:111,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/xiaochengxu.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:222,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/javascript.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:333,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/angular.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:444,
+ price:'￥5000.00元'
+ },
+ {
+ url:'http:https://www.fullstackjavascript.cn/images/reactnative.png',
+ lesson:'Vue.js从理论精讲到项目实战课程',
+ lessonId:555,
+ price:'￥5000.00元'
+ }
+ ]
+}

mock/mock/slider.js

@@ -0,0 +1,5 @@
+module.exports = [
+ 'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/wechat.png',
+ 'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/sjz.png',
+ 'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/react.png'
+];

mock/mock/user.js

@@ -0,0 +1,3 @@
+module.exports = {
+ nickName:'我很帅'
+};

mock/mock/userLesson.js

@@ -0,0 +1,18 @@
+module.exports = [
+ {
+ lessonName:'vue从理论到实战',
+ url:'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/wechat.png',
+ timer:'2016-10-30',
+ location:'珠峰',
+ long:'21小时',
+ lessonId:222,
+ },
+ {
+ lessonName:'微信小程序专家级课程',
+ url:'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/sjz.png',
+ timer:'2016-10-30',
+ location:'珠峰',
+ long:'21小时',
+ lessonId:333,
+ }
+];

mock/server.js

@@ -0,0 +1,58 @@
+let express = require('express');
+let app = express();
+let bodyParser = require('body-parser');
+app.listen(3000);
+app.all('*', function(req, res, next) {
+ console.log(req.method);
+ res.header("Access-Control-Allow-Origin", "*");
+ res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
+ res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
+ res.header("X-Powered-By",' 3.2.1')
+ if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
+ else next();
+});
+app.use(bodyParser.json());
+
+//輪播圖
+let sliders = require('./slider')
+app.get('/api/getSliders',function (req,res) {
+ res.send(sliders);
+});
+//課程列表
+let lessonList = require('./lessionList');
+//登录
+let userInfo = require('./userInfo');
+app.post('/api/login',function (req,res) {
+ res.send(userInfo);
+});
+app.get('/api/getLesson/:user',function (req,res) {
+ console.log(req.params.user);
+ res.send(userInfo)
+});
+//获取详情
+let detail = require('./detail');
+app.get('/api/detail/:id',function (req,res) {
+ res.send(detail);
+});
+
+
+
+//获取课程类型
+app.get('/api/getLessons/:type/:limit/:offset',function (req,res) {
+ console.log(req.params.type);
+ console.log(req.params.limit);
+ console.log(req.params.offset);
+ setTimeout(function () {
+ if(req.params.type=='視頻教程'){
+ res.send(lessonList);
+ }else if(req.params.type=='文檔課件'){
+ res.send(lessonList);
+ }else if(req.params.type=='HTML5培訓課程'){
+ res.send(lessonList);
+ }else if(req.params.type == 'Node課程培訓'){
+ res.send(lessonList);
+ }else{
+ res.send(lessonList);
+ }
+ },0)
+});

mock/slider.js

@@ -0,0 +1,5 @@
+module.exports = [
+ 'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/wechat.png',
+ 'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/sjz.png',
+ 'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/react.png'
+];

mock/userInfo.js

@@ -0,0 +1,21 @@
+module.exports = {
+ nickName:'我很帅',
+ lessonList:[
+ {
+ lessonName:'vue从理论到实战',
+ url:'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/wechat.png',
+ timer:'2016-10-30',
+ location:'珠峰',
+ long:'21小时',
+ lessonId:222,
+ },
+ {
+ lessonName:'微信小程序专家级课程',
+ url:'http:https://www.zhufengpeixun.cn/themes/jianmo2/images/sjz.png',
+ timer:'2016-10-30',
+ location:'珠峰',
+ long:'21小时',
+ lessonId:333,
+ }
+ ]
+}

package.json

@@ -0,0 +1,45 @@
+{
+ "name": "zf-react-webapp",
+ "version": "1.0.0",
+ "main": "index.js",
+ "license": "MIT",
+ "scripts": {
+ "start": "webpack-dev-server",
+ "node":"nodemon ./mock/server"
+ },
+ "devDependencies": {
+ "babel-core": "^6.25.0",
+ "babel-loader": "^7.1.0",
+ "babel-plugin-transform-decorators": "^6.24.1",
+ "babel-plugin-transform-decorators-legacy": "^1.3.4",
+ "babel-preset-es2015": "^6.24.1",
+ "babel-preset-react": "^6.24.1",
+ "babel-preset-stage-0": "^6.24.1",
+ "css-loader": "^0.28.4",
+ "express": "^4.15.3",
+ "file-loader": "^0.11.2",
+ "html-webpack-plugin": "^2.29.0",
+ "less": "^2.7.2",
+ "less-loader": "^4.0.4",
+ "style-loader": "^0.18.2",
+ "url-loader": "^0.5.9",
+ "webpack": "^3.0.0",
+ "webpack-dev-server": "^2.5.0"
+ },
+ "dependencies": {
+ "body-parser": "^1.17.2",
+ "es6-promise": "^4.1.0",
+ "history": "^4.6.3",
+ "react": "^15.6.1",
+ "react-addons-css-transition-group": "^15.6.0",
+ "react-dom": "^15.6.1",
+ "react-redux": "^5.0.5",
+ "react-router-dom": "^4.1.1",
+ "react-router-redux": "next",
+ "react-swipe": "^5.0.8",
+ "redux": "^3.7.1",
+ "redux-thunk": "^2.2.0",
+ "swipe-js-iso": "^2.0.3",
+ "whatwg-fetch": "^2.0.3"
+ }
+}

src/Private.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import {
+ Route,
+ Redirect,
+} from 'react-router-dom';
+import {connect} from 'react-redux';
+@connect(state=>({
+ userInfo:state.userInfo
+}))
+export default class Home extends Component{
+ render(){
+ let {component:Component,...rest} = this.props;
+ console.log(this.props.location.state);
+ return (
+ <Route {...rest} render={props => {
+ return (
+ this.props.userInfo.nickName? (
+ <Component {...props}/>
+ ) : (
+ <Redirect to={{
+ pathname: '/login',
+ state:{referrer:this.props.location.state.referrer}
+ }}/>
+ )
+ )
+ }}/>
+ )
+ }
+}

src/api/detail.js

@@ -0,0 +1,8 @@
+import {get} from './index';
+let url = 'http:https://localhost:3000';
+export function getSliders() {
+ return get(url+'/api/getSliders');
+}
+export function getLessonDetails(id) {
+ return get(url+'/api/detail/'+id);
+}

src/api/home.js

@@ -0,0 +1,8 @@
+import {get} from './index';
+let url = 'http:https://localhost:3000';
+export function getSliders() {
+ return get(url+'/api/getSliders');
+}
+export function getLessons(type,limit,offset) {
+ return get(url+'/api/getLessons/'+type+'/'+limit+'/'+offset);
+}

src/api/index.js

@@ -0,0 +1,20 @@
+import 'es6-promise';
+import 'whatwg-fetch';
+
+export function get(url) {
+ return fetch(url,{
+ headers:{
+ accept:'application/json'
+ }
+ }).then(res=>res.json())
+}
+
+export function post(url,data) {
+ return fetch(url,{
+ method:'post',
+ headers:{
+ 'Content-Type':'application/json',
+ },
+ body:JSON.stringify(data)
+ }).then(res=>res.json())
+}

src/api/lesson.js

@@ -0,0 +1,5 @@
+import {get} from './index';
+let url = 'http:https://localhost:3000';
+export function getLessonList(user) {
+ return get(url+'/api/getLesson/'+user);
+}

src/api/login.js

@@ -0,0 +1,5 @@
+import {post} from './index';
+let url = 'http:https://localhost:3000';
+export function login(data) {
+ return post(url+'/api/login',data);
+}