物联网平台:前端技术选型总结
(1)技术选型
针对物联网管理平台主要负责设备管理、指令下发、上报数据图表展示等功能.结合当前流程的主流前端技术框架应用情况考虑如下:
前端开发技术选型可采用vue3.0+typescript+elementUI(组件库)+html5+vuex(状态管理)作为核心的开发技术.采用npm+nodejs:进行前端包管理
采用webpack/yarn:进行资源加载和打包工具
采用vuetools:调试vue
采用vscode进行开发,使用插件如下: vetur
########################################################################################################
此外组件库还可以采用阿里开源的ant desgin vue实现企业家后端管理平台。文档和组件都很完善。上手很容易。
Ant Design Vue
########################################################################################################
(2)vue技术
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 实现多视图的单页面应用开发(SPA)。
- vue模板:
{{}}:文本
v-html:输出html
v-bind:绑定属性
v-if
v-on :监听事件
v-model:双向数据绑定
v-for :迭代数据
v-show
v-focus:元素获取焦点 - 计算属性:computed /methods
- 监听属性:watch 响应数据的变化
- 样式绑定:v-bind:class v-bind:style 绑定内联样式
- 事件处理: v-on:click
- 组件:
全局组件 Vue.component(tagName,options)
局部组件
props:传递数据给组件 - 自定义事件:
$on(eventName) 监听事件
$emit(eventName) 触发事件 - 路由:允许通过不同URL访问不同的内容,可实现多视图的单页面应用(SPA)。
路由的实现需要引入 vue-router库。 - 过度/动画
- 混入
- ajax(axios):实现异步请求后端数据
- vue-resource:实现异步加载
- 响应接口:添加数据动态响应接口
$watch 属性来实现数据的监听;
Vue.set() 设置对象属性
Vue.delete()动态删除属性 - vue项目搭建
安装最新最稳定vue:cnpm install vue@next
安装vue-cli:
npm install -g @vue/cli安装 @vue/cli-int:
cnpm i -g @vue/cli-init
创建vue项目:
vue create demovue
出现如上提示项目创建成功,提示进入demovue工程,运行 项目npm run serve。
出现如上界面访问http: //localhost:8080
访问vue项目页面成功。。。 - vue项目结构介绍
├──node_modules // 依赖
├──public // 静态文件
├──src // 源目录
├──api // api 统一管理
├──assets // 静态资源
├──components // 组件
├──plugins // vue 插件
├──route // vue-router
├──store // vuex
├──views // 页面
├──App.vue // 页面入口
├──element-variables.scss // element 全局变量
├──index.d.ts // 第三方依赖注入声明
├──main.ts // 主入口
├──shims-tsx.d.ts // tsx 模块注入声明
├──shims-vue.d.ts // vue 模块注入声明
├──.env.development // 开发环境变量
├──.env.production // 生成环境变量
├──.gitignore // git 排除文件
├──babel.config.js // bable 配置
├──package.json // npm 依赖管理
├──package-lock // npm 依赖记录
├──README.md // 项目描述
├──tsconfig.json // ts 配置
├──vue.config.js // vue 配置16. vue调试工具:devtools
(3)typescript技术
1.Typescript产生的历史:
1>对Javascript结构的静态分析可能错误(js是弱类型语法)。微软研发为防止并排查一些运行时错误,创建编译期进行静态分析的强类型语法。
2>与Javascript语法兼容。typescript是javascript的超集。
3>方便大型项目构建。Typescript引入了面向对象特性(基于类class对象、接口和模块),从而更好的构建代码,并利用了面向对象的设计原则和实践经验。会java的很好理解。
4>对于发行版本的代码,没有运行时开销。
5>遵循当前以及未来出现的ECMAscript规范。
6>跨平台的开发工具。支撑主流的操作系统上安装和执行。类似java中的wite once run anywhere.
个人理解typescript语法有大量的影子山寨了微服务的C#.net ,C#net期初山寨的java。
2.typescript架构:
语言层:
VS所属语言服务
适配VS部分(shims.ts)
编译层:
语言服务(services.ts) 独立的TS编译器(tsc.ts)
Typescript编译器核心:(core.ts/program.ts/scanner.ts/parser.ts/checker.ts/emitter.ts)
3.typesript语言特性:
p1. 开发环境搭建:vscode +nodejs+typescript插件
1.安装nodejs
2.安装vscode +typescript插件
3.npm install -g typescript
4.vscode创建 test.ts
输入 var t:number=1;
打开terminal终端执行:tsc test.ts
同一目录生成test.js文件
p2.语法:
声明变量:var /let/const(常量)
联合类型:存储多种类型值得变量,有点类似java中的泛型
类型守护:typeof/instanceof运算符对类型进行验证。
类别名:使用type关键字声明类型别名。
环境声明:允许在typescript中创建一个不会被编译到javascript中的变量。有利于与js代码、dom(文档对象模型)、bom(浏览器对象模型)结合而设计
函数:具名或匿名创建
类:class
接口:interface
命名空间(内部模块):被用于组织一些内置联系的特性和对象,使得代码结构清晰;使用namescpace和export关键字。声明定义前没使用export关键字修饰,命名空间外部无法访问。
模块声明:module修饰
。。。。后续继续补充typescript要点
物联网平台:前端技术选型总结相关推荐
- 前端技术选型最佳神器!
一键帮助你从上百万个开发包中选择最适合的. 当我们需要开发一个功能时,肯定希望能够选择最适合实现该功能的技术.框架.开发包.组件等. 如今,随着前端技术的发展,虽然越来越多的开发包诞生了,但在我们做技 ...
- 大数据平台架构技术选型与场景运用
内容来源:2017年5月6日,大眼科技CTO张逸在"魅族技术开放日第八期--数据洞察"进行<大数据平台架构技术选型与场景运用>演讲分享.视频地址:https://mp. ...
- SaaS模式、技术与案例详解——第15章 SaaS平台的技术选型
[本章导读语] "笑嘻嘻的小猫咪,"爱丽斯问道,"请您告诉我,我应该走哪条路 呢?""那取决于您想去何方."小猫回答说. ________路 ...
- 物联网和前端技术,两者相辅相成并且互相促进 —— 阿里云 MVP 黄强专访
黄强,江苏智慧新吴信息科技有限公司 ,前端架构师. 一直从事前端开发,从 jQuery,ExtJs,Backbone.Angular 到 React 一路走来,深入实践不同业务领域的前端平台架构,致力 ...
- 在线教育平台、网校搭建、远程教育平台搭建技术选型(268教育)
一直接触网校几年的时间.从技术开发到网校的运营感觉有自己的一套理解. 在线教育平台搭建技术是一方面,对如何运营,如何搭建适合很多公司他们自己的网校这个更重要.不需要多牛逼,需要最适合. 小广告:268 ...
- 前端技术选型的遗憾和经验教训
我是Max,Spectrum的技术联合创始人.Spectrum 是一个面向大型在线社区的开源聊天应用程序,最近被GitHub收购.我们是一个三人团队,主要拥有前端和设计背景,我们在这个项目上工作了近两 ...
- 一套比较完整的前端技术选型,需要规整哪些东西,你知道不?
1. 背景及现状 随着前端开发复杂度的日益增加,各种优秀的组件框架也遍地开花.同时,我们面临业务规模的快速发展和工程师团队的不断扩张,如何解决资源整合.模块开发.项目部署.性能优化等问题势在必行. 2 ...
- 【视频】IoT 物联网平台实例规格选型详解
阿里云IoT企业物联网云产品,提供了实例化售卖方式,当我们开通 IoT 企业实例时,需要选择 3个核心指标:设备量,消息上下行TPS,规则引擎TPS.实例开通页面,如下图: 企业物联网平台实例开通链接 ...
- 学习笔记(2):SpringBoot实战教程:SpringBoot企业级线上商城项目讲解-前端技术选型介绍1
立即学习:https://edu.csdn.net/course/play/26258/326468?utm_source=blogtoedu 前端技术:AdminLTE3 BootStrap jQu ...
最新文章
- C 语言内存区域分配(进程的各个段)详解
- python有道翻译-利用python写一个有道翻译的脚本
- pyhanlp 两种依存句法分类器
- TDSQL 全时态数据库系统-理念与愿景
- 牛客国庆集训派对day6T A-	2016【矩阵乘法】
- c oracle 记录,ORACLE 19c 操作相关记录
- java集合对字符串或对象去重
- 关于VC中的时间函数讨论
- 《经济学人》新一期封面主题:Govcoins 改变金融的数字货币
- Leetcode每日一题:925.Long Pressed Name(长按键入)
- spring3,unitils 与dbunit整合问题记录
- 使用 IntelliJ IDEA 导入 Spark源码及编译 Spark 源代码
- 【转】Golang 新手可能会踩的 50 个坑
- 如何开启QtCreator的代码自动补全功能
- 10分钟入门HTML
- ubuntu 16.04外接显示屏问题
- ggplot2学习总结
- 数字图像处理(1)——认识数字图像
- Chrome的一些快捷键
- 各类游戏对应的服务端架构