完善Node Server API && 完成List复用

Author: geeknull

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
+npm-debug.log
 dist/
 .DS_Store
 .idea
 .project
+tmp.json

README.md

@@ -23,10 +23,10 @@ npm install
 
 ## 开发环境运行方式
 Node.js端：
-npm run node // 如果报错了 很可能是Node.js版本不够高
+npm run dev-node // 如果报错了 很可能是Node.js版本不够高
 
 Borwser端：
-npm run dev // 会自动打开浏览器
+npm run dev-web // 会自动打开浏览器
 
 ## 部署环境运行方式
 

app.js

@@ -10,28 +10,20 @@ const convert = require('koa-convert');
 const cors = require('koa-cors');
 const serve = require('koa-static-server');
 const bodyParser = require('koa-bodyparser');
-const authMiddleware = require('./middleware/auth.js');
 
 let isDev = process.env.NODE_ENV === 'develop'; // 是否是开发环境
 
-
-// app.use(authMiddleware); // 开启统一鉴权
 app.use(bodyParser()); // 解析HTTP请求体
 app.use(convert(cors())); // 允许跨域
+// app.use(require('./middleware/auth.js')); // 开启统一鉴权
 
-// 开发环境 延迟模拟
-if (isDev) {
-  app.use(require('./middleware/sleep.js'));
-}
+isDev && app.use(require('./middleware/sleep.js')); // 开发环境 延迟模拟
 
 require('./router')(app); // 初始化路由信息
 
-app.use(serve({rootDir: path.join(__dirname, './static'), rootPath: '/static'})); // 本地静态服务器，主要给图片使用
+app.use(serve({rootDir: path.join(__dirname, './static'), rootPath: '/static/'})); // 本地静态服务器，主要给图片使用
 
