两个月亮
两个月亮

VueJS 之路由

文章目录

  • 参考
  • 描述
  • 路由
      • 单页面应用程序
      • Hash 地址
          • 链接的基本组成
          • Hash 地址
      • 路由
          • VueJS
          • 后端
  • 路由实现
      • 铺垫
          • Hash 地址的获取
          • 组件的生命周期
      • 实现
          • 子组件
          • 主逻辑

参考

项目 描述
搜索引擎 Bing
哔哩哔哩 黑马程序员

描述

项目 描述
Edge 109.0.1518.70 (正式版本) (64 位)
操作系统 Windows 10 专业版
@vue/cli 5.0.8
npm 8.19.3
VueJS 2.6.14

路由

单页面应用程序

单页Web应用程序 （Single Page Web Application，SPA） 就是只有一张Web页面的应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

Hash 地址

链接的基本组成

一个 URL 通常具有如下基本结构：

protocl://host/path/?param=value#name

其中：

项目 描述
protocol 使用到的协议。
host 服务器的主机地址（域名）。
path 路径。
param 查询字符串中的查询参数。
vlaue 查询字符串中某个参数对应的参数值。
#name 锚点。
Hash 地址

Hash 地址 又称为 锚点，锚点是网页制作中超级链接的一种，是一种能够定位当前页面的元素的超级链接。

举个栗子

<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。a>
p>

<h2>Chapter 1h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 2h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 3h2>
<p>This chapter explains ba bla blap>


<h2><a name="C4">Chapter 4a>h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 5h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 6h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 7h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 8h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 9h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 10h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 11h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 12h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 13h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 14h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 15h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 16h2>
<p>This chapter explains ba bla blap>

<h2>Chapter 17h2>
<p>This chapter explains ba bla blap>

body>
html>

执行效果：

VueJS 之路由_第1张图片

注：

  1. 本部分示例引用自 W3school。
  2. 使用锚点链接将产生历史记录。一个较为直观的体现是，在点击锚点后，你可以点击浏览器中的左箭头按钮来返回点击锚点之前的页面。
    左箭头按钮

路由

路由在 VueJS 及 Web 后端中的概念稍有不同，但都表示某两者之间的映射关系。

VueJS

在 VueJS 中，路由可以理解为 Hash 地址 与 组件 的映射关系。由于 VueJS 构建的是单页面应用程序，在构造具有如下效果的页面时，无法直接切换页面（因为仅有一个页面），但可以通过切换组件来达到相同的效果。

VueJS 之路由_第2张图片

后端

在 Web 后端中，路由可以理解为 URL 与 处理函数 的映射关系。当一个请求从客户端发送到服务器端时，都需要与已定义的路由进行匹配，当匹配成功时将调用对应的处理函数以对客户端的请求进行响应。

路由实现

铺垫

Hash 地址的获取

你可以通过 location.hash 来获取当前页面的 URL 中的 Hash 地址。

举个栗子

  1. 请访问链接 https://cn.bing.com/?mkt=zh-cn#RedHeart。
  2. 在访问链接后，打开浏览器控制台并输入 location.hash ，你将观察到如下内容：

输出

组件的生命周期

由于组件的生命周期函数 beforeCreate 执行前，VueJS 已初始化事件。故我们可以在 beforeCreate 生命周期函数执行时设置事件回调函数来监听 URL 中 Hash 地址的变化。
VueJS 之路由_第3张图片

实现

子组件

组件的动态切换过程中需要用到以下组件，这三个子组件仅存在颜色样式的区别。

Dodgerblue.vue

<template>
  <div class="box">div>
template>

<script>
export default {

}
script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    background-color: dodgerblue;
  }
style>

Pink.vue

<template>
  <div class="box">div>
template>

<script>
export default {

}
script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    background-color: pink;
  }
style>

YellowGreen.vue

<template>
  <div class="box">div>
template>

<script>
export default {

}
script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    background-color: yellowgreen;
  }
style>
主逻辑

App.vue

<template>
  <div class="container">
    <div class="controller">
      <a href="#Dodgerblue">Dodgerbluea>
      <a href="#Pink">Pinka>
      <a href="#YellowGreen">YellowGreena>
    div>
    
    <component :is="target">component>
  div>
