坠入暮云间x
坠入暮云间x

Vue基础之购物车案例

个人名片：
作者简介：一名大二在校生
个人主页：坠入暮云间x
座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
**学习目标: 坚持每一次的学习打卡

经过前几次的学习，我们今天的学习任务主要是完成一个简单的购物车页面，该案例综合了之前所学到的知识点，非常适合新手们练习！让我们一起看下去吧！！！

文章目录

    • 分析案例结构
    • 实现功能
      • 1.动态渲染商品数据

分析案例结构

Vue基础之购物车案例_第1张图片

可以看出我们今天需要完成案例功能如下：

  1. 添加商品
  2. 动态渲染商品数据
  3. 商品搜索
  4. 完成商品全选
  5. 删除购物车中的商品
  6. 计算商品的总价

实现功能

1.动态渲染商品数据

首先开始写这个小案例之前，我们先复习一下之前所学过的知识：

  1. v-for：for循环遍历
  2. v-on:用于绑定事件监听器
  3. v-model:双向数据绑定
  4. @click:绑定点击事件
  5. :bind:实现双向数据绑定
  6. v-show:显示与隐藏
  7. v-if:条件判断语句
  8. @change:监听输入框变化事件
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .mycolor{
            background-color: #1aa5fb;
        }
    style>
head>
<body>
<div id="app">
    <div>

        id:<input type="text" v-model="id">
        商品名称：<input type="text" v-model="name">
        商品单价：<input type="text" v-model="price">
        商品数量：<input type="text" v-model="num">
        <button @click="addGood">添加button>
    div>
    <br>
    <div>
        
        商品搜索:<input type="text" v-model="keyword">
        <button @click="searchGoods()">搜索button>
    div>
    <div>
        

        <div v-if="goods.length!==0">
        <table border="1">
            <tr>
                <th>编号th>
                <th>商品名称
                全选<input type="checkbox" v-model="isAll" @change="selectAll">
                th>
                <th>商品单价th>
                <th>商品数量th>
                <th>操作th>
            tr>
            <tr v-for="(item,index) in goods" :key="item.id" :class="{mycolor:(index+1)%2===0}">
                <td>{{item.id}}td>
                <td>
                    <input type="checkbox" v-model="ckList" :value="item" @change="itemChange">
                    {{item.name}}td>
                <td>{{item.price}}td>
                <td>
                    <button @click="item.num--" v-bind:disabled="item.num<=1">-button>
                    {{item.num}}
                    <button @click="item.num++">+button>
                td>
                <td>
                    <button @click="deleteGood(index)">删除button>
                td>
            tr>
        table>
        <p>总价：￥{{totalPrice}}p>
    div>
        <div v-else> 购物车为空div>
    div>
div>
<script src="../vue2.js">script>
<script>
const app = new Vue({
  el: '#app',
  data: {
        goods:[{
            id:1,
            name:'华为手机',
            price:4688,
            num:1
        },
            {
                id:2,
                name:'小米手机',
                price:1688,
                num:1
            },
            {
                id:3,
                name:'苹果手机',
                price:3688,
                num:1
            },
            {
                id:4,
                name:'荣耀手机',
                price:2688,
                num:1
            }
        ],
        id:'',
      name:'',
      price:'',
      num:'',
      keyword:"",//搜索关键字
      isAll:false,//是否全选
      ckList:[],//绑定表格中复选框，存放复选框选中数据
      mycolor: "mycolor",
  },
    methods: {
    //删除商品
        deleteGood(index){//形参index表示数组的索引
            this.goods.splice(index,1);//点击删除按钮，删除该商品
        },
        //添加商品
        addGood(){
        //新添加商品对象的属性与goods一致
            this.goods.push({
                id:this.id,
                name:this.name,
                price:this.price,
                num:this.num
            });
        },//搜索商品
        searchGoods(index) {
            const newArray=[];//存放搜索的结果
            //遍历goods
            this.goods.forEach((item)=>{
                //判断
                if(item.name.indexOf(this.keyword)!==-1){
                    //将匹配的数据添加到newArray
                    newArray.push(item);
                }

            });
                //赋值给goods,实现响应式（实时刷新视图）
            this.goods=newArray;
        },
        //全选
        selectAll(){
            //全选为选中状态时，将表格中的所有复选框都选中状态时，将goods的数据全部添加到cklist中
          if(this.isAll){
              //slice获取数组所有的数据并返回一个新数组
              this.ckList=this.goods.slice();

          }else{
              //当全选为未选中的状态时，清空ckList
              this.ckList=[];
          }
        },
        //反向控制全选
        itemChange(){
            if(this.ckList.length===this.goods.length){
                this.isAll=true;
            }else {
                this.isAll=false;
            }
        }

},
    filters: {

    },
    computed: {
      //计算属性 计算商品的总价
        totalPrice() {
            var  total=0;
            this.goods.forEach((item)=>{
                total+=item.price*item.num;//累加
            });//返回总价
            return total;
        }
    },
    watch: {

    },
    components: {

    }
})
script>

