README

这是一个基于 baserCMS 的 REST API 和 vue.js 的示例应用程序。

安装

您可以使用 composer 将此插件安装到您的 baserCMS 应用程序中。

安装 composer 包的推荐方法是

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

除了登录请求之外，其他请求的请求头需要包含键为 Authorization 的 JWT 格式访问令牌。

登录

方法

POST

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))

令牌刷新

方法

GET

URL

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

响应

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

代码示例

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 获取用户列表。

代码示例

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

请参阅以下文档。

• Web API 指南
• baser API
• baser Admin API

在 BcSpaSample 中使用 TypeScript

更改点

将单个 vue 文件分割为 template（vue 文件）和 script（ts 文件）

例如) Login.vue → 将 script 的部分移动到 Login.ts

<script lang="ts" src="./Login.ts"></script>

在 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 类型，因此可以导入以重复使用。

// 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[],
};