-// 线上发布的
-if (!isDev) {
-  app.use(serve({rootDir: path.join(__dirname, './dist'), rootPath: '/'})); // 在router之后要注意
-}
+!isDev && app.use(serve({rootDir: path.join(__dirname, './dist'), rootPath: '/'})); // 线上的静态路由
 
 
 app.listen(port, () => {

client/component/userInfo/userInfo.jsx

@@ -0,0 +1,47 @@
+/**
+ * Created by Weil on 2017/7/9.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class extends Component {
+  constructor () {
+    super();
+  }
+
+  static propTypes = {
+    userName: PropTypes.string,
+    avatar: PropTypes.string,
+    getupTime: PropTypes.string,
+    rank: PropTypes.number,
+    continued: PropTypes.number,
+    uid: PropTypes.number,
+
+  };
+
+  static defaultProps = {
+    userName: null,
+    avatar: null,
+    getupTime: null,
+    rank: null,
+    continued: null,
+    uid: null,
+  };
+
+  render () {
+    let { userName, avatar, getupTime, rank, continued, uid } = this.props;
+
+    return (
+      <div className="_user-info-wrap">
+        <img className="avatar" src={avatar}/>
+        <div className="user-name">{userName}</div>
+        <div className="rank-wrap">
+          <span>{`在好友中排名第${rank}名`}，</span>
+          <span>{`坚持了${continued}天`}。</span>
+        </div>
+      </div>
+    )
+  }
+}
+import './userInfo.less';
+

client/component/userInfo/userInfo.less

@@ -0,0 +1,12 @@
+._user-info-wrap {
+  text-align: center;
+  margin: 20px;
+  .avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+  }
+  .user-name {
+    font-size: 22px;
+  }
+}

client/config/develop.config.js

@@ -0,0 +1,6 @@
+/**
+ * Created by Weil on 2017/7/9.
+ */
+export default {
+  requestPrefix: 'http://localhost:9333'
+}

client/config/index.js

@@ -0,0 +1,19 @@
+/**
+ * Created by Weil on 2017/7/9.
+ */
+import devConfig from './develop.config.js';
+import prodConfig from './production.config.js';
+
+let Config = {};
+
+if (process.env.NODE_ENV === 'production') {
+  Config = prodConfig;
+} else if (process.env.NODE_ENV === 'develop') {
+  Config = devConfig;
+} else {
+  throw new Error('请设置正确的NODE_ENV,为production或者develop');
+}
+
+export default Config;
+
+

client/config/production.config.js

@@ -0,0 +1,6 @@
+/**
+ * Created by Weil on 2017/7/9.
+ */
+export default {
+  requestPrefix: 'http://localhost:9333'
+}

client/container/rank/rank.jsx

@@ -19,14 +19,14 @@ import store from './redux/index.js';
 window._store = store; // 方便调试 并不是好的写法
 
 // 引入组件
-import Index from './container/index/index.jsx';
-import Today from './container/today/today.jsx';
-import Rank from './container/rank/rank.jsx';
-import Mine from './container/mine/mine.jsx';
-import Wrap from './container/wrap/wrap.jsx';
-import New from './container/new/new.jsx';
-import Detail from './container/detail/detail.jsx';
-import User from './container/user/user.jsx';
+import Index from './page/index/index.jsx';
+import Today from './page/today/today.jsx';
+import Rank from './page/rank/rank.jsx';
+import Mine from './page/mine/mine.jsx';
+import Wrap from './page/wrap/wrap.jsx';
+import New from './page/new/new.jsx';
+import Detail from './page/detail/detail.jsx';
+import User from './page/user/user.jsx';
 
 ReactDOM.render(
   <Provider store={store}>

client/container/user/user.jsx

@@ -1,16 +1,15 @@
-import './index.less';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import actions from '../../redux/actions/index.js';
 import { Link } from 'react-router-dom';
 import ScrollList from '../../component/scrollList/scrollList.jsx';
 import FeedCard from '../../component/feedCard/feedCard.jsx';
+import UserInfo from '@/component/userInfo/userInfo.jsx';
 
 @connect((state) => {
   return {
     myInfo: state.myInfo,
-    myListInfo: state.myListInfo,
-    mainPage: state.mainPage
+    myListInfo: state.myListInfo
   }
 },{...actions})
 export default class extends Component {
@@ -22,56 +21,48 @@ export default class extends Component {
   }
 
   componentWillMount () {
-    this.props.getMyInfo();
-    this.props.getMyList();
   }
 
   componentDidMount () {
-    // console.log(this.refs);
-    // debugger
+    let { userName, loading: isLoadingMyInfo } = this.props.myInfo;
+    let isMyListInit = this.props.myListInfo.isInit;
+
+    !userName && this.props.getMyInfo();
+    !isMyListInit && this.props.getMyList();
   }
 
   render () {
-    let {
-      myInfo: { userName, avatar, getupTime, rank, continued }
-    } = this.props;
-
     let { list, hasMore, loading, isEmpty } = this.props.myListInfo;
 
     return (
         <div className="page-wrap main-page" ref="mainPage">
-          <div className="my-avatar">
-            <img src={avatar}/>
-          </div>
-          <div className="my-name">{userName}</div>
-          <div className="get-up-wrap">
-            <span>{getupTime}</span>
-          </div>
+          <UserInfo {...this.props.myInfo} />
           <Link to='/new'>
             <div className="new-wrap weui-cells">
                 <span className="add-icon">+</span>
                 <span className="add-text">添加今日状态</span>
             </div>
           </Link>
-          <div className="weui-cells__title">最近七天</div>
+          <div className="weui-cells__title">最近状态</div>
           <ScrollList
             element={this.refs.mainPage}
             onLoad={this.props.getMyList}
             hasMore={hasMore}
             loading={loading}
             isEmpty={isEmpty}
           >
-            <ul className="recently-wrap">
+            <div className="recently-wrap">
               {
                 list.map((item, index) => {
                   return (
                     <FeedCard route="/detail/222" item={item} key={index}/>
                   )
                 })
               }
-            </ul>
+            </div>
           </ScrollList>
         </div>
     )
   }
 }
+import './index.less';

client/container/user/user.less

@@ -1,25 +1,5 @@
 .main-page {
   padding-top: 100px;
-  .my-avatar {
-    text-align: center;
-    margin-top: 30px;
-    img {
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      border: 1px solid #f0f0f0;
-    }
-  }
-  .my-name {
-    margin-top: 20px;
-    font-size: 20px;
-    text-align: center;
-  }
-
-  .get-up-wrap {
-    text-align: center;
-  }
-
   .new-wrap {
     height: 70px;
     padding: 10px 10px 10px 20px;