body>
html>

今日学习分享就结束了，有什么不明白的或是有不对的地方欢迎大家指正，欢迎大家在评论区讨论
谢谢！

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

  • HTML5新特性深度解析 longdong7889 前端学习html5前端html
    HTML5新特性深度解析HTML5作为现代Web开发的基石，其LivingStandard模式持续为开发者带来创新工具。本文将深入剖析2023年值得关注的最新特性，通过技术解析与实战示例展现其应用场景。一、革新性API赋能Web应用1.1PopoverAPI：原生交互革命显示详情悬浮内容支持自动关闭和层级管理浏览器原生实现弹窗系统支持auto/manual状态控制无需JavaScript实现显隐逻
  • Springboot应用json数据传给前端首字母大写变小写的问题 珠峰日记 css3cssspringjqueryhtml
    对接.net数据，属性首字母大写传给前端后自动转成了小写。解决思路网上有三种：1)如果没有使用fastjson(阿里巴巴出品),使用@JsonProperty("XXXX")的注解方式可以解决问题，XXXX就是转换成Json的属性名，但注意，只有放在getter上才是有效的，直接在属性上加没效果.(这说明spring默认的jackson类库处理是基于访问器。2)如果使用了fastjson,就用@J
  • TypeScript 和 JavaScript 的区别 前端与小赵 理念javascripttypescript前端
    1.类型系统JavaScript:动态类型：变量可以在运行时改变其类型。没有内置的类型检查机制，在编译时不会进行类型检查。类型错误通常在运行时才会被发现。TypeScript:静态类型：变量在声明时需要指定类型，并且在编译时会进行类型检查。提供了丰富的类型系统，包括基本类型、接口、类、泛型等。类型错误可以在编译时被捕获，提高了代码的可靠性和可维护性。2.语法和特性JavaScript:基本语法包括
  • React生态、Vue生态与跨框架前端解决方案 Coder LM Wang JavaScript前端react.jsvue.js
    React生态系统1基础框架React.js是一个用于构建UI的JavaScript库。2应用框架Next.js是基于React.js的完整应用框架。主要负责应用如何工作：应用架构：路由系统、页面结构渲染策略：服务端渲染(SSR)、静态生成(SSG)、客户端渲染性能优化：代码分割、图片优化、字体优化开发体验：热模块替换、TypeScript支持部署：Vercel平台集成、自托管选项3UI组件库MU
  • vue3导入excel并解析excel数据渲染到表格中，纯前端实现。 m0_74825526 excel前端
    需求用户将已有的excel上传到系统，并将excel数据同步到页面的表格中进行二次编辑，由于excel数据不是最终数据，只是批量的一个初始模板，后端不需要存储，所以该功能由前端独立完成。吐槽系统中文件上传下载预览三部曲走了一遍，万万没想到还要自己实现同步数据。实际反手各种资料开始查阅，终于找到了可以完美实现该需求的方法，来记录下我的实现方案。希望对有需要的小伙伴有帮助。注意以下为正文（重要内容），
  • vue3+vite项目打包后css样式丢失 Angus-zoe javascript开发语言ecmascript
    问题：原因：默认情况下启用了CSS代码分割，CSS样式会被提取到单独的CSS文件中，会导致一些样式丢失的情况。通过将cssCodeSplit设置为false，可以禁用CSS代码分割，这样CSS样式将会内联到JavaScript中，而不是被提取到单独的CSS文件中。这种方式可以解决一些样式丢失的问题，因为样式将直接包含在构建后的JavaScript文件中，而不会受到代码分割的影响。解决方法：在vit
  • vue3动态路由+页面刷新丢失路由+再次加载路由 Angus-zoe vue前端javascriptvue.js
    1、保存路由信息在登录的时候从后端获取路由信息保存到全局pinia或者是vuex，我用的是pinia建议在保存的时候对路由信息数组做好处理2、在router.ts中引入pinia保存的路由信息：注意不要使用createWebHistory路由模式,不然上线后刷新会空白，需要使用hash模式import{createRouter,RouteRecordRaw,createWebHashHistory
  • 深度剖析 JavaScript 变量提升与暂时性死区：原理、实战与避坑指南
    在JavaScript中，变量提升与暂时性死区影响着着程序的运行逻辑、性能表现以及可维护性。接下来将从底层原理、实际场景案例以及最佳实践全方位展开深度剖析。变量提升：JavaScript引擎背后的“隐形重构”JavaScript在执行代码前，引擎会率先开启编译流程，其中变量提升堪称关键一环。使用var关键字声明的变量以及函数声明，都会被自动“提升”至所在作用域的顶部。这一过程并非物理层面挪动代码，
  • Three.js 入门(补间动画Tween.js) 庸俗今天不摸鱼 three.Js学习javascript开发语言ecmascript
    本篇主要学习内容:Tween.Js补间动画点赞+关注+收藏=学会了1.什么是Tween.Js?TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。1.1)引入tween.Jsimp
  • 大白话Webpack 配置与使用的详细步骤和插件应用 IT木昜 大白话前端高频面试题webpack前端node.js
    大白话Webpack配置与使用的详细步骤和插件应用啥是WebpackWebpack就像是一个超级管家，在我们开发网页的时候，会有各种各样的文件，像JavaScript文件、CSS文件、图片等等。这些文件就像是家里的各种物品，分散在不同的地方，而且有的物品还得按照特定顺序摆放、处理之后才能正常使用。Webpack这个管家就负责把这些分散的文件收集起来，按照我们的要求进行打包、处理，最后变成一个或几个
  • ThreeJS入门（140）：THREE.Mouse 知识详解，示例代码 还是大剑师兰特 #ThreeJS中文API全解大剑师threejs教程threejs示例threejs入门1024程序员节
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第140篇入门文章文章目录常量使用场景示例常量的使用总结THREE.MOUSE
  • yarn如何用node替换
    Yarn是一个流行的JavaScript包管理工具，它为npm提供了更快、更可靠的体验。尽管Yarn有其优势，但在许多情况下，我们可能想使用Node.js的本地包管理机制来替代Yarn。一、基本概念在开始之前，我们要明确一些基本个念：Node.js：一个高效的JavaScript运行环境，为构建服务器端应用程序提供支持。Yarn：一个Facebook开发的JavaScript包管理工具，用于处理项
  • 浏览器发请求不携 cookie （加了跨域失败） Wdc_12 状态模式javaspringboot
    1.发送请求后端产生的唯一的sessionid，服务器会通过HTTP响应头中的Set-Cookie字段将SessionID发送到客户端。客户端（浏览器）收到响应后，会将SessionID存储为cookie。但由于跨域了不自动携带cookie2.加withCredentials所以在前端加上了：myAxios.defaults.withCredentials=true3.出现了跨域的错误，CORS请
  • 【Javascript网页设计】产品展示 JavaScript 设计案例 Netsuite + 影刀 Javascript案例javascript前端html
    代码如下：产品展示页面body{font-family:Arial,sans-serif;margin:20px;text-align:center;}.product-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}.product-card{border:1pxsolid#ddd;padding:15
  • 网络空间安全（13）上传验证绕过 IT 青年 网安知识库网络空间安全
    前言上传验证绕过是一种网络安全攻击手段，攻击者利用目标系统或应用程序在文件上传过程中存在的漏洞，绕过文件上传的验证机制，上传恶意文件，从而实现对目标系统的攻击。一、常见类型客户端验证绕过定义：客户端验证通常通过JavaScript在浏览器中执行，用于检查文件类型、大小等。客户端验证绕过是指攻击者通过禁用JavaScript或修改前端代码，绕过这些验证。绕过方法：禁用JavaScript：直接在浏览
  • 0基础学前端---品优购项目Day14 学代码的小前端 0基础学前端javascript前端htmlcss
    0基础学前端—品优购项目Day14视频参考：B站Pink老师本节重点：all项目链接：完整的项目已放到品优购完整项目大家可以自行下载强调内容这里主要强调两个知识点：(1)网站TDK三个标签SEO优化(2)logoSEO优化网站TDK三个标签SEO优化T:title网站名（产品名）网站的介绍D:网站是做什么的K:关键字6~8个最好logoSEO优化（1）logo里面首先放一个h1标签，目的是为了提权
  • Vue打印组件 _AndyLau vue.js
    Vue打印组件vue-print-nb是一个用于Vue.js的轻量级打印插件，它允许你轻松地将页面或特定元素转换为可打印格式，并提供了额外的功能如预览和生成PDF。下面是使用vue-print-nb的步骤：安装首先，你需要通过npm或yarn来安装vue-print-nb。bash深色版本npminstallvue-print-nb--save#或者yarnaddvue-print-nb引入并注册
  • VUE + Jquery 集成的一个简易数学公式编辑器 今天也想MK代码 努力把想法实现vuejqueryjswebhtml
    前端数学公式自定义编辑界面可自定义未知数、运算符号、函数自己写的一个数学公式简单编辑器，本想找开源，无奈找不到。如果有开源，请发我一份，参考参考。在此感谢。静态1、简单公式：例如x+y将公式中的变量（x,y）以及运算符(+,-)放在一个数组中，遍历这个这个数组组成一个html字符串，然后显示在页面。数组定义为：type定义是值还是运算符valueDatas:[{type:'value',domTy
  • 微信小程序封装request请求 易烊子豪 微信小程序小程序
    目录1、封装的必要性1.1封装的原则1.2微信小程序封装遇到的问题1.3改进封装，使得能对拿到的结果进行不同的处理1.4最终调用结束语1、封装的必要性在编写前端代码时，最离不开的就是发送网络请求了，但在发送网络请求时，许多内容都是重复使用的。会造成代码的冗余，例如，我们在网络请求失败的时候，可能都是只需要提示一下请求失败就好了。1.1封装的原则我们在封装时，把各个请求相同的部分进行封装就好了，不同
  • VSCode 配置优化指南：打造极致高效的前端开发环境 超级小狗 vscodeide编辑器
    VSCode配置优化指南：打造极致高效的前端开发环境一、基础环境配置：让开发更流畅1.性能优化设置//settings.json{"files.autoSave":"afterDelay",//自动保存（延迟1秒）"files.exclude":{//隐藏非必要文件"**/.git":true,"**/.DS_Store":true,"**/node_modules":true//大型项目建议保留
  • vue3+vite+ts项目中使用vue-router 枫叶&情缘 Vuevue.js前端javascript
    vite.config.ts:import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';importpathfrom"path";exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{"@":path.resolve(__dirname,"src"),}},});
  • 基于vue3封装axios withNanSi 笔记总结vuejavascript
    安装axiosyarnaddaxios实例化axios–设置baseURL，超时时间，大数问题constinstance=axios.create({baseURL:'',timeout:5000})请求拦截器-全局注入tokeninstance.interceptors.request.use(config=>{//config是请求//1.获取token，从user模块中获取
  • react精简面试题 懒人村杂货铺 react.js前端前端框架
    一、React基础1.React的核心特性是什么？答案：组件化开发：将UI拆分为独立可复用的组件。虚拟DOM（VirtualDOM）：通过内存中的轻量级DOM结构优化真实DOM操作。单向数据流：数据通过props从父组件传递到子组件，状态变化可预测。JSX：允许在JavaScript中编写类似HTML的语法，增强代码可读性。2.类组件和函数组件的区别？答案：类组件：使用class定义，继承Reac
  • 园区环境数字化管理系统（源码+文档+讲解+演示） 开源项目介绍
    引言随着工业化和城市化的快速发展，园区环境管理面临着越来越多的挑战。园区环境数字化管理系统通过数字化手段，为园区管理者提供了一个高效、透明、智能的管理平台。本文将详细介绍园区环境数字化管理系统的功能、技术架构以及其在提升园区环境管理效率中的优势。系统概述园区环境数字化管理系统采用前后端分离的架构设计，服务端基于MySQL5.7+、JDK1.8+和Redis，前端则采用Vue2.6.14和Eleme
  • python和单片机能一块学吗_现在学单片机还有前途吗 weixin_39927288 python和单片机能一块学吗
    0培训班现状观察如今的软件职业培训行业发展如火如荼，变着花样推出各种前端定向就业班，Python就业班，UI设计班等培训课程，这样的广告更是铺天盖地，席卷整个网络世界。它给很多人的感觉就是做程序员真赚钱。做前端、互联网的程序员更赚钱，我要立刻报名改变自身的处境，哪怕以一头如黑珍珠般亮丽的秀发为代价。而我从事的单片机行业，前几年的培训风还是吹起了浪，似于Linux驱动开发，安卓底层开发等，但是这阵风
  • 生命周期总结（uni-app、vue2、vue3生命周期讲解） 露西西★ 前端javascript前端前端框架
    一、vue2生命周期Vue2的生命周期钩子函数分为4个阶段：创建、挂载、更新、销毁。1.创建阶段beforeCreate：实例初始化之后，数据观测和事件配置之前。created：实例创建完成，数据观测和事件配置已完成，但DOM未生成。2.挂载阶段beforeMount：模板编译完成，但未挂载到DOM。mounted：实例挂载到DOM后调用，DOM已生成。3.更新阶段beforeUpdate：数据更
  • 基于 uni-app 和 Vue3 开发的汉字书写练习应用 xiyueta uni-appcanvas
    基于uni-app和Vue3开发的汉字书写练习应用前言本文介绍了如何使用uni-app+Vue3+uview-plus开发一个汉字书写练习应用。该应用支持笔画演示、书写练习、进度保存等功能，可以帮助用户学习汉字书写。在线演示演示地址:http://demo.xiyueta.com/case/web20250222/#/pagesa/xiehaizi/index测试账号:demo测试密码:12345
  • React Native v0.78 更新 Mr.NickJJ ReactNative系列reactnativereact.jsjavascript
    这个版本在ReactNative中引入了React19，并带来了一些重要的新功能，例如Android矢量图（VectorDrawables）的原生支持以及iOS更好的Brownfield集成。亮点React19集成更小更快的发布节奏可选择在Metro中启用JavaScript日志新增对AndroidXMLDrawables的支持iOS上的ReactNativeFactory这个版本为开发者带来了更
  • axios在vue3中的封装处理 每天都在努力学习的刘同学 jsajax
    Axios封装处理本节目标:基于axios封装一个请求模块，调用接口时使用1）安装axiosnpmiaxios2）新建src/utils/request.js模块//封装全局request请求的方法importaxiosfrom'axios'//vueximportstorefrom'@/store'//导入路由实例importrouterfrom'@/router'//baseURL超时时间配置
  • 深入理解 React.js：构建现代 Web 应用的核心技术 布兰妮甜 JavaScript-行为#React前端javascriptreact.js前端框架
    Hi，我是布兰妮甜！React.js是由Facebook开发并开源的一个用于构建用户界面的JavaScript库。自2013年发布以来，React迅速成为前端开发领域的主流工具之一。其组件化、声明式编程模型以及高效的虚拟DOM技术，使得开发者能够轻松构建高性能、可维护的Web应用。本文将深入探讨React.js的核心概念、优势以及如何在实际项目中应用。文章目录一、React.js的核心概念二、Re
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他