ZhaiMou
ZhaiMou

实现 前端框架 SPA 路由功能：Hash 模式与 History 模式的手动实现

前言

在前端框架（如 Vue.js、React 等）中，路由管理通常会配置一个 router 对象来定义 URL 路径与组件的映射关系。

  • 路径（path）: 这是浏览器 URL 的一部分，比如 /home 或 /about。
  • 组件（component）: 这是与该路径相关联的 Vue 组件（或其他框架的组件），如 Home.vue 或 About.vue。
    代码
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

对于现代开发的项目来说，稍微复杂一点的 SPA ，都需要用到路由。而 vue-router 正是 vue 的路由标配，且 vue-router 有两种模式： hash 和 history 。

Hash模式

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。

使用Hash模式手写实现一个简单的 SPA 路由功能：
创建了两个链接：首页 和 关于。它们分别指向 #/home 和 #/about，这两个链接通过哈希（#）实现路由。

创建了一个 div 元素，ID 为 viewrouter，用于显示根据路由变化而改变的内容。

创建一个 routes 数组，其中包含两个路由对象，每个对象有 path 和 component 属性。path 是 URL 哈希值，component 是要在视图中显示的内容。

onHashChange 函数会在哈希变化时被调用。它首先打印当前的哈希值。

遍历 routes 数组，检查当前的哈希值是否匹配路由路径。如果匹配，更新 #viewrouter 的 innerHTML 内容为相应的 component。

DOMContentLoaded 事件在初始 HTML 文档被完全加载和解析后触发，这样可以立即显示初始内容。

hashchange 事件在 URL 哈希变化时触发，确保用户点击链接时能够更新视图。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

#viewrouter{

width:100px;

height:100px;

background-color: blue;

}

</style>

</head>

  

<body>

<a href="#/home">首页</a>

<a href="#/about">关于</a>

<div id="viewrouter">

</div>

<script>

const router = document.getElementById('viewrouter')

const routes = [

{

path: '#/home',

component: '这是首页'

},

{

path: '#/about',

component: '
这是关于
'

},

]

const onHashChange = () => {

console.log(location.hash)

routes.forEach(item=> {

if(item.path ===location.hash){

router.innerHTML = item.component

}

});

}

window.addEventListener('DOMContentLoaded', onHashChange)

window.addEventListener('hashchange',onHashChange)

  

</script>

</body>

  

</html>

实现 前端框架 SPA 路由功能：Hash 模式与 History 模式的手动实现_第1张图片

History模式

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。

使用History模式手写实现一个简单的 SPA 路由功能
通过 history.pushState 和 popstate 事件实现了一个简单的前端路由系统：
  • 用户点击导航链接时，更新 URL 并阻止默认行为。
  • 更新浏览器历史记录并根据当前路径显示相应的内容。
  • 处理浏览器的返回按钮等历史记录操作时，重新渲染正确的内容。

实现 前端框架 SPA 路由功能：Hash 模式与 History 模式的手动实现_第2张图片

如果对你有所帮助就点个关注吧，会持续更新文章

