接上篇
vue百口桶+Echarts+百度舆图，搭建数据可视化体系
1 前 言
1.1 营业场景
完成数据监控的体系。有线图、柱状图、舆图，并具有定时革新的功用。
1.2 营业剖析
上一篇剖析的步骤大抵有：
- 体系搭建
vue-clivuex纪录登录信息vue-router路由跳转- 3个维度的页面，提掏出共用的组件
- 各个组件开辟
- 调治款式，增添UI
- 到场背景接口数据
- 优化显现
- 测试
- 上线
上一篇引见了 1-6 部份。本篇将引见一下剩下的 7-10 部份。
😂😂
主要内容是 <font color=red>对数据的处置惩罚体式格局</font> 和 <font color=red>团体的数据逻辑</font> 。
望列位看官多提 建媾和不足 哈，也希望能本篇能给须要人带来 启示。
制品效果图不方便发，照样用上一篇，纯前端的效果图吧。
2 正 文
2.1 要求处置惩罚数据
Vue 中 与背景交互平常运用的是 axios
2.1.1 安 装
npm i axios也可经由过程cdn援用
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 = http2.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-md5import 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 团体逻辑
零丁的组件只处置惩罚数据的展现
如线形图零丁写在一个组件中
我在须要的页面中举行援用，传入数据举行显现。
- 用户登录考证后，贮存营业
ID到session中，从登录页面跳转到 层级1 页面。 - 进入 层级1 后，
created中增添初始化要领。就是运用了上面引见的axios.all - 拿到各数据后，离别衬着到各个组件中。
- 初始化完成后，触发定时革新开辟。
- 依据定时器的时刻，触发须要革新的功用，同上
axios.all和处置惩罚结果。 - 点击层级1中某个数据，纪录层级2须要的
ID2到session中，封闭定时革新，跳转到 层级2 页面。 - 进入 层级2 后，同层级1，先举行初始化，再举行定时革新。
- 层级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 后 记
感谢支撑。若不足之处，迎接人人指出，共勉。
假如以为不错，记得 点赞，感谢人人 😂
本文章采纳 学问同享签名-非商业性运用-雷同体式格局同享 4.0 国际允许协定 举行允许。
