TypeScript SDK

快速上手

迈出使用 Orion TypeScript SDK 的第一步。

安装

Orion 可以安装到新项目或现有项目中,只需添加一个依赖:

使用 NPM

npm install @tailflow/laravel-orion --save

使用 Yarn

yarn add @tailflow/laravel-orion

配置

安装完成后,下一步是对其进行配置(或称初始化),使其与你的 API 协同工作。

import {Orion} from "@tailflow/laravel-orion/lib/orion";

Orion.init('https://your-api.test');
Orion.setToken('access-token-here');

就是这样!接下来我们来设置模型。

设置模型

让我们创建第一个模型并查询 API。从你的 Laravel API 中任选一个模型即可——这里以 Post 模型为例。

在你的 TypeScript 应用中添加一个 Post 类,并让它继承 Model

// post.ts

import {Model} from "@tailflow/laravel-orion/lib/model";

export class Post extends Model {

}

接下来,定义模型的属性及其资源名称

// post.ts

import {Model} from "@tailflow/laravel-orion/lib/model";

export class Post extends Model<{
    title: string,
    body: string
}> {
    public $resource(): string {
        return 'posts';
    }
}
你无需定义 idcreated_atupdated_at 属性——SDK 会自动为你处理。当然,你也可以覆盖它们。

恭喜,你已成功设置好模型,一切就绪,可以开始查询 API 了。

查询 API

Orion TypeScript SDK 让消费你的 API 变得异常简单。

如果你使用的是 Sanctum,在查询 API 之前需要先初始化 CSRF 防护。具体做法请参阅为 SPA 集成 Sanctum
// 在应用的某个地方

import {Post} from '../post.ts';

// 获取文章列表
const posts = await Post.$query().get();

// 搜索文章
const posts = await Post.$query().lookFor('some value').search();

// 创建文章
const newPost = await Post.$query().store({
    title: 'New post' // <-- 属性是有类型的,所以这里能获得很好的自动补全
});
console.log(newPost.$attributes.title);  // <-- 这里也一样

// 获取文章
const post = await Post.$query().find(5);

// 更新文章
post.$attributes.title = 'Updated post';
await post.$save();
// 或者
await post.$save({title: 'Updated post'}); // <-- 这里也是
// 或者
const updatedPost = await Post.$query().update(5, {
    title: 'Updated title' // <-- 当然,这里也是
});

// 删除文章
const deletedPost = await Post.$query().delete(5);
// 或者
await post.$destroy();