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
}