PHPackages                             baserproject/bc-spa-sample - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. baserproject/bc-spa-sample

ActiveCakephp-plugin[Utility & Helpers](/categories/utility)

baserproject/bc-spa-sample
==========================

BcSpaSample plugin for baserCMS

0.0.9(3y ago)001MITJavaScript

Since Apr 17Pushed 3y agoCompare

[ Source](https://github.com/baserproject/BcSpaSample)[ Packagist](https://packagist.org/packages/baserproject/bc-spa-sample)[ Docs](https://basercms.net)[ RSS](/packages/baserproject-bc-spa-sample/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (3)Used By (0)

BcSpaSample plugin for baserCMS
===============================

[](#bcspasample-plugin-for-basercms)

baserCMS の REST API と vue.js を利用する場合のサンプルアプリケーションです。

Installation
------------

[](#installation)

You can install this plugin into your baserCMS application using [composer](https://getcomposer.org).

The recommended way to install composer packages is:

```
composer require baserproject/BcSpaSample

```

利用方法
----

[](#利用方法)

管理画面より、BcSpaSample プラグインをインストールし、次のURLにアクセスすることで、管理者ログインとユーザー管理を確認することができます。

[https://localhost/bc\_spa\_sample/admin.html](https://localhost/bc_spa_sample/admin.html)

ソースを確認する
--------

[](#ソースを確認する)

ソースファイルは、 `/src/` に配置しています。

コンパイル
-----

[](#コンパイル)

webpack を使ってコンパイルします。 プラグインのディレクトリに移動し次のコマンドを実行してください。

```
npm install
npm run dev
```

REST API
--------

[](#rest-api)

ログイン以外のリクエストヘッダーには、 `Authorization` をキーとしてJWT形式のアクセストークンが必要となります。

### ログイン

[](#ログイン)

#### メソッド

[](#メソッド)

```
POST
```

#### URL

[](#url)

```
/baser/api/admin/baser-core/users/login.json
```

#### レスポンス

[](#レスポンス)

```
{
    "access_token":"YOUR_ACCESS_TOKEN",
    "refresh_token":"YOUR_REFRESH_TOKEN"
}
```

#### コード例

[](#コード例)

```
axios.post('/baser/api/admin/baser-core/users/login.json', {
    email: this.name,
    password: this.password
}).then(function (response) {
    if (response.data) {
        this.$emit('set-login', response.data.access_token, response.data.refresh_token)
        this.$router.push('user_index')
    }
}.bind(this))
.catch(function (error) {
    this.isError = true
    if(error.response.status === 401) {
        this.message = 'アカウント名、パスワードが間違っています。'
    } else {
        this.message = error.response.data.message
    }
}.bind(this))
```

### トークンリフレッシュ

[](#トークンリフレッシュ)

#### メソッド

[](#メソッド-1)

```
GET
```

#### URL

[](#url-1)

```
/baser/api/admin/baser-core/users/refresh_token.json
```

#### レスポンス

[](#レスポンス-1)

```
{
    "access_token":"YOUR_ACCESS_TOKEN",
    "refresh_token":"YOUR_REFRESH_TOKEN"
}
```

#### コード例

[](#コード例-1)

```
await axios.get('/baser/api/admin/baser-core/users/refresh_token.json', {
    headers: {"Authorization": refreshToken},
    data: {}
}).then(function (response) {
    if (response.data) {
        this.setToken(response.data.access_token, response.data.refresh_token)
    } else {
        this.$router.push('/')
    }
}.bind(this))
.catch(function (error) {
    if (error.response.status === 401) {
        localStorage.refreshToken = ''
    }
})
```

### ユーザー一覧取得

[](#ユーザー一覧取得)

[baser Admin Api ユーザー一覧取得](https://baserproject.github.io/5/web_api/baser_admin_api/baser-core/users/index) を参照ください。

#### コード例

[](#コード例-2)

```
axios.get('/baser/api/admin/baser-core/users/index.json', {
    headers: {"Authorization": this.accessToken},
    data: {}
}).then(function (response) {
    if (response.data) {
        this.users = response.data.users
    } else {
        this.$router.push('/')
    }
}.bind(this))
```

### その他のAPI

[](#その他のapi)

次のドキュメントをご覧ください。

- [Web APIガイド](https://baserproject.github.io/5/web_api/)
- [baser API](https://baserproject.github.io/5/web_api/baser_api/)
- [baser Admin API](https://baserproject.github.io/5/web_api/baser_admin_api/)

BcSpaSample で TypeScript を利用する
------------------------------

[](#bcspasample-で-typescript-を利用する)

### 変更点

[](#変更点)

単一の vue ファイルを template（vueファイル）と script（tsファイル）に分離

例) Login.vue → script の箇所を Login.ts に移行

```

```

tsファイル内でVue.extendを使用することで、Vueコンポーネントの記述に近い書き方で TypeScript を書くことができます。

```
// *.vue
export default {
    data: function () {...}
```

↓

```
// *.ts
export default Vue.extend({
    data: () => {
```

### 型の定義

[](#型の定義)

type または interface を使って、型を定義できます。 代入される変数や返り値が型とそぐわない場合TypeErrorが返ります。

```
type DataType = {
    message? : string,
};
// dataメソッドが返す値がstringもしくはundefinedという定義が出来る
data: (): DataType => {
    return {
        message : undefined,
    }
},
// TypeErrorの場合 文字列定義の変数に数値は定義できません
// Type 'number' is not assignable to type 'string'.ts(2322)
this.message = 100; // (property) message?: string | undefined
```

### 型の再利用

[](#型の再利用)

main.tsにてUserタイプを定義してるので、importして再利用できます。

```
// main.ts
export type User = {
    ...
};
// form内で使用されるthis.userがUserタイプだと定義
// Form.ts
import { User } from '../../main';
type DataType = {
    user: User,
};
// index内で使用されるthis.usersがUserタイプを複数持つ配列だと定義
// user/Index.ts
import { User } from '../../main';
type DataType = {
    users?: User[],
};
```

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity1

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

 Bus Factor1

Top contributor holds 87.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1119d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/fde032c594b68cb7359d0991388bfb4cc1b8083b45d120aa0c1cd5d46285b1e6?d=identicon)[baserproject](/maintainers/baserproject)

---

Top Contributors

[![ryuring](https://avatars.githubusercontent.com/u/90106?v=4)](https://github.com/ryuring "ryuring (7 commits)")[![humuhimi](https://avatars.githubusercontent.com/u/35215680?v=4)](https://github.com/humuhimi "humuhimi (1 commits)")

### Embed Badge

![Health badge](/badges/baserproject-bc-spa-sample/health.svg)

```
[![Health](https://phpackages.com/badges/baserproject-bc-spa-sample/health.svg)](https://phpackages.com/packages/baserproject-bc-spa-sample)
```

###  Alternatives

[ibrahimbougaoua/filament-rating-star

This is my package filament-rating-star

4295.6k1](/packages/ibrahimbougaoua-filament-rating-star)[lampjunkie/php-datatables

PHP Library for (http://www.datatables.net)

5817.4k](/packages/lampjunkie-php-datatables)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)