资讯专栏INFORMATION COLUMN

【React 实战教程】从0到1 构建 github star管理工具

Charlie_Jade / 1707人阅读

摘要:公司的前端技术栈是,而笔者之前使用的是,因此正好想利用的自己构建个的管理项目来加深的使用。会出现不在尾部的问题。

前言

在日常使用github中,除了利用git进行项目版本控制之外,最多的用处就是游览各式的项目,在看到一些有趣或者有用的项目之后,我们通常就会顺手star,目的是日后再看。但是当我们star了许多项目之后,回过头想找一个的项目就会发现,很难在短时间内找到它,官方也并没有提供很好的管理我们的star项目的功能,因此在市面上也出现了一些对star进行管理的工具,比如说 astralapp,Star Order等等,其实github的接口api都是开放的,我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React,而笔者之前使用的是Vue,因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。

github open api

官方文档有v3和v4,2个版本,v3是Restful,v4是GraphQL,在这里我们使用的是v3版

v3

使用的是restful 协议

服务器地址

https://api.github.com

在无token情况下使用github的api,每分钟限制是60次请求,考虑到想完整的使用github的api,因此选择构建一个web application,授权OAuth应用程序的流程可以参照官方文档。在这里,就简单的说一下这个流程。

授权OAuth2.0 的流程

github OAuth的授权模式为授权码模式,对OAuth不了解的同学可以具体看阮一峰老师的理解OAuth 2.0

要做的流程主要分为3步

获取code

通过code获取token

在请求时携带token

获取code

首先需要跳转到这个地址

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

需要有以下参数

参数名 类型 描述
client_id string 必选 client_id是在注册github application后可以看到
redirect_uri string 可选 授权成功后跳转的地址,这里的这个跳转地址也可以在后台进行设置
scope string 可选 权限范围,具体的权限可以参照,具体传值格式以及需要哪些范围可以参照官方文档
allow_signup string 可选 是否允许为注册的用户注册,默认为true

跳转至目标地址后,会有个授权界面,当用户点击授权之后会重新跳转到我们自己设定的redirect_uri并携带一个code,就像这样

?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

  bearer
  repo,gist
  e72e16c7e42f292c6912e7710c838347ae178b4a
在请求时携带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文件的配置

需要注意的是loadersuse代替,随后在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 (
      

STARS

); } } 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() {
    

  }
}

export default ResInfo;

第二种方法是用require


需要注意的是如果是要在img标签中使用svg图片,还需要在webpack当中进行配置,在webpack.config.dev.jswebpack.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 (
      
) }

Router中有BrowserRouter,HashRouter等,而这2种类似于Vue-router中的historyhash模式,需要注意的是,在我们这个项目当中必须使用BrowserRouter,如果使用HashRouter在github 授权重定向回我们页面时会出现问题。会出现code不在尾部的问题。

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

class Auth extends Component {

 //省略...

  render() {
    // 如果isTokenError为true直接跳转至首页
    if (this.state.isTokenError) {
      return (
        
      )
    }
    // 如果hasCode有值则跳转至star
    if (this.state.hasCode) {
      return (
        
      )
    }
    return (
      
) } } 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了=.=。

参考

create-react-app

github open api接口文档

REACT TRAINING / REACT ROUTER

在create-react-app创建的应用中配置Sass

广而告之

本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。

欢迎讨论,点个赞再走吧 。◕‿◕。 ~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97766.html

相关文章

  • 【抢先领】《React 学习之道》我们翻译了一本最简单,且最实用的 React 实战教程……

    摘要:学习之道简体中文版通往实战大师之旅掌握最简单,且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授,并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。 《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程。 showIm...

    oneasp 评论0 收藏0
  • 优秀文章收藏(慢慢消化)持续更新~

    摘要:整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次,彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0
  • AI开发书籍分享

    摘要:编程书籍的整理和收集最近一直在学习深度学习和机器学习的东西,发现深入地去学习就需要不断的去提高自己算法和高数的能力然后也找了很多的书和文章,随着不断的学习,也整理了下自己的学习笔记准备分享出来给大家后续的文章和总结会继续分享,先分享一部分的 编程书籍的整理和收集 最近一直在学习deep learning深度学习和机器学习的东西,发现深入地去学习就需要不断的去提高自己算法和高数的能力然后...

    huayeluoliuhen 评论0 收藏0

发表评论

0条评论

Charlie_Jade

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<