摘要：單頁博客應(yīng)用編寫總結(jié)很久之前就想寫一個博客應(yīng)用在一開始想要直接用和模板直接寫但是暑假一開始的時候不小心入了的坑所以就一不做二不休直接用寫那既然用了不寫個單頁應(yīng)用也過意不去了不前前后后寫了將近兩個星期現(xiàn)在看來這其實是一個很容易的應(yīng)用但是鑒于

很久之前就想寫一個博客應(yīng)用.
在一開始想要直接用express和ejs模板直接寫, 但是暑假一開始的時候不小心入了react的坑, 所以就一不做二不休直接用react寫. 那既然用了react, 不寫個單頁應(yīng)用也過意不去了...(不
前前后后寫了將近兩個星期, 現(xiàn)在看來這其實是一個很容易的應(yīng)用. 但是鑒于是第一次用react, 對于nodejs也不是特別熟悉, 所以走了不少冤枉路. 其中也有很多次覺得想放棄, 不過最終還是寫下來了. 雖然還是有不少瑕疵, 不過也算給自己一個交代吧.
個人博客網(wǎng)站的地址為: harryfyodor.tk
下面會從幾個方面把我整個編寫的過程的一些經(jīng)驗記錄下來, 主要是記錄自己的學習過程, 編寫中遇到的困難以及解決, 以及一些學習/復習資料的整理分享. 也希望給各位和我一樣的初學者一點點借鑒的經(jīng)驗.
(個人感覺比較好的學習方式就是自己看資料(文檔和博客)然后寫自己的一個小應(yīng)用, 而不是跟著某一個教程從頭到尾過一遍, 雖然不得不承認, 后者學起來的感覺很爽, 而且也更清晰. 但是不好的地方就是技術(shù)棧不完全匹配的時候就會很頭疼...)
下面是目錄:

前端 (包括react, redux, css-module等)

后端 (包括express, mongodb)

前后端 (包括fetch, jwt)

其他 (包括webpack, 優(yōu)化等)

下面直接進入正題.

react的學習根據(jù)官方文檔, 主要是理解一下幾個方面的內(nèi)容:

構(gòu)建模塊的方法. 用了推薦es6的class的方法而非createClass.

如何導入導出模塊. es6的import和export.

jsx的編寫. 不是必要的, 官網(wǎng)推薦. 感覺其中用上es6模板字符串, map方法會很方便很多~

props, state, refs的相關(guān)概念以及使用. 單向數(shù)據(jù)流中, 父組件給子組件傳遞數(shù)據(jù)通過props, 子組件給父組件傳遞數(shù)據(jù)用回調(diào)函數(shù). 后者的實現(xiàn)是通過父組件把一個函數(shù)傳到子組件中, 這個函數(shù)里面有可以有this.setState(收到子組件的數(shù)據(jù)后立刻渲染), 然后子組件調(diào)用傳進來的函數(shù), 通過這個函數(shù)把參數(shù)傳給父組件.

掌握connect組件的使用方法. 把state數(shù)據(jù)和dispatch傳進組件中.

生命周期. 在這個博客SPA應(yīng)用里用了componentDidMount和componentWillReceiveProps, 前者可用于初始化的渲染以及異步請求的發(fā)起, 后者用于接收到新的數(shù)據(jù)時的再次渲染, 把異步的結(jié)果渲染出來. 因此一個組件(涉及到異步)是這樣工作的: 調(diào)用組件 -> 組件渲染之前發(fā)起異步請求 -> 第一次渲染,沒有數(shù)據(jù)的頁面 -> 接收到異步發(fā)回來的數(shù)據(jù) -> 重新渲染, 有數(shù)據(jù)的頁面. 代碼如下, 基本也是按照這種數(shù)據(jù)流向的方法來的(不知道是不是最好的方案, 但是感覺很方便).

class Archive extends React.Component {
    constructor(props) {
    super(props);
    this.displayName = "Archive";
    this.state = {
      articles: []
    }
  }

  componentDidMount() {
    this.props.actions.getTitles({
      type: "ARCHIVE"
    })
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      articles: nextProps.getTitles.articles
    })
  }

  render() { 
    return (
      

        {/*這里是相關(guān)的渲染articles的操作, 注意要把[]的情況也考慮到*/}
      
    )
}

}

export default Archive

配合好setState和生命周期, 運用好父子組件之間的數(shù)據(jù)傳遞能夠很好地完成各種異步渲染.

理解redux主要是要理解action, reducer, middleware等概念. 個人感覺redux的官方文檔簡直精彩, 例子也很豐富, 非常值得學習. 這個SPA博客里的action大部分是為了ajax獲取后端數(shù)據(jù)服務(wù)的. 下面選取了其中的一組, 功能是獲取多帶帶的文章. 對應(yīng)不同相應(yīng)狀態(tài)有不同的action. 這樣就可以把異步的每一個狀態(tài)記錄下來, 使得數(shù)據(jù)的流向更加清晰. 具體有關(guān)異步請求的相關(guān)的內(nèi)容可以看我的上一篇文章.

export const singleRequest = () => {
  return {
    type: SINGLE_REQUEST
  }
}

export const singleSuccess = (article) => {
  return {
    type: SINGLE_SUCCESS,
    article: article
  }
}

export const singleFailure = () => {
  return {
    type: SINGLE_FAILURE
  }
}

export const getSingle = (day, title) => {
  return dispatch => {
    dispatch(singleRequest())
    return fetch("/api/single", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json" 
      },
      body: JSON.stringify({
        day: day,
        title: title
      })
    })
    .then(checkHttpStatus)
    .then(res => res.json())
    .then(res => {
      if(res.ok) {
        dispatch(singleSuccess(res.article))
      } else {
        dispatch(singleFailure())
      }
    })
  }
}

