首页手记 dva开发一个cnode网站（5）

dva开发一个cnode网站（5）

标签：

Html5 产品 React

剩下几个页面的完成，因为这几个页面没有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啥都想搞，学习更多内容。

点击查看更多内容