以下如有误漏，敬请指正。
目录
用到的模块：
- vue-cli：使用vue官方提供的脚手架可以快速构建出一个单页应用；
- express：用其搭建一个可以处理ajax请求的模拟服务器以供测试；
- echarts：为提高效率，舍弃模板提供的图表库，使用echarts作为图表；
- axios：封装了ajax请求的js库，由于没有用到jQuery的其他功能，故选择此；
问题梳理：
-
- echarts整合入其中不加载的问题
- 路由跳转
- 导航栏的动作
- 跨域请求
- 搭建一个可以处理ajax请求的模拟服务器
- ajax与Promise
问题解决：
目录组织：
主要目录：
- config：一些配置文件，设置代理就在index.js中
- src：所有开发的源文件目录
- server：用express搭建的测试服务器
echarts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<template> <div class="echarts" /> </template> <script> import * as echarts from "echarts"; export default { name: "echarts", props: { option: Object }, methods: { init() { if (this.chart) return; let chart = echarts.init(this.$el); this.chart = chart; } }, mounted() { if (this.option) this.init(); this.chart.setOption(this.option); this.chart.resize(null, null); }, watch: { option: { deep: true, handler: function(newVal) { this.chart.setOption(newVal); } } } }; </script> <style> .echarts { width: 100%; height: 100%; overflow: hidden; } </style> |
将整个echarts封装成一个单页组件echarts.vue。目前props只有一个值：option，通过父组件传入配置项。由于未做echarts的事件处理，因此暂不支持echarts事件。
不加载图表：vue生命周期的问题。若要将图表显示到当前组件的dom内，则echarts.init()初始化图表方法应该在vue挂载后才可以。
路由
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import Vue from 'vue' import Router from 'vue-router' import Index from '@/pages/index' import statCharts from '@/pages/stat_charts' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'index', component: Index }, { path: '/stat_charts', name: 'statCharts', component: statCharts } ] }) |
使用vue官方的vue-router作为前端路由，目前暂时写了首页和图表页的路由配置，path：匹配的路径，name：路由名称，component：路由匹配后加载的组件。
在app.vue文件中插入<router-view />即路由匹配后的组件替换此标签。
导航栏
导航栏的选中高亮和多级导航折叠暂时使用数据绑定class高亮和v-show折叠，存在一直高亮的问题，后续处理。
跨域请求
实际项目中前端所需的数据需要通过ajax向服务器端请求，而浏览器的同源策略不允许这样做。在此本人通过设置代理来解决跨域请求。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module.exports = { dev: { ...... proxyTable: { "/data": { //设置代理请求数据 target: "http://127.0.0.1:8081", //暂时用express监听8081端口模拟ajax请求的服务器端 changeOrigin: true, pathRewrite: { '^/data': '' //实际路径中没有 data 则为 '' } } }, ..... }, ..... } |
搭建一个模拟服务器以供测试
参考这篇博客即可。
ajax与promise
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
...... export default { data() { return { ...... barOption, //在外部定义的图表基本配置项，data为空，可以正确渲染图表样式，但没有具体的图 obama_budget_2012: {} //ajax请求的数据将来会以这个引用保存 } } mounted() { let _this = this; this.getBarData().then(() => { //新建promise并调用 _this.setBarData(); }); }, methods: { setBarData: function() { this.barOption.xAxis.value = this.obama_budget_2012.names; this.barOption.series[0].data = this.obama_budget_2012.budget2011List; this.barOption.series[1].data = this.obama_budget_2012.budget2012List; }, getBarData: function() { let _this = this; return new Promise(function(resolve, reject) { axios .get("/data/obama_budget_proposal_2012.list.json") .then(function(response) { _this.obama_budget_2012 = response.data; resolve(); }) .catch(function(error) { reject(error); }); }); } } } |
ajax不再赘述。promise已是ES6的标准，而我以前却没了解过。自己归纳起来还是有问题，就参考阮大神的书了，文档在这里，
图表数据需要向后台请求并且事时刷新，而ajax请求是异步的，这时会有一个问题，异步请求还未响应成功，echarts以空option对象进行初始化就会有问题，这样就需要人为控制请求响应和对象赋值的顺序，promise正好满足，将异步请求封装在其中也是推荐做法。
截图
