摘要：公司的前端技術(shù)棧是，而筆者之前使用的是，因此正好想利用的自己構(gòu)建個(gè)的管理項(xiàng)目來加深的使用。會(huì)出現(xiàn)不在尾部的問題。

在日常使用github中，除了利用git進(jìn)行項(xiàng)目版本控制之外，最多的用處就是游覽各式的項(xiàng)目，在看到一些有趣或者有用的項(xiàng)目之后，我們通常就會(huì)順手star，目的是日后再看。但是當(dāng)我們star了許多項(xiàng)目之后，回過頭想找一個(gè)的項(xiàng)目就會(huì)發(fā)現(xiàn)，很難在短時(shí)間內(nèi)找到它，官方也并沒有提供很好的管理我們的star項(xiàng)目的功能，因此在市面上也出現(xiàn)了一些對(duì)star進(jìn)行管理的工具，比如說 astralapp，Star Order等等，其實(shí)github的接口api都是開放的，我們完全可以自己構(gòu)建一個(gè)屬于自己的項(xiàng)目管理工具。公司的前端技術(shù)棧是React，而筆者之前使用的是Vue，因此正好想利用github的open api 自己構(gòu)建個(gè)react的github star管理項(xiàng)目來加深react的使用。而大體功能我們就模仿astralapp。

官方文檔有v3和v4，2個(gè)版本，v3是Restful，v4是GraphQL，在這里我們使用的是v3版

使用的是restful 協(xié)議

服務(wù)器地址

https://api.github.com

在無token情況下使用github的api，每分鐘限制是60次請(qǐng)求，考慮到想完整的使用github的api，因此選擇構(gòu)建一個(gè)web application，授權(quán)OAuth應(yīng)用程序的流程可以參照官方文檔。在這里，就簡(jiǎn)單的說一下這個(gè)流程。

github OAuth的授權(quán)模式為授權(quán)碼模式，對(duì)OAuth不了解的同學(xué)可以具體看阮一峰老師的理解OAuth 2.0

要做的流程主要分為3步

獲取code

通過code獲取token

在請(qǐng)求時(shí)攜帶token

首先需要跳轉(zhuǎn)到這個(gè)地址

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

需要有以下參數(shù)

跳轉(zhuǎn)至目標(biāo)地址后，會(huì)有個(gè)授權(quán)界面，當(dāng)用戶點(diǎn)擊授權(quán)之后會(huì)重新跳轉(zhuǎn)到我們自己設(shè)定的redirect_uri并攜帶一個(gè)code，就像這樣

?code=1928596028123

在獲取code之后，請(qǐng)求用于獲取token

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

token的默認(rèn)返回格式為字符串

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer

可以通過更改頭部接受格式進(jìn)行返回格式變更

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

Accept: application/xml

  bearer
  repo,gist
  e72e16c7e42f292c6912e7710c838347ae178b4a

攜帶token有2種方式 一種是永遠(yuǎn)跟在url的后面作為params

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

另外一種是放在請(qǐng)求頭中

Authorization: token 獲取到的token

在項(xiàng)目里運(yùn)用到的github 接口 目前有三個(gè)

用戶信息接口

當(dāng)前用戶star的項(xiàng)目

獲取項(xiàng)目Readme接口

需要注意的是這些接口由于服務(wù)端實(shí)現(xiàn)了CORS，因此是不存在跨域問題，但是，考慮到本身這個(gè)項(xiàng)目的功能情況，之后我們會(huì)自己建立服務(wù)端進(jìn)行請(qǐng)求。

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

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

可選的請(qǐng)求參數(shù)

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

針對(duì)一些文件接口，github提供了頭部類型的選擇，可以返回不同的文件類型，比如raw等，具體可以參考官方文檔中的Custom media types

在這里我們需要的是html格式，因此 我們?cè)陬^部當(dāng)中設(shè)置

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

這樣ReadMe返回的是html代碼，我們根據(jù)html代碼直接顯示即可。

├── config  // webpack相關(guān)文件
├── 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 忽略文件

構(gòu)建React項(xiàng)目首先第一個(gè)想到的是用腳手架工具，Vue當(dāng)中有Vue-cli，自帶webpack，vue-router，vuex，而React對(duì)應(yīng)的是create-react-app

