# 魔方平台前端类库
## 1 类库介绍
### 1.1 简介
　　魔方平台前端类库集成了日志中心和附件中心的接口。日志中心提供了记录行为日志方法，附件中心提供了上传附件、二次确认、删除文件、压缩文件方法。

### 1.2 阅读对象
　　本文档面向所有使用魔方平台的前端开发人员或对此感兴趣的其他用户。阅读该文档要求用户熟悉前端开发，并且对JavaScript 和TypeScript 有一定了解。

### 1.3 开发环境
- Node
- NPM
- TypeScript

## 2 文档
　　[详细文档](https://public.minstone.com.cn/public/doc#/mcube/mcube-views-library-about)

## 3 开发示例
　　本文以调用上传附件和记录行为日志为例，为开发者介绍如何使用集成附件中心和集成日志中心所提供的方法。

### 3.1 集成方式
　　如果当前项目是 Vue 项目，使用以下命令即可集成类库:

```bash
$ npm install @minstone/mcube --save
$ npm install spark-md5 --save
```

　　如果当前项目是使用后端模板引擎渲染（如freemarker等）的，或者是JSP页面，需要下载 mcube.min.js[[下载](https://public.minstone.com.cn/public/doc/assets/catagory/mcube.min.js)] 和 spark-md5.min.js[[下载](https://public.minstone.com.cn/public/doc/assets/catagory/spark-md5.min.js)] 文件，保存到你的项目工程中，然后在 HTML 中直接使用:

```js
<script type="text/javascript" src="/path/to/mcube.min.js"/>
<script type="text/javascript" src="/path/to/spark-md5.min.js"/>
```

### 3.2 引用Mcube
　　前端引用Mcube

```js
// 在Vue页面，引入类库，同时需要引入spark-md5插件
import { mcube } from '@minstone/mcube';
import SparkMD5 from 'spark-md5';

window.SparkMD5 = SparkMD5;
```

### 3.3 上传附件
```js
// 获取附件中心客户端
let attachment = mcube.requrie("attachment");
// 执行上传附件
let att = attachment.upload('test', token, file);

att.then(res => {
  // 下载文件
  downloadFile(res.id)
})

```

### 3.4 记录行为日志
```js
// 获取日志中心客户端
let logging = mcube.requrie("logging");
// 记录行为日志
let log = logging.collectAction('mcube', 
{
    url: 'http: //127.0.0.1', 
    title: '测试标题', 
    appCode: 'mcube_dashboard', 
    module: '测试模块', 
    function: '新增', 
    actionSource: 'xxxxx'
});

log.then(res => {
  if (res) {
    console.log('记录成功')
  }
})
```