Vue project – family bucket (Vue + Vue router + vuex + Axios)

Time:2020-3-7

Axios: it’s equivalent to Ajax. It used to use Vue resource, but now this module is not maintained. Axios is basically used
Vue Router: the route of Vue
Vuex: it is the state management of Vue to facilitate communication between components

npm install vuex axios --save-dev

Axios is configured as follows:

//Introducing Axios
import axios from 'axios'

//Create Axios instance
const httpService = axios.create({
    Baseurl: "http: // localhost: 8081", // url prefix
    Timeout: 3000 // request timeout
});

//Request interceptor
httpService.interceptors.request.use(
    config => {
        //Add token safe carry according to conditions
        If (true) {// user defined
            //Let each request carry a token
            config.headers['User-Token'] = '';
        }
        return config;
    }, 
    error => {
        //Request error handling
        Promise.reject(error);
    }
)

//Response interceptor
httpService.interceptors.response.use(
    response => {
        //Unified processing status
        const res = response.data;
        If (res.statuscode! = 1) {// need customization
            //Return exception
            return Promise.reject({
                status: res.statuscode,
                message: res.message
            });
        } else {
            return response.data;
        }
    },
    //Handling
    error => {
         if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    Error. Message = 'error request';
                    break;
                case 401:
                    Error. Message = 'unauthorized, please login again';
                    break;
                case 403:
                    Error. Message = 'access denied';
                    break;
                case 404:
                    Error. Message = 'request error, the resource was not found';
                    break;
                case 405:
                    Error. Message = 'request method not allowed';
                    break;
                case 408:
                    Error. Message = 'request timeout';
                    break;
                case 500:
                    Error. Message = 'server side error';
                    break;
                case 501:
                    Error. Message: 'network not implemented';
                    break;
                case 502:
                    Error. Message = 'network error';
                    break;
                case 503:
                    Error. Message = 'service not available';
                    break;
                case 504:
                    Error. Message = 'network timeout';
                    break;
                case 505:
                    Error. Message = 'HTTP version does not support the request';
                    break;
                default:
                    Error. Message = ` unknown error ${error. Response. Status} ';
            }
        } else {
            Error.message = "failed to connect to the server";
        }
        return Promise.reject(error);
    }
)

/*Network request section*/

/*
 * get request
 *URL: request address
 *Params: parameters
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *Post request
 *URL: request address
 *Params: parameters
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *File upload
 *URL: request address
 *Params: parameters
 * */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

export default {
    get,
    post,
    fileUpload
}

Main.js configuration:

import axios from './util/axios'

Vue.prototype.$ajax = axios
//this.$ajax.post('/login/login', {});

To solve the problem that the Vue cli test port changes at any time:

NPM install portfinder @ 1.0.21 // find a simple tool to open the port on the current machine

Package project:

npm run build

Nginx front end server:
Modify server default port
Put the files under dist directory into nginx / HTML directory.

CD D: \ nginx-1.17.3 // enter the nginx installation directory
Start nginx // start nginx server
Tasklist / FI "imagename EQ nginx. Exe" // view the nginx task process

#Force the nginx server to stop. If there is any unprocessed data, discard it
nginx -s stop

#Stop the nginx server gracefully. If there is any unprocessed data, wait until the processing is completed
nginx -s quit

Recommended Today

Special character set in soft keyboard of input method

Here are some special characters for the soft keyboard: convenient for everyone to use。,、;:?!…—·ˉˇ¨‘’“”々~‖∶"'`|〃〔〕〈〉《》「」『』.〖〗【】()[]{}ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓⒔⒕⒖⒗⒘⒙⒚⒛①②③④⑤⑥⑦⑧⑨⑩㈠㈡㈢㈣㈤㈥㈦㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇≈≡≠=≤≥<>≮≯∷±+-×÷/∫∮∝∞∧∨∑∏∪∩∈∵∴⊥∥∠⌒⊙≌∽√°′″$£¥‰%℃¤¢One two three four five six seven eight ninetyOne, two, three, four, five, six, seven, eightyOne hundred thousand100 trillion gigabytes of PETAMinute minute minute minute└┕┖┗┘┙┚┛━┅┉┌┍┎┏┐┑┒┓─┄┈┤┥┦┧┨┩┪┫┃┇┋├┝┞┟┠┡┢┣│┆┊┴┵┶┷┸┹┺┻┬┭┮┯┰┱┲┳╄╅╆╇╈╉╊╋┼┽┾┿╀╁╂╃§№☆★○●◎◇◆□■△▲※→←↑↓〓#&@\^_ ̄