npm 包 gridsome-source-mysql-cloudinary 使用教程

介绍

gridsome-source-mysql-cloudinary 是一个使用 Cloudinary 存储图片的 Grisdome 数据源插件。它能够从 MySQL 数据库中提取数据并上传到 Cloudinary 服务器上。

安装

在项目中安装 gridsome-source-mysql-cloudinary

npm i gridsome-source-mysql-cloudinary

然后在 gridsome.config.js 文件中配置插件

module.exports = {
  plugins: [
    {
      use: "gridsome-source-mysql-cloudinary",
      options: {
        connectionString: "mysql://user:password@server/database",
        tableName: "table_name",
        cloudinary: {
          cloud_name: "my_cloud_name",
          api_key: "my_api_key",
          api_secret: "my_api_secret"
        }
      }
    }
  ]
};

配置说明

connectionString

必填。MySQL 数据库连接字符串。格式为 mysql://user:password@server/database。

tableName

必填。MySQL 表名，用于读取数据。

cloudinary

必填。Cloudinary 参数配置。

• cloud_name: 必填。Cloudinary cloud_name。
• api_key: 必填。Cloudinary api_key。
• api_secret: 必填。Cloudinary api_secret。

使用教程

安装完毕并配置好了 gridsome-source-mysql-cloudinary，运行 gridsome develop 即可开始使用。插件会自动将数据从 MySQL 数据库中提取出来，并上传到 Cloudinary 服务器上。

示例代码

// in my components
<template>
  <main>
    <div v-for="d in $page.post.cover">
      <img
        :src="d.secure_url"
        :alt="d.alt"
      />
    </div>
  </main>
</template>

<script>
export default {
  metaInfo() {
    return {
      title: `${this.$page.post.title} - My blog`
    };
  },
  async mounted() {
    const { data } = await this.$gridsome.api.query(
      `query {
        post(slug: "${this.$route.params.slug}") {
          id
          title
          createdAt
          updatedAt
          body
          cover {
            alt
            secure_url
          }
        }
      }`
    );
    this.$page.post = data.post;
  }
};
</script>

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c2b