React + Laravel Debugbar
5

一、Debugbar 安装与配置

1、使用 Composer 安装该扩展包:

composer require barryvdh/laravel-debugbar --dev

2、接下来运行以下命令生成此扩展包的配置文件 config/debugbar.php :

php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

3、打开 config/debugbar.php 文件,修改如下配置:

return [
    ...
    'capture_ajax' => false,
    'inject' => false,
    ...
],

4、打开 app/Providers/RouteServiceProvider.php 文件,在 boot 方法里添加一条渲染路由

public function boot()
{
    if ($this->app->environment('local')) {
        Route::group(['prefix' => config('debugbar.route_prefix')], function () {
            Route::get('render', function () {
                $debugBar = debugbar();
                $renderer = $debugBar->getJavascriptRenderer();
                $renderer->setOpenHandlerUrl('/' . config('debugbar.route_prefix') . '/open');
                $script = $renderer->render();
                preg_match('/(?:<script[^>]*>)(.*)<\/script>/isU', $script, $matches);

                $js = $matches[1];

                $jsRetryFn = "function retry(times, fn, sleep) {
                                 if (!times) times = 1;
                                 if (!sleep) sleep = 50;
                                 --times;
                                 try {
                                     return fn();
                                 } catch (e) {
                                     if (!times) throw e;
                                     if (sleep) {
                                         setTimeout(function() {
                                             retry(times, fn, sleep);
                                         }, sleep);
                                     }
                                 }
                              }\n";

                // sleep(1);
                echo "${jsRetryFn}\nretry(50, function() {\n${js}\nwindow.phpdebugbar = phpdebugbar\n}, 200);";
                exit;
            });
        });
    }

    parent::boot();
}

5、打开 app/Providers/AppServiceProvider.php 文件,在 boot 方法里添加如下代码:

public function boot()
{
    if (app()->environment('local') && request()->isJson()) {
        $debugbar = debugbar();
        $debugbar->sendDataInHeaders(true);
    }
}

二、react 配置

1、安装 react-helmet 扩展包

npm i -S react-helmet

2、载入 js 和 css 文件,并且渲染debugbar

import { Helmet } from 'react-helmet';

const cssMap = [];
const jsMap = [];
if (process.env.NODE_ENV !== 'production') {
  cssMap.unshift('/_debugbar/assets/stylesheets');
  jsMap.unshift('/_debugbar/assets/javascript', '/_debugbar/render');
}

ReactDOM.render(
    <Helmet>
        {cssMap && cssMap.map((_, k) => <link rel="stylesheet" href={_} key={String(k)} />)}
        {jsMap && jsMap.map((_, k) => <script type="text/javascript" src={_} key={String(k)} />)}
    </Helmet>
)

3、api 请求自动刷新debugbar渲染

import fetch from 'dva/fetch';
import { notification } from 'antd';
import { routerRedux } from 'dva/router';
import cookie from 'cookie';
import store from '../index';

const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队(异步任务)。',
  204: '删除数据成功。',
  400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限(令牌、用户名、密码错误)。',
  403: '用户得到授权,但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除,且不会再得到的。',
  422: '当创建一个对象时,发生一个验证错误。',
  500: '服务器发生错误,请检查服务器。',
  502: '网关错误。',
  503: '服务不可用,服务器暂时过载或维护。',
  504: '网关超时。',
};

async function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const { dispatch } = store;
  const { status } = response;

  if (status === 401) {
    dispatch({ type: 'login/logout' });
  } else if (status === 403) {
    dispatch(routerRedux.push('/exception/403'));
  } else if (status === 404) {
    dispatch(routerRedux.push('/exception/404'));
  } else if (status >= 500 && status <= 504) {
    dispatch(routerRedux.push('/exception/500'));
  } else if (status >= 404 && status < 422) {
    //
  }

  const errorText = codeMessage[response.status] || response.statusText;
  const { message: msg } = await response.json();

  notification.error({
    message: `请求错误 ${response.status}: ${response.url}`,
    description: msg || errorText,
  });

  const error = new Error(msg || errorText);
  error.name = response.status;
  error.response = response;
  throw error;
}

export default async function request(url, options) {
  const defaultOptions = {
    method: 'GET',
    credentials: 'include',
    headers: {
      Accept: 'application/x.einsition.v1+json',
      'Content-Type': 'application/json; charset=utf-8',
      'X-XSRF-TOKEN': cookie.parse(document.cookie)['XSRF-TOKEN'],
    },
  };
  const newOptions = { ...defaultOptions, ...options };

  if (['POST', 'PUT', 'PATCH'].includes(newOptions.method.toUpperCase())) {
    if (!(newOptions.body instanceof FormData)) {
      newOptions.body = JSON.stringify(newOptions.body);
    }
  }

  const response = await fetch(url, newOptions);

  /* eslint-disable */
  if (typeof phpdebugbar !== undefined) {
    try {
      const {
        ajaxHandler: { headerName },
      } = phpdebugbar;
      const debugBarData = response.headers.get(headerName);
      const debugBarId = response.headers.get(`${headerName}-id`);
      if (debugBarData) {
        const { id, data } = JSON.parse(decodeURIComponent(debugBarData));
        phpdebugbar.addDataSet(data, id);
      } else if (debugBarId && phpdebugbar.openHandler) {
        phpdebugbar.loadDataSet(debugBarId, '(ajax)');
      }
    } catch (e) {}
  }
  /* eslint-enable */

  await checkStatus(response);
  return response.json();
}

file

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 1

多谢分享

1周前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!