接上篇

vue全家桶+Echarts+百度地图，搭建数据可视化系统前端

1 前 言

1.1 业务场景

实现数据监控的系统。有线图、柱状图、地图，并具备定时刷新的功能。vue

1.2 业务分析

上一篇分析的步骤大体有：ios

1. 系统搭建vue-cli
2. vuex记录登陆信息
3. vue-router路由跳转
4. 3个维度的页面，提取出共用的组件
5. 各个组件开发
6. 调节样式，增长UI
7. 加入后台接口数据
8. 优化显示
9. 测试
10. 上线

上一篇介绍了 1-6 部分。本篇将介绍一下剩下的 7-10 部分。git

😂😂github

主要内容是 <font color=red>对数据的处理方式</font> 和 <font color=red>总体的数据逻辑</font> 。vue-router

望各位看官多提 建议和不足 哈，也但愿能本篇能给须要人带来 启发。vuex

成品效果图不方便发，仍是用上一篇，纯前端的效果图吧。vue-cli

2 正 文

2.1 请求处理数据

Vue 中 与后台交互一般使用的是 axiosnpm

2.1.1 安 装

npm i axios

也可经过cdn引用json

2.1.2 定 义

新建一个api.js

//  api.js
import axios from 'axios'
const http = axios.create ({
    baseURL : apiurl,       // 链接后端地址
    timeout : 1000 * 30,    // 超时时间，单位为毫秒
    headers ： {},          // 请求头，可添加'Authorization'、'X-Requested-With'、'Accept-Language'、'token'等
})

// 请求拦截
http.interceptors.request.use(config =>{
    // 可添加本身的设置，如修改参数、增长参数、修改headers
    return config
},error =>{
    // 可添加报错处理
    return Promise.reject(error)
})

// 响应拦截
http.interceptors.response.use(response =>{
    // 可添加处理逻辑
    return response
},error =>{
    return Promise.reject(error)
})

export default http

同时可在main.js中添加一个自定义全局对象，或者可在单独页面中引用

// main.js
import http from './api.js'

Vue.prototype.$http = http

2.1.3 使 用

a. get请求

在页面中处理时

query(){
    this.$http.get('/xxx/xxx?id='+id).then(res =>{
        // 返回的处理
        console.log(res)
        // res 通常包含code data
    },rej =>{
        // 报错的处理
        console.log(rej)
    })
}

b. post请求

new(){
    this.$http.post('/xxx/xxx',{
        id : '123',
    }).then(res =>{
        // 返回的处理
        console.log(res)
        // res 通常包含code data
    },rej =>{
        // 报错的处理
        console.log(rej)
    })
}

c. 其余请求

常用到的还有

put 多用于更新操做

delete 多用于删除操做

具体要看后台提供的功能接口方式

d. 多个请求

好比，我在进来页面后，要同时获取要2个线形图、数字、地图、柱状图、表格的数据

通常状况下，各个数据都是单独的接口来提供的。这样咱们就须要至少6个接口。

async query(){
    let that = this
    await axios.all([that.get1(), that.get2(), that.get3()]).then(axios.spread((res1, res2, res3) =>{
        // res1 为 get1 的返回
        // res2 为 get2 的返回
        // res3 为 get3 的返回
    }))
}

get1(){
    return this.$http.get('/xxx/xxx')
}

get2(){
    return this.$http.get('/xxx/xxx')
}

get3(){
    return this.$http.get('/xxx/xxx')
}

2.2 登 录

功能很简单，用户输入用户名、密码、验证码，点击登陆。

2.2.1 获取uuid

出于对登陆时效以及安全性的考虑。在登陆验证时，后台根据 uuid 和经过 uuid 获取到的验证码进行校验。

这里列出一些获取 uuid 的方法。来源于：网络。

方法一:

getUUID () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
        return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
    })
},

方法二：

generateUUID() { 
    var d = new Date().getTime()
    if (window.performance && typeof window.performance.now === "function") { 
        d += performance.now()
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 
        var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16) 
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
    })
    return uuid
}

方法三：

guid() { 
    function S4() { 
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    } 
    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4())
}

方法四：

/*
    指定长度和基数
*/
function uuid2(len, radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    var uuid = [],
        i;
    radix = radix || chars.length;

    if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
    } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';
        for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
        }
    }
    return uuid.join('');
}

2.2.2 密码加密

--input 
type="password" 可以使输入框中内容隐藏

传输时，我使用了md5加密

npm i -S js-md5

import md5 from 'js-md5'

let enCode = md(code)

而后就是调用后台接口将你的用户名、密码、验证码发送进行验证登陆。

2.2.3 存储登陆信息

使用过 Vue 的童鞋都清楚，使用vuex的时候，进行刷新页面，store中的数据就会重置。

会防止用户在刷新页面后数据没法获取的状况，通常会将数据同时储存到 sessionStorage 或 localStorage

二者区别这里就不介绍了。

