# masscms_client

**Repository Path**: masscms/masscms_client

## Basic Information

- **Project Name**: masscms_client
- **Description**: 这是帮助您开始使用masscms的示例项目，包含了各种不同客户端语言以及不同API的使用代码。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://masscms.com/
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-08-18
- **Last Updated**: 2024-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# masscms_client

#### 介绍

masscms 客户端使用示例代码

#### 安装教程

1.  调用 masscms Api,需要接口鉴权，使用 AES 加密，可以使用 crypto-js 插件

    可以使用 npm 或者 yarn 安装

    `npm install crypto-js ` 或者 `yarn add crypto-js `

2.  使用 GraphQL 调用接口时，需要使用 graphql-request 插件

    `npm install graphql-request` 或者 `yarn add graphql-request`,

    当运行 nuxt 项目时，需使用 nuxt-graphql-request nuxt 专用插件，执行命令：

    `npm install nuxt-graphql-request` 或者 `yarn add nuxt-graphql-request`

    运行微信小程序项目时，可以将示例代码 with-miniprogram/utils/wxgql.js 封装好的 js 文件复制到待使用的项目中。通过 require 方法引入。

    `var gql = require('../../utils/wxgql');`

3.  示例代码均用到上述插件，正确运行前，需先执行安装命令

    `npm install ` 或者 `yarn install `

#### 使用说明

1.  masscms 支持 APIJSON，Restfui，GraphQL 三种接口调用方式。接口调用需要鉴权，使用 AES 加密，示例代码如下，具体参考示例代码中/utils/auth.js 文件中详细代码

```
export function getCallsSide() {
    let callsside = JSON.stringify({
        openApiStatus: true,
        projectAppId: "P88666",
        timestamp: Date.now(),
    });
    return Encrypt(callsside);
}

function Encrypt(word) {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7,
    });
    return encrypted.ciphertext.toString().toUpperCase();
}
```

2.  接口调用支持三种方式，更推荐使用 APIJSON 方式调用。APIJSON 和 Restfui 调用和 HTTP 接口调用方式一样，可集成 axios 或使用原生 fetch 方法调用，示例代码如下：

```
APIJOSN：
let data = { "[]": { P88666_moment: {} } };
      fetch("https://saas.masscms.com/cms-api/cms/api/get", {
        method: "POST",
        headers: {
          "CALLS-SIDE": getCallsSide(),
          "API-TOKEN": getApiToken(),
        },
        body: JSON.stringify(data),
      })
        .then((data) => {
          return data.json();
        })
        .then((res) => {
          console.log(res);
          this.moments = res["[]"];
        });
```

```
Restfui API
    let data = { "[]": { P88666_moment: {} } };
    fetch("https://saas.masscms.com/cms-api/router/get/P88666_moment", {
        method: "POST",
        headers: {
          "CALLS-SIDE": getCallsSide(),
          "API-TOKEN": getApiToken(),
        },
        body: JSON.stringify(data),
      })
        .then((data) => {
          return data.json();
        })
        .then((res) => {
          console.log(res);
          this.moments = res["[]"];
        });
```

3.  GraphQL 调用与 Http 协议接口调用方式有所区别，不能使用 axios 和 fetch 调用方式，推荐使用 graphql-request，其中在 nuxt 项目中需使用 nuxt-graphql-request 示例代码如下：

首先可以创建一个 graphql.js 文件，封装使用 GraphQL 的相关配置，例如 headers，credentials 等请求参数配置，抛出一个 graphqlClient 实例。

```
const graphqlClient = new GraphQLClient("https://demo.masscms.com/cms-api/cms/api/graphql", {
  headers: { "CALLS-SIDE": getCallsSide(), "API-TOKEN": getApiToken(), "Content-Type": "application/json" },
});
```

在需要调用 GraphQL API 的地方,引入 graphqlClient 实例。

`import graphqlClient from "@/utils/graphql";`

随后配置请求参数即可。

```
const query = `{fetch(arg: "{ '[]': { 'P88666_moment': { }  } }")}`;
    graphqlClient
      .request(query)
      .then((res) => {
          console.log("res", res);
      })
      .catch((err) => {
        console.log("err", err);
        let data = JSON.parse(JSON.stringify(err, undefined, 2));
        console.log(data);
        this.moments = data["response"]["[]"];
      });
```

在使用微信小程序项目时，可以将示例代码 with-miniprogram/utils/wxgql.js 封装好的 js 文件复制到待使用的项目中。通过 require 方法引入。

    `var gql = require('../../utils/wxgql');`

然后在需要调用的地方

```
 let that = this
    // 初始化对象
    let gql = GraphQL({
      url: 'https://saas.masscms.com/cms-api/cms/api/graphql', // url 必填
      header: {
        "CALLS-SIDE": auth.getCallsSide(),
        "API-TOKEN": auth.getApiToken()
      },
    }, true);

    // query 查询，mutation 请使用 gql.mutate
    gql.query({
      query: `{
          fetch(arg: "{ '[]': { 'P88666_moment': { }  } }")
        }`,
      variables: {}
    }).then(function (res) {
      //成功
      that.setData({
        moments: res.data['[]']
      })
    }).catch(function (error) {
      //失败
      console.log("error", error);
    });
```

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request