dva开发一个cnode网站(1)
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 (<div ><h1>Hello, this is cnode web site</h1></div>);
}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 (<div><MenuonClick={handleClick}selectedKeys={keys}mode="horizontal"><Menu.Item key="node" disabled><Icon type="tag" />CNODE</Menu.Item><Menu.Item key="search"><Searchplaceholder="input search text"onSearch={value => console.log(value)}enterButton/></Menu.Item><Menu.Item key="index"><a href="/"><Icon type="appstore" />首页</a></Menu.Item><Menu.Item key="into"><a href="#/into"><Icon type="appstore" />新手入门</a></Menu.Item><Menu.Item key="api"><a href="#/api"><Icon type="appstore" />API</a></Menu.Item><Menu.Item key="about"><a href="#/about"><Icon type="appstore" />关于</a></Menu.Item><Menu.Item key="reg"><a href="#/reg"><Icon type="appstore" />注册</a></Menu.Item><Menu.Item key="login"><a href="#/login"><Icon type="appstore" />登录</a></Menu.Item></Menu></div>);
};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 (<div ><Header keys={['index']}/><h1>Hello, this is cnode web site</h1></div>);
}IndexPage.propTypes = {
};export default connect()(IndexPage);
效果:
下节课接着搞。
欢迎关注我的公众号 mike啥都想搞
,回复react免费领取视频教程。
dva开发一个cnode网站(1)相关推荐
- 从零开始开发一个大型网站
从零开始开发一个大型网站 更新:前端代码已全部由TypeScript进行重写 这是本人第一个从零开始开发一个大型网站(前后端+部署代码),是一个内容分享社区,详细信息见github.目前还是开发中后期 ...
- flask学习:开发一个微电影网站一:项目介绍
最近在学习flask,完成了入门学习,现在想找一个项目进行实战学习,看看系统的开发是怎么样的,然后看到了慕课网上有一个视频,使用flask开发一个微电影网站,因此决定花时间学习一下. 一:首先介绍一下 ...
- 如何使用MyEclipse开发一个JavaWeb网站
如何使用MyEclipse开发一个JavaWeb网站 本文所述的内容仅用于参考或学习,主要针对毕业设计等网站设计,请勿实际用于生产开发用途,否则后果自负: 如何使用MyEclipse开发一个JavaW ...
- 【教你如何开发一个OnlineJudge网站】第一章 如何实现OnlineJudge判题
[教你如何开发一个OnlineJudge网站]系列文章目录 第一章 如何实现OnlineJudge判题 第二章 实现OnlineJudge的后端 第三章 实现OnlineJudge的前端 文章目录 [ ...
- 模块化开发一个电子商务网站
通过查看网上的教学视频,跟着做下来这样一个电子商务网站整站开发的项目.整个页面写下来还是很耗时的,页面的细节太多,得仔仔细细核对原设计图,1px也要在那里死抠,不能放过,不然怕影响整体布局.关于浏览器 ...
- 基于Appian低代码平台开发一个SpaceX网站
文章目录 Appian 背景摘要 Appian Designer SpaceX网站开发 新建Application 配置应用权限 创建Record Type Appian 背景摘要 国内几乎没有App ...
- 用python开发一个影视网站_搜片大师,一个不需要编程就能拥有百万影视站点的搜片神器,Python编写,Windows版界面 - 卖知了的......
这个世界太疯狂了,来北京好几个月了,都还没找到工作.俗话说,一天不编程,连hello world都写不出来.在这个"焦虑"的最后一个月,差不多每天吃馒头加山泉水,差点流落街头.可以 ...
- 用python开发一个影视网站_GitHub - lyzhanghai/movie_project: 一个使用Python+Flask开发的微电影网站...
微电影网站搭建手册 简介 这是一个使用Python语言和Flask框架搭建的微电影网站.网站分前台和后台,前台面向用户,主要功能有注册会员.搜索电影.观看电影.收藏及评论电影:后台面向网站管理人员,主 ...
- 老弟,来了?VUE+Nuxt.js+Koa+Vuex入门教程(一)仿写一个cnode网站
if(有工作){if(工作地址 == "深圳" || 工作地址 == "广州" ){do(请联系作者,qq:1172081598)} } 何为Nuxt.js N ...
- 开发一个简单网站--第三章:相知
第三章:相知 <12>.搜索用户search.php <13>.搜索用户后台getsearchdata.php <14>.搜索论坛(投票)fourum.php &l ...
最新文章
- 面对世界竞争对手,如何拿到Google PDF开源项目PDFium?
- Python3 数据库连接
- 疫情风向标?苹果宣布将暂时关闭大中华区以外的所有苹果零售店!
- 存储空间的动态分配与释放
- 安全学习笔记(一)-文件下载以及NC
- SocksCap代理
- 设置xshell5编码
- idea的pom文件变灰色
- 祖冲之算法(ZUC-128)C语言实现
- python 教程(转载)
- 小样本点云深度学习库_基于点云深度学习的点云数据集制作系统及方法与流程...
- 物流管理APP软件开发公司 让货运变得更简单
- Python:统计正负数个数
- vue项目如何区分开发、生产和测试环境
- es根据字段长度过滤_es根据字段长度过滤_如何进行elasticsearch查询以过滤字段的最大值?...
- DEEP AUTOENCODING GAUSSIAN MIXTURE MODEL FOR UNSUPERVISED ANOMALY DETECTION
- 虚拟内存太低怎么办?
- SSM框架:Spring
- python识别火车票二维码_使用python脚本实现查询火车票工具
- 微信接口源码、微信定制功能源码