// 储存session，具体放在哪一个位置根据实际业务
// 我这里放在了登陆验证经过以后，固然有不少参数，可以使用对象类型转成json ----JSON.stringify(info)
sessionStorage.setItem('info', '123')

// store.js

store = {
    state : JSON.parse(sessionStorage.getItem('info')) || {}
}

这样页面刷新后，store 会从 sessionStorage 拿到咱们的数据

2.3 业务页面

业务页面分了3个维度。

这里介绍2个维度的实现。

2.3.1 总体逻辑

单独的组件只处理数据的展现

如线形图单独写在一个组件中

我在须要的页面中进行引用，传入数据进行显示。

1. 用户登陆验证后，储存业务 ID 到 session 中，从登陆页面跳转到 层级1 页面。
2. 进入 层级1 后，created 中增长初始化方法。就是使用了上面介绍的 axios.all
3. 拿到各数据后，分别渲染到各个组件中。
4. 初始化完成后，触发定时刷新开发。
5. 根据定时器的时间，触发须要刷新的功能，同上 axios.all 和处理结果。
6. 点击层级1中某个数据，记录层级2须要的 ID2 到 session中，关闭定时刷新，跳转到 层级2 页面。
7. 进入 层级2 后，同层级1，先进行初始化，再进行定时刷新。
8. 层级3 以及 返回 的逻辑都基本和上面同样。

下面介绍一些可能会有 疑问 的地方

2.3.2 层级页面举例

至关于介绍了一些父子组件的一些处理。

// 层级1.vue
<template>
    <div id="xxx">
        <a-com ref="aRef" :args="argA"/>
        <b-com ref="bRef" :args="argB"/>
    </div>
</template>

<script>
    import Acom from './a.vue'
    import Bcom from './b.vue'
    import store from './store.js'
    
    export default {
        components : {
            'a-com':Acom,
            'b-com':Bcom,
        },
        
        created(){
            //  初始化方法
            this.init()
        },
        
        mounted(){
            //  定时查询方法
            this.timeq()
        },
        
        data() {
            return {
                //  传入子组件的数据，可可使用store
                argA : {},
                argB : {},
                
                // 定时开关
                timimg : false,
            }
        },
        
        methods: {
            async init(){
                let id1 = store.state.info.id1
                await this.query(id1)
                this.timimg = true
            },
            
            timeq(){
                //  这里定义了 5S 刷新一次
                let that = this
                this.timequery = setInterval(() =>{
                    if(timimg){
                        that.querytime(store.state.info.id1)
                    }
                },5000)
            },
            
            async query(id){
                let that = this
                await axios.all([that.get1(id), that.get2(id)]).then(axios.spread((res1, res2) =>{
                    // 数据传入组件a，触发组件a的初始化方法
                    that.argA = res1.data
                    that.$refs.aRef.init();
                    
                    // 数据传入组件b，触发组件b的初始化方法
                    that.argB = res2.data
                    that.$refs.bRef.init();
                }))
            },
            
            querytime(id){
                //  同 query()  
            },
            
            get1(id){
                return this.$http.get('xxx')    
            },
            
            get2(id){
                return this.$http.get('xxx')
            },
            
            //  跳转第二层级
            goto2(){
                this.timing = false
                if(this.timequery){
                    clearInterval(this.timequery)
                }
                // replace、push, 也可使用name 
                this.$router.replace('./path2')
            },
        }
    }
</script>

2.3.3 组件页面举例

// 若是使用了父组件向子组件传值的方式，需在子组件的 data 中 定义 props 用于接收

// echarts 初始化
init(){
    // 和上篇介绍 echarts 中定义差很少
    var myChart = this.$echarts.init(document.getElementById("id"),'temp')
    let option = {}
    option = {
        // 吧啦吧啦 一顿操做和配置
        // 可参考上一篇文章，更多参考 官网配置页面
        myChart.setOption(option, true)
    }
}

这里有一个须要注意的地方就是

横向柱状图，最下方 是第一条，咱们自定义标题的时候，就要颠倒过来使用。

同时会根据条数自动切换位置，咱们的表头也须要根据数量进行位置调整。

2.4 测 试

说实话，这方面一直都没认真写过。。。

通常业务变更的状况下，逻辑也会变更频繁。

但编写测试代码仍是很重要的。

Vue 官方推荐的是使用 karma， mocha 和 chai 等。

感兴趣的 能够 专门去了解学习下

这一大块不亚于 编写 业务代码 😅😅😅

这里很少介绍了哈。

2.5 打 包

npm run build

可在根目录中 新建 vue.config.js

官方文档： https://cli.vuejs.org/zh/config/

//  官方文档： https://cli.vuejs.org/zh/config/
module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
}

3 后 记

感谢支持。若不足之处，欢迎你们指出，共勉。

若是以为不错，记得 点赞，谢谢你们 😂

欢迎关注 个人： 【Github】 【掘 金】 【简 书】

本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

出处为：https://github.com/xrkffgg/Tools