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

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)

  • lrz 源码核心篇剖析：如何实现高效、兼容的图片压缩？ 沐土Arvin javascript前端开发语言
    写在前面前面是讲解了lrz基础用法,从6开始讲解源码,使用过lrz的可以直接从6开始看,中间也掺杂了一下我自己开发过程中的踩坑和经验分享,欢迎讨论!lrz（LocalResizeIMG）是一个前端图片压缩库，主要用于在浏览器中压缩图片并上传。以下是其主要特点和功能：1.主要功能图片压缩：通过调整图片质量和尺寸来减小文件大小。保持宽高比：压缩时可保持图片原始宽高比。多格式支持：支持常见图片格式如JP
  • github如何为开源项目作出贡献 PXM的算法星球 github开源
    就在昨天，笔者取得了第一次开源项目贡献，虽然更新的内容很小，但是也算是迈出了第一步1.选择合适的开源项目（1）兴趣优先选择自己感兴趣的项目会更有动力参与，比如你喜欢前端开发，可以关注React、Vue相关的开源项目；如果喜欢后端，可以尝试贡献Django、SpringBoot等项目。（2）关注活跃度一个活跃的开源项目通常意味着更快的反馈和更友好的开发者社区。你可以通过以下方式判断：Issue更新频
  • HTML5前端第七章节 NaZiMeKiY HTML51024程序员节
    本章节为前端网页页面实战，包含我们之前所学的全部内容一.创建项目目录1.网站根目录：网站根目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML，CSS，需要的素材图片等等2.根目录之下的文件夹（1）.images文件夹：存放固定使用的图片素材（2）.uploads文件夹：存放非固定使用的图片素材（3）.CSS文件夹：存放CSS文件（使用link标签引入）在CSS文件夹中又分为
  • spring boot 三步集成rabbitmq PXM的算法星球 Java后端java-rabbitmqspringbootrabbitmq
    引入依赖org.springframework.bootspring-boot-starter-amqp编写config类@ConfigurationpublicclassRabbitmqConfig{publicstaticfinalStringRECORD_QUEUE="teaching-assistant-record_queue";@BeanpublicJackson2JsonMessag
  • 可视化动态表单动态表单界的天花板--Formily(阿里开源) hhzz 前端相关开源可视化动态表单
    文章目录1、Formily表单介绍2、安装依赖2.1、安装内核库2.2、安装UI桥接库2.3、Formily支持多种UI组件生态：3、表单设计器3.1、核心理念3.2、安装3.3、示例源码4、场景案例-登录注册4.1、MarkupSchema案例4.2、JSONSchema案例4.3、纯JSX案例1、Formily表单介绍Formily是一个由阿里开源的动态表单解决方案，主要用于构建和管理复杂的表
  • 前端面试：[React] scheduler 调度机制原理？ returnShitBoy 前端react.jsjavascript
    ReactScheduler是React16.8引入的一种调度机制，旨在对高效渲染和复杂应用程序的性能进行优化。它允许React在空闲时间进行渲染，优先处理对用户体验最为重要的任务。以下是Scheduler调度机制的原理，以及它在实际工作中如何帮助管理渲染。1.调度机制的背景React的渲染过程可能会受到多个因素的影响，例如用户输入、网络请求以及其他状态变化。传统的渲染机制在某些情况下可能导致性能
  • MongoDB z小天才b MongoDBmongodb数据库
    一、MongoDB简介1.1什么是MongoDB？MongoDB是一个基于分布式文件存储的开源NoSQL数据库系统，由C++语言编写，旨在为Web应用提供可扩展的高性能数据存储解决方案。MongoDB将数据存储为一个文档，数据结构由键值对组成，类似于JSON对象，字段值可以包含其他文档、数组及文档数组。1.2MongoDB的核心特性文档型数据库：数据以BSON（BinaryJSON）格式存储灵活的
  • macos安装python-nodejs_MAC平台基于Python Appium环境搭建过程图解 weixin_39612038
    前言最近笔者要为python+appium课程做准备，mac在2019年重新安装了一次系统，这次重新在mac下搭建appium环境，刚好顺带写个文稿给大家分享分享搭建过程。一、环境和所需软件概述1.1目前环境：MacOS(10.15.3)1.2所需软件:jdk-8u91-macosx-x64.dmg(jdk1.8及以上版本应该都可以)android-sdk_r24.4.1-macosx.zip(m
  • Python接口自动化 花落同学 Python自动化从入门到放弃python自动化
    4接口自动化4.1使用python实现接口自动化如果不了解接口测试可参考https://ke.qq.com/course/4092904使用Python的request库实现接口测试：importjsonimportrequests#使用session管理：#1.可以自动关联set-cookie里面的内容#2.可以加快与服务器的连接速度session=requests.session()#auth
  • 前端小食堂 | Day17 - 前端安全の金钟罩 喵爪排序 前端安全状态模式
    ️今日盾牌：XSS/CSRF攻防全解析1.XSS防御の三重结界//危险操作：直接渲染未过滤内容document.getElementById('content').innerHTML=userInput;//✅安全姿势一：文本转义constescapeHTML=(str)=>{constmap={'&':'&','':'>','"':'"',"'":'''};ret
  • 前端面试 请叫我子鱼 编程语言笔试面试程序员webinterview
    前端面试之道JS基础知识点及常考面试题原始（Primitive）类型面试题：原始类型有哪几种？null是对象嘛？在JS中，存在着6种原始值，分别是：booleannullundefinednumberstringsymbol首先原始类型存储的都是值，是没有函数可以调用的对象（Object）类型面试题：对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？在JS中，除了原始类型那么其他的都是对
  • chokidar - chokidar 初识（初识案例演示、初识案例解读、初识案例测试） 我命由我12345 Node.js简化库编程node.jsjsjavascript前端框架前端npmhtml5
    一、chokidar1、chokidar概述chokidar是一个用于监视文件系统变化的Node.js库chokidar提供了一种简单、高效的方式来监视文件和目录的创建、修改、删除等操作chokidar是是fs.watch和fs.watchFile方法的增强版，解决了它们在一些平台上的不一致性和局限性2、chokidar的特点跨平台的支持：chokidar在Windows、Linux、macOS上
  • Vue前端实现多个条件表格搜索 1724580787 前端vue.jsjavascript
    文章目录操作实现效果测试json数据搜索栏条件过滤完成搜索表格栏完整代码操作实现效果在vue文件中通过js代码完成多条件搜索符合条件的table数据，本文使用了element-ui组件创建表格。效果如下图所示：测试json数据[{"test1":"","test2":"","test3":"","test4":""}...//这里只展示一条数据]搜索栏条件过滤完成搜索computed计算方法监视t
  • adb 如何导出手机的文件 风继续吹.. 工具类Uni-Appadb智能手机uniappsqlite
    目录1.开启USB调试2.连接设备3.启动ADB4.导出文件使用adbpull命令5.可视化工具预览adb（AndroidDebugBridge）是Android开发中常用的一个工具，它允许开发者通过电脑与Android设备进行通信。如果你想通过adb导出手机上的文件，你可以按照以下步骤业务需求:前端通过使用uni-app的sqlite(关系型数据库系统),存储了大量的机密数据在手机上,直接通过代
  • Spring Boot 集成 Kafka 消息发送方案 weixin_43833540 springbootkafka
    一、引言在SpringBoot项目中，Kafka是常用的消息队列，可实现高效的消息传递。本文介绍三种在SpringBoot中使用Kafka发送消息的方式，分析各自优缺点，并给出对应的pom.xml依赖。二、依赖引入在pom.xml中添加以下依赖：org.springframework.kafkaspring-kafka3.0.8org.jsonjson20231013若要进行测试，可添加sprin
  • Kafka 的消息压缩机制：优化存储与传输的利器 阿贾克斯的黎明 javalinqc#java
    目录Kafka的消息压缩机制：优化存储与传输的利器一、消息压缩机制的重要意义1.减少存储成本2.提升网络传输效率二、Kafka常用的消息压缩算法1.GZIP压缩2.Snappy压缩3.前端展示压缩状态（Vue3+TS）在消息中间件的大家族中，Kafka以其卓越的性能而备受瞩目。其中，Kafka的消息压缩机制是一项非常重要的特性，它就像是一个高效的“压缩包”，在不损失数据内容的前提下，有效减少数据的
  • Django系列教程（15）——上传文件 l软件定制开发工作室 Django教程djangookhttppython
    目录Django文件上传需要考虑的重要事项Django文件上传的3种常见方式项目创建与设置创建模型URLConf配置使用一般表单上传文件使用ModelForm上传文件Django文件上传需要考虑的重要事项文件或图片一般通过表单进行。用户在前端点击文件上传，然后以POST方式将数据和文件提交到服务器。服务器在接收到POST请求后需要将其存储在服务器上的某个地方。Django默认的存储地址是相对于根目
  • @Autowired 和 @Resource 注解的区别 在努力的韩小豪 springspringbootjava-eejava
    前言@Autowired和Resource是Spring中用于依赖注入的注解，但两者在实现机制和使用方式上有显著差异。主要区别1.来源不同@Autowired：由Spring框架提供（org.springframework.beans.factory.annotation），与Spring强耦合。@Resource：由JSR-250规范定义（javax.annotation.Resource），属
  • 【业务场景实战】JWT实现用户登录 仰望-星空~~ java
    在我们平时登录注册的过程中，我们的信息都会由浏览器发送给后端进行处理，然后再插入到数据库中，下次我们进行登录的时候，只需要输入用户名和密码就可以登录成功进入网站进行操作了。但个人信息暴露在大众面前这是极其不安全的，对于我们的隐私，我们并不希望被别人知道。所以我们在登录的时候，浏览器中进行传递的数据有些是会脱敏、有些是需要进行加密之后才能进行传递的。一、JWT简介JWT（全称JSONWEBToken
  • 第二章 EXI协议原理与实现--7.8 测试ISO15118-20命令 快活林高老大 ISO15118EXI
    7EfficientXML编解码库7.8测试ISO15118-20命令编解码现在开始使用EfficientXML的库测试ISO15118-20命令的编解码是否正确，是否与EXICodec.jar的结果一致。在本书的附录B中罗列了ISO15118-20的所有命令（json、xml、exi），感兴趣的读者可以使用这些命令自己进行编解码验证。编写测试程序mytest20-all.c，对15118-2命令
  • VUE-Element-UI：select-tree johnrui FrontEndvue.js
    一、概述本文主要是在Element-UI+VUE框架下，利用el-select、el-tree组件实现了下拉框多选、回显的效果，如下图：二、实例代码1.HTML代码2.JS代码varvm=newVue({el:'#app',data:{mineStatus:"",mineStatusValue:[],remarksItemCheckedList:[],//回显数据["A","B"]remarksI
  • 优秀的前端框架 johnrui FrontEndweb
    soybean-admin:https://gitcode.com/gh_mirrors/soy/soybean-adminsoybean-admin(演示):https://elp.soybeanjs.cn/home
  • Springboot List集合的校验方式 johnrui springbootlist后端
    pom.xml引入org.hibernate.validatorhibernate-validator6.2.0.Finalorg.springframework.bootspring-boot-starter-validation校验实体类注解@Data@NoArgsConstructor@AllArgsConstructor@JsonIgnoreProperties(ignoreUnknown
  • 网页版 123 分身数字人源码搭建，OEM贴牌 18538162800=余 音视频矩阵
    在数字化时代的浪潮下，数字人技术蓬勃发展，网页版123分身数字人源码搭建为众多开发者和企业提供了实现个性化数字人应用的可能。本文将深入探讨其技术开发过程，从底层架构到关键技术实现，全方位解析如何构建一个功能强大的网页版数字人系统。技术架构设计前端展示层HTML5与CSS3：构建数字人的可视化界面，实现流畅的动画效果和交互元素。利用CSS3的过渡、动画属性，为数字人的动作、表情变化提供细腻的视觉呈现
  • 入门 Canvas：Web 绘图的强大工具 Hopebearer_ 前端es6javascriptcanva可画
    文章目录入门Canvas：Web绘图的强大工具一、Canvas简介二、Canvas的基本用法（一）绘制基本图形（二）绘制文本三、Canvas的应用场景（一）数据可视化（二）游戏开发（三）图像编辑四、Canvas的动画效果五、Canvas的优势与局限性（一）优势（二）局限性六、总结入门Canvas：Web绘图的强大工具在Web开发的广阔天地中，为了满足用户对丰富、交互性强的体验的不断追求，前端技术持
  • Vue 3 事件总线详解：构建组件间高效通信的桥梁 A-Kamen vue.js前端javascript
    Vue3事件总线详解：构建组件间高效通信的桥梁为什么需要事件总线？使用mitt实现事件总线1.安装mitt2.创建事件总线3.在组件中使用事件总线发送端组件（例如ComponentA.vue）接收端组件（例如ComponentB.vue）自定义实现事件总线总结在复杂的前端应用中，组件之间的通信往往需要一种灵活且解耦的方式。传统的Vue2中，我们常使用全局事件总线来实现这种通信，但在Vue3中，由于
  • TinyMCE插件是否支持Word图片的直接复制与web上传？ 2501_90694782 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：TinyMCE前端：vue,vue2-cli,vue3-cli后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux
  • Next：Error: Image with src “https://via.placeholder.com/50“ is missing required “height“ property. dingcho 前端SEOreact前端mui
    在Next.js中使用next/image组件时，需要同时提供width和height属性，或者使用fill属性。你遇到的错误提示表明缺少height属性，下面是修正后的代码：setIsLoading(false)}onError={()=>setIsLoading(false)}/>
  • 【JavaWeb学习Day25】 quo-te JavaWebvue黑马
    Web前端实战ElementPlus什么是ElementPlusElementPlus：是饿了么团队研发的，基于Vue3，面向设计师和开发者的组件库。组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。官网：一个Vue3UI框架|ElementPlus快速入门准备工作：1.创建vue项目2.参照官方文档，安装ElementPlus组件库（在当前工程的目录下）：npminstall
  • JS获取URL中参数值的4种方法 夕阳_醉了 javascript前端html
    方法1：现代浏览器都支持URL和URLSearchParams对象，可以很方便地从URL中提取参数//假设当前URL为"https://example.com/?name=John&age=30"consturl=newURL(window.location.href);//或者你可以直接传入一个URL字符串constname=url.searchParams.get('name');//"Joh
  • 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其他