react全家桶+antd從零打造網站開發模板

時間 2019-11-17

標籤 react 全家 antd 打造網站開發模板欄目 React 简体版

原文原文鏈接

筆者最近使用react全家桶開發項目的過程當中，發現後臺網站之間功能內容差別較小，樣式佈局也大同小異，爲提升網站開發的效率，同時也爲了解放前端的生產力，因此打造了react-web這個react後臺網站開發模板。前端

動圖展現

功能簡介
路由跳轉
狀態管理
本地存儲
權限控制
統一的UI風格
同時還集成了react社區經常使用的插件，例如富文本編輯器、代碼編輯器、excel表導入數據、百度地圖、echars等，簡單實用，易於配置。

在開發過程當中筆者注意組件化的開發方式，同時代碼也注意書寫風格，還結合了eslint作爲語法檢查的工具，經過配合antd框架，使頁面風格十分簡潔實用。react

一、登錄頁面git

登錄頁面採用極簡風格，只須要輸入登陸用戶名和密碼便可成功登錄（提示：若是須要註冊功能或者找回密碼功能只需添加相應的按鈕便可），我已經把後端代碼抽離出來了，因此邏輯十分簡單 github

核心代碼以下

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if (!err) {
            const {username, password} = values
            if (username === 'admin' && password === 'admin') {
                let content = this.props.loginClick({ ...values, token: 'user_token' })
                this.context.router.push("/")
            }

        }
    });
}
複製代碼

主要是經過在前端進行驗證用戶輸入，而後調用redux進行保存用戶的登錄狀態，從而進行用戶的身份驗證，應爲只是後臺模板，爲了方便你們書寫本身的邏輯，筆者已經把後端代碼抽離出來，若是須要後臺的話這裏可能還要進行異步處理，這裏各位能夠結合本身的須要進行配置web

二、首頁redux

首頁主要是網站重要信息的展現，這裏結合了百度的echars進行首頁的展現，你們查看源碼便可明白其中的配置，這裏主要說一下身份驗證和側面菜單欄的展現，首先看下首頁效果後端

頁面頂部主要是我的的信息和一些提示信息，這裏重要的是模板配置了麪包屑導航，方便用戶能夠回退到歷史瀏覽記錄，在這裏，我設置的默認配置是登出後清除歷史瀏覽記錄的選項，由於考慮到筆者在實際開發過程當中使用到了身份驗證功能，這就致使了麪包屑導航的瀏覽記錄並不適用於全部身份的用戶，如需保留能夠直接修改配置項，把清除選項註釋掉就好bash

這裏是一些主要的代碼antd

export function clearMessage() {
       Cookies.set(ROUTER_HISTORY, {}, { expires: 0 })
        Cookies.set(LOGIN_TOKEN, '', { expires:0 }) }
複製代碼

//頁面登出,清除token和歷史記錄框架

在首頁的側邊欄菜單是根據路由配置自動生成的，大大節約了開發者的路由配置時間，同時作了用戶的身份驗證，這樣一來開發者能夠經過驗證用戶身份來展現不一樣的頁面，這是一個重要的功能，這裏只貼出了部分代碼

const routes = [{
  path: "/",     //側面菜單欄的路由必須是根路由的子路由哦！
  name: 'first-page',
  component: Main,
  meta: {
    icon: 'home',
    title: '首頁',
    hideInMenu: false,
    access: ['student'],
    },
   indexRoute: { component: Home },
   childRoutes: [
    {
        path: "person",
        name: 'person-page',
        component: Person,
        onEnter: onRouteEnter,
        meta: {
            icon: 'team',
            title: '我的中心',
            hideInMenu: false,
            access: ['student'],
        }
    }, {
        path: "editor",
        name: 'editor-page',
        component: MyEditor,
        onEnter: onRouteEnter,
        meta: {
            icon: 'read',
            title: '富文本編輯器',
            hideInMenu: false,
            access: ['student'],
        }
    }, 
複製代碼

須要注意如下幾點

只有配置在根路由下的子路由纔會在側面菜單欄中顯視 meta對象裏面的配置必定要填寫，其中icon表示菜單欄圖標，title表示名稱，hideMenu表示是否顯示該菜單，access是用戶權限控制 onRouteEnter是路由的生命週期函數，主要用於對用戶的身份認證和路由過濾

三、其餘功能插件

這裏主要說下結合react社區提供的開發模塊，給網站配置了一些經常使用的功能，例如富文本編輯器、代碼編輯器、excel表導入數據、百度地圖、echars等

3.1富文本編輯器，這裏主要用到了react-draft-wysiwyg這個插件

3.2代碼編輯器、這裏用到了react-monaco-editor這個插件
3.2 excel表導入數據，這是一個實際開發中很是實用的功能

核心代碼以下

readFile(file) {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadstart = e => {
        this.setState({
            uploadLoading: false,
            tableLoading: false,
            showProgress: true
        })
    }
    reader.onprogress = e => {
        this.progressPercent = Math.round(e.loaded / e.total * 100)
    }
    reader.onerror = e => {
        message.error('文件讀取出錯')
    }
    reader.onload = e => {
        message.info('文件讀取成功')
        const data = e.target.result
        const { results } = excel.read(data, 'array')
        let infos = []
        results.forEach((item, index) => {
            infos.push({
                key:'key' + index,
                time: getMyDate(new Date().getTime(),"yyyy-MM-dd"),
                code: item['教師工號'],
                name: item['教師姓名'],
                major: item['負責方向'],
                experient: item["教學經驗"],
                description: item['教師簡介'],
            })

        })
        this.setState({
            newData: infos,
            uploadLoading: false,
            tableLoading: false,
            showRemoveFile: true
        })
    }
}
複製代碼