王梓懿_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组件(商品列表)《饿了吗》)
    
        
    
            
    
                
      
                    
    • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        
      底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
      
                    
      • 
                    
    • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
      el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
      
                    
      • 
                    
    • C语言如何定义宏函数？
                        小九格物
c语言
                        
      在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
      
                    
      • 
                    
    • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿
                        小鹿_33

                        
      预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
      
                    
      • 
                    
    • 回溯 Leetcode 332 重新安排行程
                        mmaerd
Leetcode刷题学习记录leetcode算法职场和发展
                        
      重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
      
                    
      • 
                    
    • 2022-07-08
                        保利学府里李楚怡1307022

                        
      ——保利碧桂园学府里——童梦奇趣【科学实验室】「7.9-7.10」✏玩出大智慧约99-144㎡二期全新升级力作
      
                    
      • 
                    
    • 2022-04-18
                        Apbenz

                        
      语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
      
                    
      • 
                    
    • 网易严选官方旗舰店，优质商品，卓越服务
                        高省_飞智666600

                        
      网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几
      
                    
      • 
                    
    • 下载github patch到本地
                        小米人er
我的博客gitpatch
                        
      以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
      
                    
      • 
                    
    • 利用LangChain的StackExchange组件实现智能问答系统
                        nseejrukjhad
langchainmicrosoft数据库python
                        
      利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
      
                    
      • 
                    
    • 在一台Ubuntu计算机上构建Hyperledger Fabric网络
                        落叶无声9
区块链超级账本Hyperledgerfabric区块链ubuntu构建hyperledgerfabric
                        
      在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
      
                    
      • 
                    
    • 冬天短期的暴利小生意有哪些？那些小生意适合新手做？
                        一起高省

                        
      短期生意不失为创业的一个商机，不过短期生意的商机是转瞬即逝的，而且这类生意也很难作为长期的生意去做，那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧，真很不错的项目，全程零投资，当做副业来做真的很稳定，不管你什么阶层的人，或多或少都网购吧？你们知道网购是可以拿提成，拿返利，拿分佣的吗？你们知道很多优惠券群里面，天天群主和管理发一些商品吗？他们其实在
      
                    
      • 
                    
    • 怎么做淘客赚钱(2022最新免费淘客盈利的方法)
                        高省_飞智666600

                        
      很多人都不知道什么是淘宝客，今天小编为大家解答一下吧。淘宝客，现在简称淘客，是时下比较流行的一个词语，特质为淘宝店推广商品获取提成的人，这些人没有自己的产品，只是在淘宝里面选择适合自己的产品，在自己比较熟悉的领域推广，把产品卖出去之后，会从淘宝店家那里获得百分之五到百分之五十左右的佣金。淘宝客付出的是什么呢？时间。你需要花时间去选适合自己推广的产品，需要花时间去选自己的推广方法，如果你打算自己做个
      
                    
      • 
                    
    • 闲鱼鱼小铺怎么开通？鱼小铺开通需要哪些流程？
                        高省APP大九

                        
      闲鱼鱼小铺是平台推出的一个专业程度的店铺，与普通店铺相比会有更多的权益，比如说发布的商品数量从50增加到500；拥有专业的店铺数据看板与分析的功能，这对于专门在闲鱼做生意的用户来说是非常有帮助的，那么鱼小铺每个人都能开通吗？大家好，我是高省APP联合创始人蓓蓓导师，高省APP是2021年推出的电商导购平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个可省钱佣金高，能
      
                    
      • 
                    
    • Redis系列：Geo 类型赋能亿级地图位置计算
                        Ly768768
redisbootstrap数据库
                        
      1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI
      
                    
      • 
                    
    • 直返APP是什么?直返APP是干嘛的
                        氧惠帮朋友一起省

                        
      直返是一种电商购物模式，其核心特点是用户购买商品后可以获得直接返利。具体来说，用户在直返电商平台购买商品时，不仅可以获得商品本身的优惠，还可以获得一定的现金返利或者积分奖励。返利的金额可以提现到用户的账户余额，或者用于下次购物时抵扣。氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万
      
                    
      • 
                    
    • 福袋生活邀请码在哪里填写，福袋生活app邀请码使用教程
                        小小编007

                        
      很多人下载福袋生活后，注册使用时需要填写邀请码。因为福袋生活是注册邀请制，所以首次使用填写邀请码才可以正常登录使用。福袋生活是广州市福袋生活信息科技有限公司旗下一家多元化社交电商导购平台，以APP为载体，社群为媒介，汇集衣食住行、吃喝玩乐生活服务板块，使用福袋生活可以领到淘宝，拼多多等电商平台的商品优惠券和返利，还可以兼职去分享赚钱。我为什么从福袋生活转到果冻宝盒呢？当然是因为福袋生活返利更高，注
      
                    
      • 
                    
    • 【Git】常见命令(仅笔记)
                        好想有猫猫
