【React 實戰教程】從0到1 構建 github star管理工具

時間 2019-11-08

標籤 React 實戰教程構建 github star 管理工具欄目 Git 简体版

原文原文鏈接

前言

在平常使用github中，除了利用git進行項目版本控制以外，最多的用處就是遊覽各式的項目，在看到一些有趣或者有用的項目以後，咱們一般就會順手star，目的是往後再看。可是當咱們star了許多項目以後，回過頭想找一個的項目就會發現，很難在短期內找到它，官方也並無提供很好的管理咱們的star項目的功能，所以在市面上也出現了一些對star進行管理的工具，好比說 astralapp，Star Order等等，其實github的接口api都是開放的，咱們徹底能夠本身構建一個屬於本身的項目管理工具。公司的前端技術棧是React，而筆者以前使用的是Vue，所以正好想利用github的open api 本身構建個react的github star管理項目來加深react的使用。而大致功能咱們就模仿astralapp。css

github open api

官方文檔有v3和v4，2個版本，v3是Restful，v4是GraphQL，在這裏咱們使用的是v3版html

v3

使用的是restful 協議前端

服務器地址vue

https://api.github.com

在無token狀況下使用github的api，每分鐘限制是60次請求，考慮到想完整的使用github的api，所以選擇構建一個web application，受權OAuth應用程序的流程能夠參照官方文檔。在這裏，就簡單的說一下這個流程。node

受權OAuth2.0 的流程

github OAuth的受權模式爲受權碼模式，對OAuth不瞭解的同窗能夠具體看阮一峯老師的理解OAuth 2.0react

要作的流程主要分爲3步webpack

獲取code
經過code獲取token
在請求時攜帶token

獲取code

首先須要跳轉到這個地址git

https://github.com/login/oauth/authorize

須要有如下參數github

參數名	類型	描述
client_id	string	必選 client_id是在註冊github application後能夠看到
redirect_uri	string	可選受權成功後跳轉的地址，這裏的這個跳轉地址也能夠在後臺進行設置
scope	string	可選權限範圍，具體的權限能夠參照，具體傳值格式以及須要哪些範圍能夠參照官方文檔
allow_signup	string	可選是否容許爲註冊的用戶註冊，默認爲true

跳轉至目標地址後，會有個受權界面，當用戶點擊受權以後會從新跳轉到咱們本身設定的redirect_uri並攜帶一個code，就像這樣web

<redirect_url>?code=1928596028123

經過code獲取token

在獲取code以後，請求用於獲取token

POST https://github.com/login/oauth/access_token

參數名	類型	描述
client_id	string	必填 client_id是在註冊github application後能夠看到必填
client_secret	string	必填該參數是在同`client_id`同樣，也是在註冊`application`後能夠看到
code	string	必填經過第一步獲取
redirect_uri	string	可選
state	string	可選隨機數

token的默認返回格式爲字符串

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer

能夠經過更改頭部接受格式進行返回格式變動

Accept: application/json
{"access_token":"e72e16c7e42f292c6912e7710c838347ae178b4a", "scope":"repo,gist", "token_type":"bearer"}

Accept: application/xml
<OAuth>
  <token_type>bearer</token_type>
  <scope>repo,gist</scope>
  <access_token>e72e16c7e42f292c6912e7710c838347ae178b4a</access_token>
</OAuth>

在請求時攜帶token

攜帶token有2種方式一種是永遠跟在url的後面做爲params

GET https://api.github.com/user?access_token=...

另一種是放在請求頭中

Authorization: token 獲取到的token

接口請求

在項目裏運用到的github 接口目前有三個

用戶信息接口
當前用戶star的項目
獲取項目Readme接口

須要注意的是這些接口因爲服務端實現了CORS，所以是不存在跨域問題，可是，考慮到自己這個項目的功能狀況，以後咱們會本身創建服務端進行請求。

用戶信息接口

GET https://api.github.com/user

當前用戶star的項目

GET https://api.github.com/user/starred

可選的請求參數

參數名	類型	描述
page	string
sort	string	排序條件有2種`created` `updated`，默認爲`created`
direction	string	升序仍是倒序 `asc` `desc`，默認爲``desc

獲取倉庫Readme接口

GET https://api.github.com/repos/:username/:repo/readme

針對一些文件接口，github提供了頭部類型的選擇，能夠返回不一樣的文件類型，好比raw等，具體能夠參考官方文檔中的Custom media types

在這裏咱們須要的是html格式，所以咱們在頭部當中設置

"Accept": "application/vnd.github.v3.html"

這樣ReadMe返回的是html代碼，咱們根據html代碼直接顯示便可。

目錄結構

├── config  // webpack相關文件
├── public  // 公用文件
├── scripts // 腳本文件 build,start,test文件都在裏面
├── src
    ├── assets  // 本身放置的資源文件
    ├── components  // 公用組件
    ├── pages   // 頁面文件
    ├── utils   // 公用方法文
    App.css
    App.scss
    App.jsx
    index.css
    index.js
    logo.svg    
    reset.css   // 重置樣式
    variable.css
    variable.scss   // 公用變量文件
├── package.json
├── .editorconfig   // 編輯器配置
├── .gitignore // git 忽略文件

構建

create-react-app

構建React項目首先第一個想到的是用腳手架工具，Vue當中有Vue-cli，自帶webpack，vue-router，vuex，而React對應的是create-react-app

