ओपन सोर्स सॉफ्टवेयर पर पोर्टल्स का फ्रंट डेवलपमेंट: अनुभव साझा करें

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)