阅读 65

海洋数据分享平台开发手册(3)—— 前端设计

前面的工作中,我们已经实现将数据渲染到页面上了,但问题也是显而易见的——可读性太差,界面也过于简陋了,针对这个问题,我们要进行前端的开发。

                                                         预期效果图

如图所示,将数据处理成这种页面,就精美的许些了。

代码逻辑:

利用已有的vue框架,先进行一个个小组件编写,然后设置好HTML样式,将这些组件拼组到样式中,就有图示的网页效果了。

项目的创建与准备:

可视化课程的p49有着详细的vue安装步骤,并且对不必要的文件与预编代码进行了删除,没什么技术性的东西,不做详解。我主要给大家分析一些主要的文件与代码。

我的文件夹结构

大部分文件系统生成的,我们需要了解与编辑的一级目录如下:

  • pubulic: 静态资源文件夹,目录下为非编写内容,大致分类为:img(图片)、lib(文件库,我们只需要echarts.min.js)、map(存放绘制地图用的数据)、theme(可视化页面主题,可以自定义,也可以去官网下载
  • src: 基本为编译文件
  1. .idea: 系统文件
  2. asset  本该是放在pubulic里的,我好像放错了,也没敢改
  3. components  &  views  没有系统学习,我的理解是由于组件注册于组件功能代码写在一起过于臃肿,于是将其拆开——aaa.vue文件编写组件功能放在components下,aaaPage.vue文件实现对应组件的注册功能,并放在views文件下。
  4. router 文件index.js实现的功能就是后端的启动路由,即对应路径映射对应的组件。
  5. store 用不到                                 
  • vue.config.js: 本来配置文件也是在src的,vue-cli3搭建脚手架后将其移除,所以要自己创建js文件并进行一些简单配置。
  • App.vue 嵌入一个路由占位符
  • main.js : 将echarts与axios全局挂载,css样式与font等设置成全局调用,同时配置好基准路径,即后端能够渲染数据库数据的路径

同后端一样,大部分内容写好之后是不必更动的,也不是项目核心,下面对项目核心进行详解。

components

由上知该目录底下文件编写组件的功能的,名字与功能一一对应。

  • 组件功能

Cell.vue--地图模块

Humi.vue--湿度模块

Press.vue--压力模块

Seller.vue--商家模块(测试模块,最终并没有使用)

Speed.vue--风速模块

Temp.vue--温度模块

Wind.vue--风向模块

Direct.vue--地图模块(多次崩溃,已经弃用)

Model.vue--模板

  • Model.vue

子组件只有数据、具体函数的区别,总体框架备份在Model.vue中,且已经在文件中写下了详细的注释。

views

aaaPage.vue注册对应aaa.vue子组件。

ScreenPage.vue

aaaPage.vue事总组件注册,ScreenPage.vue是在所有子组件开发完成后进行编译,主要实现三个功能:

  1. 调用相关静态资源文件,搭建好html模板

2.将各个子组件嵌入模板

3.编写一些使用小功能(例如加入鼠标点击事件,实现大小图形切换)

至此,本项目基本开发完成,本机调试阶段结束,下一步就是部署服务器,实现联网访问了。

本篇结束。

点此下一篇。

文章分类
代码人生
文章标签