快速集成華爲AGC雲存儲服務-Web

時間 2021-02-20

標籤 javascript css html vue java git github web npm element-ui 欄目 HTML 简体版

原文原文鏈接

華爲AppGallery Connect提供了一個雲存儲（CloudStorage）的服務，號稱提供了一個便捷的雲端存儲服務，應用開發者使用的時候，能夠不用關注服務器的部署，直接使用就行。
這個服務近期上線了Web端的JavaScript的SDK，我搶先體驗試用了一下。也能夠下載codelab或者demo自行研究。javascript

一、環境與應用信息

版本名稱	集成環境-應用	測試設備
"cloudstorage": "1.0.0"	Window-Node-v14.15.0 npm v6.14.8 Intellij + Vue	PC-Chrome

環境：https://developer.huawei.com/consumer/rn/service/josp/agc/index.html css

SDK版本："@agconnect/cloudstorage": "^1.0.0-beta3"html

集成SDK命令：npm install --save @agconnect/cloudstoragevue

二、在AGC上開通雲存儲:

PS：雲存儲服務目前還處於beta狀態，使用前應該發郵件去申請開通：
https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-applyjava

在個人項目 下選擇你的開發項目，在構建下面，找到雲存儲服務，點擊開通：git

沒有Web項目的話，須要先本身建立一個。github

開通服務的時候，須要先配置存儲實例，這裏按需配置就能夠，我就隨便配置一個。web

下一步，還須要配置安全策略，這裏使用默認的安全策略就好:
PS：默認的狀況是，只有通過身份認證的用戶才能進行讀寫。npm

三、安裝開發環境:

一、安裝Intellij IDEA：

下載地址：https://www.jetbrains.com/idea/download/#section=windows
安裝的時候，記得選for web的 IntelliJ IDEA Ultimateelement-ui

二、建立vue項目

三、編譯完成後，生成如下文件：

四、SDK集成

一、打開命令行窗口，進入到項目目錄下，在項目目錄下執行如下命令，安裝雲存儲的JS SDK:

npm install --save @agconnect/cloudstorage

安裝雲存儲的JS SDK後，會自動匹配AGC SDK，無需額外安裝。

二、應用級src目錄下建立名爲 「agConnectConfig.js」 的文件，而且將AGC界面上「項目設置 > SDK代碼片斷」中全部內容複製到「agConnectConfig.js」裏

注意添加export 參數

三、在項目路徑下執行npm install命令安裝 package.json 依賴。

五、功能開發

a) 頁面佈局-新建一個

一、新建一個Page.vue文件，在template便籤下添加以下代碼佈局

<div class = "hello">
   <div v-show="!isLogin">
     <el-button type="primary" @click="signInAnonymously">Login</el-button>
   </div>
   <div v-show="isLogin" style="max-width:1600px;margin:auto;">
     <h1>AGCCloudStorageDemo</h1>
     <div style="display:flex;margin-bottom:30px;">
       <el-button type="primary" size="medium" @click="getFileList('')">Get FileList</el-button>
       <el-button type="primary" size="medium" @click="getFileListAll('')">
         Get FileList All
       </el-button>
       <el-button type="primary" size="medium" @click="uploadString">
         Upload String
       </el-button>
       <el-upload action :on-change="uploadFile" :auto-upload="false">
         <el-button type="primary" size="medium" style="width: 100%;margin-left:10px;">Upload File</el-button>
       </el-upload>
     </div>
     <el-table
         ref="multipleTable"
         border
         size="medium"
         :data="list">
       <el-table-column
           type="selection"
           width="55">
       </el-table-column>
       <el-table-column width="80px" label="index">
         <template v-slot="scope">
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
       <el-table-column width="100px" label="type">
         <template v-slot="scope">
           {{ scope.row.isFile ? 'file' : 'directory' }}
         </template>
       </el-table-column>
       <el-table-column
           width="150px"
           label="name"
           prop="name"
           show-overflow-tooltip>
       </el-table-column>
       <el-table-column label="operation">
         <template v-slot="scope">
           <el-button
               v-if="!scope.row.isFile"
               type="success"
               size="medium"
               @click="getFileList(scope.row)"
           >
             Get FileList
           </el-button>
           <el-button
               v-if="!scope.row.isFile"
               type="success"
               size="medium"
               @click="getFileListAll(scope.row)"
           >
             Get FileList All
           </el-button>
           <el-button
               v-if="scope.row.isFile"
               type="success"
               size="medium"
               @click="downloadFile(scope.row)"
           >
             Download File
           </el-button>
           <el-button
               v-if="scope.row.isFile"
               type="success"
               size="medium"
               @click="getFileMetadata(scope.row)"
           >
             Get FileMetadata
           </el-button>
           <el-button
               v-if="scope.row.isFile"
               type="success"
               size="medium"
               @click="updateFileMetadata(scope.row)"
           >
             Update FileMetadata
           </el-button>
           <el-button v-if="scope.row.isFile" type="danger" size="medium" @click="deleteFile(scope.row)">
             Delete File
           </el-button>
           <el-button type="success" size="medium" @click="toString(scope.row)">
             To String
           </el-button>
         </template>
       </el-table-column>
     </el-table>
   </div>
 </div>

b) 添加配置依賴 & 初始化

一、在script標籤下，添加編譯依賴

import agconnect from "@agconnect/api";
 import "@agconnect/instance";
 import "@agconnect/auth";
 import "@agconnect/cloudstorage";

二、初始化SDK：

import { agConnectConfig } from "../agConnectConfig";
 const config = agConnectConfig

