refactor(ajax)

ly525
1 parent c532b500
Showing 9 changed files with 228 additions and 27 deletions
README.en.md
README.md
back-end/h5-api/README.md
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/constants/api.js
front-end/h5/src/store/modules/loading.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/utils/http.js
front-end/h5/vue.config.js
@@ -36,17 +36,16 @@ English | [简体中文](./README.md)
     - [ ] Photo Gallery
     - [ ] Third Party uncopyrighted Image Search
-4. Data Statistics
+
+4. back-end API
+    - [x] create work
+    - [x] save work
+    - [x] update work
     - [ ] Form Statistics
+    - [x] Online Preview
+    - [x] QR Code Preview
-5. Others
-    - [ ] Online preview
-    - [ ] QR Code Preview
-
-### Technology Stack (current)
-  1. Front end: Vue.js
-  2. Back End: Strapi
-  3. Storage: Sqlite
+---
 ### Installs
 > proj: project root path
@@ -54,5 +53,14 @@ English | [简体中文](./README.md)
   1. Front End
       Editor: please refer to: [`project/front-end/h5/README.md`](https://github.com/ly525/luban-h5/blob/dev/front-end/h5/README.md)
-### Front-End Component Explanation
-1. `lbp-`: `lu-ban-plugin-`, means `Luban H5 plugin`, location: `proj/front-end/h5/src/components/plugins`
 \ No newline at end of file
+
+---
+### More Explanation
+#### Front-End Component Explanation
+1. `lbp-`: `lu-ban-plugin-`, means `Luban H5 plugin`, location: `proj/front-end/h5/src/components/plugins`
+
+
+#### Technology Stack (current)
+  1. Front end: Vue.js
+  2. Back End: Strapi
+  3. Storage: Sqlite
 \ No newline at end of file
@@ -44,8 +44,8 @@
     - [x] 创建、保存、更新作品
     - [ ] 表单数据收集
     - [ ] 表单数据展示
-    - [ ] 在线预览
-    - [ ] 二维码预览
+    - [x] 在线预览
+    - [x] 二维码预览
 ---
@@ -13,3 +13,19 @@ strapi develop
 # default database is sqlite3(h5-api/.tmp/data.db)
 # visit http://locahost:1337/admin
 ```
+
+
+## Features(zh)
+  - [x] 创建、保存、更新作品
+  - [x] 在线预览
+  - [x] 二维码预览
+  - [ ] 表单数据收集
+  - [ ] 表单数据展示
+
+## Features(en)
+  - [x] create work
+  - [x] save work
+  - [x] update work
+  - [x] Online Preview
+  - [x] QR Code Preview
+  - [ ] Form Statistics
 \ No newline at end of file
@@ -43,6 +43,9 @@ export default {
       editingElement: state => state.editingElement,
       elements: state => state.editingPage.elements,
       pages: state => state.work.pages
+    }),
+    ...mapState('loading', {
+      saveWork_loading: state => state.saveWork_loading
     })
   },
   methods: {
@@ -112,7 +115,7 @@ export default {
               </a-button-group>
             </a-menu-item>
             <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>预览</a-button></a-menu-item>
-            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()}>保存</a-button></a-menu-item>
+            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()} loading={this.saveWork_loading}>保存</a-button></a-menu-item>
             <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
           </a-menu>
         </a-layout-header>
-export const API_HOST = 'https://radiant-depths-79548.herokuapp.com'
-export const API_PORT = ''
-export const API_ORIGIN = `${API_HOST}:${API_PORT}`
+// export const API_HOST = 'https://radiant-depths-79548.herokuapp.com'
+// export const API_PORT = ''
+// export const API_ORIGIN = `${API_HOST}:${API_PORT}`
+export const API_ORIGIN = 'http://localhost:1337'
 // initial state
 const state = {
-
+  saveWork_loading: false
 }
 // getters
@@ -10,12 +10,16 @@ const getters = {
 // actions
 const actions = {
-
+  update ({ commit }, payload) {
+    commit('update', payload)
+  }
 }
 // mutations
 const mutations = {
-
+  update (state, { type, payload }) {
+    state[type] = payload
+  }
 }
 export default {
@@ -2,6 +2,7 @@
 import Element from '../../components/core/models/element'
 import strapi from '../../utils/strapi'
 import Page from '../../components/core/models/page'
+import { AxiosWrapper } from '../../utils/http.js'
 export const actions = {
   previewWork ({ commit }, payload = {}) {
@@ -26,13 +27,19 @@ export const actions = {
     }
     commit('setWork', work)
   },
-  saveWork ({ commit, state }, payload = {}) {
+  saveWork ({ commit, dispatch, state }, payload = {}) {
     // update work with strapi
     const work = {
       ...state.work,
       ...payload
     }
-    strapi.updateEntry('works', state.work.id, work)
+
+    new AxiosWrapper({
+      dispatch,
+      loading_name: 'saveWork_loading',
+      successMsg: '保存作品成功',
+      customRequest: strapi.updateEntry.bind(strapi)
+    }).put('works', state.work.id, work)
   },
   fetchWork ({ commit, state }, workId) {
     strapi.getEntry('works', workId).then(entry => {
+import axios from 'axios'
+import { message } from 'ant-design-vue'
+
+message.config({
+  maxCount: 3
+})
+
+export const myMessage = message
+
+export const client = axios.create({
+  baseURL: '/v1',
+  responseType: 'json'
+})
+export const baseClient = axios.create({
+  responseType: 'json'
+})
+
+export class AxiosWrapper {
+  // eslint-disable-next-line camelcase
+  constructor ({ name = 'default', loading_name, responseType = 'json', headers, dispatch, router, successMsg, failMsg, successCallback, failCallback, customRequest }) {
+    this.name = name
+    // eslint-disable-next-line camelcase
+    this.loading_name = loading_name
+    // eslint-disable-next-line camelcase
+    this.responseType = responseType
+    this.dispatch = dispatch
+    this.router = router
+    this.successMsg = successMsg
+    this.failMsg = failMsg
+    this.customRequest = customRequest
+    this.successCallback = successCallback
+    this.failCallback = failCallback
+    this.source = axios.CancelToken.source()
+    this.instance = axios.create({
+      // baseURL: '/v1',
+      responseType,
+      headers,
+      cancelToken: this.source.token
+    })
+    this.instance.interceptors.response.use(response => {
+      // Do something with response data
+      return Promise.resolve(response)
+    }, error => {
+      // Do something with response error
+      return Promise.reject(error)
+    })
+  }
+
+  get (...args) {
+    this.setDefaultLoadingName(args)
+
+    this.setLoadingValue(true)
+    return this.instance.get(...args).then(response => {
+      const handler = this.getCommonResponseHandler({ failMsg: 'Query Failed.' })
+      handler.call(this, response)
+    }).catch(error => {
+      // handle error
+      myMessage.error(error.message)
+    }).finally(() => this.setLoadingValue(false))
+  }
+
+  post (...args) {
+    this.setDefaultLoadingName(args)
+
+    this.setLoadingValue(true)
+    return this.instance.post(...args).then(response => {
+      const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
+      handler.call(this, response)
+    }).catch(error => {
+      // handle error
+      myMessage.error(error.message)
+    }).finally(() => this.setLoadingValue(false))
+  }
+
+  put (...args) {
+    this.setDefaultLoadingName(args)
+
+    this.setLoadingValue(true)
+    if (this.customRequest) {
+      return this.customRequest(...args)
+        .then(data => {
+          const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
+          handler.call(this, { data: { status: 200, data } })
+        })
+        .finally(() => this.setLoadingValue(false))
+    }
+    return this.instance.put(...args).then(response => {
+      const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
+      // handler.call(this, response)
+      handler()
+    }).catch(error => {
+      // handle error
+      myMessage.error(error.message)
+    }).finally(() => this.setLoadingValue(false))
+  }
+
+  delete (...args) {
+    this.setDefaultLoadingName(args)
+
+    this.setLoadingValue(true)
+    return this.instance.delete(...args).then(response => {
+      const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
+      handler.call(this, response)
+    }).catch(error => {
+      // handle error
+      myMessage.error(error.message)
+    }).finally(() => this.setLoadingValue(false))
+  }
+
+  cancel (reason) {
+    this.source.cancel(reason)
+  }
+
+  setLoadingValue (payload) {
+    this.dispatch('loading/update', { type: this.loading_name, payload }, { root: true })
+  }
+
+  setDefaultLoadingName (...args) {
+    if (!this.loading_name) {
+      let url = args[0]
+      if (url.indexOf('/') !== -1) {
+        let us = url.split('/')
+        url = us[us.length - 1]
+      }
+      if (url.indexOf('?') !== -1) {
+        let us = url.split('?')
+        url = us[0]
+      }
+      this.loading_name = `${url}_loading`
+    }
+  }
+
+  getCommonResponseHandler ({ failMsg } = {}) {
+    return (response) => {
+      if (!response.data) {
+        myMessage.warn(this.failMsg || failMsg)
+      } else if (response.data.status === 200) {
+        this.successMsg && myMessage.success(this.successMsg)
+        if (this.successCallback) {
+          this.successCallback(response)
+        } else {
+          // this.dispatch({ type: this.name, payload: response.data.data })
+        }
+      } else if (this.responseType === 'json') {
+        myMessage.error(response.data.msg)
+        if (response.data.status === 401) {
+          if (this.router) {
+            this.router.push('/login')
+          }
+        } else {
+          alert(response.data.msg)
+          if (this.failCallback) {
+            this.failCallback(response)
+          }
+        }
+      } else {
+        if (this.successCallback) {
+          this.successCallback(response)
+        }
+      }
+    }
+  }
+}
 const ProxyAgent = require('proxy-agent')
 const isProd = process.env.NODE_ENV === 'production'
-const API_ORIGIN = 'https://radiant-depths-79548.herokuapp.com'
-const publicPath = isProd ? '/luban-h5/' : '/'
-// const proxy = isProd ? API_ORIGIN : 'http://localhost:1337'
+const PROD_API_ORIGIN = 'https://radiant-depths-79548.herokuapp.com'
+const DEV_API_ORIGIN = 'http://localhost:1337'
 module.exports = {
   runtimeCompiler: true,
-  publicPath,
+  publicPath: isProd ? '/luban-h5/' : '/',
   devServer: {
     // proxy: API_ORIGIN
     proxy: {
       '/': {
         agent: new ProxyAgent('socks5://127.0.0.1:1086'),
-        target: API_ORIGIN,
+        target: isProd ? PROD_API_ORIGIN : DEV_API_ORIGIN,
         changeOrigin: true
       }
     }