球球不吃虾
球球不吃虾

第十章（应用场景篇） Single-SPA微前端架构深度解析与实践教程

文章目录

  • Single-SPA微前端架构深度解析与实践教程
    • 1、Single-SPA介绍
      • 2.1 Single-SPA是什么
      • 2.2 Single-SPA的特点
    • 2、Single-SPA核心原理
      • 3.1 路由机制
      • 3.2 生命周期管理
      • 3.3 微应用通信
    • 3、Single-SPA实践教程
      • 4.1 环境准备
      • 4.2 创建Single-SPA主应用
      • 4.3 创建Single-SPA微应用
      • 4.4 运行和测试

Single-SPA微前端架构深度解析与实践教程

随着前端应用的日益复杂，传统的单页面应用（SPA）在扩展性、维护性和性能上逐渐暴露出瓶颈。微前端架构作为一种解决方案，通过将大型前端应用拆分成多个小型、独立的应用，实现了应用的分治和更好的可扩展性。在众多微前端解决方案中，single-spa凭借其简单、灵活和强大的集成能力，受到了广泛的关注和应用。本文将带领读者深入了解single-spa微前端架构，并通过实践案例掌握其使用方法。

1、Single-SPA介绍

2.1 Single-SPA是什么

Single-SPA是一个用于构建微前端应用的JavaScript框架。它允许你将一个大型前端应用拆分成多个独立的、可复用的微应用，并且这些微应用可以使用不同的框架或库进行开发。Single-SPA通过定义一套简单的生命周期钩子和路由机制，实现了微应用之间的通信和协同工作。

2.2 Single-SPA的特点

  • 轻量级：Single-SPA本身非常小，不依赖任何第三方库或框架，可以很容易地集成到现有项目中。
  • 灵活性：Single-SPA支持多种前端框架和库，如React、Vue、Angular等，开发者可以根据需要选择合适的技术栈。
  • 强大的路由机制：Single-SPA提供了一套基于URL的路由机制，可以实现微应用之间的无缝切换和通信。
  • 生命周期管理：Single-SPA定义了一套微应用的生命周期钩子，包括初始化、挂载、卸载等，方便开发者对微应用进行精细化的管理。

2、Single-SPA核心原理

«abstract»
SingleSPA
+start()
+mountRootParcel()
Application
-name : string
-app : Object
-activeWhen : Function
-customProps : Object
+loadApp()
+unloadApp()
+mount()
+unmount()
«interface»
ActivityFunction
+(location : Location) : boolean
Parcel
-appName : string
-parcelConfig : Object
-status : string
+mount()
+unmount()
+getStatus()
MountParcel
-parcel : Parcel
-container : HTMLElement
-props : Object
+mount()
+unmount()

3.1 路由机制

Single-SPA的路由机制是其核心功能之一。它通过监听URL的变化，自动加载和卸载对应的微应用。具体来说，Single-SPA在初始化时会注册一个全局的路由钩子，当URL发生变化时，该钩子会根据当前的URL匹配到对应的微应用，并触发微应用的生命周期钩子。

3.2 生命周期管理

Single-SPA定义了以下四个生命周期钩子：

  • bootstrap：当微应用被激活时调用，用于加载微应用的代码和资源。
  • mount：当微应用需要被挂载到DOM上时调用，用于渲染微应用的界面。
  • unmount：当微应用需要从DOM上卸载时调用，用于清理微应用的资源和事件监听器。
  • unload：当微应用被完全卸载时调用，用于执行一些额外的清理工作。

开发者可以在微应用的入口文件中导出这些生命周期钩子，并在适当的时机执行相应的操作。

2023-01-01 2023-01-02 2023-01-03 2023-01-04 2023-01-05 2023-01-06 2023-01-07 2023-01-08 2023-01-09 2023-01-10 2023-01-11 Initialize Configure Bootstrap Loading Mounting Unmounting Updating Cleanup Initialization Bootstrapping Runtime Termination Single-SPA Lifecycle

3.3 微应用通信

Single-SPA本身不提供微应用之间的通信机制，但可以通过一些方式实现微应用之间的数据共享和通信。一种常见的方式是使用全局状态管理库（如Redux、Vuex等）或事件总线（如EventEmitter）来实现微应用之间的数据共享和事件通信。

3、Single-SPA实践教程

4.1 环境准备

在开始实践之前，你需要准备以下环境：

  • Node.js环境：用于运行前端项目的构建和开发服务器。
  • 包管理工具：如npm或yarn，用于安装项目依赖。
  • 代码编辑器：如VS Code，用于编写和编辑代码。

4.2 创建Single-SPA主应用

首先，我们需要创建一个Single-SPA的主应用。主应用负责管理和调度各个微应用的加载和挂载。

  1. 创建一个新的项目目录，并初始化一个npm项目。

    mkdir single-spa-demo
cd single-spa-demo
npm init -y

  2. 安装single-spa和相关依赖。

    npm install single-spa

  3. 创建一个index.html文件，作为主应用的入口文件。

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Single-SPA Demotitle>
head>
<body>
  <script src="./dist/main.js">script>