c) 前置方法：數據與匿名登陸

一、在export default對象內，添加data對象，而且配置以下內容：

data(){
   return {
     list:[],
     isLogin:false,
     ref:{}
   }
 },

二、在export default對象內，添加對mounted對象，而且配置以下內容：

mounted(){
   agconnect.instance().configInstance(config)
 },

三、添加主要方法：在export default對象內添加method對象，而且添加匿名登陸方法：

methods:{
   async signInAnonymously () {
     agconnect
         .auth()
         .signInAnonymously()
         .then(() => {
           alert('login successfully!')
           this.isLogin = true
           this.ref = agconnect.cloudStorage().storageReference()
         })
         .catch(() => {
           return Promise.reject('sign in anonymously failed')
         })
   },

d) 上傳文件：

在method對象內，添加以下上傳文件的方法：

uploadFile(file) {
   const path = 'jssdk/' + file.name
   const metadata = {
     cacheControl: 'helloworld',
     contentDisposition: 'helloworld',
     contentEncoding: 'helloworld',
     contentLanguage: 'helloworld',
     contentType: 'helloworld',
     customMetadata: {
       hello: 'kitty'
     }
   }
   var uploadTask = this.ref.child(path).put(file.raw, metadata)
   this.printUploadPercent(uploadTask)
 },
 printUploadPercent (uploadTask) {
   uploadTask.on('state_changed', function (snapshot) {
     if(!snapshot){
       console.log('Upload Result is null')
       return;
     }
     if(snapshot.totalByteCount == 0){
       console.log('Upload File is empty')
       return;
     }
     var progress = (snapshot.bytesTransferred / snapshot.totalByteCount) * 100
     console.log('Upload is ' + progress.toFixed(1) + '% done')
     switch (snapshot.state) {
       case 'paused':
         console.log('Upload is paused')
         break
       case 'running':
         console.log('Upload is running')
         break
       case 'success':
         console.log('Upload is success')
         break
       case 'canceled':
         console.log('Upload is canceled')
         break
       case 'error':
         console.log('Upload is error')
         break
     }
   }, function (snapshot) {
     switch (snapshot.state) {
       case 'paused':
         console.log('Upload is paused')
         break
       case 'running':
         console.log('Upload is running')
         break
       case 'success':
         console.log('Upload is success')
         break
       case 'canceled':
         console.log('Upload is canceled')
         break
       case 'error':
         console.log('Upload is error')
         break
     }
   }, function () {
     console.log('Upload is success')
   })
 },

e) 下載文件：

在method對象內，添加以下下載文件的方法：

downloadFile(row) {
   const child = this.ref.child(row.path)
   child.getDownloadURL().then(function (downloadURL) {
     alert(downloadURL)
     console.log(downloadURL)
   })
 },

f) 例舉文件，其他功能暫不列舉：

在method對象內，添加以下例舉文件的方法：

getFileList(row) {
   var path = row && row.path ? row.path : '';
   const child = this.ref.child(path)
   child.list({ maxResults: 5 }).then((res) => {
     this.list = [...res.dirList.map(item => { item.isFile = false; item.select = false; return item }), ...res.fileList.map(item => { item.isFile = true; item.select = false; return item })]
     this.nextMarker = res.pageMarker
     console.log(this.list)
   }).catch(err => {
     console.log(err)
   })
 },
 getFileListAll(row) {
   const child = this.ref.child(row && row.path ? row.path : '')
   child.listAll()
       .then((res) => {
         console.log('res', res)
         this.list = [...res.dirList.map(item => { item.isFile = false; item.select = false; return item }), ...res.fileList.map(item => { item.isFile = true; item.select = false; return item })]
       })
       .catch((err) => {
         console.log(err)
       })
 },

六、功能點驗證

一、Web運行前置要求：

一、添加element-ui相關依賴：在main.js文件內，添加element-ui依賴

import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);

二、安裝element-ui依賴，使用命令行，在項目路徑下，執行以下命令安裝element-ui依賴：

npm install element-ui -S

安裝完成後，package.json文件中，將導入以下內容：

三、在app.vue文件中，配置默認啓動的vue：

在template標籤下，修改默認啓動爲建立的page.

<template>
   <div id="app">
     <Page />
   </div>
 </template>

在script標籤下，導入而且修改默認的啓動vue.

<script>
 import Page from './components/Page.vue'

 export default {
   name: 'App',
   components: {
     Page
   }
 }
 </script>

修改之後，結果以下：

二、運行項目

在項目目錄下，執行npm run serve命令啓動項目，點擊local超連接進入項目。

三、配置跨域請求：

因爲咱們當前使用的是本地的IP，即http://localhost:8080/的地址，與雲存儲雲端進行通訊的時候，存在網絡跨域，須要先經過Server SDK配置網絡跨域的相關參數，不然會出現以下錯誤：

具體NodeJS項目的集成，請參照上一篇文檔：快速集成華爲AGConnect雲存儲服務-NodeJS中的描述。

在NodeJS代碼中，經過setCorsConfiguration方法配置跨域參數。代碼以下：

crossIP();
function crossIP() {
  const storage = new StorageManagement();
  const bucket = storage.bucket(bucketName);

  bucket.setCorsConfiguration();
  const config = [{
    "origins": ["*"],
    "methods": ["GET", "POST", "PUT", "DELETE"],
  }];

  bucket.setCorsConfiguration(config).then(res => 
    console.log('bucket.setCors res: ', res)
    ).catch(err => {
      console.log('bucket.setCors err: ', err)
    })
}