React全家桶專案

xuya227939發表於2019-03-04
React

開篇

利用業餘時間，做了個React專案，算是成品吧，比較簡單，還有很多瑕疵。目錄結構相當簡單。沒有資料庫，你們執行不起來。想執行起來的話，把express呼叫資料庫的部分全刪掉，寫死資料。

ak47

這個整合了React全家桶，可以直接執行，也可以直接在生產環境使用。
github.com/xuya227939/…

原始碼

github.com/bbww/sight.…

預覽地址

最好用谷歌遊覽器進行體驗，其他遊覽器沒測。
downfuture.com

技術棧

react + redux + saga + router + es6 + node.js + webpack + mysql

功能

  • 簡單的登入、註冊、修改密碼
  • 使用者可以點贊和收藏
  • 個人中心可以上傳頭像和圖片(圖片最多上傳三張)，暫時未壓縮。
  • 個人中心可以修改密碼和登出

目錄結構

React全家桶專案

常用方法

fetch

封裝了fetch請求，統一報錯。

function request({ method, options, callback }) {
  options.mode = "cors";
  if(!options.sign) {
    options.headers = {
      `Content-Type`: `application/json`
    };
    if(!(options.method === `GET` || options.method === `DELETE`)) {
      options.body = JSON.stringify(options.body);
    }
  }
  options.credentials = `include`;
  return fetch(getApi + method, options )
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => {
      return data;
    }).catch((err) => {
      message.config({
        top: 24,
        duration: 1,
        maxCount: 3,
      });
      message.error(`傳送fetch失敗` + JSON.stringify(err) + `,方法名：` + method);
    });
複製程式碼

介面符合restFul設計

React全家桶專案

util.js

工具類js

router.js

所有的路由配置都在這個js中

結語

建站步驟，在我的blog中分享出來了。歡迎一起討論，只介紹實現，不闡述相關程式碼的含義。
github.com/xuya227939/…

相關文章