client http cros request

src/server/admin.go

+package server
+
+import (
+	"encoding/json"
+	logUtils "github.com/easysoft/zendata/src/utils/log"
+	"io"
+	"net/http"
+)
+
+func AdminHandler(writer http.ResponseWriter, req *http.Request) {
+	setupCORS(&writer, req)
+	logUtils.PrintToScreen("111")
+
+	ret := new(Ret)
+	id := req.FormValue("id")
+	//id := req.PostFormValue('id')
+
+	ret.Code = 0
+	ret.Param = id
+	ret.Msg = "success"
+	ret.Data = map[string]interface{}{"key": "value"}
+	ret_json,_ := json.Marshal(ret)
+
+	io.WriteString(writer, string(ret_json))
+}
+
+type Ret struct{
+	Code int
+	Param string
+	Msg string
+	Data interface{}
+}

src/server/common.go

+package server
+
+import (
+	"net/http"
+)
+
+func setupCORS(w *http.ResponseWriter, req *http.Request) {
+	(*w).Header().Set("Access-Control-Allow-Origin", "*")
+	(*w).Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
+	(*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
+}

src/zd.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"github.com/easysoft/zendata/src/action"
 	"github.com/easysoft/zendata/src/gen"
+	"github.com/easysoft/zendata/src/server"
 	"github.com/easysoft/zendata/src/service"
 	commonUtils "github.com/easysoft/zendata/src/utils/common"
 	configUtils "github.com/easysoft/zendata/src/utils/config"
@@ -241,7 +242,7 @@ func StartServer() {
 		vari.Ip, port, vari.Ip, port, vari.Ip, port), color.FgCyan)
 
 	http.HandleFunc("/", DataHandler)
-	http.HandleFunc("/admin", AdminHandler)
+	http.HandleFunc("/admin", server.AdminHandler)
 	err := http.ListenAndServe(fmt.Sprintf(":%d", vari.Port), nil)
 
 	if err != nil {
@@ -249,10 +250,6 @@ func StartServer() {
 	}
 }
 
-func AdminHandler(writer http.ResponseWriter, req *http.Request) {
-	logUtils.PrintToScreen("111")
-}
-
 func DataHandler(writer http.ResponseWriter, req *http.Request) {
 	logUtils.HttpWriter = writer
 

ui/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "ant-design-vue": "^1.7.1",
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "less": "^2.x",
     "less-loader": "^3.x",

ui/src/api/manage.js

+import request from '../utils/request'
+
+const api = {
+  admin: '',
+  res: '/res',
+  def: '/defs',
+}
+
+export default api
+
+export function listDefs () {
+  return request({
+    url: api.admin,
+    method: 'get',
+    params: {}
+  })
+}

ui/src/utils/axios.js

+const VueAxios = {
+  vm: {},
+  // eslint-disable-next-line no-unused-vars
+  install (Vue, instance) {
+    if (this.installed) {
+      return
+    }
+    this.installed = true
+
+    if (!instance) {
+      // eslint-disable-next-line no-console
+      console.error('You have to install axios')
+      return
+    }
+
+    Vue.axios = instance
+
+    Object.defineProperties(Vue.prototype, {
+      axios: {
+        get: function get () {
+          return instance
+        }
+      },
+      $http: {
+        get: function get () {
+          return instance
+        }
+      }
+    })
+  }
+}
+
+export {
+  VueAxios
+}

ui/src/utils/request.js

+import notification from 'ant-design-vue/es/notification'
+import axios from 'axios'
+import { VueAxios } from './axios'
+
+const request = axios.create({
+  baseURL: 'http://localhost:8848/admin',
+  timeout: 6000,
+})
+
+const errorHandler = error => {
+  if (error.response) {
+    const data = error.response.data
+
+    if (error.response.status === 403) {
+      notification.error({
+        message: 'Forbidden',
+        description: data.message
+      })
+    }
+    if (error.response.status === 401) {
+      notification.error({
+        message: 'Unauthorized',
+        description: 'Authorization verification failed'
+      })
+    }
+  }
+  return Promise.reject(error)
+}
+
+// request interceptor
+request.interceptors.request.use(config => {
+  return config
+}, errorHandler)
+
+// response interceptor
+request.interceptors.response.use(response => {
+  return response.data
+}, errorHandler)
+
+const installer = {
+  vm: {},
+  install (Vue) {
+    Vue.use(VueAxios, request)
+  }
+}
+
+export default request
+export { installer as VueAxios, request as axios }

ui/src/views/test/Test.vue

@@ -11,8 +11,30 @@
 </template>
 
 <script>
+
+import { listDefs } from "../../api/manage";
+
 export default {
-  name: 'Test'
+  name: 'Test',
+  data() {
+    return {
+      defs: [],
+    };
+  },
+  computed: {
+
+  },
+  created () {
+    listDefs().then(res => {
+      console.log('listDefs', res)
+      this.defs = res
+    })
+  },
+  mounted () {
+  },
+  methods: {
+
+  }
 }
 </script>
 

ui/vue.config.js

+const path = require('path');
+
+function resolve(dir) {
+    return path.join(__dirname, dir)
+}
+
+module.exports = {
+    chainWebpack: (config) => {
+        config.resolve.alias
+            .set('@', resolve('./src'))
+        // .set('components',resolve('./src/components'))
+    }
+}