vue整合bootstrap静态模板

《vue整合bootstrap静态模板》
以下如有误漏,敬请指正。

用到的模块:

  • vue-cli:使用vue官方提供的脚手架可以快速构建出一个单页应用;
  • express:用其搭建一个可以处理ajax请求的模拟服务器以供测试;
  • echarts:为提高效率,舍弃模板提供的图表库,使用echarts作为图表;
  • axios:封装了ajax请求的js库,由于没有用到jQuery的其他功能,故选择此;

问题梳理:

    • echarts整合入其中不加载的问题
    • 路由跳转
    • 导航栏的动作
    • 跨域请求
    • 搭建一个可以处理ajax请求的模拟服务器
  • ajax与Promise

问题解决:

目录组织:

《vue整合bootstrap静态模板》

主要目录:

  • config:一些配置文件,设置代理就在index.js
  • src:所有开发的源文件目录
  • server:用express搭建的测试服务器

echarts

将整个echarts封装成一个单页组件echarts.vue。目前props只有一个值:option,通过父组件传入配置项。由于未做echarts的事件处理,因此暂不支持echarts事件。

不加载图表:vue生命周期的问题。若要将图表显示到当前组件的dom内,则echarts.init()初始化图表方法应该在vue挂载后才可以。

路由

使用vue官方的vue-router作为前端路由,目前暂时写了首页和图表页的路由配置,path:匹配的路径,name:路由名称,component:路由匹配后加载的组件。

app.vue文件中插入<router-view />即路由匹配后的组件替换此标签。

导航栏

导航栏的选中高亮和多级导航折叠暂时使用数据绑定class高亮和v-show折叠,存在一直高亮的问题,后续处理。

跨域请求

实际项目中前端所需的数据需要通过ajax向服务器端请求,而浏览器的同源策略不允许这样做。在此本人通过设置代理来解决跨域请求。

搭建一个模拟服务器以供测试

参考这篇博客即可。

ajax与promise

ajax不再赘述。promise已是ES6的标准,而我以前却没了解过。自己归纳起来还是有问题,就参考阮大神的书了,文档在这里

图表数据需要向后台请求并且事时刷新,而ajax请求是异步的,这时会有一个问题,异步请求还未响应成功,echarts以空option对象进行初始化就会有问题,这样就需要人为控制请求响应和对象赋值的顺序,promise正好满足,将异步请求封装在其中也是推荐做法。

截图

《vue整合bootstrap静态模板》

《vue整合bootstrap静态模板》

点赞
  1. Pingback: WOW Blog

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注