dva開發一個cnode網站（1）

marek 發布于2019-08-23 14:07 / 1058人閱讀

摘要：首先是一個基于和的數據流方案，然后為了簡化開發體驗，還額外內置了和，所以也可以理解為一個輕量級的應用框架。本教程是利用的開放來做一個一樣的網站，以此來學習框架的使用。寫的不好的地方還請多多包涵，大家一起學習。

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萬多

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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