dva开发一个cnode网站（1）

marek 发布于2019-08-23 14:07 / 1056人阅读

摘要：首先是一个基于和的数据流方案，然后为了简化开发体验，还额外内置了和，所以也可以理解为一个轻量级的应用框架。本教程是利用的开放来做一个一样的网站，以此来学习框架的使用。写的不好的地方还请多多包涵，大家一起学习。

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

本教程是利用cnode的开放api来做一个一样的网站，以此来学习dva框架的使用。写的不好的地方还请多多包涵，大家一起学习。

1.搭建工程 安装 dva-cli

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

创建新应用

$ dva new cnode

然后我们 cd 进入 cnode 目录，并启动开发服务器：

$ cd cnode
$ npm start

几秒钟后，你会看到以下输出：

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

这样我们的cnode的应用就创建好了

2.了解目录

mock 产生假数据

node_modules 项目依赖的第三方库

public 放单页面模板文件，相当于访问的首页面

src 开发目录

src/assets 静态资源文件

src/components 公共组件

src/models 每个业务中处理的数据（state）

src/routes 路由对应的页面

src/services 业务逻辑处理

utils 工具类

3.修改首页

现在我们要换掉欢迎页，去做我们自己的布局

打开routes/IndexPage.js 修改代码

import React from "react";
import { connect } from "dva";

function IndexPage() {
  return (
    
      Hello, this is cnode web site
    
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

删除routes/IndexPage.css 运行命令

npm start

4.加入antd ui库

通过 npm 安装 antd 详见 repo和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，详见 repo

$ npm install antd babel-plugin-import --save

编辑 .webpackrc，使 babel-plugin-import 插件生效。

{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
}

5.使用antd创建头部公共组件

在components下创建Header.js

import React from "react";
import { Menu, Icon, Input } from "antd";
import PropTypes from "prop-types";

const Search = Input.Search;
const Header = ({dispatch,keys}) => {
      function handleClick(e) {
      console.log(e.key)
  }
  return (
    
        
       
          CNODE
        
            
                 console.log(value)}
      enterButton
    />
        
        
          首页
        
        
          新手入门
        
        
        API
        
        
        关于
        
        
        注册
        
        
        登录
        
        
    
  );
};

Header.propTypes = {
    keys: PropTypes.array.isRequired
};

export default Header;

在routes/IndexPage.js中使用公共组件

import React from "react";
import { connect } from "dva";
import Header from "../components/Header";
function IndexPage() {
  return (
    
          
      Hello, this is cnode web site
    
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

效果:

下节课接着搞。
欢迎关注我的公众号 mike啥都想搞，回复react免费领取视频教程。

GPU云服务器云服务器 cnode dva dva.js 阿里云服务器一个月1万多

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100125.html

dva开发一个cnode网站（3）

摘要：完成详情页渲染，用到了来渲染先看效果在下新建数据正在加载中发布于作者次浏览来自分享个回复用到了中的一些组件，可以自己去官网参考下怎么用。里面定义了一些样式，主要解决渲染后里面的图片太宽，重新设置宽度。完成详情页渲染，用到了react-markdown来渲染先看效果： showImg(https://segmentfault.com/img/bVbljJC?w=1569&h=909);...

dingding199389 2019-08-23 14:10 评论0 收藏0
node技术栈 - 收藏集 - 掘金

摘要：异步最佳实践避免回调地狱前端掘金本文涵盖了处理异步操作的一些工具和技术和异步函数。 Nodejs 连接各种数据库集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 编写 Node.js Rest API 的 10 个最佳实践 - 前端 - 掘金全文共 6953 字，读完需 8 分钟，速读需 2 分钟。翻译自...

王伟廷 2019-06-26 17:15 评论0 收藏0
nodejs练手爬虫+API测试

摘要：知乎日报代理首先感谢提供的分析使用详情请参考他提供的参数和地址代理转发的使用为前缀进入代理路由启动界面图像获取后为图像分辨率，接受任意的格式，为任意非负整数，返回值均相同返回值示例最新消息等具体参考提供的分析中的使用方式以及参数含义。项目说明这是一个基于express的node后端API服务，当时只是想抓取字幕组网站的下载资源，以备以后通过nas的方式去自动下载关注的美剧。不过后来...

bigdevil_s 2019-06-28 15:51 评论0 收藏0