تطوير الواجهة الأمامية للبوابات على برمجيات مفتوحة المصدر: تبادل الخبرات

class Api {
    constructor () {
        //  http ,   
        this.instance = instance

        //     
       //     this,      http 
        Object.keys(commonServices).forEach(name => commonServices[name](this))
        
        //     
	requireService.keys().forEach(filename => requireService(filename).default(this))
    }

    install () {
	Vue.prototype.$api= this
    }
}

export default new Api()

1. يتم إنشاء مثيل عميل http. الذي يحدد القاعدة الأساسية للواجهة الخلفية والرؤوس
   
   

   const instance = axios.create({
   	baseURL: '/example/api',
   	responseType: 'json',
   	headers: {
   		'Content-Type': 'application/json',
   		'Cache-Control': 'no-cache',
   		'Pragma': 'no-cache',
   	}
   })
                   backend   ,   axios.

   
   
2. يتم إنشاء الخدمات التي تخزن الطلبات نفسها
   
   

   // api -   http 
   export default api => {
   	api.exampleService= {
   		exampleGetRequest(params) {
   			return api.instance.request({
   				method: 'get',
   				url: `example/get`,
   				params
   			})
   		},
   		examplePostRequest(data) {
   			return api.instance.request({
   				method: 'post',
   				url: `example/post`,
   				data
   			})
   		},
   	}
   }
   

   
   بشكل عام ، يكفي إنشاء مثل هذه الخدمة فقط ، وهي مسجلة بالفعل لكل مدخل في فئة Api
3. يتم تسجيل الخدمات العامة والمحلية
   
   

        const requireService = require.context('./service', false, /.service.js$/)
   

export default {
	methods: {
		someMethod() {
    			this.$api.exampleService.exampleGetRequest()
}
}
}

//    (@ -     )
import api from ‘@/api’

//        
api.exampleService.exampleGetRequest()

import _ from “lodash”

const requireComponent = require.context('@/components', true, /^[^_].+\.vue$/i)

requireComponent.keys().forEach(filename => {
    const componentConfig = requireComponent(filename)

    // Get PascalCase name of component
    const componentName = _.upperFirst(
        _.camelCase(/\/\w+\.vue/.exec(filename)[0].replace(/^\.\//, '').replace(/\.\w+$/, ''))
    )

    Vue.component(componentName, componentConfig.default || componentConfig)
})

const contexts = [
    require.context('@/components', true, /^[^_].+\.vue$/i),
   require.context('@/components-portal/example', true, /^[^_].+\.vue$/i)
]

contexts.forEach(requireComponent => {
    requireComponent.keys().forEach(filename => {
        const componentConfig = requireComponent(filename)

        // Get PascalCase name of component
        const componentName = _.upperFirst(
            _.camelCase(/\/\w+\.vue/.exec(filename)[0].replace(/^\.\//, '').replace(/\.\w+$/, ''))
        )

        Vue.component(componentName, componentConfig.default || componentConfig)
    })
})

const requireAll = (r) => r.keys().forEach(r)

const requireContext = require.context('@/assets/icons/', true, /\.svg$/)

requireAll(requireContext)