【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面
在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 DVA 和 ANTD ,以及在引入过程中需要注意的问题。这里只会详细的书写部分组件,其他的组件都是大同小异。你可以在 github仓库 中找到这些组件。
博客的原型图
这里我简单的画了一个博客的轮廓图。这样在写组件的过程中有助于有个整体性的思路,不迷路…
添加目录结构
blog
├─ dist # 输出目录
├─ task # 这里来放webpack处理和配置文件
├─ src
| ├─ assets # 静态文件文件夹
| ├─ components # 组件
| | ├─ Home # Home 页面的文件夹
| | ├─ Archive
| | ├─ About
| | ├─ Admin # 后台界面文件夹
| | ├─ Header.js # 公共的 Header 组件
| | ├─ Footer.js # 公共的 Footer 组件
| | ├─ UserCard.js # 公共的 UserCard 组件
| | ├─ Login.js # 公共的 Login 组件
| ├─ containers # Redux 的容器组件
| | ├─ Home.js # Home 组件的容器
| | ├─ Archive.js
| | ├─ About.js
| | ├─ Admin # 后台各界面的容器文件夹
| ├─ router.js # React 路由
| └ index.js # 入口文件
| package.json
引入 DVA 和 ANTD
DVA 的简单引入
Lightweight front-end framework based on redux, redux-saga and react-router@2.x. (Inspired by elm and choo)
要知道 dva
是对 redux
, redux-saga
, react-router
的封装,使用上有点像 express.js
,那么你就要多少对他们有所了解,dva
的 github 仓库 有详细的入门指南、概念和示例,可以先去了解一下 。
更改入口文件 src/index.js
import dva from 'dva'
const app = dva()app.router(require('./router'))
app.start('#root')
新建路由文件 src/router.js
import React from 'react'
import { Router, Route, IndexRoute, IndexRedirect } from 'dva/router'import AppLayout from './container/App'
import Home from './container/Home'
import Archive from './container/Archive'
import About from './container/About'
import Article from './container/Article'
import AdminArticles from './container/Admin/Articles'
import AdminKeywrods from './container/Admin/Keywords'
import AdminEditor from './container/Admin/Editor'
import AdminLayout from './container/Admin/Admin'export default ({history, app}) => {return (<Router history={history}><Route path="/" component={AppLayout}><IndexRoute component={Home} /><Route path="archive" component={Archive} /><Route path="about" component={About} /><Route path="article/:id" component={Article} /><Route path="admin" component={AdminLayout}><IndexRedirect to="articles" /><Route path="articles" component={AdminArticles} /><Route path="keywords" component={AdminKeywrods} /><Route path="editor" component={AdminEditor} /></Route></Route></Router>)
}
从这里可以看出, dva
自己在内部引入 react-router-redux ,然后使用 react-router-redux
提供的 combineReducers
把 routerRedux
合并到用户的 reducers
中
限于文章的篇幅,
dva
的model
的设计会放到下一次的文章来描述
引入 ANTD
按需加载
在引入 ANTD
之前,我们先来实现 按需加载
。其实概念很简单,就是我们在引入一个样式库的时候,往往只会用到这个样式库的部分组件,但是工具会把整个组件库都打包到我们的项目中,这是我们不想看到的。按需加载
就是用来打包我们引入的组件,可以使用 babel-plugin-import 来具体实现。
在 task/config.js
的 babel-loader
的 plugins 配置中添加:
["import", { "libraryName": "antd", "style": true }]
自定义主题
由脚手架 atool-build 和 官网介绍,我们已经自己配置并新建好了主题文件 theme.js
。
添加 less-loader 处理样式文件
上节我们只是添加了对 .module.less
文件进行编译,在自定义主题时,需要对 less 变量进行覆盖,所以要求 babel-plugin-import
的 style
选项设置为 true
,让它导出 antd
组件的 .less
样式文件才能进行变量覆盖操作。
在 task/config.js
中 module.rules
追加
{test: function(path){return /\.less$/.test(path) && !/\.module\.less$/.test(path)},loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: [{loader: 'css-loader', },{loader: 'postcss-loader',options: {plugins: postcssPlugins}},{loader: 'less-loader', options: {"modifyVars": theme}}]})
},
注意 /\.less/
至少会匹配到 .module.less
和 .less
文件,所以要排除 .module.less
,因为它需要被 css-module
处理。
你也可能会通过添加 exclude
, include
来对样式库中的 less
文件和自己编写的文件进行区别,毕竟样式库肯定都是从 node_modules
目录中加载,而自己的是从 src
目录下加载的。也正因为样式库是从 node_modules
目录下加载的,所以这样做可能会导致降低 webpack
的编译速度。
添加容器组件和展示组件
容器组件
在 /src/containers
下新建 App.js
import React, { PropTypes } from 'react'
import { connect } from 'dva'
import { Layout, Menu, Breadcrumb, Row, Col, Icon } from 'antd'
import HeaderComponent from 'components/Header'
import FooterComponent from 'components/Footer'
import LoginModel from 'components/Login'
const { Header, Content, Footer } = Layoutconst App = ({children, routes}) => {return (<Layout><Header><HeaderComponent routes={routes}><LoginModel doLogin={() => {}} /></HeaderComponent></Header><Content style={{ margin: '24px 100px 0', background: '#fff', minHeight: 280, overflow: 'hidden' }}>{children}</Content><Footer><FooterComponent /></Footer></Layout>)
}export default connect()(App)
因为 dva
封装了 redux
, 源文件 中也是直接导出 react-redux
的 connect
方法。所以在创建容器组件的时候还是等同于 react-redux
。
注意,这个 App组件是作为子路由组件的父组件,即
children
代表的就是那些子组件Home
,Archive
…
其他的展示组件,即 /src/containers
文件夹下面的组件,都是大同小异,就不一一赘述。
展示组件
我们看到 src/container/App.js
展示组件,引入了一个 HeaderComponent
,在 src/components
下面新建一个 Header.js
import React from 'react'
import { Layout, Menu, Breadcrumb, Row, Col } from 'antd'
import { Router, Link } from 'dva/router'const HeaderComponent = (props) => {const { children, routes } = propsconst routePath = (routes[routes.length - 1] || {}).path || '/'return (<div><Row><Col span={16}><Menumode="horizontal"defaultSelectedKeys={[routePath]}style={{ lineHeight: '64px', backgroundColor: 'transparent' }}><Menu.Item key="/"><Link to="/">Home</Link></Menu.Item><Menu.Item key="archive"><Link to="archive">Archive</Link></Menu.Item><Menu.Item key="about"><Link to="about">About me</Link></Menu.Item></Menu></Col><Col span={8}><div style={{ lineHeight: '64px', float: 'right', padding: '0 20px' }}>{children}</div></Col></Row></div>)
}export default HeaderComponent
这就是个普通的 React 的展示组件没什么好说的,这些组件可以直接在 Antd
的官网上找到用法,而且都有示例代码。
const routePath = (routes[routes.length - 1] || {}).path || '/'
找到路由路径中的最后一个名称,如 /home
中的 home
,作为 Menu
的默认选中项,这样在当前页面刷新,就可以让当前页面对应的导航高亮。
其他的展示型组件也都是大同小异,你可以在 github仓库 中找到它们的实现。
引入 url-loader 来处理文件路径
在 task/config.js
中的 module.rules
追加:
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: 'img/[name].[hash:7].[ext]'}
},
{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: 'fonts/[name].[hash:7].[ext]'}
},
关于 url-loader
的配置方法,可以在 webpack
的文档中查看
小结
这篇文章主要是引入了两个重要的库 dva
和 antd
,以及编写部分展示组件。接下来,我们会对 dva
的数据层,已经后台初步搭建,同步进行前后端的开发。
【单页面博客从前端到后端】环境搭建
【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面
【单页面博客从前端到后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Model 设计
【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面相关推荐
- Python Day 67 Dango框架图解(总结)、Wsgiref和uwsgi、前后端传输数据的编码格式、From表单和Ajax方式在前端往后端发送文件、补充一下页面清缓存...
##Django框架图解 ##前后端传输数据的编码格式 #前后端传输数据的编码格式1.urlencoded 2.formdata 3.application/json ##From表单和Ajax方式在 ...
- 智能客服的未来:基于人工智能技术的智能客服:应用案例
作者:禅与计算机程序设计艺术 智能客服的未来:基于人工智能技术的智能客服:应用案例 引言 1.1. 背景介绍 随着互联网技术的快速发展,智能客服逐渐成为企业重要的服务工具之一.通过智能客服,企业可以提 ...
- 电脑端京东的我的订单html+css页面_什么是前端和后端开发?写给即将迈入前端开发领域的朋友...
引言 不太清楚前端和后端是什么意思? 您是否想学习更多关于编程技术的知识,但又不确定从哪里开始?一个好的开始是了解前端开发和后端开发之间的区别. 一些专业的技术术语可能会令人困惑. 但请不用担心,我们 ...
- html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影 男女 第一句:act ...
- java个人博客系统源码_Java基于SSM的个人博客系统(源码 包含前后台)
@ 系统简介 技术点:Java.JSP.SSM框架,实现了个人博客系统 用户角色分为:普通用户.管理员.系统管理员 功能:发博客.博客分类.博客删除.评论.博客管理.日志等 看完本博客,你可以得到: ...
- 前端单页面富应用(SPA)的实现
一. 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进.后退等机制被破坏等问题.并且页面访问会被浏览器保 ...
- VUE单页面应用的内页很难被百度收录
这两年自己写了几个WEB项目,前端都是用的vue框架,后台大部分用的nodejs,也有用的spring的:但是他们有一个共同点:都是SPA单页面应用,并且使用HEXO框架在二级目录搭建了一个静态博客. ...
- 使用Vue.js在WordPress中创建单页面应用SPA
吐槽一下,掘金好像并不能插入gist的代码框 效果有点打折扣 博客原文地址里有gist代码: 使用Vue.js在WordPress中创建单页面应用SPA 英文原文地址:premium.wpmudev. ...
- 推荐7款超棒的单页面网站设计模板。关键是!免费!!
之前我们推荐过Bootstrap的实用开发教程和8款HTML5实现的特效和应用,反映非常强烈,很多前端爱好者纷纷要求多分享些类似的教程和模板.今天我们推荐的这7套单页面网站设计模板不仅带有独立的在线演 ...
最新文章
- ControllerDescriptor的认识
- Python是世界上最好的语言,你不服不行!(附资料)
- Alt + sysrq + REISUB doesn't reboot my laptop
- Android开发之百度地图定位以及简单覆盖物的实现
- Remoting and MSMQ 结合做的一个DEMO
- python的pandas库中如何计算每列出现最多的值_Python Pandas:计算多个列的每个唯一值的显示次数...
- js拼的onclick调用方法需要注意的地方 之二
- mysql的匹配模式
- mysql修改主键为unique_mysql 如何修改、添加、删除表主键及unique约束
- 让ajax更加友好,实时显示后台处理进度。
- 三次参数样条曲线拟合(任意控制点)
- 面试题:Android 为什么设计只有主线程更新UI
- 关于poi处理word换行问题
- mysql 织梦 优化,织梦Dedecms全站SEO优化教程
- 《疯狂java讲义》学习(44):线程同步
- 清华附小校长窦桂梅给孩子们列的书单,值得一看!
- Java——线程插队_join ()方法来实现“插队功能”
- android智能手机编程考试答案,Android智能手机编程形考作业
- 辞职时被老板叫去谈话挽留,怎样避免被套路
- BUUCTF misc 专题(32)九连环