非你网

开始安装 ant design pro

流程参考

https://blog.vini123.com/359

关于路由这块，需要再说明一下。路由有 laravel 的路由，还有 ant design pro 的路由，以及 nginx 的 location 的。

既然后台访问的域名为 xxx/admin/ , 而接口也是 xxx/admin/，这个时候就需要针对该情况的 nginx 的配置。根据 nginx 的 location 的优先级以及正则等原则，可以配置nginx的匹配规则如下：

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

# 后台接口统一加了 api
    location ^~ /admin/api/ {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location /admin/  {
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }

# 编辑重启
sudo vim /etc/nginx/sites-available/admin.com
sudo nginx -s reload

ant design pro 相关

话说，要用就用最新的 V4（pro v4 以及 ant design v4），要用就用 TypeScript 。话说，还是得从零开始学一下 TypeScript。 那么之前做的部分工作，可以先暂停。

https://zhuanlan.zhihu.com/antdesign

https://www.zhihu.com/topic/20178853/hot

https://zhuanlan.zhihu.com/p/67498559

那么，我们把之前的 js 版本的 ant design pro 干掉。然后重启一个分支来做 typescript 版本的 ant design pro

# 先看看哪个提交时初始化创建 ant design pro
git log -n 6 --oneline

# 找到对应的 hash，回滚回去
git reset --hard xxxx

# 强提交
git push --force

# 开始新建分支
git checkout -b antdesign

# 所有的 ant design pro 相关的全在这个分支上干

npm create umi

# 选择 ant design pro， 选择 typescript ，y

npm install

# 再继续

git add .
git commit -m 'ant design pro v4 initialize'
git push --set-upstream origin antdesign

当使用 define 的方式定义全局常亮，typescript 再非定义位置报错问题处理。 需要在 typings.d.ts 中配置。
参考： https://pro.ant.design/docs/environment-variables-cn#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E4%BB%A3%E7%A0%81%E4%B8%AD%E6%8A%A5%E9%94%99%E7%9A%84%E5%A4%84%E7%90%86%E6%96%B9%E5%BC%8F

ant design pro

一边学，一边使用 ant design pro。看到不明白的就开始查查查。

第一个 useState
useState(0) 是最新的 hooks api

https://segmentfault.com/a/1190000018781083?utm_source=tag-newest

web 页面，以及后台接口，权限基础架构已经完成。现在再多增点东西。比如发短信，比如模型事件。

先看模型事件，用模型事件一方面是减少耦合，另一方面如果模型多出 Create ，并在 Created 后要做一系列逻辑。这个时候用模型事件就比较好。否则有重复代码，或你用 trait 去处理。反正就是模型事件好。

模型事件文档

# 我们先给 User 用户创建一个观察者
php artisan make:observer UserObserver --model=Models/User

# 创建成功后，删除掉其他的事件，只保留 created 
# 在你希望观察的模型上使用 observe 方法注册观察者。也可以在服务提供者的 boot 方法注册观察者。这里在 AppServiceProvider 中注册观察者。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use App\Models\User;
use App\Observers\UserObserver;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        User::observe(UserObserver::class);
    }
}

# 这样，当 User created 的时候，就会调用到事件侦听

再来处理短信相关的。

短信提供商有很多，我们选择用阿里云的。因为短信价格都差不多，服务器，域名都在阿里下。所以短信也选择阿里的。这里使用 overtrue 的 easy-sms 来做。

composer require overtrue/easy-sms

vim config/easysms.php

<?php

return [
    // HTTP 请求的超时时间（秒）
    'timeout' => 10.0,

    // 默认发送配置
    'default' => [
        // 网关调用策略，默认：顺序调用
        'strategy' => \Overtrue\EasySms\Strategies\OrderStrategy::class,

        // 默认可用的发送网关
        'gateways' => [
            'aliyun',
        ],
    ],
    // 可用的网关配置
    'gateways' => [
        'errorlog' => [
            'file' => storage_path('logs/easy-sms/easy-sms.log'),
        ],
        'aliyun' => [
            'access_key_id' => env('SMS_ALIYUN_ACCESS_KEY_ID'),
            'access_key_secret' => env('SMS_ALIYUN_ACCESS_KEY_SECRET'),
            'sign_name' => '约拍宝',
            'templates' => [
                'register' => env('SMS_ALIYUN_TEMPLATE_REGISTER'),
            ]
        ],
    ],
];

# 再来创建 serverprovider

php artisan make:provider EasySmsServiceProvider

<?php

namespace App\Providers;

use Overtrue\EasySms\EasySms;
use Illuminate\Support\ServiceProvider;

class EasySmsServiceProvider extends ServiceProvider
{
    public function boot()
    {

    }

    public function register()
    {
        $this->app->singleton(EasySms::class, function ($app) {
            return new EasySms(config('easysms'));
        });

        $this->app->alias(EasySms::class, 'easysms');
    }
}

# 在 config/app.php 中加入 
App\Providers\EasySmsServiceProvider::class,

# 最后，env 中配置好对应的值即可

使用

use Overtrue\EasySms\EasySms;

public function send(EasySms $easySms)
    {
        $phone = 13888888888;
            // 生成4位随机数，左侧补0
        $code = str_pad(random_int(1, 9999), 4, 0, STR_PAD_LEFT);

        try {
            $result = $easySms->send($phone, [
                'template' => config('easysms.gateways.aliyun.templates.register'),
                'data' => [
                    'code' => $code
                ],
            ]);
        } catch (\Overtrue\EasySms\Exceptions\NoGatewayAvailableException $exception) {
            $message = $exception->getException('aliyun')->getMessage();
            abort(500, $message ?: '短信发送异常');
        }
    }

先到这里，真实场景再使用。下一步就是开始后台了。这里使用阿里的 ant design pro。

顺便再说一下。env 中加入的配置，我们先要在 env example
中先加一份。 .env 是不加入版本控制的。掉了就没了。 .env.example 是加入了版本控制，但敏感数据空着就好，空留key即可。