至于在reducer中, 初始化state用了幾個標識. 比如下面的例子中, 初始化的reducer state 包含了isFetching, isFetched, fetchFailure這些標志異步進行的當前狀態(tài)的信息. 傳入props之后可以很方便地進行異步請求先后的設(shè)置. 比方說一個異步要在另一個異步之后, 就可以通過讀取這幾個數(shù)值完成. (第二個異步一定要在第一個的isFetched為true的時候才能發(fā)起)

const initialState = {
  isFetching: false,
  isFetched: false,
  fetchFailure: false,
  articles: [],
  count: 1
}

在整個應(yīng)用中需要用到中間件, 在應(yīng)用中用了thunk還有logger.

在博客應(yīng)用中css的引入用的是css-modules, 阮一峰大神的這篇文章講得算是完整了, 感興趣可以看一下~ 當然有些部分也還是用了css in js的方法, 直接把css寫到js里面, 主要是考慮到一些操作的方便, 比如點擊之后某一個標簽display改變之類的.

說來慚愧, 后端大部分都是"抄"的, 之前看的一個教程是用express和ejs寫的博客應(yīng)用, 而后端的操作大部分都比較接近. 主要就是根據(jù)接口路由處理數(shù)據(jù), 發(fā)送數(shù)據(jù), 通過數(shù)據(jù)庫api(這里是mongodb)讀取數(shù)據(jù)庫數(shù)據(jù). 所以最后寫出來的和我原本看的那個教程有很大的相似之處. 我看的教程是這一個, 非常棒, 感謝作者!!>o 1, express (nodejs)

關(guān)于express個人感覺比較重要的是處理配置以及路由兩個方面的問題.
前者需要靠自己慢慢摸索, 比如要處理json需要用到bodyParser模塊, webpack一些中間件的配置等等, 可以拿redux官網(wǎng)還有上面提到的教程來參考一下.
后者主要是要了解express提供的各種方法, 以及一些有關(guān)res和req的相關(guān)操作等等.

有關(guān)數(shù)據(jù)庫的操作我也是參考上面的教程的...(oh..)基本對數(shù)據(jù)庫的增刪查改要掌握. 更多有關(guān)mongo的api原理等可以去看官網(wǎng)介紹.

由于目標不是專業(yè)后端, 所以后端做得比較粗糙. 不足之處有很多, 比如沒有擁抱es6(明明前端已經(jīng)擁抱), 比如還在若無其事地寫著臭名昭著的回調(diào)金字塔等等等. nodejs需要加強.

有關(guān)登錄和登出開始找了很多相關(guān)的實現(xiàn)方法, 在這篇文章的推薦下看了JWT實現(xiàn)方式. 簡單來說就是前端把密碼post到后端, 后端生成一個token然后發(fā)送到前端去. 前端把收到的token保存在localStorage中. 每次需要獲取一些保密的信息或者需要做一些修改的時候, 把這個token寫在請求的headers里. 后端收到數(shù)據(jù)之后就會先驗證一下token是否正確, 正確才允許操作.

headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "Authorization": `Bearer ${token}`
      }

關(guān)于前后端交互這一點可以參考我寫的上一篇文章. 后端把api暴露出來給前端, 前端通過ajax進行數(shù)據(jù)的交互, 并把獲取到的數(shù)據(jù)渲染出來. 操作上沒有難度, 只是要注意異步操作中redux要用中間件.
有關(guān)中間件還要去看點高階函數(shù)的基礎(chǔ)知識, 不然無法正確理解.

沒有怎么認真地看webpack的東西, 都是順手操起來直接用的...
說實話, 第一次開始看chrome的devtool的network的時候, 我被嚇得不輕...一個bundle文件5m大, PC端打開之后真的是不忍直視. 后來上網(wǎng)找了一些webpack打包優(yōu)化的方向, 在這里記錄一下:

webpack的config文件里面不能有cheap-module-eval-source-map之類的devtool, 真的很大很大...

plugin如果不是必要的話也請刪去吧. 不過有兩個plugin可以在生產(chǎn)環(huán)境中用一下, 第一個是UglifyJsPlugin, 用于壓縮文件. 第二個是CommonsChunkPlugin, 這個具體下一點解釋.

適當分塊. CommonsChunkPlugin用于把bundle分塊, 把可以放在緩存的, 常用的, 體積比較大的壓縮到vendor里面(比如react等). 后來又把babel-polyfill分開另外加載了. 之前有看到code split, 就是直到需要用到該ui組件的時候才去加載, 想法好像不錯, 不過感覺改動會比較大所以最后沒有做.

最后的文件大小其實也還是不小, 但是有了很好的改善. 關(guān)于前端優(yōu)化也是一個重要的話題.

博客應(yīng)用寫作用的是markdown. 原本想找一個現(xiàn)成的, 但是死活找不到合適的...最后直接用marked強行偽裝markdown編輯器...其實這很不安全, 但目前也沒有什么辦法...(draft.js貌似可以?)

總體來說, 這個博客其實實現(xiàn)起來沒有特別高的難度, 但是對于初學者來說感覺真的挺不容易的. 之前聽過這樣一句話--不要同時學幾樣東西, 其實還真的有點道理...但是對于一些最佳實踐, 本身就要結(jié)合在一起才能發(fā)揮其最大的作用, 不一起學又怎么能行呢?(因此就陷入了大坑).
這個博客不完善的地方太多了, 特別是有關(guān)安全方面的問題.不過現(xiàn)在還是先關(guān)注著前端吧.

希望這篇文章能夠給你一點點幫助.
最后上代碼博客代碼

(本人是初學者, 如果有什么說得不對, 不好的地方歡迎指出來, 感激不盡!~互相學習!~)