laravel整合umijs踩坑之旅

PHP
Word count: 819   |   Reading time≈ 4 min

Laravel:The PHP Framework for Web Artisans
UmiJS：可插拔的企业级 react 应用框架。

　　身为一个PHP的小学生，在一次学习Laravel-admin的过程中发现了一款非常优雅的插件(B2C商城扩展)中将两者完美的结合在一起。所以，我把他下载了下来进行学习。就有了这篇踩坑之旅

安装antd-admin

　　虽然说的是Umi.js，但是如果我们去官网去看，就会发现跟我们插件所使用的根本不一样。
　　我们真正使用的是[antd-admin] 这个umi框架。

安装流程：
install-umi

在Laravel中配置umi

在Laravel 中新建一个控制器

1
2
3
4
5
6
7
8
9
10
11
12
<?php
    namespace App\Admin\Controllers;
  
    use App\Http\Controllers\Controller;
    class ViewController extends Controller
    {
  
        public function umi()
        {
            return view('view/umi');
        }
    }

视图模板文件中写入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
class Helper {
    public static function myUmi($path)
    {
        //如果没有配置umi 则走本地的umi
        if (env('UMI', false)) {
            //8000端口是我们本地 umi 的端口号
            return '//localhost:8000/' . $path;
        } else {
            return \Illuminate\Support\Str::finish(asset('vendor/umi/'), '/') . $path;
        }
    }
}
  ?>

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <link rel="manifest" href="{{Helper::myUmi('manifest.json')}}">
      <link rel="stylesheet" href="{{Helper::myUmi('umi.css')}}">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
      <title>{{config('store.title')}}</title>
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <link rel="icon" href="{{Helper::myUmi('favicon.png')}}" type="image/x-icon">
      <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
      <script>
        window.routerBase = "/";
        window.publicPath = "{{Helper::myUmi('')}}";
        window.store = {
          title: "{{config('store.title')}}",
          token: "{{ csrf_token() }}"
        }
      </script>
      <script async src="{{Helper::myUmi('pwacompat.min.js')}}"></script>
  </head>
  <body>
  <noscript>Sorry, we need js to run correctly!</noscript>
  <div id="root"></div>
  <script src="{{Helper::myUmi('umi.js')}}"></script>
  </body>
  </html>

修改 umi 的 package.json 文件

　　经过以上两步，当我们访问到 http://domain.com/View/um 时可以看到 umi 的页面了。
　　但是，页面会一直提示 Disconnect 不断刷新重连。

解决方法：修改 antd-admin 的 package.json 中的以下信息。

1
2
"start": "cross-env APP_TYPE=site PORT=8000 SOCKET_SERVER=none umi dev",
"start:no-mock": "cross-env MOCK=none PORT=8000 SOCKET_SERVER=none umi dev",

参考文档https://blog.csdn.net/violetjack0808/article/details/86577776;

修改 antd-admin 的 request 方法

将 antd-amin/src/utils/request.ts 做如下修改

1
2
3
4
5
6
7
8
9
10
11
const request = extend({
  //前缀
  //可以进行接口的版本控制
  prefix: '/api/v1/',
  //设置header头
  headers: {
    'X-CSRF-TOKEN': window.store.token,
  },
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});

修改 ant-admin 的登录验证

在 Laravel 中增加一个获取当前用户的接口/路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/**
* Created by PhpStorm.
* User: 张大猛子呦 <hetaoov@gmail.com>
* Date: 2019/12/5
* Time: 9:05 下午
*/

namespace App\Admin\Controllers\api\v1;

use App\Http\Controllers\Controller;

class AuthController extends Controller
{
  //用户登录
  public function currentUser(){
      $user = \Admin::user();
      return $user;
  }
 }
 
?>

antd-admin/src/layouts/SecurityLayout.tsx 做如下修改

1
2
3
4
5
render() {
   //...code
   const isLogin = currentUser && currentUser.id;
   //...code
}

完成

　　打开我们一开始 /view/umi 路由就可以看到 umi 的欢迎页面了
laravel-umi.jpg

  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

请我喝杯咖啡吧~