GitLinux学习笔记git笔记elasticsearchlinuxc++
                        
      文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
      
                    
      • 
                    
    • 果然只有离职的时候，才有人敢说真话！
                        return2ok

                        
      今天公司出了神贴。今天中午吃饭，同事问我看了论坛上的神贴了吗？什么帖子？我问。同事显得很惊讶，你居然没看，现在那个帖子可能会成为年度最佳帖子。这么厉害？我等不及了，饭没吃完就快速的奔向办公室，打开公司论坛，我要一睹这个帖子的神奇。写这帖子的童鞋胆儿真肥。这哪里是一个帖子，这是很多个帖子，组成了一个系列。某人从公司文化、管理、人事、项目管理等多个方面分析了公司的概况，并抨击了公司的各种弊端，并提出了
      
                    
      • 
                    
    • 2018-07-20
                        韻梅

                        
      念亲爱的好感谢亲爱的每天照顾我们！因为有你我们心里踏实！念儿子的好儿子感谢你昨晚为我们煎手抓饼，让我们感到你满满的爱与幸福:你煎的与外边买的没有区别，也是脆脆的金黄黄的！我也不担心你的温饱问题，因为你能自己做简单的点心啊！儿子已经长大了，妈妈可要享福了咯！儿子加油！只要你敢想敢行动定能会成功的！
      
                    
      • 
                    
    • 2023-07-24
                        DXZHY

                        
      很2023年7月24号星期天，今天呢一早我就去开店，淋完花我就赶去了中心联谊，感谢中心联谊过程当中，他们在唱诵读者上面1.一边流泪，感觉自己的内在灵魂太长，时间没有得到这样了，所以一边唱手一边在流泪，我分不清楚自己是感动了，还是被呼唤的灵魂所能看到，但我就是哭了，泪流满面，我全身细胞在放松，最后我们荣耀完了之后，我打包了一部分回来，我发现我是挺真爱想摸的，然而。那我们商量好之后，他要做出一些违背我
      
                    
      • 
                    
    • 数据结构之哈希表
                        X同学的开始
数据结构数据结构散列表
                        
      哈希表(散列表)出现的原因在顺序表中查找时，需要从表头开始，依次遍历比较a[i]与key的值是否相等，直到相等才返回索引i；在有序表中查找时，我们经常使用的是二分查找，通过比较key与a[i]的大小来折半查找，直到相等时才返回索引i。最终通过索引找到我们要找的元素。但是，这两种方法的效率都依赖于查找中比较的次数。我们有一种想法，能不能不经过比较，而是直接通过关键字key一次得到所要的结果呢？这时，
      
                    
      • 
                    
    • 高仿包包批发在哪里买最便宜?推荐6个购买渠道
                        鸿运工作室

                        
      高仿包包作为一种时尚单品，受到很多人的喜爱。然而，对于批发高仿包包的人来说，如何找到最便宜的购买渠道是一个关键问题。本文将为您推荐6个购买高仿包包最便宜的渠道，帮助您更好地满足批发需求。咨询加微信：FB2260(下单赠送精美礼品)1.义乌国际商贸城义乌国际商贸城是中国最大的小商品批发市场之一，也是高仿包包批发的热门地点。这里有众多的批发商聚集，提供了各种各样的高仿包包，价格相对较低。您可以在这里找
      
                    
      • 
                    
    • ES聚合分析原理与代码实例讲解
                        光剑书架上的书
大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
                        
      ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
      
                    
      • 
                    
    • 2018-12-07
                        旅一06丁琪琪

                        
      旅管一班6组学号链接06丁琪琪16家国鑫26孟令慧30王思宁36温红丽46朱赵筱楠
      
                    
      • 
                    
    • 社保应该缴15年还是25年？那种方式最划算？
                        袋鼠观保保险规划师

                        
      社保无论是缴费15年还是25年，影响最大的就是养老保险和医疗保险，缴费时间越长越有利！1.养老保险真的交满15年就够了吗？要知道，社保缴费时长，直接影响到退休后能拿多少养老金，而且交得越久，退休领得越多。我拿深圳作为例子，想拿到养老金必须满足两个条件：只要达到一定的退休年龄，养老保险累计交满15年就可以拿到养老金了。那如果多缴了20年、25年甚至30年，是不是浪费了？实际上，缴满15年只是刚好可以
      
                    
      • 
                    
    • 2021-07-31
                        比峰

                        
      七月的最后一天，过了今天，就是八月，心脏在颤抖……昨天两点半才睡，一直在以两倍的语速的听之前的课程，虽然隔得时间不长，但是很多知识点已经忘了差不多了，为了让自己能够掌握的稍微全面一点，还是磨刀不误砍柴工的比较好。正因为晚上睡得晚，今天一上午的状态都不好，也可能因为上午都是待在家里，所以多数时间自己是在补觉。既然太累，那就睡觉吧，总比浪费时间的好。下午到咖啡馆做题，一道差错更正一下子让自己的实力暴露
      
                    
      • 
                    
    • 一文掌握python常用的list（列表）操作
                        程序员neil
pythonpython开发语言
                        
      目录一、创建列表1.直接创建列表：2.使用list()构造器3.使用列表推导式4.创建空列表二、访问列表元素1.列表支持通过索引访问元素，索引从0开始：2.还可以使用切片操作访问列表的一部分：三、修改列表元素四、添加元素1.append()：在末尾添加元素2.insert()：在指定位置插入元素五、删除元素1.del：删除指定位置的元素2.remove()：删除指定值的第一个匹配项3.pop()：
      
                    
      • 
                    
    • JVM、JRE和 JDK：理解Java开发的三大核心组件
                        Y雨何时停T
Javajava
                        
      Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
      
                    
      • 
                    
    • 上班族可以做线上副业兼职有哪些？盘点7个适合上班族做的副业兼职！
                        高省APP大九

                        
      对于许多上班族来说，工资往往不能满足他们的生活需求，因此许多人开始寻找副业来增加收入。以下是一些适合普通人的副业赚钱路子，希望能给您带来一些灵感。1、做好物推荐现在很多职场人其实有大量的个人时间，只不过这些个人时间比较碎片化，他们不能够很好的利用起来，其实可以利用这些碎片化的时间去做副业，比如做好物推荐。在网上有很多的平台，比如头条抖音等等都开通了一个商品的分销功能，只要你发布相关的视频或者文章，
      
                    
      • 
                                
    • 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
      
                                
      •