资讯专栏INFORMATION COLUMN

【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

zqhxuyuan / 805人阅读

摘要:在的的配置中添加自定义主题由脚手架和官网介绍,我们已经自己配置并新建好了主题文件。单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计

在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 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 (
        
            
                
                
                
                
                
                    
                    
                    
                    
                
            
        
    )
}

从这里可以看出, dva 自己在内部引入 react-router-redux ,然后使用 react-router-redux 提供的 combineReducers routerRedux 合并到用户的 reducers

限于文章的篇幅,dvamodel 的设计会放到下一次的文章来描述

引入 ANTD

按需加载

在引入 ANTD 之前,我们先来实现 按需加载 。其实概念很简单,就是我们在引入一个样式库的时候,往往只会用到这个样式库的部分组件,但是工具会把整个组件库都打包到我们的项目中,这是我们不想看到的。按需加载 就是用来打包我们引入的组件,可以使用 babel-plugin-import 来具体实现。

task/config.jsbabel-loader 的 plugins 配置中添加:
["import", { "libraryName": "antd", "style": true }]

自定义主题

由脚手架 atool-build 和 官网介绍,我们已经自己配置并新建好了主题文件 theme.js

添加 less-loader 处理样式文件

上节我们只是添加了对 .module.less 文件进行编译,在自定义主题时,需要对 less 变量进行覆盖,所以要求 babel-plugin-importstyle 选项设置为 true ,让它导出 antd 组件的 .less 样式文件才能进行变量覆盖操作。

task/config.jsmodule.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 } = Layout

const App = ({children, routes}) => {
    return (
        
            
{}} />
{children}
) } export default connect()(App)

因为 dva 封装了 redux , 源文件 中也是直接导出 react-reduxconnect 方法。所以在创建容器组件的时候还是等同于 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 } = props
    const routePath = (routes[routes.length - 1] || {}).path || "/"
    return (
        
Home Archive About me
{children}
) } 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 的文档中查看

小结

这篇文章主要是引入了两个重要的库 dvaantd ,以及编写部分展示组件。接下来,我们会对 dva 的数据层,已经后台初步搭建,同步进行前后端的开发。

【单页面博客从前端到后端】环境搭建

【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

【单页面博客从前端到后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Model 设计

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

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

相关文章

  • 页面博客前端后端

    摘要:说到底,当自己独自开发从搭建开发环境,到前端的每一个组件,到动作交互,再到和后端的数据交互,难免遇到不少问题。单页面博客从前端到后端基于和的权限验证与的设计引入来实现富文本编辑器是开源的用于构建富文本编辑器的框架。 不会后端的前端,不会写单页面应用... 单页面应用的概念已经被提出很长时间了,无论是基于 vue, angular 还是 react,相信大家或是耳濡目染,或是设身处地都有...

    whinc 评论0 收藏0
  • 页面博客前端后端】环境搭建

    摘要:的配置其中就不多说会解决更改组件的时热更新直接刷新页面的问题。 工欲善其事,必先利其器。单页面应用的开发和生产环境涉及文件的编译、压缩、打包、合并等,目前前端最流行的莫过于 webpack 。为了深入了解 webpack 以及其相关插件,我们决定不采用脚手架,自己来搭建基于 webpack 的开发和生产环境。 基础环境 nodejs的安装: 移步官网 建议使用nvm来管理nodejs...

    wizChen 评论0 收藏0
  • 页面博客前端后端基于 Passport 和 Koa@2 的权限验证与 DVA 的 Mode

    摘要:我们就采用这种方式来进行权限验证。这里我还是使用在中的下新增单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计 基于 JWT 的权限验证 这里有一篇文章描述的已经非常详尽,阐述了 JWT 验证相比较传统的持久化 session 验证的优势,以及基于 angular 和 express 验证的简单流程。 基于Json ...

    luodongseu 评论0 收藏0
  • 使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建

    摘要:是一个使用和等技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。谈谈技术选型使用去做底层的绘制,大项目首选状态管理的最佳实践肯定不是,目前首选,或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已经快要跟React-nativ...

    Caicloud 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<