eCell基金总结

项目地址：https://gitee.com/hedgehog12/...

手机端调试组件

• 在index.html文件内加上代码

1. 滚动行为在组件之间相互影响的解决办法：

• 使用路由提供的钩子函数

router.afterEach((to,from,next) => {
    window.scrollTo(0,0)
});

2. 微信分享接口配置 参考—微信js-sdk说明文档

3. axios路由拦截

• 路径：/src/server/httpserver.js
• 设置请求拦截和返回拦截

//添加一个请求拦截器
    axios.interceptors.request.use(config => {
        return config
    }, error => {
        return Promise.reject(error)
    });
    //添加一个返回拦截器
    axios.interceptors.response.use(response => {
        //对响应数据做些事
        if (response.data.code === 1002) {
            let config = response.config;
            //token
            return getRefreshToken() 
                .then(function(res) {
                    let data = res.data;
                    if (data.code === 1000) {
                        localStorage.setItem('authToken', data.data.authToken);
                        localStorage.setItem('refreshToken', data.data.refreshToken);
                        //修改原请求的token
                        config.headers.JWTToken = data.data.authToken;
                        /*这边不需要baseURL是因为会重新请求url
                            *url中已经包含baseURL的部分了
                            *如果不修改成空字符串，会变成'api/api/xxxx'的情况*/
                        config.baseURL = '';
                        //重新请求
                        return axios(config).then(
                            (responsedata) => {
                                console.log("重发上一次请求")
                                return responsedata
                            }
                        ).catch(
                            (response) => {
                                console.log("未渲染成功")
                                return response
                            });
                    } else {
                        removeStore('authToken');
                        removeStore('refreshToken');
                        router.push({path: '/login'});
                        return { data: { code: '1001' } }
                    }
                });
        } else if (response.data.code === 1001) {
            removeStore('authToken');
            removeStore('refreshToken');
            router.push({path: '/login'});
            return { data: { code: '1001' } }
        } else {
            return response
        }
    }, error => {
        // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
        if (error.response.status === 403) {
            router.push({
                path: "/error/403"
            });
        }
        //...........
        return Promise.resolve(error.response)
    })

4. vue.config 配置

• 编译打包文件的压缩优化
• 公共样式变量 : 全局配置最好只放入css变量，配置普通css会导致样式重复。

   chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("_assets", resolve("src/assets"))
            .set("_css", resolve("src/assets/css"));
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    resources: ['./src/assets/common/common.scss'
                    ],
                })
                .end()
        })
        config.module.rule('images')
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })

        config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,//匹配文件名 
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false // 不删除源文件
            }))

    },

5. 多个组件中监听vuex中同一个action的回调，如何避免重复执行方法。

• 多个组件同时发出请求，第一个请求赋值给该变量，其他情况直接返回该变量，具体看代码

//store.js 文件
const state={
    web3:null
};
var flag=false;
var fun=null;
const action={
    myFunction(){
        //如果有数据直接返回
        if (state.web3) {   
            Promise.resolve(state.web3)
                return   
            }else{
                //如果没有数据且是第一次请求则执行函数
                if(!falg){
                    falg=true;
                    fun=new Promise((resolve,reject)=>{
                        ajax('*****').then(res=>{
                            state.web3=res
                            resolve(res)
                        }).catch(err=>{
                            //报错情况下可以再次执行函数
                                falg=false;
                        })
                    })
                }
                //如果没有数据但是不是第一次请求直接返回promise函数
            return fun
        }
        }
}

多个页面同时监听获取净值数据，编写的订阅者发布者模型

var requestType = {
    //净值
    requestETFValue: 0,
    //价格
    requestTokenPrice: 1,
}

/**
   * 请求数据结构体
   * @param {*请求的页面名称} observeViewName 
   * @param {*请求名称} requestName
   * @param {*请求类型} requesttype 
   * @param {*回调} callback  
*/
var ETFRequest = /*#__PURE__*/function () {
    function ETFRequest(observeViewName, requestName, requesttype, callback) {
        this.observeViewName = observeViewName;
        this.requestName = requestName;
        this.callback = callback;
        this.requesttype = requesttype;
    }

    return ETFRequest;
}();

class Observe {
    constructor() {
        this.requestsDict = {}
        this.etfnamesarr = []
        this.isetfvaluerequestfree = true
    }
    // 订阅方法
    subscribe(etfrequest) {
        // console.log('subscribe')
        if (!etfrequest) {
            return
        }
        var key = etfrequest.requestName
        var callback = etfrequest.callback
        var requesttype = etfrequest.requesttype
        var observeViewName = etfrequest.observeViewName
        if (!key) {
            return
        }
        //没有对应的key时，初始化
        if (!this.requestsDict[key]) {
            this.requestsDict[key] = {
                'requestKey': [],
                'timerKey': '',
            }
        }

        //添加请求体到数组里
        var requestData = this.requestsDict[key]
        var requestList = requestData['requestKey']

        var isfound = false
        for (let i = 0; i < requestList.length; i++) {
            var request = requestList[i]

            var key2 = request.requestName
            var requesttype2 = request.requesttype
            var observeViewName2 = request.observeViewName
            if (key2 == key && requesttype2 == requesttype && observeViewName2 == observeViewName) {
                isfound = true
                break
            }
        }
        if (!isfound) {
            requestList.push(etfrequest)
        }

        //timer没启动时，启动一下
        var thetimer = requestData['timerKey']

        if (requesttype == requestType.requestETFValue) {

            UpGetFundPriceWith(etfrequest.requestName)

            if (!thetimer || thetimer === '') {
                let timer = setInterval(() => {
                    UpGetFundPriceWith(etfrequest.requestName)
                }, 3000)
                requestData['timerKey'] = timer
            }
            
        } else if (requesttype == requestType.requestTokenPrice) {
            UpGetCurrencyPriceInfoWith(etfrequest.requestName)
            if (!thetimer || thetimer === '') {
                let timer = setInterval(() => {
                    UpGetCurrencyPriceInfoWith(etfrequest.requestName)
                }, 5000)
                requestData['timerKey'] = timer
            }
        }
    }
    // 发布
    notify(key, value) {
        var requestData = this.requestsDict[key]
        if (requestData) {
            var requestList = requestData['requestKey']
            if (requestList && requestList.length > 0) {
                for (let i = 0; i < requestList.length; i++) {
                    var request = requestList[i]
                    var fn = request.callback
                    fn.call(this, {key,value})
                    // console.log(7878878,value)
                }
            }
        }

    }
    //删除订阅者
    unsubscribe(etfrequest) {
        if (!etfrequest) {
            return
        }
        var key = etfrequest.requestName
        if (!key || key == '') {
            return
        }

        for (var k in this.requestsDict) {
            if (k === key) {
                var requestData = this.requestsDict[key]
                var requestList = requestData['requestKey']
                if (requestList) {
                    for (let i = requestList.length - 1; i >= 0; i--) {
                        var isequal = (requestList[i].observeViewName == etfrequest.observeViewName)
                        if (isequal) {
                            requestList.splice(i, 1)
                        }
                    }

                    if (requestList.length == 0) {
                        var timer = requestData['timerKey']
                        if (timer && timer !== '') {
                            clearInterval(timer);
                            timer = ''
                            requestData['timerKey'] = ''
                        }
                    }
                }
                break
            }
        }
    }
}

const observeManager = new Observe()

export default observeManager

export { ETFRequest, requestType };