jboot與mock數據

開發環境代理

 

  位於項目下/webpack/config/index.js 文件中存放着開發時的①代理文件及②後臺服務地址與③端口號

    在項目訪問的接口存在其他服務接口就會產生跨域問題，當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即爲跨域

• 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB

• 無法接觸非同源網頁的 DOM

• 無法向非同源地址發送 AJAX 請求

 

使用方式：在proxyTable中添加需要代理的接口，及接口的訪問路徑，比如我當前的項目(端口9527)訪問另一個項目的上傳接口(端口9092)/api/single/upload

    

當前項目：                            -- /webpack/config/index

module.exports = {
    dev: {
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            “/api/single/upload”：{
                target： "http://127.0.0.1:9092"
            }
        }

接口請求

    首先在src/configure/http/api 中創建文件(模塊名) 

    內容包括：

export default function (http) {
    return {
        save(data) {                                                    -- 函數名稱
            return http.json({                                      -- json請求
                url: 'api/rural/ruralcommend/save',    -- 請求地址
                data                                                        -- 參數
            });
        },

        get(data) {                                                       -- 函數名稱
            return http({                                               -- 非json
                url: 'api/rural/ruralcommend/get',       --  地址
                data，                                                      -- 參數 （注：此處非json）
                method: 'get'                                          -- 指定請求方式
            });
        }
    }
}

    請求方式：

this.$api('模塊名', '函數名稱', {參數})

                .then( response => {

                    -- response中存放着響應結果

                })

 

 

mock數據

前後端同時開發的時候，後端接口數據沒有出來，前端可以mock假數據，模擬後臺請求接口；

使用方式

    在src/configure/http（與api同級的mock）mock目錄下 有兩個目錄①intercept②response

    比如你要mock一個接口返回的數據（接口：/api/sys/list）

        首先要在①intercept中攔截/api/sys/list這個接口

            export default Object.assign([
                 // '/user/info',                         -- 註釋掉就不再攔截該接口 
                     '/map/city/queryTreeNum',    
            ].reduce((result, url) => Object.assign(result, { [url]: param => generateResponseResult(url, param) }), {}), {});

        然後在②response下建立對應的文件夾與模塊 文件中保存着mock的數據對象

             

                export default {    

                    "id": "1212",

                    "remark": "這是分類的描述這是分類的描述這是分類的描述這是分類的描述",

                    "name": "這是分類名稱"

                }

        

分頁數據、單個對象？

一. 單個對象：        -- 返回一個對象

export default {
    id: 1,
    name: '張三',
    phone: '110'
}

二.分頁數據：        -- 對象中包括分頁數據 與datalist集合

let datalist = [];

for (let i = 0; i < 15; i++) {
    datalist.push({
        id: i + 1,
        name: '這是分類名稱',
        remark: '這是分類的描述這是分類的描述這是分類的描述這是分類的描述',
        createTime: '2019-12-12 12:22:22'
    });
}

export default {
    datalist,
    totalelements: datalist.length,
    pagesize: 15,
    pagenum: 0
}