dva開發一個cnode網站（5）

剩下幾個頁面的完成，因爲這幾個頁面沒有api，大部分是靜態頁面。你可以自己修改爲其他你想要的。我暫時完全模仿Cnode，還是使用react-markdown來渲染

1 登陸註冊組件

登陸：

import React , { Component }from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Checkbox} from 'antd';

const backgroundImage = require('../assets/back.jpg');
const FormItem = Form.Item;

class Login extends Component{

    render() {

      return (
        <div  style={styles.form}>
           <h1>登陸</h1>
           <Form onSubmit={this.handleSubmit}>
           <FormItem>
               <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用戶名" />
           </FormItem>
           <FormItem>
               <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密碼" />
           </FormItem>
           <FormItem>
               <Checkbox>記住我</Checkbox>
               <Button block type="primary" htmlType="submit" className="login-form-button">
                 登陸
               </Button>
             <a>忘記密碼</a>
             或 <a href="#/reg">註冊!</a>
           </FormItem>
         </Form>

    </div>
      )

    }

    componentWillMount () {

   }
}

const styles = {
  form: {
    maxWidth: '400px',
    margin: '0 auto',
    paddingTop: '100px',
  }
};

Login.propTypes = {

};

function mapStateToProps(state) {

}

// export default ListData;
export default connect()(Login);

註冊：

import React , { Component }from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Checkbox} from 'antd';

const backgroundImage = require('../assets/back.jpg');
const FormItem = Form.Item;

class Reg extends Component{

    render() {

      return (
        <div  style={styles.form}>
           <h1>註冊</h1>
           <Form onSubmit={this.handleSubmit}>
           <FormItem>
               <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用戶名" />
           </FormItem>
           <FormItem>
               <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密碼" />
           </FormItem>
           <FormItem>
               <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="確認密碼" />
           </FormItem>
           <FormItem>
               <Button block type="primary" htmlType="submit" className="login-form-button">
                 註冊
               </Button>
             <a>忘記密碼</a>
             或 <a href="#/login">登陸!</a>
           </FormItem>
         </Form>

    </div>
      )

    }

    componentWillMount () {

   }
}

const styles = {
  form: {
    maxWidth: '400px',
    margin: '0 auto',
    paddingTop: '100px',
  }
};

Reg.propTypes = {

};

function mapStateToProps(state) {

}

// export default ListData;
export default connect()(Reg);

兩者基本一致，裏面的邏輯還沒有完成，後面再說。

3 頁面創建

新手入門：

import React from 'react';
import { connect } from 'dva';
import Header from '../components/Header';
import  ReactMarkdown from 'react-markdown';

function NewUserPage() {
  const content = `
  # Node.js 入門
---

## 《快速搭建 Node.js 開發環境以及加速 npm》

  http://fengmk2.com/blog/2014/03/node-env-and-faster-npm.html

## 《Node.js 包教不包會》

  https://github.com/alsotang/node-lessons

## 《ECMAScript 6入門》

  http://es6.ruanyifeng.com/

## 《七天學會NodeJS》

  https://github.com/nqdeng/7-days-nodejs

  # Node.js 資源
---
## 《前端資源教程》

  https://cnodejs.org/topic/56ef3edd532839c33a99d00e

## 《國內的 npm 鏡像源》

  http://cnpmjs.org/

## 《node weekly》

  http://nodeweekly.com/issues

## 《node123-node.js中文資料導航》

  https://github.com/youyudehexie/node123

## 《A curated list of delightful Node.js packages and resources》

  https://github.com/sindresorhus/awesome-nodejs

## 《Node.js Books》

  https://github.com/pana/node-books

  # Node.js 名人
---

## 《名人堂》

  https://github.com/cnodejs/nodeclub/wiki/名人堂

  # Node.js 服務器
---

## 新手搭建 Node.js 服務器，推薦使用無需備案的 DigitalOcean(https://www.digitalocean.com/)`


  return (
    <div>
      <Header keys={['into']}/>
      <div style={{paddingTop:20,paddingLeft:100,paddingRight:100,paddingBottom:50}}>
          <ReactMarkdown source={content} />
      </div>
    </div>
  );
}

NewUserPage.propTypes = {
};

export default connect()(NewUserPage);

API：

import React from 'react';
import { connect } from 'dva';
import Header from '../components/Header';
import  ReactMarkdown from 'react-markdown';

function ApiPage() {
  const content = `
  以下 api 路徑均以 https://cnodejs.org/api/v1 爲前綴

  # 主題
  ---
  ## get /topics 主題首頁
  ---
  接收 get 參數

  * page Number 頁數
  * tab String 主題分類。目前有 ask share job good
  * limit Number 每一頁的主題數量
  * mdrender String 當爲 false 時，不渲染。默認爲 true，渲染出現的所有 markdown 格式文本。
  示例：/api/v1/topics

  ## get /topic/:id 主題詳情
  ---
  接收 get 參數

  * mdrender String 當爲 false 時，不渲染。默認爲 true，渲染出現的所有 markdown 格式文本。
  * accesstoken String 當需要知道一個主題是否被特定用戶收藏以及對應評論是否被特定用戶點贊時，才需要帶此參數。會影響返回值中的 is_collect 以及 replies 列表中的 is_uped 值。
  示例：/api/v1/topic/5433d5e4e737cbe96dcef312

  ## post /topics 新建主題
  ---
  接收 post 參數

  * accesstoken String 用戶的 accessToken
  * title String 標題
  * tab String 目前有 ask share job dev。開發新客戶端的同學，請務必將你們的測試帖發在 dev 專區，以免污染日常的版面，否則會進行封號一週處理。
  * content String 主體內容
  返回值示例

  {success: true, topic_id: '5433d5e4e737cbe96dcef312'}
  ## post /topics/update 編輯主題
  ----
  接收 post 參數

  * accesstoken String 用戶的 accessToken
  * topic_id String 主題id
  * title String 標題
  * tab String 目前有 ask share job
  * content String 主體內容
  返回值示例

  {success: true, topic_id: '5433d5e4e737cbe96dcef312'}

  # 主題收藏
  ---
  ## post /topic_collect/collect 收藏主題
  ---

  接收 post 參數

  * accesstoken String 用戶的 accessToken
  * topic_id String 主題的id
  返回值示例

  {'success': true}

  ## post /topic_collect/de_collect 取消主題
  ---
  接收 post 參數

  * accesstoken String 用戶的 accessToken
  * topic_id String 主題的id
  返回值示例

  {'success': true}

  ## get /topic_collect/:loginname 用戶所收藏的主題
  ---
  示例：/api/v1/topic_collect/alsotang

  # 評論
  ---
  ## post /topic/:topic_id/replies 新建評論
  ---
  接收 post 參數

  * accesstoken String 用戶的 accessToken
  * content String 評論的主體
  * reply_id String 如果這個評論是對另一個評論的回覆，請務必帶上此字段。這樣前端就可以構建出評論線索圖。
  返回值示例

  {success: true, reply_id: '5433d5e4e737cbe96dcef312'}


  # 知識點
  ---
  1. 如何獲取 accessToken？ 用戶登錄後，在設置頁面可以看到自己的 accessToken。 建議各移動端應用使用手機掃碼的形式登錄，驗證使用 /accesstoken 接口，登錄後長期保存 accessToken。`


  return (
    <div>
      <Header keys={['api']}/>
      <div style={{paddingTop:20,paddingLeft:100,paddingRight:100,paddingBottom:50}}>
          <ReactMarkdown source={content} />
      </div>
    </div>
  );
}

ApiPage.propTypes = {
};

export default connect()(ApiPage);

關於：

import React from 'react';
import { connect } from 'dva';
import Header from '../components/Header';
import  ReactMarkdown from 'react-markdown';

function AboutPage() {
  const content = `
  # 關於
---

CNode 社區爲國內最大最具影響力的 Node.js 開源技術社區，致力於 Node.js 的技術研究。

CNode 社區由一批熱愛 Node.js 技術的工程師發起，目前已經吸引了互聯網各個公司的專業技術人員加入，我們非常歡迎更多對 Node.js 感興趣的朋友。

CNode 的 SLA 保證是，一個9，即 90.000000%。

社區目前由 @alsotang 在維護，有問題請聯繫：https://github.com/alsotang

請關注我們的官方微博：http://weibo.com/cnodejs

# 移動客戶端
---

客戶端由 @soliury 開發維護。

源碼地址： https://github.com/soliury/noder-react-native 。

立即體驗 CNode 客戶端，直接掃描頁面右側二維碼。

另，安卓用戶同時可選擇：https://github.com/TakWolf/CNode-Material-Design ，這是 Java 原生開發的安卓客戶端。

# 友情鏈接
---

# LOGO
---
白底： /public/images/cnodejs.svg

黑底： /public/images/cnodejs_light.svg
  `


  return (
    <div>
      <Header keys={['about']}/>
      <div style={{paddingTop:20,paddingLeft:100,paddingRight:100,paddingBottom:50}}>
          <ReactMarkdown source={content} />
      </div>
    </div>
  );
}

AboutPage.propTypes = {
};

export default connect()(AboutPage);

這3個頁面都沒有引用組件。
登陸頁面：

import React from 'react';
import { connect } from 'dva';
import Header from '../components/Header';
import Login from '../components/Login';


function LoginPage() {

  return (
    <div>
      <Header keys={['login']}/>
      <div style={{paddingTop:20,paddingLeft:100,paddingRight:100,paddingBottom:50}}>
        <Login/>
      </div>
    </div>
  );
}

LoginPage.propTypes = {
};

export default connect()(LoginPage);

3 註冊路由

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import DetailPage from './routes/DetailPage';
import NewUserPage from './routes/NewUserPage';
import ApiPage from './routes/ApiPage';
import AboutPage from './routes/AboutPage';
import LoginPage from './routes/LoginPage';
import RegPage from './routes/RegPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/detail/:id" exact component={DetailPage} />
        <Route path="/into" exact component={NewUserPage} />
        <Route path="/api" exact component={ApiPage} />
        <Route path="/about" exact component={AboutPage} />
        <Route path="/login" exact component={LoginPage} />
        <Route path="/reg" exact component={RegPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

好了所有頁面都已完成
歡迎關注我的公衆號mike啥都想搞，學習更多內容。