你可能感兴趣的:(前端框架,哈希算法,算法,前端,vue.js,react,reactjs)

  • 晨间日记 2022 10 8 算法逻辑笼中钗，《武林三绝》第七回之七十 微丹湜意
    细细读来，发现西门化也好，华家兄弟也好，宇文家也好，都有一个特点，也就是说，他们之间可以提取公因数。这都在做因式分解数学题了。他们都是家族企业，家族企业最大的特点就是规模不容易壮大，而且内部其实很脆弱，但是有问题不容易解决，会缠绵很久的。当然也有强大的家族企业，可是如果在创业期，或者是发展期，家族企业就是这种模样。这就难怪三家都不约而同地向外探索，寻求帮助。可是相同的质量产生的共鸣，吸引来的，都是
  • 2019年面试遇到的笔试题 程序猿阿峰
    前端面试，肯定是少不了笔试题，果然，今天去面试就遇到的笔试题，慌了一批。回来赶紧整理了一下一、css3的常用的新特性？flex布局和传统布局有什么区别？css3的新特性那就多啦，简单的列举了几个：过渡transition:CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)动画animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认
  • vue.js在js里获取属性，触发vue.js内的方法 摸鱼的张三 javascriptvue.jsflutter
    在script标签内把appVue设置varvarappVue=newVue({})appVue不能跨标签也就是说不能这样写varappVue=newVue({})console.log(appVue)上面这个是错的varappVue=newVue({})console.log(appVue)这个是vue2.js的版本这样写可以vue3.js是没有的然后拿到appVue就可以绑定原生事件触发app
  • 一个正经的前端学习 开源 仓库(第1天） 掘金-我是哪吒 javavuehtmlcssjs
    低调务实优秀中国好青年(简介)&&附加答案https://github.com/webVueBlog/Leetcode√-“三十年河东，三十年河西，莫欺少年穷”一个☝️正经的前端学习开源仓库，启发来自淘宝大佬@冴羽，初心做一个真正能帮助到大家的仓库。（非常口语化的，手写总结）：我是哪吒：如果你所学的东西处于喜欢才会有强大的动力支撑。交流讨论&&如何学习&&转载声明第一：你可以直接在本仓库阅读即可，
  • web前端达到什么水平，才能找到工作？ cj瑾瑜 前端htmljavascriptcsscss3
    一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
  • 第 12 章 Spring MVC 扩展和 SSM 框架整合 HUNAG-DA-PAO springmvcjava
    SpringMVC框架处理JSON数据SON格式数据在现阶段的Web项目开发中扮演着非常重要的角色。在前端页面和后台交互的过程中，需要一种格式清晰、高效且两端都可以轻松使用的数据格式做交互的媒介，JSON正可以满足这一需求。JSON数据的传递处理在Java中处理JSON数据的传递通常涉及到序列化和反序列化操作。序列化是将Java对象转换为JSON格式的字符串，以便可以将其存储或通过网络传输；反序列
  • 《数据结构与算法》知识点（四） 游戏原画设计
    第七章查找顺序查找、折半查找、索引查找、分块查找是静态查找，动态查找有二叉排序树查找，最优二叉树查找，键树查找，哈希表查找静态查找表顺序表的顺序查找：应用范围：顺序表或线性链表表示的表，表内元素之间无序。查找过程：从表的一端开始逐个进行记录的关键字和给定值的比较。顺序有序表的二分查找。平均查找时间(n+1)/nlog2(n+1)分块查找：将表分成几块，块内无序，块间有序，即前一块中的最大值小于后一
  • Interceptor拦截器+JWT令牌实现登陆验证 wy08success Interceptorspringbootjava登陆验证
    一、背景与过滤器的作用类似，不过拦截器是spring中的组件，只能拦截进入spring的请求；过滤器则可以拦截所有从前端页面发送来的请求。*拦截器和过滤器选一就可以实现登陆验证，过滤器的实现在以下这篇博客中，有需要可以自取：Filter过滤器+JWT令牌实现登陆验证-CSDN博客二、分析定义拦截器，实现HanderInterceptor接口，并重写其所有方法。注册拦截器三、实现1、目录结构：2、L
  • 算法练习——迷宫问题（Java）bfs广搜 流萤点火 算法bfsjava
    问题描述：小明置身于一个迷宫，请你帮小明找出从起点到终点的最短路程。小明只能向上下左右四个方向移动。输入输入包含多组测试数据。输入的第一行是一个整数T，表示有T组测试数据。每组输入的第一行是两个整数N和M（1que,intgx,intgy,intn,intm,char[][]arr){Qq=newQ();q.x=sx;q.y=sy;q.dept=0;que.add(q);//添加intfinish
  • 平滑法时间序列模型原理及Python实践 AI智博信息 数据分析与挖掘python人工智能
    平滑法时间序列模型原理主要涉及通过一定的算法对时间序列数据进行平滑处理，以消除或减弱数据中的随机波动和噪声，从而揭示出数据中的长期趋势和季节性变化，进而对未来数据进行预测。以下是平滑法时间序列模型的详细原理：一、基本原理平滑法时间序列模型基于对历史数据的平滑处理，通过对数据的平均或加权平均，去除数据中的随机波动，使得时间序列数据更加平滑，便于分析和预测。这种方法能够帮助我们更好地理解数据的长期趋势
  • Vue 图片预览功能实现指南 繁依Fanyi vue.js前端javascriptpython人工智能算法开发语言
    1.介绍在现代web应用程序中，图片预览功能提升了用户体验，使用户可以在上传图片之前查看图片内容。本文将详细介绍如何在Vue.js应用中实现图片预览功能，包括基本实现、进阶功能、与ElementUI的集成、常见优化技巧以及与其他库的结合使用。2.基本功能实现2.1环境准备确保你的开发环境已经配置好，包括VueCLI和Node.js。如果还没有安装VueCLI，你可以通过以下命令安装：npminst
  • 代码随想录算法训练营第三天| 链表01 咕咕鹄鹄 算法
    一、链表基础链表是一种通过指针串联在一起的线性结构。每一个节点由两部分组成，一个是数据域一个是指针域（存放指向下一个节点的指针）。最后一个节点的指针域指向null（空指针的意思）。链表的入口节点称为链表的头结点也就是head。链表类型：单链表、双链表、循环链表单链表：双链表：每一个节点有两个指针域，一个指向下一个节点，一个指向上一个节点。双链表既可以向前查询也可以向后查询。循环链表，就是链表首尾相
  • 静态库制作与使用 罗古洞的女婿 Linux与C++
    目录1静态库概念2静态库制作3静态库使用4优劣点1静态库概念其实库的概念。就是把一系列函数封装在一个二进制文件中，这一系列的函数的声明可以放在一个头文件中，写代码的时候直接包含头文件然后就可以直接使用库中的函数。在编译的时候要指定库，这样生成的二进制可执行文件是可以直接使用的。这样做有什么好处呢？比如我们发明了某种新的算法，但是我们又不想把源码给别人，那么就可以把它们封装成库，然后通过头文件提供接
  • JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册 2401_84094868 程序员前端javascriptxml
    创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum
  • 前端技术简介 2401_83916204 程序员前端
    “前端开发”是从“网页制作”演变而来的。从2005年开始，互联网进入web2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含
  • 大二上学期详细学习计划 学会沉淀。 学习
    本学习完成目标：项目：书籍：《mysql必知必会》《java核心技术卷》（暂时）加强JavaSE的学习，掌握Java核心Mysql+sql（把牛客上的那50道sql语句题写完）git+maven完成springboot项目（跟着黑马敲）对于每天的Java学习进行记录算法：刷题（多去刷cf上的题，每周15道）针对最近比赛薄弱的地方加强练习（图论，字符串，动态规划，搜索）cf先上1400，牛客和atc
  • 前后端分离，Asp.net core webapi 如何配置跨域 代码掌控者 C#asp.netcore.netcore经验分享c#
    前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建
  • 前端大文件上传 没资格抱怨 vue2前端
    大文件上传是需要前端和后端同时参与才可以实现的。思路大文件上传整体思路：文件切片和断点续传前端思路利用上传控件inputtype="file"绑定一个change事件，在回调中通过事件对象的e.target.files拿到这个文件对象，进行文件对象的slice方法，进行切片，一个大文件就转换成多个小文件了。借助http的可并发性，同时上传多个切片。这样从原本传一个大文件，同时传多个小的文件切片，可
  • 前端文件上传总结 小小小小小小拉松 javascripthtml5
    第一种：经典的form和input上传。设置form的aciton为后端页面，enctype="multipart/form-data"，type=‘post’提交使用input选择文件，设置好其他input的值，点击提交，将文件数据及签名等认证信息发送到form设置的action对应的页面，浏览器也会跳转到该页面。触发form表单提交数据的方式有2种，一种是在页面上点击button按钮或按钮触发
  • Uni-app 开发微信小程序 vvvae1234 uni-app
    随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套
  • ArcGIS地图切片原理与算法 数智侠 GIS
    ArcGIS地图切图系列之（一）切片原理解析点击打开链接ArcGIS地图切图系列之（二）JAVA实现点击打开链接ArcGIS地图切图系列之（三）MapReduce实现点击打开链接
  • 前端有关文件上传下载操作 发呆小天才yy 前端javascript
    文件上传文件上传有两种形式（传给后端的文件形式）变成blob通过formData搭载传输（二进制blob传输）转为base64直接传输(简便，但是后端需要解码，时间长)，通过fileReader搭载相关对象：files（blob的一个子类）：通过input标签读取过来的文件对象（属于前端的方法，没办法直接传给后端）blob:不可变的二进制内容，包含很多操作方法（newBlob([file])直接将
  • springmvc 前后端日期格式的转换 owlets_ju javajava
    1.后台Date类型返回前端String类型@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")它的作用是，出参时，自动把Date型对象数据转化成格式化后的字符串输出:yyyy-MM-ddHH:mm:ss示例：@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")priva
  • 数组的随机组合的两种算法 草莓味的¥猪 算法自动化测试算法
    算法1：importjava.util.*;publicclassTest{/*****利用递归进行排列组合算法打印出所有可能的组合*@return*/publicstaticList>show(Stringc[]){List>result=null;for(inti=0;iresultList=newArrayList>();for(intz=0;zlist1=newArrayList<>();
  • 前后端时间转换的那些常见问题及处理方法 繁依Fanyi 状态模式python算法java开发语言androidgithub
    在现代的Web开发中，前后端分离的架构已经成为主流，尤其是在SpringBoot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同，可能会导致时间在传递过程中出现问题，比如时区不同步、格式不一致等。因此，本文将详细讨论在SpringBoot+Vue前后端分离架构中如何处理时间转换问题，并提供一些解决方案。一、前后端时间处理的常见
  • 曲线的平滑平滑处理 zq4132 c++qtc数据算法
    最近在写一些数据处理的程序。经常需要对数据进行平滑处理。直接用FIR滤波器或IIR滤波器都有一个启动问题，滤波完成后总要对数据掐头去尾。因此去找了些简单的数据平滑处理的方法。在一本老版本的《数学手册》中找到了几个基于最小二乘法的数据平滑算法。将其写成了C代码，测试了一下，效果还可以。这里简单的记录一下，算是给自己做个笔记。算法的原理很简单，以五点三次平滑为例。取相邻的5个数据点，可以拟合出一条3次
  • 探索C#编程：高效解决N皇后问题的回溯算法实现 AitTech 算法算法c#开发语言
    在C#中，回溯算法是一种通过探索所有可能的候选解来找出所有解的算法。如果候选解被确认不是一个解（或者至少不是最后一个解），回溯算法会通过在上一步进行一些变化来撤销上一步或上几步的计算，以获得新的候选解。这个过程一直进行，直到找到所有解或确定无解。回溯算法常用于解决组合问题、排列问题、子集问题、棋盘问题（如八皇后问题）、图的着色问题、旅行商问题等。示例：C#中的回溯算法实现N皇后问题N皇后问题是一个
  • 探索深度学习的奥秘：从理论到实践的奇幻之旅 小周不想卷 深度学习
    目录引言：穿越智能的迷雾一、深度学习的奇幻起源：从感知机到神经网络1.1感知机的启蒙1.2神经网络的诞生与演进1.3深度学习的崛起二、深度学习的核心魔法：神经网络架构2.1前馈神经网络（FeedforwardNeuralNetwork,FNN）2.2卷积神经网络（CNN）2.3循环神经网络（RNN）及其变体（LSTM,GRU）2.4生成对抗网络（GAN）三、深度学习的魔法秘籍：算法与训练3.1损失
  • C++ STL概念之 算法 元凌丶 算法c++开发语言
    sortdefault(1)templatevoidsort(RandomAccessIteratorfirst,RandomAccessIteratorlast);custom(2)templatevoidsort(RandomAccessIteratorfirst,RandomAccessIteratorlast,Comparecomp);作用：用于对容器中的元素进行排序。它通常采用快速排序算
  • UmiJS3基础 若梦plus React.jsreact.jsjavascript前端reactjsreact
    UmiJS3基础https://umijs.org/UmiJSUmiJS是一个类Next.JS的react开发框架。他基于一个约定，即pages目录下的文件即路由，而文件则导出react组件然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各种场景里。安装umi源码create-umiumi-plugin-react文档umi-plugin-react源码umi-p
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他