當(dāng)我們初始化完成項(xiàng)目之后，我們會(huì)發(fā)現(xiàn)webpack的配置文件找不到，我們需要運(yùn)行以下命令將wepack配置顯示出來

npm run eject

這個(gè)方法參照的是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"
   }

安裝好這些包之后，新建一個(gè)scss文件會(huì)自動(dòng)生成css文件，我們?cè)谝脮r(shí)直接引用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進(jìn)行配置，或者通過ngix進(jìn)行代理

如果是webpack配置需要在package.json當(dāng)中進(jìn)行配置

"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-react-loader

 /* eslint-disable */
 // 主要是這里 eslint會(huì)報(bào)錯(cuò)
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 (
      

        

          
STARS
          
          
        
      
    );
  }
}

export default StarFilter;

改變顏色要使用fill屬性

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

圖片中自帶的p-id元素在react中會(huì)自動(dòng)變成pId，隨后會(huì)被react輸出警告日志，建議把pid 屬性刪除，這個(gè)屬性不影響顯示

我們經(jīng)常在iconfont上下載svg圖片，但是有些svg圖片內(nèi)部默認(rèn)設(shè)置了顏色，如果要讓我們樣式當(dāng)中的顏色起作用，建議在下載完svg后，檢查下默認(rèn)的fill屬性是否存在，如果有請(qǐng)先刪除

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

class ResInfo extends Component {
 // ..此處省略
  render() {
    

  }
}

export default ResInfo;

第二種方法是用require

需要注意的是如果是要在img標(biāo)簽中使用svg圖片，還需要在webpack當(dāng)中進(jìn)行配置，在webpack.config.dev.js和webpack.config.prod.js當(dāng)中大致在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進(jìn)行路由的管理，和Vue-router一樣，需要對(duì)要用到的路由級(jí)別組件進(jìn)行注冊(cè)。直接將組件寫在router內(nèi)部即可。

render() {
    return (
      

        
          

            
            
            
          
        
      
    )
  }

Router中有BrowserRouter,HashRouter等，而這2種類似于Vue-router中的history和hash模式，需要注意的是，在我們這個(gè)項(xiàng)目當(dāng)中必須使用BrowserRouter，如果使用HashRouter在github 授權(quán)重定向回我們頁面時(shí)會(huì)出現(xiàn)問題。會(huì)出現(xiàn)code不在尾部的問題。

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

class Auth extends Component {

 //省略...

  render() {
    // 如果isTokenError為true直接跳轉(zhuǎn)至首頁
    if (this.state.isTokenError) {
      return (
        
      )
    }
    // 如果hasCode有值則跳轉(zhuǎn)至star
    if (this.state.hasCode) {
      return (
        
      )
    }
    return (
      

        
          點(diǎn)擊授權(quán)
        
      
    )
  }
}

export default Auth

同時(shí)它也支持api的跳轉(zhuǎn)，當(dāng)組件放置在router中，組件props內(nèi)置會(huì)有一個(gè)histroy屬性，即this.props.history，使用它就可以實(shí)現(xiàn)push,replace等跳轉(zhuǎn)了功能了。

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

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

我們大致了解了項(xiàng)目的概況，在開發(fā)項(xiàng)目的過程當(dāng)中，官方文檔是十分重要的，包括githubApi的使用，SCSS的使用，跨域問題等等，都能從官方文檔當(dāng)中得到解答。同時(shí)github提供的api也是十分豐富的，基本囊括了所有g(shù)ithub的基礎(chǔ)功能，在上述文章當(dāng)中只是展示了它極少的功能，更多的功能大家可以自己來發(fā)掘。在接下來的文章當(dāng)中，會(huì)為大家?guī)矸?wù)端開發(fā)篇，使用node進(jìn)行服務(wù)端，數(shù)據(jù)庫(kù)的一些操作。項(xiàng)目地址可以點(diǎn)我，項(xiàng)目還在初期開發(fā)中，就不要來star了=.=。

create-react-app

github open api接口文檔

REACT TRAINING / REACT ROUTER

在create-react-app創(chuàng)建的應(yīng)用中配置Sass

本文發(fā)布于薄荷前端周刊，歡迎Watch & Star ★，轉(zhuǎn)載請(qǐng)注明出處。