王梓懿_1fbc
王梓懿_1fbc

07、Vue-Goods组件(商品列表)《饿了吗》

  • Goods组件 -- 左侧菜单列表布局
  • Goods组件 -- 右侧具体商品列表布局
  • Goods组件 -- better-scrll运用
  • Goods组件 -- 购物车组件
  • Goods组件 -- 购物个数组件
  • Goods组件 -- 购物车详情页
  • Goods组件 -- 购物车背景效果

一、flex布局

Flex 布局，可以简便、完整、响应式地实现各种页面布局，Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

  // 指定为 Flex 布局
  display: flex；


  // 主要属性
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
    flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
    flex-shrink属性定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
    flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex语法
flex实践

二、display:table-cell的应用

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。单元格有一些比较特别的属性，例如元素的垂直居中对齐，与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

  • 图片大小不一水平垂直居中设置
    在之前HTML&CSS元素样式中有涉及到关于图片的水平垂直居中设置，也是可以解决图片大小不一致的居中，但是相对这种方法就是比较复杂
    // html
   

      ![](Snip20160614_3.png)
    


  // css
  .box{
    width: 600px;
    height: 600px;
    border: 1px solid gray;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
07、Vue-Goods组件(商品列表)《饿了吗》_第1张图片
  • 多行文字水平垂直居中
    如果只是单纯行设置直接用行高会更为快捷，但如果文字内容是不确定的情况下使用该方法就是更为简单
  // html
 

    
        你好？
    
 


  // css 
.view{
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    text-align: center;
    // 设置为类似 
    display: table;
    // 注意要添加垂直对齐方式
    vertical-align: middle;
 }
 .view span{
     display: table-cell;
     // 注意要添加垂直对齐方式
    vertical-align: middle;
    }


 
  
 
   
 
     
   
 
  
 
  
 
 
 
  
 
   
 
    07、Vue-Goods组件(商品列表)《饿了吗》_第2张图片 
   
 
  
 
  
 
 
 
  
大小不固定的图片、多行文字的水平垂直居中让行数不固定的文字在高度固定的容器内垂直居中
 display: table-cell的其他用法
 
 
三、 better-scroll运用
类似于iscroll，实现滚动效果
     
  
  • 安装
     $ npm install better-scroll
    •  
  
  • 导入
     那个组件需要使用，就在哪里导入即可；
     import BScroll from 'better-scroll'
    •  
  
  • 使用
    •  
 
  // ref属性为menuScroll (可以使用驼峰命名)
  


  // 获取到对应元素 this.$refs.menuScroll
  // 创建实例，即可以实现滚动
  new BScroll(this.$refs.menuScroll, {});


 
  
ref属性就是用来绑定某个dom元素，或者来说用来绑定某个组件，然后在this.$refs里面调用
 
 
四、菜单以及分类联动效果
确定主体内容中每个分组对应的高度，在滚动时通过滚动的距离确定滚动的位置，之后改变菜单栏的选项；即菜单选项和分组有个数组与之对应；
     
  
  • better-scroll中probeType滚动事件监听类型选择
     probeType: 1 会截流,只有在滚动结束的时候派发一个 scroll 事件。2在手指 move 的时候也会实时派发 scroll 事件，不会截流。 3除了手指 move 的时候派发scroll事件，在 swipe（手指迅速滑动一小段距离）的情况下，列表会有一个长距离的滚动动画，这个滚动的动画过程中也会实时派发滚动事件
    •  
 
  // 在创建滚动实例时，传递参数
  this.foodsScroll = new BScroll(this.$refs.foodsScroll, {
    probeType: 3
  });

  // 滚动事件的处理
  this.foodsScroll.on('srcoll', (pos) => {
    this.srcollY = pos.y;
  });


     
  
  • 菜单选项和滚动距离映射
     通过vue中的计算属性，可以快速实现映射
    •  
 
  
    
    // vue1.0: v-for="item in goods" 获取对应元素下标是直接$index
    // vue2.0: v-for="(item,index) in goods" 已经废弃$index
    
  • 
      {{item}}
    
    • 
 



     
  
  • better-scroll事件操作
     移动端中，默认点击事件是不会被派发的，所以要在创建BScroll实例时，要将点击事件操作打开
    •  
 
this.menuScroll = new BScroll(this.$refs.menuScroll, {
  // click: true 是否派发click事件
  click: true
});


 
  
如果click: true，pc端点击事件会触发两次，移动端点击事件会触发一次，为了保持一致，即可以通过event事件源来判断处理
 
 
  // 点击事件，并将$event事件传递过去
  
  • 
  // 点击事件处理方法  
  selectMune(index, event){
     if(!event._constructed){  // pc端的不做任何处理
      return
     }
    console.log(index); 
    }


      •  
  
    • better-scroll方法
       scrollToElement(el, time, offsetX, offsetY, easing)
       滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数
      •  
 
      // 跳转到对应的分组中
  let foodList = this.$refs.foodListHook;
  this.foodsScroll.scrollToElement(foodList[index], 200);


    五、购物车组件
     
  
       
   
    • 配送费和起送费，是在商家seller数据中，该数据是在App.vue获取，即需要将数据传递到Goods，再从Goods传递到Shopcart
      •  
  
     
 
       
  
    • 添加商品功能，添加操作是在Goods组件中，需要将选择的内容(food数组形式)传递到Shopcart组件中
      •  
 
    六、购物个数组件
     
  
       
   
    • 商品个数选择肯定也是和对应商品对应的，即需要将对应商品信息传递Cartcontrol组件
      •  
  
     
 
       
  
    • Goods将food商品信息传递过来后，food中是没有count字段的，如果直接添加，是不会监听该字段变化的；如果想要达到效果，需要通过vue.set()方法
      •  
 
      import Vue from 'vue';
  // 通过该方法添加新的字段
  Vue.set(this.food, 'count', 1);


    注: Goods组件将food传到Cartcontrol组件中，在Cartcontrol修改了food内容，Goods中对应的内容也会相对应改变，即不需要再传回到Goods中；
       
  
    • 当food.count改变，对应的需要Goods组件，将所有添加的商品添加到数组中，之后将该数组传入到Shopcart组件
      •  
 
    八、购物车详情页
    作者：西门奄
     链接：https://www.jianshu.com/u/77035eb804c3
     來源：
     著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
    
                    
                
    
        
    你可能感兴趣的:(07、Vue-Goods组件(商品列表)《饿了吗》)
    
        
    
            
    
                
      
                    
    • 蓝桥杯刷题第三天——排序
                        XAX520_1314
蓝桥杯算法数据结构python
                        
      题目描述输入个数进行排序，要求先按奇偶后按从小到大的顺序排序。输入格式第一行包含一个整数n。第二行包含n个整数。输出格式输出排序之后的结果。整数之间空格隔开。数据范围1≤≤1000,输入整数取值范围[1,10000]。解题思路首先分离奇数和偶数，使用列表推导式将输入的数字分为奇数和偶数两个列表。分别对奇数列表和偶数列表进行排序。合并列表，将排序后的奇数列表和偶数列表合并。输出结果，将合并后的列表转
      
                    
      • 
                    
    • 【LeetCode面试150】——21合并两个有序列表
                        沈小农学编程
LeetCodeleetcode面试算法职场和发展pythonc++
                        
      博客昵称：沈小农学编程作者简介：一名在读硕士，定期更新相关算法面试题，欢迎关注小弟！PS：哈喽！各位CSDN的uu们，我是你的小弟沈小农，希望我的文章能帮助到你。欢迎大家在评论区唠嗑指正，觉得好的话别忘了一键三连哦！题目难度：简单默认优化目标：最小化时间复杂度。Python默认为Python3。目录1题目描述2题目分析3算法框架以及代码实现3.1递归3.2迭代参考文献1题目描述将两个升序链表合并为
      
                    
      • 
                    
    • ＜论文＞如何将RAG和时序大模型相结合？
                        CM莫问
文献简录人工智能深度学习算法时间序列RAG大模型
                        
      一、摘要本文介绍论文发表于2024年的论文《RetrievalAugmentedTimeSeriesForecasting》，该论文提出了将RAG技术应用于时序大模型的策略，提升了时序大模型的性能。译文：检索增强生成（RAG）是现代大型语言模型系统的核心组件，特别是在需要最新信息以准确响应用户查询或查询超出训练数据范围的情况下。时间序列基础模型（TSFM）的出现，如Chronos，以及在各种时间序
      
                    
      • 
                    
    • react Hooks 父组件调用子组件函数、获取子组件属性
                        初遇你时动了情
react.jsjavascript前端
                        
      子组件import{forwardRef,useImperativeHandle}from'react'//定义子组件的ref类型exportinterfaceChildRef{childMethod:()=>voidchildValue:string}constChild=forwardRef((props,ref)=>{//暴露给父组件的方法和属性useImperativeHandle(ref
      
                    
      • 
                    
    • Go 结构体
                        ZiHao626
GoLearninggo
                        
      12结构体文章目录12结构体12结构体类型别名和自定义类型自定义类型类型别名类型定义和类型别名的区别结构体结构体的定义结构体实例化基本实例化匿名结构体创建指针类型结构体取结构体的地址实例化结构体初始化使用键值对初始化使用值得列表初始化结构体内存布局空结构体面试题构造函数方法和接收者指针类型的接收者值类型的接收者何时使用指针类型的接收者任意类型添加方法结构体的匿名字段嵌套结构体嵌套匿名字段嵌套结构体
      
                    
      • 
                    
    • Java - 文字识别 ；示例代码基于SpringAI和国产大模型
                        沈询-阿里
microsoft机器学习人工智能后端
                        
      文字识别在Java开发中的应用在Java开发中，将图像中的文字进行识别能力被广泛应用于多种场景，比如自动审核图片内容、商品搜索分析等。过去，这类需求主要通过OCR（光学字符识别）技术来实现，但其对于复杂图像的处理效果往往不尽人意。如今，随着大模型技术的发展，利用这些先进的AI模型进行文字识别成为可能，不仅大大提升了识别精度和速度，还能更好地理解图像中的复杂信息，为用户提供更加准确可靠的服务。本文采
      
                    
      • 
                    
    • 【python】什么是对象
                        shanks66
python开发语言
                        
      @[toc]python对象Object在Python中，对象（Object）是面向对象编程（OOP）的核心概念。对象是类的实例，类定义了对象的属性和行为。Python中的一切都是对象，包括数字、字符串、列表、函数等。对象的基本概念类（Class）：类是对象的蓝图或模板，定义了对象的属性和方法。通过类可以创建多个对象。对象（Object）：对象是类的实例，具有类定义的属性和方法。每个对象都有自己的
      
                    
      • 
                    
    • 一文教你实现前端自定义浮窗
                        

                        
      在页面布局中，我们通常会给指定区域做限制，若元素超出了指定区域则会隐藏(overflow:hidden;)。而文字提示框组件却能精准定位指定元素，并不受overflow:hidden;元素的影响。这是因为文字提示框组件是直接挂载在body下的，所以它不受页面布局的影响，其它的弹窗组件也是类似的原理，例如：modal组件、对话框组件、mask组件、toast组件等。要实现提示框组件，有两个核心点需要
      
                    
      • 
                    
    • 深度解析 React 中 setState 的原理：同步还是异步
                        

                        
      在React框架的核心机制里，setState是实现动态交互与数据驱动视图更新的关键枢纽。深入理解setState的工作原理，尤其是其同步与异步的特性，对于编写高效、稳定且可预测的React应用至关重要。一、setState的基础认知在React组件中，状态（state）是驱动组件行为与渲染结果的核心数据。setState作为更新状态的唯一官方途径，负责触发组件的重新渲染，从而反映出状态的变化。以
      
                    
      • 
                    
    • 从零开始学 MobX Store：简化 React 数据管理
                        
javascriptreact
                        
      学习如何使用MobXStore在React应用中实现全局状态管理。本文通过简单的购物车功能示例，帮助你理解MobXStore的基本概念、使用方法以及如何高效共享和管理数据，解决多组件间的数据同步问题。适合所有想提升React开发效率的开发者。文章目录什么是MobXStore？先理解问题MobXStore提供哪些功能？MobX的两种写法1.装饰器写法（旧版本常见）2.makeObservable写法
      
                    
      • 
                    
    • type 属性的用途和实现方式（图标，表单，数据可视化，自定义组件）
                        治金的blog
前端html5vue.js
                        
      1.图标类型组件中，type可以用来指定图标的不同样式。//表示圆形//表示方形//表示三角形//表示搜索图形2.表单控件类型在表单元素中，type属性用于指定输入控件的类型。复选框单选框文件选择3.数据可视化图标类型在数据可视化库中，type属性用于指定图表的类型//使用Plotly创建柱状图Plotly.newPlot('myDiv',[{x:[1,2,3,4],y:[10,15,13,17]
      
                    
      • 
                    
    • k8s之父带你阅读 replicaset 源码【2w字】
                        
go
                        
      4.6replicasetcontroller01介绍简介replicasetcontroller是kube-controller-manager组件中众多控制器中的一个，是replicaset资源对象的控制器，其通过对replicaset、pod2种资源的监听，当这2种资源发生变化时会触发replicasetcontroller对相应的replicaset对象进行调谐操作，从而完成replica
      
                    
      • 
                    
    • 为什么在 Python 中 hash(-1) == hash(-2)?
                        
python
                        
      英文：https://omairmajid.com/posts/2021-07-16-why-is-hash-in-python作者：OmairMajid译者：豌豆花下猫&Claude-3.5-Sonnet时间：原文发布于2021.07.16，翻译于2025.01.11收录于：Python为什么系列https://github.com/chinesehuazhou/python-whydo当我在等
      
                    
      • 
                    
    • Vue 开发者的 React 实战指南：测试篇
                        

                        
      作为Vue开发者，在迁移到React开发时，测试策略和方法也需要相应调整。本文将从Vue开发者熟悉的角度出发，详细介绍React中的测试方法和最佳实践。测试工具对比Vue的测试工具在Vue生态中，我们通常使用：VueTestUtils：官方的组件测试工具Jest：单元测试框架Cypress：端到端测试工具//Vue组件测试示例import{mount}from'@vue/test-utils';i
      
                    
      • 
                    
    • 关于商品详情 API 接口 JSON 格式返回数据解析的示例
                        
csrfweb3php
                        
      以下是一个关于商品详情API接口JSON格式返回数据解析的示例，不同的电商平台或者业务场景下具体数据结构会有所差异，大致的解析思路可以参考以下内容：一：示例JSON数据结构假设我们有如下一段模拟的商品详情API接口返回的JSON格式数据：{"product":{"id":"123456","name":"示例商品","description":"这是一款很实用的示例商品，具备多种功能。","pri
      
                    
      • 
                    
    • Python列表方法
                        L_lemo004
Pythonpython
                        
      目录添加元素Pythonappend()方法添加元素Pythonextend()方法添加元素Pythoninsert()方法插入元素删除元素del：根据索引值删除元素pop()：根据索引值删除元素remove()：根据元素值进行删除clear()：删除列表所有元素修改元素修改单个元素修改一组元素查找元素index()方法count()方法添加元素实际开发中，经常需要对Python列表进行更新，包括
      
                    
      • 
                    
    • JPA懒加载与实体分离的解决方案
                        t0_54manong
windows个人开发
                        
      在使用JPA进行数据持久化操作时，懒加载是一个常见的优化手段。它允许我们在加载父实体时，不立即加载关联的子实体，从而提高性能。然而，懒加载也带来了一些问题，尤其是在实体分离（detached）的情况下。本文将通过一个具体的例子，详细探讨如何解决懒加载关联实体在实体分离后无法获取的问题。实体定义首先，我们定义两个实体类：Person和Phone。Person实体包含一个懒加载的Phone列表。jav
      
                    
      • 
                    
    • json相关内容(python)
                        大哥喝阔落
jsonpython开发语言
                        
      JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。Python提供了json模块来处理JSON数据。以下是关于Python中JSON的详细内容：1.导入json模块importjson2.将Python对象转换为JSON字符串使用json.dumps()函数可以将Python对象（如字典、列表、字符串、数字等）转换为JS
      
                    
      • 
                    
    • Ghostty 终端默认快捷键列表
                        
编辑器vimgo前端程序员
                        
      文章目录Ghostty终端默认快捷键列表基本操作分屏操作光标和选择操作其他操作物理按键绑定特殊按键说明注意事项结语Ghostty提供了丰富的默认快捷键，用户可以通过这些快捷键快速执行各种操作。以下是Ghostty的默认快捷键列表，这些快捷键可以通过keybind配置进行自定义。Ghostty终端默认快捷键列表基本操作super+page_up:向上滚动页面。super+page_down:向下滚动
      
                    
      • 
                    
    • 【列表复制】详解python中list列表复制的几种方法（赋值、切片、copy()，deepcopy()）
                        有梦想的程序星空
Python开发教程python开发语言
                        
      在Python编程领域，列表是一种极为常用的数据结构，用于存储多个元素的有序集合。当涉及到对列表进行复制操作时，浅拷贝和深拷贝是两种重要的概念与技术手段，它们在处理列表数据的过程中有着截然不同的行为和影响，深刻理解二者的差异与应用场景对于编写高效、准确且健壮的Python代码至关重要。1、浅拷贝和深拷贝浅拷贝复制指向某个对象的地址（指针），而不复制对象本身，新对象和原对象共享同一内存。深拷贝会额外
      
                    
      • 
                    
    • Linux 下的模糊查找神器 fzf 使用教程
                        
linux
                        
      简介fzf是一款功能强大且用途广泛的Linux命令行模糊查找器。它允许用户使用模糊匹配高效地搜索和过滤文本、文件和命令历史记录。它是一个交互式过滤程序，适用于任何类型的列表；文件、命令历史、进程、主机名、书签、git提交等。它实现了一种“模糊”匹配算法，因此可以快速键入带有省略字符的模式，并且仍然可以得到想要的结果。安装Debian/UbuntusudoaptinstallfzfRedHat/Ce
      
                    
      • 
                    
    • HarmonyOS Next V2 状态管理 AppStorageV2 和 PersistenceV2
                        
harmonyos
                        
      HarmonyOSNextV2状态管理AppStorageV2和PersistenceV2前言在HarmonyOS应用开发过程中，我们已经学习过了不少关于状态管理相关的技术，如@ObservedV2装饰器和@Trace装饰器：类属性变化观测@ComponentV2装饰器：自定义组件@Local装饰器：组件内部状态@Param：组件外部输入@Once：初始化同步一次@Event装饰器：组件输出@Mo
      
                    
      • 
                    
    • HarmonyOS Next V2 @Monitor 和@Computed
                        
harmonyos
                        
      HarmonyOSNextV2@Monitor和@Computed@Monitor介绍@Monitor是状态把管理V2版本中的用于监听状态变量修改的技术。它可以直接用在@ComponentV2装饰的自定义组件中，用于被@Local、@Param、@Provider、@Comsumer、@Computed修饰的状态变量中对于深层次的数据，如深层次对象、对象数组等，需要搭配@ObservedV2、@T
      
                    
      • 
                    
    • HarmonyOS Next V2 @Event
                        
harmonyos
                        
      HarmonyOSNextV2@Event背景在上一节中，我们针对父子组件，讲了关于传递数据的知识。我们了解到@Local是管理自己内部的数据的，@Param是负责接收父组件的数据的，而且子自己内部不能直接修改按照一个组件最基本的功能，既能接收外部传入的数据，也要向外部传递数据。那么@Event修饰符就是来解决这个问题的了。介绍@Event是子组件向父组件传递数据的技术，它只能用在@Compone
      
                    
      • 
                    
    • debian12 安装docker以及docker-compose
                        bali16
Linuxdebiandocker
                        
      最快的方法请确保你的下载源已经是使用了国内镜像源,否则请你先修改apt镜像源为国内源再进行下载!设置国内镜像源安装dockeraptinstalldocker.io安装docker-composeaptinstalldocker-compose以前的方法现在镜像站，跟docker都访问不了，不能用这个了。更新软件包列表确保您的系统软件包列表是最新的。您可以通过运行以下命令来更新软件包列表：sudo
      
                    
      • 
                    
    • Gateway的配置与使用
                        

                        
      SpringCloudGateway配置与使用SpringCloudGateway是一个轻量级的API网关解决方案，它是SpringCloud微服务架构中的关键组件，主要用于请求的路由、过滤和转发。通过SpringCloudGateway，开发者能够以高效且灵活的方式管理微服务的API接入和流量控制。本文将详细介绍如何配置和使用SpringCloudGateway，并通过实际代码示例来展示配置过程
      
                    
      • 
                    
    • 如何控制bean的加载顺序？
                        
后端javaspring
                        
      写在前面springboot遵从约定大于配置的原则，极大程度的解决了配置繁琐的问题。在此基础上，又提供了spi机制，用spring.factories可以完成一个小组件的自动装配功能。在一般业务场景，可能是不需要关心一个bean是如何被注册进spring容器的，只需要把需要注册进容器的bean声明为@Component即可，因为spring会自动扫描到这个Bean完成初始化并加载到spring上下
      
                    
      • 
                    
    • npm安装vue.js的2.x和3.x版本的vuex/vue-router/vue-cli安装命令
                        

                        
      1.vue2和vue3安装几个组件的指令有@的区别vue2安装组件指令没有@,但是vue3有,我不知道为啥。2.Vue.js2.x安装指令npminstall-gvue-cli#安装VueCLInpminstallvue#安装Vuenpminstallvuex#安装Vuexnpminstallvue-router#安装VueRouter3.Vue.js3.x安装指令npminstall-g@vue
      
                    
      • 
                    
    • HarmonyOS 5.0应用开发——Web组件的使用
                        

                        
      【高心星出品】Web组件的使用ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容。常见使用场景包括：应用集成Web页面：应用可以在页面中使用Web组件，嵌入Web页面内容，以降低开发成本，提升开发、运营效率。浏览器网页浏览场景：浏览器类应用可以使用Web组件，打开三方网页，使用无痕模式浏览Web页面，设置广告拦截等。小程序：小程序类宿主应用可以使用Web组件，渲染小程序
      
                    
      • 
                    
    • 升级AMH7.1后，无法升级其他组件和软件的解决方案汇总
                        
css3
                        
      在升级AMH7.1后无法升级其他组件和软件，可能是由于系统或依赖问题导致的。你可以按照以下步骤进行排查和操作：1.检查依赖和冲突确认在升级AMH7.1之后，是否有其他组件或软件与其发生冲突，尤其是与PHP、MySQL、Nginx/Apache等相关的版本问题。查看错误信息，查找可能的依赖问题。执行以下命令查看已安装的组件版本：amh-v这将显示AMH的当前版本，确保它和你的其他组件兼容。2.检查系
      
                    
      • 
                                
    • java杨辉三角
                                    3213213333332132
java基础
                                    
      
package com.algorithm;

/**
 * @Description 杨辉三角
 * @author FuJianyong
 * 2015-1-22上午10:10:59
 */
public class YangHui {
	public static void main(String[] args) {
		//初始化二维数组长度
		int[][] y
      
                                
      • 
                                
    • 《大话重构》之大布局的辛酸历史
                                    白糖_
重构
                                    
      《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。 
  
 
 背景 
 
        公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
      
                                
      • 
                                
    • 电驴链接在线视频播放源码
                                    dubinwei
源码电驴播放器视频ed2k
                                    
      本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： 
http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 
项目源码： 
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 
项目源码依赖于两个库项目，库项目一链接： 
http://git.oschina.
      
                                
      • 
                                
    • Javascript中函数的toString()方法
                                    周凡杨
JavaScriptjstoStringfunctionobject
                                    
      简述 
    The toString() method returns a string representing the source code of the function. 
    简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 
句法 
    function.
      
                                
      • 
                                
    • struts处理自定义异常
                                    g21121
struts
                                    
      很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 
非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 
此处我们用的是非运行时异常，首先定义一个异常LoginException: 
/**
 * 类描述：登录相
      
                                
      • 
                                
    • Linux中find常见用法示例
                                    510888780
linux
                                    
      Linux中find常见用法示例 
 
·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; 
 
 
 
 
find命令的参数；
      
                                
      • 
                                
    • SpringMVC的各种参数绑定方式
                                    Harry642
springMVC绑定表单
                                    
      1. 基本数据类型(以int为例，其他类似)： 
Controller代码： 
 

    @RequestMapping("saysth.do")
    public void test(int count) {
    }
 
表单代码： 
 

<form action="saysth.do" method="post&q
      
                                
      • 
                                
    • Java 获取Oracle ROWID
                                    aijuans
javaoracle
                                    
        
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. 
The oracle.sql.ROWID class i
      
                                
      • 
                                
    • java获取方法的参数名
                                    antlove
javajdkparametermethodreflect
                                    
      reflect.ClassInformationUtil.java 
package reflect;

import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt
      
                                
      • 
                                
    • JAVA正则表达式匹配 查找 替换 提取操作
                                    百合不是茶
java正则表达式替换提取查找
                                    
      正则表达式的查找;主要是用到String类中的split(); 
      String str; 
     str.split();方法中传入按照什么规则截取,返回一个String数组 
  
常见的截取规则: 
str.split("\\.")按照.来截取

str.
      
                                
      • 
                                
    • Java中equals()与hashCode()方法详解
                                    bijian1013
javasetequals()hashCode()
                                    
      一.equals()方法详解 
    equals()方法在object类中定义如下：  
public boolean equals(Object obj) {
    return (this == obj);
}
 
   很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
      
                                
      • 
                                
    • 精通Oracle10编程SQL(4)使用SQL语句
                                    bijian1013
oracle数据库plsql
                                    
      --工资级别表
create table SALGRADE
(
  GRADE    NUMBER(10),
  LOSAL    NUMBER(10,2),
  HISAL    NUMBER(10,2)
)

insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser
      
                                
      • 
                                
    • 【Nginx二】Nginx作为静态文件HTTP服务器
                                    bit1129
HTTP服务器
                                    
       Nginx作为静态文件HTTP服务器 
 
  在本地系统中创建/data/www目录，存放html文件(包括index.html) 
 创建/data/images目录，存放imags图片 
 在主配置文件中添加http指令 
 
  
http {
    server {
        listen       80;
        server_name  
      
                                
      • 
                                
    • kafka获得最新partition offset
                                    blackproof
kafkapartitionoffset最新
                                    
      kafka获得partition下标，需要用到kafka的simpleconsumer 
  
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.
      
                                
      • 
                                
    • centos 7安装docker两种方式
                                    ronin47

                                    
            第一种是采用yum 方式 
             yum install -y docker 
          
      
                                
      • 
                                
    • java-60-在O(1)时间删除链表结点
                                    bylijinnan
java
                                    
      

public class DeleteNode_O1_Time {

	/**
	 * Q 60 在O(1)时间删除链表结点
	 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点
	 * 
	 * Assume the list is:
	 * head->...->nodeToDelete->mNode->nNode->..
      
                                
      • 
                                
    • nginx利用proxy_cache来缓存文件
                                    cfyme
cache
                                    
      user  zhangy users;
worker_processes 10;
error_log  /var/vlogs/nginx_error.log  crit;
pid        /var/vlogs/nginx.pid;
#Specifies the value for ma
      
                                
      • 
                                
    • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题
                                    comsci
嵌入式
                                    
       
    假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做： 
 
    string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))" 
 
    定义一个0整数c,然后用这个整数c去
      
                                
      • 
                                
    • 如何集成支付宝官方文档
                                    dai_lm
android
                                    
      官方文档下载地址 
 
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 
 
集成的必要条件 
1. 需要有自己的Server接收支付宝的消息 
2. 需要先制作app，然后提交支付宝审核，通过后才能集成 
 
调试的时候估计会真的扣款，请注意 

      
                                
      • 
                                
    • 应该在什么时候使用Hadoop
                                    datamachine
hadoop
                                    
      原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 
 
存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 
 
--------------------------------------------万能的分割线-------------------------------- 
有人问我，“你在大数据和Hado
      
                                
      • 
                                
    • 在GridView中对于有外键的字段使用关联模型进行搜索和排序
                                    dcj3sjt126com
yii
                                    
      在GridView中使用关联模型进行搜索和排序 
首先我们有两个模型它们直接有关联:   
class Author extends CActiveRecord {
...
}
 
class Post extends CActiveRecord {
...
    function relations() {
        return array(
            '
      
                                
      • 
                                
    • 使用NSString 的格式化大全
                                    dcj3sjt126com
Objective-C
                                    
      格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
      
                                
      • 
                                
    • 使用activeX插件对象object滚动有重影
                                    蕃薯耀
activeX插件滚动有重影
                                    
          
使用activeX插件对象object滚动有重影       <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
      
                                
      • 
                                
    • SpringMVC4零配置
                                    hanqunfeng
springmvc4
                                    
      基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。 
  
  
项目说明如下： 
1.db.sql是项目中用到的表，数据库使用的是oracle11g 
2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 
3.默认项目为零配置启动，如果需要更改启动方式，请
      
                                
      • 
                                
    • 《开源框架那点事儿16》：缓存相关代码的演变
                                    j2eetop
开源框架
                                    
      问题引入 
上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 
该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 
当然去看相关实现代代码的时候，大致是下面的样子。    
[java] 
view plain 
copy 
print 
?   
 
 public vo
      
                                
      • 
                                
    • AngularJS浅析
                                    kvhur
JavaScript
                                    
      概念 
 
 AngularJS is a structural framework for dynamic web apps. 
 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm 
 Directive 
扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
      
                                
      • 
                                
    • 架构师之jdk的bug排查(一)---------------split的点号陷阱
                                    nannan408
split
                                    
      1.前言. 
   jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 
2.代码 
 

String[] paths = "object.object2.prop11".split("'");
System.ou
      
                                
      • 
                                
    • 如何对10亿数据量级的mongoDB作高效的全表扫描
                                    quentinXXZ
mongodb
                                    
        本文链接: 
http://quentinXXZ.iteye.com/blog/2149440  
一、正常情况下，不应该有这种需求 
首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 
说一下，
      
                                
      • 
                                
    • C语言算法之水仙花数
                                    qiufeihu
c算法
                                    
      /**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
    int x,y,z;
    for(x=1;x<=N;x++)
    	for(y=0;y<=N;y++)
    		for(z=0;z<=N;z++)
    			if(x*100+y*10+z == x*x*x
      
                                
      • 
                                
    • JSP指令
                                    wyzuomumu
jsp
                                    
       
 jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 
  常用的三种指令： page,include,taglib 
 page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> 
 include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
      
                                
      •