iview-ui-project-4.0 安裝與配置

 前言： 花了兩天時間，總算把vue的基礎框架配置好了，花了兩天半的時間，說多了都是淚啊[大哭]

1. npm install

 

2. npm run init (項目初始化)

　　2.1 項目初始化之前目錄結構

　　

　　2.2 項目初始化 npm run init

　   

　　2.3 項目初始化之后目錄結構

        

3.  打開webpack.dev.config.js，進行跨域配置

4. 新建http.js, 封裝GET/POST等請求 (路徑為src/libs/http.js)

 注意:  import { Message } from 'element-ui' 如果不需要的話需要刪除，如果需要，則需要 npm install element-ui

import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';


//http request 攔截器
axios.interceptors.request.use(
    config => {
        // const token = getCookie('名稱');注意使用的時候需要引入cookie方法，推薦js-cookie
        config.data = JSON.stringify(config.data);
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded'
        }
        // if(token){
        //   config.params = {'token':token}
        // }
        return config;
    },
    error => {
        return Promise.reject(err);
    }
);


//http response 攔截器
axios.interceptors.response.use(
    response => {
        if(response.data.errCode ==2){
            router.push({
                path:"/login",
                query:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉
            })
        }
        return response;
    },
    error => {
        return Promise.reject(error)
    }
)

/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url,params={}){
    return new Promise((resolve,reject) => {
        axios.get(url,{
            params:params
        })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url,data = {}){
    return new Promise((resolve,reject) => {
        axios.post(url,data)
            .then(response => {
                resolve(response.data);
            },err => {
                reject(err)
            })
    })
}

/**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
    return new Promise((resolve,reject) => {
        axios.patch(url,data)
            .then(response => {
                resolve(response.data);
            },err => {
                reject(err)
            })
    })
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
    return new Promise((resolve,reject) => {
        axios.put(url,data)
            .then(response => {
                resolve(response.data);
            },err => {
                reject(err)
            })
    })
}

 

5. main.js 引入http.js

import axios from 'axios';
import {post,get,patch,put} from './libs/http';

//定義全局變量
Vue.prototype.$post=post;
Vue.prototype.$get=get;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;

6. 在app.vue編寫測試請求

--后端TestController (請求路徑: http://127.0.0.1:8000/test)

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * <p>
 * TestController
 * </p>
 *
 * @author 3hzpf
 * @since 2020-04-13
 */
@Controller
public class TestController {

    @RequestMapping("test")
    @ResponseBody
    public String test(){
        return "前后端分離(跨域)接口測試成功!";
    }
}

 

--前端app.vue (/跨域設置 /api = http://127.0.0.1:8000/)

<style scoped>
    @import 'styles/common.css';
</style>
<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data () {
            return {}
        },
        mounted () {
            // 測試
            this.$post("/api/test").then((response) => {
                console.log(response)
            })
        },
        beforeDestroy () {

        },
        methods: {

        }
    }
</script>

--打印結果: