木蓝茶陌*_*
木蓝茶陌*_*

Vue项目打包及优化处理

项目打包

1. 打包介绍

什么是项目打包：

项目开发是通过import这样的模块化技术完成的，而import代码在浏览器中不能直接运行。

项目开发是通过vue单文件组件方式开发完成的，浏览器不能运行vue单文件组件。

项目开发是通过less进行css样式控制的，浏览器不能运行less文件。

项目开发是通过element-ui组件库开发，浏览器不能运行组件库组件。

项目开发是通过es6/es7等高级js技术完成的，中低浏览器版本不能运行es6/es7等高级语法。

……

基于以上若干，项目发布之前需要做打包处理，就是把import代码变为浏览器可以识别的代码，把vue单文件组件代码也解析成为浏览器可以识别的，less变为css、element-ui变为具体的html标签、es6/es7变为es5兼容性更强的代码，这个过程就是“打包”。

Vue项目打包及优化处理_第1张图片

  • 打包完毕，生成的应用程序文件只有一个，名称为index.html，网站所有请求都需要执行该文件，就称为单页面应用程序项目(spa)，当然这个index.html文件会引入许多js、css等文件。

2. 打包实现

项目打包实现：

在项目根目录执行如下指令：

npm run build   // 物理打包
或
.\node_modules\.bin\vue-cli-service build --report  // 打包 同时 要生成详情报告

以上两个指令打包完毕，会在根目录生成dist目录，内部都是打包好的文件，

执行第二种打包指令，会在dist里边生成report.html文件，并且支持直接访问，就可以看到各个打包内容部分的占比情况。

Vue项目打包及优化处理_第2张图片

上图：前3个js文件 都是系统级 代码打包后的文件，体积比较大

给项目做打包操作，生成许多js、css、img、字体库文件：

其中的css文件：

  1. 每个vue组件文件内部的css都要独立打包到具体的文件中。

  2. 富文本编辑器的css样式打包到指定文件。

  3. element-ui组件库的css样式打包到指定文件。

其中的js文件：

  1. 每个vue组件文件内部的js都要独立打包到具体的文件中。
  2. node_modules内部核心的项目级的js被独立打包(vue)。
  3. 富文本编辑器的js内容单独打包。

注意：

​ 把项目中各个文件中console.log()的输出内容都屏蔽掉。

项目优化

什么是项目优化：

查看各个项目打包后的内容占比：

执行指令：

.\node_modules\.bin\vue-cli-service build --report

之后浏览器执行运行打包好的report.html文件

各个文件内容在打包文件中占比如下图所示：

Vue项目打包及优化处理_第3张图片

优化介绍：

对项目的打包文件做体积减少操作，用到的东西就打包，不用的就舍弃。

再者有些模块能通过第3方提供就直接使用，总之要把打包文件的体积做到最小。

好处：

  1. 节省网络带宽，节省money。
  2. 首屏数据加载快、增强用户体验。

1. 优化处理(externals)

什么是externals(额外/外部)优化：

互联网有许多公司已经对公共的模块文件(axios、vue、echarts、nprogress、vue-router)做了提供，项目开发时可以直接拿过来使用，这样自己不用准备了，项目打包时也不用引入了，进而使得打包文件体积减少。

Vue项目打包及优化处理_第4张图片

  • 配置使用第三方公司网络资源

步骤：

  1. 做vue.config.js文件配置

    module.exports = {
       
  lintOnSave: true, // 文件保存时就做eslint规范检测
  devServer: {
       // 实时保存、编译的配置段
    open: true, // 自动开启浏览器
    port: 19988, // 服务运行端口
  },
  configureWebpack: config => {
       
    // 配置 externals
    // 防止将某些 import 的包(package)打包到 bundle 中，
    // 而是在运行时(runtime)再去从外部获取这些扩展依赖
    config.externals = {
       
      // 模块名(from后边的名字): 构造函数名称(文件内部提供的全局变量名字)
      vue: 'Vue',
      axios: 'axios',
      'vue-router': 'VueRouter',
      echarts: 'echarts',
      nprogress: 'NProgress',
    }
  }
}

上述配置：

devServer说明： https://cli.vuejs.org/zh/config/#devserver

configureWebpack说明： https://cli.vuejs.org/zh/config/#configurewebpack

  1. 打开 public/index.html 文件(项目主模板文件)，做第三方资源的引入配置。

    第三方资源提供网址：https://www.bootcdn.cn/ (其他的也有，这个比较稳定)。

    
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>toplinetitle>
    
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js">script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js">script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js">script>
    <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js">script>
    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js">script>
  head>
  <body>
    <div id="app">div>
  body>
html>

以上两个步骤配置完毕

  1. (物理打包时)项目中再import引入相关的资源，就不会走本身的，转而执行第三方的。
  2. import等语句不要删除了，因为开发时候npm run serve还需要。

注意：

第三方网站并不会提供全部的公共资源(提供哪个就用哪个)。

再次执行命令做打包操作，发现主js文件较比之前变小了：

.\node_modules\.bin\vue-cli-service build --report

Vue项目打包及优化处理_第5张图片

注意：上图打包文件的名称较比之前会有变化，每次生成的打包文件名称都会不一样。

2. 优化处理(Element-UI组件库按需引入)

给element-ui组件库 做完全按需引入优化，具体给 组件 和 事件方法 都做按需引入。

步骤：

  1. 在main.js文件中 把 element-ui的引入 和 注册都屏蔽掉。

  2. 创建utils/element.js文件做element-ui的按需引入。

    // 导入vue
import Vue from 'vue'
// 按需导入需要的组件
import {
       
  DatePicker,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Pagination,
  Dialog,
  Menu,
  Submenu,
  MenuItem,
  Input,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  Select,
  Option,
  Button,
  Table,
  TableColumn,
  Form,
  FormItem,
  Tag,
  Icon,
  Upload,
  Card,
  Container,
  Header,
  Aside,
  Main,
  MessageBox,
  Message,
  Tabs,
  TabPane
} from 'element-ui'
// 注册组件
Vue.use(DatePicker)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Input)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Checkbox)
Vue.use(Select)
Vue.use(Option)
Vue.use(Button)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Tag)
Vue.use(Icon)
Vue.use(Upload)
Vue.use(Card)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Tabs)
Vue.use(TabPane)
// 注册方法
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message

  3. 在main.js文件中引入 element.js

    // 引入element.js
import '@/utils/element.js'

​ 再次执行打包命令，发现主js文件体积更小了：

.\node_modules\.bin\vue-cli-service build --report

Vue项目打包及优化处理_第6张图片

你可能感兴趣的:(前端,vue,JS,前端,webpack,vue.js)

  • PostgreSQL认证指南 leegong23111 postgresql数据库
    PostgreSQL作为一款强大的开源关系型数据库，深受开发者和企业的青睐。获得PostgreSQL专家认证，不仅能提升个人在数据库领域的专业能力，还能为职业发展增添有力筹码。下面为大家详细介绍PostgreSQL专家认证的学习路径。一、深入理解基础知识·数据类型与存储：PostgreSQL支持多种数据类型，如常见的整数、浮点数、字符串，还有特殊的几何类型、JSON类型等。深入了解每种数据类型的存
  • Node.js 中 morgan 依赖详解 yqcoder node.jshttp网络协议
    记录每个HTTP请求的详细信息，方便开发者调试和监控应用程序。一、安装npminstallmorgan二、基本使用constexpress=require("express");constmorgan=require("morgan");constapp=express();//使用morgan中间件，默认日志格式为'dev'app.use(morgan("dev"));app.get("/",(
  • Express 项目基础设施搭建 yqcoder javascript开发语言ecmascript
    搭建一个基本的Express项目基础设施，涵盖项目初始化、依赖安装、目录结构设计、基本路由与中间件设置等步骤。1.初始化项目首先要创建一个新的项目目录，接着在该目录下初始化`package.json`文件，此文件用于管理项目的依赖和脚本。#创建项目目录mkdirexpress-project#进入项目目录cdexpress-project#初始化package.json文件npminit-y2.安
  • Debian/Ubuntu云服务器配置最速实践笔记[1] 打磨怪 最速实践linuxdebianubuntu腾讯云
    在腾讯云购买了一台轻量云服务器跑几个机器人用,一篇基础配置的实践笔记系统是Debian11,理论上Ubuntu等衍生版本基本可以无修改地参考添加普通用户安装Docker安装Node.js安装miniconda安装JupyterNotebook及后台启动Q&A参考资料先关机;重置密码(设定root密码);开机添加用户//先切换到rootsuroot//添加一个普通用户sudoadduser//确定该
  • CPP集群聊天服务器开发实践（七）：Github上传项目 杨枝甘露小码 CPP集群聊天服务器开发服务器github
    github链接：GitHub-arduino-ctrl/ClusterServer:基于json+muduo+mysql+nginx+redis的集群服务器与客户端通信源码步骤如下：1.github新建代码仓库，复制url2.gitclonehttps://github.com/arduino-ctrl/ClusterServer.git3.将项目文件移动到ClusterServer文件夹里面m
  • 基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
    基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7
  • 如何使用EchartS 前段技术人 echarts前端javascript
    1.引入ECharts库你可以通过以下两种方式引入ECharts库：方法一：使用CDN在HTML文件的标签中添加以下代码：EChartsExample方法二：下载并本地引入你可以从ECharts官方网站下载ECharts的压缩包，解压后将echarts.min.js文件复制到你的项目目录中，然后在HTML文件中引入：EChartsExample2.创建DOM容器在HTML文件的标签中创建一个具有指
  • java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署 花样1999 mysql数据库java
    java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署 沪港 mysqljava数据库
    java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • springboot029网上购物商城系统 Q_97095639 springboot毕业设计数据库毕业设计课程设计
    版权声明所有作品均为本人原创，提供参考学习使用，如需要源码+数据库+配套文档请移步www.taobysj.com搜索获取技术实现开发语言：Java+vue。框架：后端spingboot+前端vue。模式：B/S。数据库：mysql。开发工具：idea。论文字数：1万左右。数据库表个数：10个左右。运行环境：jdk+idea+mysql。版本不限制，包安装运行！项目优点：前后端分离，注释详细，代码简
  • 前端布局的方式有哪些 IT木昜 大白话前端面试题前端
    前端布局的方式有哪些在前端开发里，布局就像是装修房子，把不同的东西合理地摆放在合适的位置，让整个空间既美观又实用。下面给你介绍几种常见的前端布局方式：1.普通流布局（标准文档流布局）这就像是按顺序往书架上摆书，一本挨着一本，从左到右，从上到下依次排列。在网页里，元素默认就是按照这种方式排列的。比如段落、标题这些元素，一个接一个地显示在页面上。块级元素（像、等）会独占一行，就像大本书会占一整层书架；
  • HTML CSS整理笔记（建议收藏） 程序员的生活1 jsweb前端html+csscssjavascripthtmlcss3
    点击链接后退页面：回到上一个网页——修改placeholder提示的样式：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-
  • 一些我不知道的HTML前端基础知识笔记 han1140521792 学习资料HTML5CSSJavaScript
    点击链接后退页面：回到上一个网页——修改placeholder提示的样式：1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-space:nowrap）、省略号（text-overflow:ellipsis）——常见
  • 136道Vue面试八股文（答案、分析和深入提问）整理 守护海洋的猫 vue.js面试javascript前端ecmascript
    1.简述mixin、extends的覆盖逻辑回答在Vue中，mixins和extends是用来实现代码复用的两种方式，但它们在覆盖逻辑上有一些细微的区别。1.Mixin当你使用mixins的时候，可以将多个功能组合在一起。Mixins的内容会与组件中的数据、方法、生命周期钩子等进行合并。数据:Mixin中的数据会与组件中的数据合并。如果两个数据属性同名，则组件的数据属性会覆盖mixin中的属性。方
  • Vue 3 Composition API进阶指南 前端学步 Vue3技术分享专栏vue.jsjavascript前端
    在上一篇文章中，我们介绍了Vue3的CompositionAPI基础，包括如何使用setup函数、ref和reactive来创建响应式数据，以及使用watchEffect来监控数据变化。本文将继续深入探讨CompositionAPI的高级用法，帮助你更好地理解和利用Vue3的新特性。组合多个Hooks在实际开发中，我们经常需要组合使用多个自定义的Hooks来实现复杂的功能。Vue3的Composi
  • nextjs中集成富文本编辑器wangEditor 不cong明的亚子 前端nodejsreact前端next.js富文本编辑器
    背景实现一个博客主站的文章生成系统，使用ssr去生成自己的文章，达到seo的效果。技术栈[email protected].[app-router]postgres@latest(本章不涉及)@wangeditor/[email protected]@wangeditor/[email protected]使用引入富文本编辑器npmi-S@wangeditor/editor@wangeditor/editor-f
  • Vue3CompositionAPI jpruby vue
    Vue3CompositionAPI第一章最终效果演示1.下载依赖npminstall2.启动前端npmrundev3.启动数据json-server--watchdata/db.json--port=3003第二章创建项目1.vite创建项目npminitvite@latestvite-blog----templatevue2.App.vueApp.vue3.Home.vue1.测试setup的
  • Vue3的Composition API Sunshinedada vue.js前端javascript
    Vue3的CompositionAPI（Vue3与Vue2的区别）Vue3引入了CompositionAPI(组合式API)，这是一种新的编写组件逻辑的方式，旨在解决OptionsAPI在某些场景下的局限性。CompositionAPI提供了更灵活和强大的代码组织方式，特别适合处理复杂组件的逻辑复用和代码组织。CompositionAPI的核心概念1.setup函数：-setup是Composit
  • PyWebIo 快速构建web应用 java全套学习资料 前端htmlnpmvue.js前端
    Part1什么是PyWebIoPyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出，将浏览器变成了一个“富文本终端”，可以用于构建简单的Web应用或基于浏览器的GUI应用。使用PyWebIO，开发者能像编写终端脚本一样(基于input和print进行交互)来编写应用，无需具备HTML和JS的相关知识；PyWebIO还可以方便地整合进现有的Web服务。非常适合快速构建对UI要
  • 基于python sanic框架，使用Nacos进行微服务管理 一醉千秋 python+银河麒麟微服务java架构
    微服务软件系统构建方式，已经很普及了，通过开源的sanic进行微服务管理，便捷，技术也比较成熟，而在项目实际应用过程中，微服务类型不仅有java的，还有nodejs、python等，尤其是结合算法模型构建的python接口，需要在Nacos进行注册管理。本文内容耗时2天踏坑，亲测一切ok。参考资源Docker安装nacos（图文并茂，避免踩坑，一步到位）_docker创建nacos容器需要挂载哪些
  • vue之弹框 ramsey17 vue.jsjavascript前端
    实现如下需求，点击新增或者行中的编辑按钮，弹出弹框编辑数据。列表中的操作栏：通过slot-scope="scope"来接收作用域插槽的数据（添加属性slot-scope，并且定义对象scope），scope.row拿到对应行的数据；弹框的“新增/修改角色”标题根据states的值来控制，编辑时，“人员名称”处于禁用状态；由于弹框的参数（只有id）满足不了（少于）请求接口的参数（id和name），通
  • vue select下拉框选项内容过长显示问题 ramsey17 vue.jsjavascriptelementui
    如下图的select下拉框的选项的内容过长时，页面显示不协调，通过如下方法把过长的内容用...代替；在任务名称-->在style中添加.el-select::v-deep.popper-class{width:200px;}#sx.el-row.el-select::v-deep.popper-class{width:200px;}
  • js根据两个经纬度点计算文字显示角度 钱端工程师 javascript
    主要用到Turf.js库中的一个方法：rhumbBearing。用于计算两点之间的罗盘方位角（也称为恒向线角或罗盘角）。这种方法假设地球是一个球体，并且沿着最短路径（即大圆路径）测量两点之间的距离和方位角，但在计算方位角时采用了一种简化的方法，即假设沿恒向线（罗盘线）航行。1.安装Turf.js://在项目目录的命令行中输入：npminstall@turf/turf2.使用：import{rhum
  • vue 解决image-conversion图片处理插件压缩后图片底色变黑问题 qq_48354174 vue.jsjavascript
    官方文档https://www.npmjs.com/package/image-conversion将el-upload封装为一个组件，并将图片上传到对象存储引用方式importSingleUploadfrom"@/components/upload/singleUpload"//isWatermark是否需要水印changeFile方法判断是否是透明图片，如果是透明图片将底部改为透明色impor
  • 前端现代年轻人的“通病”：我们该如何应对？ 人民广场吃泡面 大前端发展探讨前端
    引言随着互联网技术的飞速发展，前端开发已经成为IT行业中最热门的领域之一。越来越多的年轻人选择投身前端开发，追求高薪、自由和创造力。然而，在前端开发的浪潮中，许多年轻人也暴露出了一些“通病”。这些“通病”不仅影响了他们的职业发展，还可能对整个团队和项目产生负面影响。本文将深入探讨现代年轻前端开发者常见的“通病”，分析其背后的原因，并提出一些实用的建议，帮助大家更好地应对这些挑战。目录前端年轻人的“
  • pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』 「已注销」 npm
    前言博主在开发前端网站的时候，发现随着开发的项目的逐渐增多，安装的依赖包越来越臃肿，依赖包的安装速度也是非常越来越慢，多项目开发管理也是比较麻烦。之前我就了解过pnpm，但是当时担心更换包管理环境可能会出现的依赖等问题，并且也没有急切的需求，所以当时并没有立即更换综上所述，随着上面问题的出现，更换包管理环境也逐渐提上日程，所以本文主要将会简单对比pnpm和npm/yarn，并且详细讲解如何在多项目
  • deepseek本地部署后做微调训练实现智能对话的一些建议 慧香一格 AI学习deepseek服务器AI
    在本地部署大模型后，进行微调和训练以实现智能对话，通常需要按照以下步骤操作。以下是详细的指导内容：1.准备数据集在微调大模型之前，需要准备适合的训练数据集。数据集应满足以下要求：格式：通常使用JSONL（JSONLines）格式，每行包含一个训练样本。内容：数据应包含对话的上下文和目标输出，例如：{"context":"你好！今天天气不错。","response":"是的，天气很好，适合出去走走。
  • 封装websocket，兼容uniapp及普通vue3应用 一个水货程序员 websocketuni-app网络协议
    本文将实现websocket的封装,采用typescript+vue3实现，同时支持uniapp中使用。主要实现两个部分：websocket.core.ts，一个封装的websocket对象，用于处理websocket断线重连及生命周期钩子触发useWebsocket.ts，采用vuehook封装上述对象，将实例属性转换为响应式属性以供页面组件内使用websocket.core.tstypeTim
  • 前端项目git提交时做代码规范验证 一个水货程序员 git前端代码规范
    前端项目git提交时做代码规范验证需要使用到的插件：husky，是一个GitHook工具，为git客户端增加hook的。lint-staged，在git提交前，进行代码规则检查确保入库的代码都符合代码规则，如果对整个项目进行lint这样速度太慢，lint-staged可以让lint只检测暂存区的文件，提高检测速度。当前依赖版本：husky版本：^8.0.1，lint-staged版本：^13.0.
  • Docker下使用llama.cpp部署带Function calling和Json Mode功能的Mistral 7B模型 shizidushu dockerllama语言模型llama.cppmistral-7b
    Docker下使用llama.cpp部署带Functioncalling和JsonMode功能的Mistral7B模型说明：首次发表日期：2024-08-27参考：https://www.markhneedham.com/blog/2024/06/23/mistral-7b-function-calling-llama-cpp/https://github.com/abetlen/llama-cp
  • scala的option和some 矮蛋蛋 编程scala
    原文地址： http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html 对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在 本系列 前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
  • NullPointerException Cb123456 androidBaseAdapter
        java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference     出现以上异常.然后就在baidu上
  • PHP使用文件和目录 天子之骄 php文件和目录读取和写入php验证文件php锁定文件
    PHP使用文件和目录 1.使用include()包含文件 (1)：使用include()从一个被包含文档返回一个值 (2)：在控制结构中使用include()   include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。   在php.ini文件中设置
  • SQL SELECT DISTINCT 语句 何必如此 sql
    SELECT DISTINCT 语句用于返回唯一不同的值。 SQL SELECT DISTINCT 语句 在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 SELECT DISTINCT column_name,column_name F
  • java冒泡排序 3213213333332132 java冒泡排序
    package com.algorithm; /** * @Description 冒泡 * @author FuJianyong * 2015-1-22上午09:58:39 */ public class MaoPao { public static void main(String[] args) { int[] mao = {17,50,26,18,9,10
  • struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！ 7454103 DAOspringAjaxjsonqq
    struts2.18  出来有段时间了！ （貌似是 稳定版）   闲时研究下下！  貌似 sruts2 搭配 json 做 ajax 很吃香！   实践了下下！ 不当之处请绕过！ 呵呵   网上一大堆 struts2+json  不过大多的json 插件 都是 jsonplugin.34.jar   strut
  • struts2 数据标签说明 darkranger jspbeanstrutsservletScheme
    数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能 数据标签主要包括： action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。 bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
  • 链表.简单的链表节点构建 aijuans 编程技巧
    /*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h" #define NODE(name, key_word, help) \  Node name[1]={{NULL, NULL, NULL, key_word, help}} typedef struct node {  &nbs
  • tomcat下jndi的三种配置方式 avords tomcat
    jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称 访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。          tomcat配置
  • 关于敏捷的一些想法 houxinyou 敏捷
    从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。” 感觉表达的不太清楚。 感觉容易被人误解的地方主要在“用户多变的需求”上。 第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
  • 富养还是穷养，决定孩子的一生 bijian1013 教育人生
    是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由 事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
  • oracle 日期时间格式转化 征客丶 oracle
    oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP； SYSDATE：不支持毫秒，取的是系统时间； SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。 日期转字符窜： 一、不取毫秒： TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS') 简要说明， YYYY 年 MM   月
  • 【Scala六】分析Spark源代码总结的Scala语法四 bit1129 scala
    1. apply语法   FileShuffleBlockManager中定义的类ShuffleFileGroup，定义：   private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) { ... def apply(bucketId
  • Erlang中有意思的bug bookjovi erlang
      代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam） commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b Author: Jovi Zhang <[email protected]> Date: Fri Dec 2 16:19:22 2011 +0100 erts:
  • 移位打印10进制数转16进制-2008-08-18 ljy325 java基础
    /** * Description 移位打印10进制的16进制形式 * Creation Date 15-08-2008 9:00 * @author 卢俊宇 * @version 1.0 * */ public class PrintHex { // 备选字符 static final char di
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 利用cmd命令将.class文件打包成jar chenyu19891124 cmdjar
    cmd命令打jar是如下实现： 在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes) 现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作： cd D: 回车 cd workspace/prpal
  • [原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 comsci eclipse设计模式算法工作swing
                           JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明     &nb
  • SecureCRT右键粘贴的设置 daizj secureCRT右键粘贴
    一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。 老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。 菜单： Options->Global Options ...->Terminal 右边有个Mouse的选项块。 Copy on Select Paste on Right/Middle
  • Linux 软链接和硬链接 dongwei_6688 linux
    1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。 【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
  • DIV底部自适应 dcj3sjt126com JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • Centos6.5使用yum安装mysql——快速上手必备 dcj3sjt126com mysql
    第1步、yum安装mysql [root@stonex ~]#  yum -y install mysql-server 安装结果： Installed:     mysql-server.x86_64 0:5.1.73-3.el6_5                   &nb
  • 如何调试JDK源码 frank1234 jdk
    相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。 可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。 下面是编译jdk的具体步骤：         1.把C:\java\jdk1.6.0_26\sr
  • Maximal Rectangle hcx2013 max
    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.   public class Solution { public int maximalRectangle(char[][] matrix)
  • Spring MVC测试框架详解——服务端测试 jinnianshilongnian spring mvc test
    随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。   Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。 &nbs
  • Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0 liyong0802 hadoop
    一、准备编译软件   1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。     环境变量设置如下：   （1）执行vim /etc/profile （2）在文件尾部加入: export JAVA_HOME=/home/spark/jdk1.7 export MAVEN_HOME=/ho
  • StatusBar 字体白色 pangyulei status
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; /*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
  • 如何分析Java虚拟机死锁 sesame javathreadoracle虚拟机jdbc
    英文资料： Thread Dump and Concurrency Locks   Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
  • 位运算简介及实用技巧（一）：基础篇 tw_wangzhengquan 位运算
    http://www.matrix67.com/blog/archives/263    去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
  • jsearch的索引文件结构 yangshangchuan 搜索引擎jsearch全文检索信息检索word分词
    jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。   jsearch的索引文件结构定义如下：     1、一个词的索引由=分割的三部分组成：        第一部分是词        第二部分是这个词在多少
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他