初始化dva项目

Author: geeknull

.nvmrc

@@ -1 +1 @@
-8.6
+8

client-dva/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["Android >= 4.0", "iOS >= 7"]
+      }
+    }],
+    "babel-preset-stage-0",
+    "react"
+  ],
+  "plugins": ["transform-decorators-legacy"],
+  "ignore": [
+    "node_modules"
+  ]
+}

client-dva/component/footer/footer.js

@@ -0,0 +1,40 @@
+import './footer.less';
+import React, { Component } from 'react';
+import { Link } from 'dva/router';
+
+export default class extends Component {
+  constructor () {
+    super();
+  }
+
+  render () {
+    return (
+      <ul className="footer">
+        <li className="footer-item">
+          <Link to="/index">
+            <span className="iconfont icon-zhuye" title="主页"/>
+            <span className="footer-item-text">主页</span>
+          </Link>
+        </li>
+        <li className="footer-item">
+          <Link to="/today">
+            <span className="iconfont icon-liebiao" title="今日列表"/>
+            <span className="footer-item-text">今日列表</span>
+          </Link>
+        </li>
+        <li className="footer-item">
+          <Link to="/rank">
+            <span className="iconfont icon-paixingbang" title="排行榜"/>
+            <span className="footer-item-text">排行榜</span>
+          </Link>
+        </li>
+        <li className="footer-item">
+          <Link to="/mine">
+            <span className="iconfont icon-gerenzhongxin" title="个人中心"/>
+            <span className="footer-item-text">个人中心</span>
+          </Link>
+        </li>
+      </ul>
+    )
+  }
+}

client-dva/component/footer/footer.less

@@ -0,0 +1,29 @@
+.footer {
+  display: flex;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+  z-index: 10;
+  .footer-item {
+    flex: 1;
+  }
+  .footer-item a {
+    flex: 1;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    .footer-item-text {
+      font-size: 12px;
+    }
+    .iconfont {
+
+    }
+  }
+}

client-dva/component/header/header.js

@@ -0,0 +1,38 @@
+import './header.less';
+import React, { Component } from 'react';
+import { connect } from 'dva';
+
+@connect((state) => {
+  return {
+    routing: state.routing
+  }
+})
+export default class extends Component {
+  constructor () {
+    super();
+    debugger
+  }
+
+  getTitle () {
+    // let { location: { pathname } } = this.props.routing;
+    console.log(this.props.routing, 'header.js router change');
+    let pathname = '';
+    switch (pathname) {
+      case '/index':
+        return '首页';
+        break;
+      default:
+        return '我是早鸟';
+    }
+  }
+
+  render () {
+    return (
+      <div className="header">
+        <div className="inner">
+          {this.getTitle()}
+        </div>
+      </div>
+    )
+  }
+}

client-dva/component/header/header.less

@@ -0,0 +1,17 @@
+.header {
+  display: flex;
+  height: 50px;
+  background-color: #fff;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #f0f0f0;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  .inner {
+    color: #333;
+    font-size: 20px;
+  }
+}

client-dva/container/home/home.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { connect } from 'dva';
+import { Link } from 'dva/router';
+
+@connect((state) => {
+  return {
+    myinfo: state.myinfo,
+    count: state.count,
+  };
+})
+export default class extends Component {
+  constructor () {
+    super();
+    this.state = {
+
+    };
+  }
+
+  componentWillMount () {
+    this.props.dispatch({
+      type: 'myinfo/getUserName',
+      payload: 123,
+    });
+  }
+
+  render () {
+    let {userName} = this.props.myinfo;
+    return (
+      <div className="page-wrap">
+        123
+        {userName}
+      </div>
+    )
+  }
+}
+import './home.less';

client-dva/container/home/home.less

@@ -0,0 +1,23 @@
+.main-page {
+  padding-top: 100px;
+  .new-wrap {
+    height: 70px;
+    padding: 10px 10px 10px 20px;
+    cursor: pointer;
+    margin: 20px 0;
+    .add-icon {
+      font-size: 30px;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+    .add-text {
+      vertical-align: 1px;
+    }
+  }
+
+  .recently-wrap {
+    a:last-child .feed-card-item{
+      margin-bottom: 20px;
+    }
+  }
+}

client-dva/container/today/today.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { connect } from 'dva';
+import { Link } from 'dva/router';
+
+@connect()
+export default class extends Component {
+  constructor () {
+    super();
+    this.state = {
+
+    };
+  }
+
+  componentWillMount () {
+  }
+
+  render () {
+    return (
+      <div className="page-wrap">
+        today
+      </div>
+    )
+  }
+}
+import './today.less';

client-dva/container/today/today.less

@@ -0,0 +1,23 @@
+.main-page {
+  padding-top: 100px;
+  .new-wrap {
+    height: 70px;
+    padding: 10px 10px 10px 20px;
+    cursor: pointer;
+    margin: 20px 0;
+    .add-icon {
+      font-size: 30px;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+    .add-text {
+      vertical-align: 1px;
+    }
+  }
+
+  .recently-wrap {
+    a:last-child .feed-card-item{
+      margin-bottom: 20px;
+    }
+  }
+}

client-dva/container/wrap/wrap.js

@@ -0,0 +1,32 @@
+import './wrap.less';
+import React, { Component } from 'react';
+import Header from '../../component/header/header';
+import Footer from '../../component/footer/footer';
+import { connect } from 'dva';
+
+@connect((state) => {
+  return {
+    routing: state.routing
+  }
+})
+export default class extends Component {
+  constructor () {
+    super();
+    this.state = {
+
+    };
+  }
+
+  componentDidMount () {
+  }
+
+  render () {
+    return (
+      <div className="app-container">
+        <Header/>
+        {this.props.children}
+        <Footer/>
+      </div>
+    )
+  }
+}

client-dva/container/wrap/wrap.less

@@ -0,0 +1,21 @@
+@import "../../style/index.less";
+
+html, body {
+  height: 100%;
+}
+
+.doc {
+  height: 100%;
+}
+
+.app-container {
+  height: 100%;
+  position: relative;
+}
+
+.page-wrap {
+  height: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  overflow: auto;
+}

client-dva/model/count.js

@@ -0,0 +1,11 @@
+export default {
+  namespace: 'count',
+  state: 0,
+  reducers: {
+    add  (count) {
+      debugger
+      return count + 1
+    },
+    minus(count) { return count - 1 },
+  },
+}

client-dva/model/myInfo.js

@@ -0,0 +1,43 @@
+import * as CONSTANTS from "../../client-react/redux/actionTypes";
+import {ajax} from "../util";
+
+export default {
+  namespace: 'myinfo',
+  state: {
+    userName: null,
+    avatar: null,
+    continued: null,
+    getupTime: null,
+    rank: null,
+    uid: null,
+  },
+  reducers: {
+    userName (state, {payload}) {
+      // console.log(arguments);
+      // debugger
+      return {
+        ...state,
+        ...payload
+      }
+    }
+  },
+  effects: {
+    *getUserName({payload}, {call, put}) {
+      let getUserNameAPI = () => {
+        // console.log(arguments);
+        return ajax({
+          url: `//localhost:8333/api/myinfo`,
+          method: 'get'
+        }).then(res => {
+          return res;
+        }).catch(err => {debugger});
+      };
+
+      let res = yield call(getUserNameAPI, 123, 111, 111)
+      // debugger
+      // console.log(payload, res);
+      // yield put({type: 'count/add', payload: 'add'});
+      yield put({type: 'userName', payload: res})
+    },
+  }
+}