template>

<script>
// 导入组件
import Dodgerblue from '@/components/Dodgerblue.vue';
import Pink from '@/components/Pink.vue';
import YellowGreen from '@/components/YellowGreen.vue';

export default {
  // 定义数据
  data() {
    return {
      target: 'Dodgerblue'
    }
  },
  // 注册组件
  components: {
    Dodgerblue,
    Pink,
    YellowGreen
  },
  // 使用 beforeCreate 生命周期钩子
  beforeCreate() {
    // 在 Hash 地址发生变化时将执行该回调函数
    window.onhashchange = () => {
      // 与 Hash 地址进行匹配以使用合适的组件
      switch (location.hash){
        case '#Dodgerblue':
          this.target = 'Dodgerblue';
          break;
        case '#Pink':
          this.target = 'Pink';
          break;
        case '#YellowGreen':
          this.target = 'YellowGreen';
          break;
      }
    }
  }
}
script>

<style scoped>
/* 为超链接添加样式 */
a{
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #f40;
  color: #fff;
  border-radius: 3px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 30px;
  font-weight: 600;
  font-size: 13px;
}
style>

执行结果：

VueJS 之路由_第4张图片

你可能感兴趣的:(前端,Vue,JavaScript,vue.js,前端,javascript,路由,动态组件)

  • 鸿蒙Flutter实战：15-Flutter引擎Impeller鸿蒙化、性能优化与未来 星释 鸿蒙Flutter实战鸿蒙flutterharmonyos
    Flutter技术原理Flutter是一个主流的跨平台应用开发框架，基于Dart语言开发UI界面，它将描述界面的Dart代码直接编译成机器码，并使用渲染引擎调用GPU/CPU渲染。渲染引擎的优势使用自己的渲染引擎，这也是Flutter与其他跨平台框架最大的区别。与ReactNative等高度依赖原生组件的框架不同，Flutter摆脱了原生组件依赖，界面布局更加灵活，多端展示效果高度一致。由于渲染引
  • 使用腾讯云AI代码助手快速实现一个办公AI助手 星释 编程实践腾讯云AI代码助手
    使用腾讯云AI代码助手快速实现一个办公AI助手作品简介这是一个基于Vue.js和TDesign的AI聊天演示项目，旨在为用户提供便捷的办公交流体验。技术架构本项目采用了前端框架Vue.js结合TDesign组件库进行开发，同时集成了相关的AI聊天功能模块。实现过程开发环境、开发流程开发环境：Node.js版本v18+开发流程：克隆项目代码。在项目根目录下运行npmi安装依赖。运行npmrundev
  • 作为一名Flutter开发，我骗老板我会前端，她竟然要给我升职加薪 星释 FlutterWeb实战前端flutter
    起始那天，办公室的气氛突然凝固，老板把我叫进她的办公室，眼中带着期待，问：“你会前端吗？”这句话简单，但我知道背后暗藏玄机。我愣了一下，脑海一片空白，内心像是被投进了一颗巨石，掀起层层涟漪。我呢喃了一声：“会一点。”然而，这话对我来说却显得虚假。毕竟，我只是一个App开发，至于前端,我完全不知。老板的眼睛立刻亮了起来，笑容灿烂：“那太好了！公司现在缺前端，你顶上吧！”她笑着拍了拍我的肩膀，转身离开
  • 为什么你的网站总是有安全漏洞 16年上任的CTO 网络安全安全漏洞网络安全web安全安全性测试前端服务器
    目录一、什么是安全漏洞二、安全漏洞的一般表象1.网站瘫痪2.链接指向篡改3.数据篡改4.挂入黑链5.信息泄露6.横向攻击7.流量损耗8.其他现象三、造成安全漏洞的原因1.SQL注入漏洞2.验证码前端校验3.表单重复提交4.文件上传格式校验不合格5.第三方框架的固有漏洞6.密码缺省7.端口开放太多8.Options不过滤9.XSS，CSRF漏洞10.X-Frame-Options劫持11.HTTP获
  • Python 中 PIL 构建图片裁剪工具 winfredzhang pythoncrop
    概述这篇博客将为您展示如何使用wxPython和PIL库开发一个图片裁剪工具。本工具能够加载图片，允许用户通过拖拽选择框裁剪图片，并保存裁剪后的结果。以下是完整代码和实现步骤。C:\pythoncode\new\cropimageandsave.py功能特性图片加载：支持加载JPG和PNG格式的图片。动态裁剪：通过鼠标绘制矩形选择框进行裁剪。缩放适配：图片会根据面板大小自动缩放显示。保存裁剪结果：
  • vue2和vue3组件传值——父传子 MvemiZ javascriptvue.js前端经验分享笔记
    ****近期学习vue3的组件传值，发现和之前的vue2版本并没有什么区别，实现的思路都是一样的，文章底部我会用大白话叙述一下vue组件传值的思路过程。下面就一起学习vue的组件传值吧，不足之处大家多批评指正！**vue2-父传子//父组件中通过v-bind绑定了list这个自定义的属性，并赋了一个值dateimportSonViewfrom'@/components/SonView.vue';e
  • 前端面试题-手写篇-万字长文！ 前端Jason 面试前端面试前端面试
    1.手写实现EventBus实现一个简单的EventBus（事件总线）可以让我们在不同的组件或模块之间进行事件驱动的通信。下面是一个用JavaScript手写实现EventBus的基本例子：classEventBus{constructor(){this.events={};//存储事件名与对应的监听器}//注册事件监听器on(event,listener){if(!this.events[eve
  • 关闭vue项目中Uncaught runtime errors弹窗 qx09 vue.js前端javascript
    module.exports=defineConfig({//关闭eslinelintOnSave:false,transpileDependencies:true,publicPath:'./',//关闭弹窗devServer:{client:{overlay:false}}})
  • 使用 MySQL 从 JSON 字符串提取数据 m0_74825678 面试学习路线阿里巴巴mysqljsonoracle
    使用MySQL从JSON字符串提取数据在现代数据库管理中，JSON格式因其灵活性而广泛使用。然而，当数据存储在JSON中时，我们经常需要将其转换为更易于处理的格式。本篇文章将通过一个具体的SQL查询示例，展示如何从存储在MySQL中的JSON字符串提取数据并重新格式化。1.背景知识JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器
  • vue项目报错取消页面红色遮罩（Uncaught runtime errors） 菜鸟许良个人笔记 vue.jsjavascript前端
    1.取消前2.vue.config.js里面添加overlay:falseconstpath=require("path");constresolve=(dir)=>{returnpath.join(__dirname,dir);};module.exports={publicPath:"./",transpileDependencies:[],chainWebpack:(config)=>{co
  • HarmonyOS 开发实践——基于设置应用的应用权限、通知设置跳转 六号嘉宾 鸿蒙开发移动开发HarmonyOSharmonyos架构ui鸿蒙鸿蒙系统移动开发鸿蒙开发
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述引导用户跳转到系统设置页进行权限，通知
  • FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆 begefefsef 前端htmlcsscss3前端
    FLASK+VUE–前后端分离（一）-Flask基础讲解之路由、视图函数及代码实现FLASK+VUE–前后端分离（二）-VUE基础安装及项目的简易介绍FLASK+VUE–前后端分离（三）-VUE+Element-UI搭建登陆页面且能够正常登陆FLASK+VUE–前后端分离（四）-VUE+Element-UI简单搭建主页布局FLASK+VUE–前后端分离（五）-VUE测试/线上/开发环境地址配置+拦
  • 个人职业发展与AI赋能的前端开发 前端
    在瞬息万变的科技浪潮中，个人职业发展显得尤为重要。对于前端开发者而言，如何提升自身竞争力，适应日新月异的技术革新，是持续关注的核心问题。而近年来，人工智能（AI）技术的飞速发展，特别是AI代码生成器的兴起，正深刻地改变着前端开发的格局，为开发者们提供了前所未有的机遇。本文将以ScriptEcho为例，探讨AI技术如何赋能前端开发，助力个人职业发展。市场趋势与个人技能提升当前市场对前端开发人才的需求
  • HTML期末学生大作业-最新QQ音乐、网易云音乐、酷狗音乐、虾米音乐、咪咕音乐网站html+css+javascript 2401_89790869 html课程设计css
    href=“https://y.qq.com/n/ryqq/playlist/7772849553”>好评999+英文歌！轻松解压100％播放量：2.8亿扎心情歌丨爱到最后终是空欢喜播放量：510.4万如果词不达意就把爱藏心里播放量：1645.7万深情片段：深夜我还是会想起你播放量：2663.8万href=“https://y.qq.com/n/ryqq/playlist/7537828
  • ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面_reactnative 脚手架 2401_84438654 程序员reactnativearcgisreact.js
    算法冒泡排序选择排序快速排序二叉树查找:最大值、最小值、固定值二叉树遍历二叉树的最大深度给予链表中的任一节点，把它删除掉链表倒叙如何判断一个单链表有环由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】sudo
  • web前端常见的面试题总结 2401_84436095 程序员前端
    script.src=url+‘?’+data+‘callback=’+funcNamedocument.body.appendChild(script);//这里得到请求的数据，在回调函数中执行处理window[funcName]=function(data){callback(data)}}//使用jsonp(‘http:127.0.0.1:3000/api’,{},function(res)
  • 小白WEB前端学习（五） Sun ᥫᩣ涵 WEB前端前端学习
    续：小白WEB前端学习（四）继续正式学习CSS（三）6.float布局！主要用于左右做图片，右文字的题目标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，使⼀个元素脱离标准文档流有三种方式1.浮动2.绝对定位3.固定定位例如:块元素独占一行，行内元素可以一行显示多个。浮动作用：让块元素水平排列属性名：float属性值：left和right浮动后会脱离标准流，等于开了一个新的页面，内容在的话
  • 用JavaScript实现找不同小游戏 算是难了 javascript开发语言前端websocket
    目录倒计时的实现找不同实现对canvas的初始化实现画布的分割,父盒子>子盒子>canvas找不同逻辑的判断实现图片的导入DOM节点的监听声明两个需要监听的节点禁用页面点击事件的函数DOM监听实现勋章分数增加和生命的减少减命逻辑死亡响应websocket交互定义给后端发送的数据包断线重连最后,调用封装好的websocket创建初始之物，其行必丑代码写的非常繁琐,有很多细节在复盘的时候也会想不起来为
  • Ruby语言的软件开发工具 2501_90183952 包罗万象golang开发语言后端
    Ruby语言的软件开发工具概述引言Ruby是一种高效、灵活的动态编程语言，因其简洁的语法和强大的功能而受到开发者的欢迎。在软件开发过程中，使用合适的开发工具可以大幅提高工作效率，提升代码质量。本文将详细介绍一些常用的Ruby开发工具，从代码编辑器到版本控制，再到测试工具，深入探讨它们的功能及使用方法。1.Ruby语言简介Ruby语言由松本行弘（YukihiroMatsumoto）于1995年首次发
  • 前端如何实现分页 忆宸_1 js前端js
    前言虽然在实际开发中，大多数分页都是由后端处理，但还是有小部分场景需要前端来实现分页。实现并不难，仅作为记录，方便下次拿来直接使用。准备数据源数据源可以是从后端获取的数据列表，也可以是前端模拟的数据集。将数据源格式处理成数组即可。//模拟50条数据constlist=Array.from({length:50},(_,index)=>`Item${index+1}`);计算总页数计算总页数需要知道
  • uniapp 开发 h5 授权微信登录（静默和非静默） 陈龙龙的陈龙龙 uni-appuni-app微信前端htmljavascript
    具体流程：进入h5➡️静默登录➡️请求登录接口➡️必要时候调起登录组件➡️点击按钮进行非静默登录➡️再次请求登录接口➡️获取到所有用户数据一、封装登录functionauthLogin:(callback)=>{constthat=this;//判断是否是在微信环境下运行if(utils.isWechat()){consttoken=window.localStorage.getItem('__t
  • uniapp vite+vue3+ts微信小程序项目 组合式Api自动导入 懒人的烦恼 uniapp微信小程序uni-appvue前端框架微信小程序
    相信很多新手(博主也是菜鸡,不喜勿喷!),在公司都喜欢自己创建新的项目,搭建自己项目框架。都会遇到vue3组合式Api导入的问题而感到烦恼！这里教大家怎么简单的配置1.安装需要的插件unplugin-auto-import在项目根目录运行：如下代码npminstall-Dunplugin-auto-import2.安装成功后，修改项目的tsconfig.json文件主要时在inclue里面末尾添加
  • arcgis for JavaScript入门篇 五彩斑斓黑123 arcgisforjavascriptarcgisjavascript开发语言
    介绍ArcGISforJavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。ArcGISforJavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGISOnline服务、第三方地图服务、以及开发人员自
  • JSONObject解析数据库Date类型报错问题 知忆_IS 数据库javadatabasepostgresql
    JSONObject解析数据库Date类型报错问题最近项目在写服务器后端查询空间数据的接口时，由于表结构不一致，直接写了一个通用函数用json储存数据库中查询的结果，然而今天前端查询一个表的时候无法查到相应的结果，查了一下代码发现爆了如下错误。报错：Causedby:java.lang.IllegalArgumentExceptionatjava.sql.Date.getHours原因是该表中存在
  • 使用VUE的axios解决调用百度地图api的跨域访问问题 知忆_IS vuehtmlnpmjavascriptchrome
    在构建一个vue前后端分离的项目时候，需要用到百度地图提供的web服务，但是在使用axios方式发送get请求的时候，web页面不显示相应结果，在Google中按F12进入开发者模式之后，发现提示如下：XMLHttpRequestcannotloadOriginhttp://localhost:8080isnotallowedbyAccess-Control-Allow-Origin.根据网上的搜
  • 基于 Colyseus 的实时消息处理与广播机制 maply Colyseus前端colyseus消息队列node.js
    基于Colyseus的实时消息处理与广播机制Colyseus是一个用于构建实时多人游戏和协作应用的开源框架，基于Node.js运行，并使用WebSocket进行高效的消息传输。它提供了一套结构化的API来管理房间（Rooms）、客户端（Clients）和游戏状态（State），从而支持高效的实时消息处理与广播机制。1.Colyseus消息处理与广播的基本概念Colyseus主要通过以下组件来管理实
  • UniCloud 完整入门指南 九情丶 uni-app前端
    UniCloud完整入门指南目录什么是UniCloud为什么选择UniCloud快速开始基础概念核心功能最佳实践常见问题高级功能详解开发工具部署和运维最新特性和更新什么是UniCloudUniCloud是DCloud推出的基于serverless模式和js编程的云开发平台。它让不会后端的前端工程师可以快速完成整栈开发，让开发者专注于业务实现，而无需关心服务器运维等繁琐事务。主要特点基于server
  • vue项目打印网页功能-vue-print-nb 九情丶 vue.js前端javascript
    Printtheentirepage描述:支持两种打印方式，直接打印页面HTML、打印URL简单易用，支持兼容Vue的浏览器版本在线Demo:测试DEMO地址安装:Vue2版本npminstallvue-print-nb--saveVue3版本npminstallvue3-print-nb--savev-printAPI使用方法打印整个页面：Printtheentirepage打印指定范围：Pri
  • 第八篇：监视`ref`定义的【基本类型】数据 和对象类型 小画家~ 前端vue.js
    一：【watch】监视`ref`定义的【基本类型】数据作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据：ref定义的数据。reactive定义的数据。函数返回一个值（getter函数）。一个包含上述内容的数组。我们在Vue3中使用watch的时候，通常会遇到以下几种情况，在一定情况下，停止监控：stopWatchwatch(第一个参数，第二个
  • ArcGIS API for JavaScript获取和配置-ArcGIS Web 开发学习（一） 大海上飞翔 ArcGISWebAPIjavascriptarcgis
    ArcGISAPIforJavaScript获取和配置最近开始学习WebGIS开发，刚一接触就很是让人恼火，第一个问题就是：ArcGISAPIforJavaScript库和SDK的获取。（1）我直接访问的是ARCGIS的资源中心：http://resources.arcgis.com/zh-cn/home/，点击JavaScript，出现以下页面：https://developers.arcg
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他