0.1.0

可测试版本

Author: baka397

README.md

@@ -3,27 +3,28 @@ React-test
 
 ## 介绍
 
-这是一个react测试项目,旨在通过webpack打包生成用于restful API的one page react项目
+这是一个react测试项目,旨在通过webpack打包生成用于restful API的one page react项目.  
+该demo展示了异步登录,页面检测登录自动跳转,不同页面渲染等相关操作.  
+须安装[webpack](https://github.com/webpack/webpack),[redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)
 
-## 技术栈
+## 目录结构
 ```
-*babel
-*webpack
-*react
-*redux
-*react-redux
-*react-router
-*react-router-redux
+webpack.config.js //webpack配置文件
+app.js                   //express应用程序
+-views                  //express模板
+-public                 //静态文件夹
+-client                  //客户端项目文件夹
+--app.js                //入口文件
+--config.js            //配置文件
+---actions            //redux action列表
+---reducers          //redux reducer列表
+---components    //react组件
+---pages              //页面组件
 ```
 
-## 目录结构
+##如何运行
 ```
--client       //客户端项目库
---app.js      //入口文件
---router.js   //路由
----actions    //redux action列表
----reducers   //redux reducer列表
----components //react组件
----pages      //页面组件
--public       //发布目录
+npm install
+webpack
+npm start
 ```

app.js

@@ -0,0 +1,53 @@
+//加载依赖
+var express = require('express');
+var path = require('path');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'html');
+app.engine('html', require('ejs-mate'));
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+//路由设置
+app.get('*',function(req,res){
+    res.render('index',{});
+});
+
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+    var err = {status:404};
+    next(err);
+});
+
+// error handlers
+
+// production error handler
+// no stacktraces leaked to user
+app.use(function(err, req, res, next) {
+    console.log(err);
+    if(!err.status){
+        err.status=500;
+    }
+    switch(err.status){
+        case 403:
+        err.message = '没有权限访问';
+        break;
+        case 404:
+        err.message = '找不到这个页面';
+        break;
+        case 500:
+        err.message='系统出错了';
+        break;
+    }
+    res.status(err.status);
+    res.render('error', {
+        title: '出错拉',
+        error:err
+    });
+});
+
+module.exports = app;

bin/www

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || 8080);
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  console.log('Listening on ' + bind);
+}

client/actions/auth.js

@@ -0,0 +1,32 @@
+/**
+ * Action - auth
+ * 验证方法
+ */
+//加载依赖
+import { push } from 'react-router-redux'; //router跳转方法
+
+//导入常量
+import { LOGIN_STATUS_IN } from '../actions/login';
+
+/*
+ * action 创建函数
+ */
+
+/**
+ * [authLoginStatus description]
+ * @param  {string}   login_status  登录状态
+ * @param  {boolen} check_status 须检测的状态,true为检测是否登录(当未登录时,跳转到登录页),false为检测是否未登录(当登录时,跳转到dashboard页)
+ * @return  {function}                  [description]
+ */
+export function authLoginStatus(login_status,check_status){
+	return function(dispatch) {
+		//检测登录,当未登录时,跳转到登录页
+		if(check_status&&login_status!==LOGIN_STATUS_IN){
+			dispatch(push('/'));
+		}
+		//检测未登录,当登录时,跳转到dashboard页
+		if(!check_status&&login_status===LOGIN_STATUS_IN){
+			dispatch(push('/dashboard/'));
+		}
+	}
+}

client/actions/login.js

@@ -0,0 +1,124 @@
+/**
+ * Action - login
+ * 登录,控制登录操作
+ */
+//加载依赖
+import fetch from 'isomorphic-fetch';
+import {
+	API_LOGIN, API_LOGOUT
+}
+from '../config';
+import {
+	push
+}
+from 'react-router-redux'; //router跳转方法
+
+/*
+ * action 类型
+ */
+//登入请求
+export const LOGIN_REQUEST = 'LOGIN_REQUEST';
+export const LOGIN_RECEIVE = 'LOGIN_RECEIVE';
+export const LOGIN_ERROR = 'LOGIN_ERROR';
+//登出请求
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
+export const LOGOUT_RECEIVE = 'LOGOUT_RECEIVE';
+export const LOGOUT_ERROR = 'LOGOUT_ERROR';
+//状态
+export const LOGIN_STATUS_OUT = 'out'; //登出
+export const LOGIN_STATUS_IN = 'in'; //登入
+export const LOGIN_STATUS_LOAD = 'load'; //加载
+export const LOGIN_STATUS_ERROR = 'error'; //出错
+/*
+ * action 创建函数
+ */
+//登录
+export function loginRequest() {
+	return {
+		type: LOGIN_REQUEST
+	}
+}
+
+export function loginReceive(data) {
+	return {
+		type: LOGIN_RECEIVE,
+		info: data
+	}
+}
+
+export function loginError(data) {
+	return {
+		type: LOGIN_ERROR,
+		msg: data
+	}
+}
+
+export function loginPost(data) {
+	return function(dispatch) {
+		if (!data.name || !data.password) {
+			dispatch(loginError('没有输入用户名或密码'));
+			return false;
+		}
+		dispatch(loginRequest());
+		let headers = new Headers(data);
+		let request = new Request(API_LOGIN, {
+			method: 'GET',
+			headers: headers
+		})
+		fetch(request).then(response => response.json())
+			.then(json => {
+				if (json.head.status === 200) {
+					dispatch(loginReceive(json.body));
+					//跳转到登录后首页
+					dispatch(push('/dashboard/'));
+				} else {
+					dispatch(loginError(json.head.msg));
+				}
+			}).catch(error => {
+				console.log(error);
+				dispatch(loginError('网络错误,请重试'));
+			})
+	}
+}
+
+//登出
+export function logoutRequest() {
+	return {
+		type: LOGOUT_REQUEST
+	}
+}
+
+export function logoutReceive(data) {
+	return {
+		type: LOGOUT_RECEIVE,
+		info: data
+	}
+}
+
+export function logoutError(data) {
+	return {
+		type: LOGOUT_ERROR,
+		msg: data
+	}
+}
+
+export function logoutPost() {
+	return function(dispatch) {
+		dispatch(logoutRequest());
+		let request = new Request(API_LOGOUT, {
+			method: 'GET'
+		});
+		fetch(request).then(response => response.json())
+			.then(json => {
+				if (json.head.status === 200) {
+					dispatch(logoutReceive(json.body));
+					//跳转到登录后首页
+					dispatch(push('/'));
+				} else {
+					dispatch(logoutError(json.head.msg));
+				}
+			}).catch(error =>
+				dispatch(loginError('网络错误,请重试'))
+			)
+	}
+}