當咱們初始化完成項目以後，咱們會發現webpack的配置文件找不到，咱們須要運行如下命令將wepack配置顯示出來

npm run eject

scss

這個方法參照的是create-react-app中的說明adding-a-css-preprocessor-sass-less-etc

npm install --save node-sass-chokidar

還須要裝 webpack watch

"scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

npm install --save npm-run-all

"scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

安裝好這些包以後，新建一個scss文件會自動生成css文件，咱們在引用時直接引用css文件便可。

另一種方法是參照medium的一篇文章CSS Modules & Sass in Create React App。

npm i sass-loader node-sass --save or yarn add sass-loader node-sass

隨後更改webpack.config.dev.js文件的配置

須要注意的是loaders用use代替，隨後在file-loader增長scss文件格式的匹配

跨域問題

跨域問題可使用webpack自帶的proxy進行配置，或者經過ngix進行代理

若是是webpack配置須要在package.json當中進行配置

"proxy": {
    "/user": {
      "target": "https://api.github.com",
      "changeOrigin": true
    },
    "/user/star": {
      "target": "https://api.github.com",
      "changeOrigin": true
    },
    "/login": {
      "target": "https://github.com",
      "changeOrigin": true
    }
}

svg

目前使用了svg-react-loader

/* eslint-disable */
 // 主要是這裏 eslint會報錯
import Refresh from '-!svg-react-loader!../../assets/img/refresh.svg';
/* eslint-enable */

class StarFilter extends Component {
  constructor(props) {
    super(props);
require.resolve('svg-react-loader');
    this.state = {
    };
  }

  componentDidMount() {
  }

  render() {
    return (
      <div className="star-filter">
        <div className="title-container">
          <h3 class="title-gray-dark">STARS</h3>
          <!--這樣就可使用了-->
          <Refresh className="icon-refresh text-grey" />
        </div>
      </div>
    );
  }
}

export default StarFilter;

顏色

改變顏色要使用fill屬性

.icon-refresh {
  width: 20px;
  height: 20px;
  fill: #606f7b;
}

注意

圖片中自帶的p-id元素在react中會自動變成pId，隨後會被react輸出警告日誌，建議把pid 屬性刪除，這個屬性不影響顯示
咱們常常在iconfont上下載svg圖片，可是有些svg圖片內部默認設置了顏色，若是要讓咱們樣式當中的顏色起做用，建議在下載完svg後，檢查下默認的fill屬性是否存在，若是有請先刪除

引用本地圖片

import NoSelectedImg from '../../assets/img/not-selected.svg';

class ResInfo extends Component {
 // ..此處省略
  render() {
    <img
      alt="no-selected"
      src={NoSelectedImg}
      className="img-no-selected"
    />

  }
}

export default ResInfo;

第二種方法是用require

<img src={require('../../assets/img/status-spinner.svg')} alt="fetch" width="16" height="16"/>

須要注意的是若是是要在img標籤中使用svg圖片，還須要在webpack當中進行配置，在webpack.config.dev.js和webpack.config.prod.js當中大體在133行左右的urlLoader增長svg文件的匹配

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
    loader: require.resolve('url-loader'),
    options: {
    limit: 10000,
    name: 'static/media/[name].[hash:8].[ext]',
}

路由

使用react-router-dom進行路由的管理，和Vue-router同樣，須要對要用到的路由級別組件進行註冊。直接將組件寫在router內部便可。

render() {
    return (
      <div className="App">
        <BrowserRouter basename="/">
          <div>
            <Route exact path="/" component={Auth} />
            <Route path="/auth" component={Auth} />
            <Route path="/star" component={Star} />
          </div>
        </BrowserRouter>
      </div>
    )
  }

Router中有BrowserRouter,HashRouter等，而這2種相似於Vue-router中的history和hash模式，須要注意的是，在咱們這個項目當中必須使用BrowserRouter，若是使用HashRouter在github 受權重定向回咱們頁面時會出現問題。會出現code不在尾部的問題。

import { Redirect } from 'react-router-dom'

class Auth extends Component {

 //省略...

  render() {
    // 若是isTokenError爲true直接跳轉至首頁
    if (this.state.isTokenError) {
      return (
        <Redirect to="/"/>
      )
    }
    // 若是hasCode有值則跳轉至star
    if (this.state.hasCode) {
      return (
        <Redirect to="/star" />
      )
    }
    return (
      <div className="Auth">
        <Button className="btn-auth" onClick={this.onClickAuth}>
          點擊受權
        </Button>
      </div>
    )
  }
}

export default Auth

同時它也支持api的跳轉，當組件放置在router中，組件props內置會有一個histroy屬性，即this.props.history，使用它就能夠實現push,replace等跳轉了功能了。

/**
   * 返回首頁
   */
  go2home() {
    this.props.history.replace('/auth');
  }

  /**
   * 前往star界面
   */
  go2star() {
    this.props.history.push('/star');
  }

總結

咱們大體瞭解了項目的概況，在開發項目的過程中，官方文檔是十分重要的，包括githubApi的使用，SCSS的使用，跨域問題等等，都能從官方文檔當中獲得解答。同時github提供的api也是十分豐富的，基本囊括了全部github的基礎功能，在上述文章當中只是展現了它極少的功能，更多的功能你們能夠本身來發掘。在接下來的文章當中，會爲你們帶來服務端開發篇，使用node進行服務端，數據庫的一些操做。項目地址能夠點我，項目還在初期開發中，就不要來star了=.=。