body>
html>

  4. 创建一个main.js文件，作为主应用的入口脚本。

    import { registerApplication, start } from 'single-spa';

const app1 = registerApplication(
  'app1',
  () => import('./app1/app1.js'),
  () => location.pathname.startsWith('/app1')
);

const app2 = registerApplication(
  'app2',
  () => import('./app2/app2.js'),
  () => location.pathname.startsWith('/app2')
);

start();

在上面的代码中，我们使用registerApplication方法注册了两个微应用（app1和app2），并通过start方法启动了Single-SPA主应用。每个微应用都有一个唯一的名称、一个动态导入的函数和一个激活条件函数。

4.3 创建Single-SPA微应用

接下来，我们创建两个Single-SPA微应用（app1和app2）。

  1. 在项目目录下创建app1和app2的目录结构。

    mkdir app1 app2
cd app1
npm init -y
cd ../app2
npm init -y

  2. 在app1和app2的目录下分别安装对应的框架和依赖。

    cd app1
npm install react react-dom

cd ../app2
npm install vue

  3. 在app1和app2的目录下分别创建入口文件（app1.js和app2.js），并导出生命周期钩子。

    // app1/app1.js
import React from 'react';
import ReactDOM from 'react-dom';
import App1RootComponent from './App1RootComponent';

export const bootstrap = () => {
  console.log('app1 bootstrapped');
};

export const mount = (container) => {
  ReactDOM.render(<App1RootComponent />, container);
};

export const unmount = (container) => {
  ReactDOM.unmountComponentAtNode(container);
};

// app2/app2.js
import Vue from 'vue';
import App2RootComponent from './App2RootComponent.vue';

export const bootstrap = () => {
  console.log('app2 bootstrapped');
};

export const mount = (container) => {
  new Vue({
    render: (h) => h(App2RootComponent),
  }).$mount(container);
};

export const unmount = (container) => {
  container.innerHTML = '';
};

在上面的代码中，我们分别使用React和Vue创建了两个微应用的入口文件，并导出了bootstrap、mount和unmount生命周期钩子。在mount钩子中，我们将微应用的根组件渲染到传入的container中；在unmount钩子中，我们清理了微应用在container中的渲染结果。

4.4 运行和测试

最后，我们需要配置开发服务器并运行项目进行测试。

  1. 在主应用目录下安装开发服务器依赖。

    npm install --save-dev serve

  2. 在package.json文件中添加scripts命令。

    {
  "scripts": {
    "serve": "serve -s dist"
  }
}

  3. 构建主应用和微应用，并启动开发服务器。

    # 构建主应用
echo "import './main.js'" > dist/main.js

# 构建微应用
# 这里省略了构建微应用的具体步骤，你可以使用Webpack、Rollup等构建工具进行构建

# 启动开发服务器
npm run serve

  4. 在浏览器中访问http://localhost:5000，并通过切换URL来测试微应用的加载和挂载。

你可能感兴趣的:(微前端,前端,架构)

  • 1.计算机处理器架构+嵌入式处理器架构及知识 vv 啊 arm-linux学习linux系统架构
    目录一：x86-64处理器架构二：Intel80386处理器（i386）1.i3862.i686三：嵌入式Linux知识：1.MinGW2.GNU计划2.1GNU工具链概述此次只分享英特尔和ADM处理器有关于x86的架构，至于嵌入式处理器架构请查看https://en.wikipedia.org/wiki/List_of_ARM_processors一：x86-64处理器架构x86-64，也称为x
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
  • 通俗易懂：什么是Java虚拟机（JVM）？它的主要作用是什么？ 大龄下岗程序员 mysqljavamysqlspring
    Java虚拟机（JavaVirtualMachine,JVM）是一种软件实现的抽象计算机，它负责执行Java字节码（Bytecode）。Java程序并不是直接在物理计算机上运行，而是先由Java编译器将源代码编译成与平台无关的字节码，然后由JVM负责读取字节码并在实际硬件架构上运行。JVM的主要作用包括以下几个方面：1.跨平台性-JVM是Java语言“一次编写，到处运行”（WriteOnce,Ru
  • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
    虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
    根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
  • Apache Kafka的伸缩性探究：实现高性能、弹性扩展的关键 i289292951 kafkakafka
    引言ApacheKafka作为当今最流行的消息中间件之一，以其强大的伸缩性著称。在大数据处理、流处理和实时数据集成等领域，Kafka的伸缩性为其在面临急剧增长的数据流量和多样化业务需求时提供了无与伦比的扩展能力。本文将深入探讨Kafka如何通过其独特的架构设计实现高水平的伸缩性，以及在实际部署中如何优化和利用这一特性。一、Kafka伸缩性的核心设计分区（Partitioning）与水平扩展Kafk
  • Django forms组件 在飞行-米龙 Djangodjangopython后端
    【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
  • Web前端Html的表单 任家伟 前端html
    表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
  • Nginx服务 老伙子53 nginx运维
    Nginx服务一、什么是Nginx1、概念Nginx是一个高性能的开源的HTTP和反向代理服务器，以及邮件（IMAP/POP3）代理服务器。它最初由IgorSysoev创建，并于2004年首次公开发布。Nginx的主要特点包括高性能、低内存占用、高并发处理能力以及高度的可靠性。2、特点高性能Nginx被设计成高性能的服务器软件，能够处理大量并发连接和高流量的请求。它采用了事件驱动的架构，使用异步I
  • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
    前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
  • Kafka、ActiveMQ、RabbitMQ 及 RocketMQ区别比较 木西爷 kafkaactivemqrabbitmq阿里云rocketmq
    消息队列中间件是分布式系统中重要的组件，主要解决应用耦合、异步消息、流量削锋等问题。它可以实现高性能、高可用、可伸缩和最终一致性架构，是大型分布式系统不可缺少的中间件。消息队列在电商系统、消息通讯、日志收集等应用中扮演着关键作用，以阿里为例，其研发的消息队列（RocketMQ）在历次天猫“双十一”活动中支撑了万亿级的数据洪峰，为大规模交易提供了有力保障。常见消息中间件对比特性ActiveMQRab
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • 日精进 石淑萍
    【早上好#淑萍#20230605日精进335】分享嘉宾：海明教练社群运营架构专家全域流量孵化教练个人品牌超千万利润打造高手基本的创业者，对于商业模式的设计都是有漏洞的。股权架构今天我们讲的商业模式主要是盈利模式。很多社群运营会做裂变，不会做转化，因为没有后端的设计。不断的去积累，思考有哪些模式，需要去如何设计。政策领域：政府补贴➕大学生技术/大学生创业团队盈利模型——赋能板块核心一：长期锁客—资格
  • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
    具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
  • Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络
    目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
  • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
    目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
  • Mysql数据库MariaDB数据库MHA高可用程序 yichen_china
    声明：本次实验使用的是MariaDB数据库，所以本文中所出现的MariaDB与MySQL都是指的是MariaDB！！！MHA（MasterHA）是一款开源的MySQL的高可用程序，它为MySQL主从复制架构提供了automatingmasterfailover功能。MHA在监控到master节点故障时，会提升其中拥有最新数据的slave节点成为新的master节点，在此期间，MHA会通过于其它从节
  • “异步”是什么意思？ 小林想被监督学习 系统架构设计师面试计算机基础java开发语言
    含义“异步”在计算机科学中，指的是一种操作模式，其中操作被发起后，不必等待该操作完成，可以继续执行其他任务。也就是说异步操作不会去阻塞后续代码的执行，当操作完成时，通常会通过回调函数、事件或其他机制来通知应用程序。例子例如在事件驱动架构风格中，异步通信是核心特性之一。事件的生产者（发布者）发布了事件以后，不会等待任何消费者（订阅者）的响应，继续执行后续的任务。消费者感知到事件触发了以后，就自己安排
  • 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java 计算机程序老哥
    作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
  • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
    前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
  • 前端埋点解决方案 zhu_zhu_xia 前端
    一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
  • 如何提出令人爱回答的好问题？ 兮若耶
    我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统
  • Nagios安装部署全攻略 weixin_34109408 memcachedphp操作系统
    概述：公司的生产机器一共有12台，2台LVS(主备)、2台nginx、2台tomcat、1台后台服务器(nginx_tomcat)、3台mysql(主+备+异地灾备)、1台图片服务器、2台memcached.可以看出网站的架构就是基于高可用的原理的，每个层面都做了主备、系统的PV不高，对于并发布，高性能没有那么苛求，对于系统安全、稳定有较高要求，前期已经对系统做了各种日志分析，WAF配置，漏洞扫面
  • 谈谈对前端性能监控的理解和实践 Layla_c webjavepython前端
    一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业
  • 谈谈我对微服务架构的理解&微服务架构有什么作用 Layla_c webjave架构微服务云原生
    一、谈谈我对微服务架构的理解微服务架构，一种在现代化软件开发中广泛应用的架构模式，其核心理念在于将大型的、复杂的应用程序拆分为一系列小型的、松耦合的服务。每个服务都围绕着特定的业务功能或领域组件进行构建，并独立地运行在自己的进程中。这些服务通过轻量级的通信机制进行交互，通常使用HTTP/RESTfulAPI，以完成业务逻辑和数据的协同工作。微服务架构的优势主要体现在以下几个方面：首先，它提高了系统
  • haproxy的无缝热重启的实现原理 码农心语 高性能c++开发LINUXhaproxyseamlessreload无缝热重启
    目录1.引言2.HAPROXY的准无缝热加载方案3.支持零宕机时间、零延迟的热加载方案3.1multibinder的实现3.2HAProxy启动脚本包装器的实现1.引言  在构建高可用的负载均衡架构时，HAProxy（HighAvailabilityProxy）作为一种可靠而强大的解决方案，被广泛应用于各种网络服务负载均衡环境中。HAProxy通过分发请求到多个后端服务器，实现了负载均衡和故障恢复
  • mineadmin使用docker启动方式 qq_38812523 dockerphp容器
    找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
  • 为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？ 智伴科技 git
    版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
  • 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其他