Vue + Express + MySQL驾驶行为分析全栈项目(四): Leftlet组件与图层加载功能
背景自己做了一点点的小尝试:基于前馈神经网络 LSTM 的个体出行目的地预测模型,基于个体历史出行数据,模型可以实现出行目的地的实时动态预测功能。 模型其实具有实际应用功能,为了对其应用场景进行探索,拟开发一个全栈的项目,在Web客户端实现用户出行的动态预测效果,同时能够提供数据可视分析等功能。 项目地址 可视化效果 准备工作 首先下载安装 leftlet。 1npm install leaflet --save 然后在全局入口 main.js 文件中引入leftlet,包括样式文件 123456// 引入插件与样式import * as L from 'leaflet';import 'leaflet/dist/leaflet.css';// 全局注册Vue.L = Vue.prototype.$L = L; 安装leftlet地图图层的加载插件— leaflet.chinatmsproviders 1npm i leaflet.chinatmsproviders --save 123import * as Provider f...
Vue + Express + MySQL驾驶行为分析全栈项目(三): 前端设计
背景自己做了一点点的小尝试:基于前馈神经网络 LSTM 的个体出行目的地预测模型,基于个体历史出行数据,模型可以实现出行目的地的实时动态预测功能。 模型其实具有实际应用功能,为了对其应用场景进行探索,拟开发一个全栈的项目,在Web客户端实现用户出行的动态预测效果,同时能够提供数据可视分析等功能。 项目地址 可视化效果 前端结构设计下图是整个项目的结构,也就是采用Vue-cli脚手架搭建的前端项目结构 buile 文件夹存放项目构建脚本。config 文件夹存放项目的配置信息,包括webpack配置及端口转发等。dist/docs 文件夹存放的是项目构建后的内容,即编译出的项目代码。node_modules 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件。server 文件夹存放的是服务器相关代码与数据。src 存放前端项目的源码。static 存放项目的静态资源。index.html 项目的入口页,也是唯一的HTML页面。package.json 定义了项目的所有依赖,包括开发时依赖和发布时依赖。 其中前端开发的大多工作是在 src 文件夹下进...
Vue + Express + MySQL驾驶行为分析全栈项目(二): 服务器搭建
背景自己做了一点点的小尝试:基于前馈神经网络 LSTM 的个体出行目的地预测模型,基于个体历史出行数据,模型可以实现出行目的地的实时动态预测功能。 模型其实具有实际应用功能,为了对其应用场景进行探索,拟开发一个全栈的项目,在Web客户端实现用户出行的动态预测效果,同时能够提供数据可视分析等功能。 项目地址 可视化效果 服务端结构设计结构设计如下图所示: api 文件夹存放的是网页路由查询逻辑的实现代码。py-script 存放的是python的脚本及训练好的深度学习模型。tables 是基于Sequlize的数据库表模型。config-default 定义了数据库连接信息。db.js 定义了Sequlize对象模型。func.js 定义了一些函数接口。index.js 是服务器的启动入口,定义了路口链接的运行文件。table.js 将tables文件中的表模型统一用模块接口暴露出来。 服务器搭建服务端采用了基于Node.js运行的Web应用框架——Express,首选需要安装Express框架。(前提是电脑安装了Node.js,如需安装,请参考其它网上教程) 12// 进...
Vue + Express + MySQL驾驶行为分析全栈项目(一): 项目初始化
背景自己做了一点点的小尝试:基于前馈神经网络 LSTM 的个体出行目的地预测模型,基于个体历史出行数据,模型可以实现出行目的地的实时动态预测功能。 模型其实具有实际应用功能,为了对其应用场景进行探索,拟开发一个全栈的项目,在Web客户端实现用户出行的动态预测效果,同时能够提供数据可视分析等功能。 项目地址 可视化效果 动态预测效果 技术栈1. 前端界面:Vue框架 + iView组件库 + ES6标准 + Webpack资源打包工具 + Leftlet地图交互JS库 + ECharts图表可视化库。 Vue是一个渐进式的前端开发框架。它只关注图层界面(不像Angular一样提供全家桶),通过数据的双向绑定解放开发者,让开发者可以专注于业务逻辑的代码。同时,Vue简单易上手,初学者完全不需要学习任何的新知识。基于Vue搭建前端界面的逻辑,包括界面模块层级关系、路由、操作逻辑等等。iView组件库是一个基于Vue.js的可视化组件库,提供高质量的前端组件,例如按钮、表格、任务栏等等,基于该组件库提供用户交互的入口。ES6标准是JavaScript的新一代标准,规范了类的继承,...
LeetCode 75.颜色分类
题目给定一个包含红色、白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色、白色、蓝色顺序排列。 此题中,我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 注意:不能使用代码库中的排序函数来解决这道题。 示例:12输入: [2,0,2,1,1,0]输出: [0,0,1,1,2,2] 思路 + 代码先统计0,1,2分别出现的次数,然后按照各自数量依次赋予数组新数值。 时间复杂度: O(N^2)空间复杂度: O(1) 1234567891011121314151617181920class Solution { public void sortColors(int[] nums) { if(nums==null || nums.length==0) return; int[] counts = new int[3]; for(int i=0; i<nums.length; i++){ counts[nums[i]]++; ...
文档对象模型DOM
DOM是什么?DOM,即Document Object Model,文档对象模型,用于操作HTML的编程接口。 它描绘了一个层次化的节点树,允许编程人员进行节点的添加、修改与删除等操作。 DOM节点DOM 1级定义了一个Node接口,由DOM中所有的节点实现。 一共有12中节点类型,其中包括Document、Element节点类型等,可通过node.nodeType查询每个节点的类型,例如,Element的节点类型返回数值为1。 每一个节点都有childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild等节点查询方法。 还有appendChild、insertBefore、replaceChild、removeChild、cloneNode等操作节点的方法。 DocumentDocument节点表示整个文档。浏览器中的document是一个全局对象,表示HTML页面,是HTMLDocument对象的实例。 document.documentElement:快速取得对html的引用。documen...
JavaScript中的函数表达式
函数表达式函数表达式是定义函数的一种方式,如下: 12345678// 函数表达式var add = function(v1, v2){ return v1 + v2;}// 函数声明function add(v1, v2) { return v1 + v2;} 函数表达式可以创建一个匿名函数,它与JS的很多特性与模式有关,包括闭包、私有变量创建等等。 闭包闭包指一个函数,该函数有权访问其他函数作用域中的变量。 123456789101112131415161718192021function createComparisonFunction(propertyName){ // 闭包 return function(object1, object2){ var value1 = object1[propertyName]; var value2 = object2[propertyName]; if(value1 < value2){ ...
JavaScript中的继承
浅述JS继承JS作为一门不是很严谨的OO语言,由于其函数没有签名,因此不能实现签名继承的接口形式,却可实现属性与方法的完全继承。 JS的继承方式有六种:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承及寄生组合继承。 原型链继承在JS对象一章讲到了构造函数的原型对象,如果一个构造函数的原型对象是另一个构造函数的实例,那么通过该构造函数创建的实例就继承了原型对象对应构造函数的全部属性与方法。 123456789101112131415161718192021222324function SuperType(name){ this.name= name; this.color = ["red", "green", "blue"];}SuperType.prototype.sayHello = function(){ console.log("Hello " + this.name);}function SubType(name,age)&...
JavaScript中的对象
对象的概念JS 中的对象其实是无序属性的集合,属性包括基本数据、函数与对象,每个属性有属性名,属性名与属性值以键值对的形式保存在对象内部。12345678// JS中的一个对象var person = { name: "syz", job: "Software Engineer", sayHello: function(){ console.log("Hello"); } } 对象的属性为了JavaScript引擎可以操作对象中的属性,每个属性定义了对应的两种属性类型: 1. 数据属性。 2. 访问器属性。 数据属性是对一个对象属性值的操作说明,共有四类说明:configurable、enumerable、writable及value。 可通过Object.defineProperty实现不同属性的值操作限定,接收三个参数,第一个是操作对象、第二个是操作对象的属性第三个是对该属性的操作限定。 1234567891011121314151617...
JavaScript基础知识点
为啥“又”学JavaScript?那年头发还多,正是大四上学期。提前联系了导师,由于项目原因,第一次接触到JS。 然后,看了两周左右的入门书籍,入了前端的坑。 结果,自己觉得前端没啥技术含量,跑回去学后端开发,也就是Java开发的一套东西。 看到数据库、并行化编程部分,心态崩了。 自己还是喜欢前端开发。 又滚回来重新学习。 看到网页在自己面前展示,真TM有意思。 JavaScript这门语言JavaScript很有趣,比Java有趣多了。 Java好比是一个严谨的大叔,什么都严格要求,准确但无趣。 JavaScript好比是一个热血青年,喜欢打篮球,生动有趣。 不过JavaScript也不老了,1995年诞生。当时叫这个名字还是蹭Java的热度。。。 JavaScript由三剑客组成:ECMAScript、DOM、BOM。 ECMAScriptECMAScript是ECMA-262标准定义的一种语言规范,规定了一门语言的5类部分:类型、语句、关键字、保留字、操作符及对象。 ECMAScript没有定义任何语言运行的环境要求,只是说明,你按照我这个规范,可以实现一种编程语言。不像J...



