沐小侠
沐小侠

Vue.js实现购物车结算

  1. 使用computed计算属性实现简单的购物车结算功能。
  2. 实现全选和不选的功能。
  3. 使用watch函数来监听checkboxList属性，实现全选按钮选中或者取消的功能。
  4. 网页样式使用bootstrap实现。
    Vue.js实现购物车结算_第1张图片

<html>
    <head>
        <meta charset="utf-8">
        <title>购物车title>
        <script src="./js/vue.js">script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
        <style>
            [v-cloak]{
      
                display: none;
            }
        style>
    <body>
        <div id="app" v-cloak>
            <div class="container">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>
                                <label for="selectedAll">全选label> <input type="checkbox" v-model='checked' @click='checkedAll' >
                            th>
                            <th>商品th>
                            <th>单价th>
                            <th>数量th>
                            <th>小计th>
                            <th>操作th>
                        tr>
                    thead>
                    <tbody>
                        <tr v-for="(item,index) in goodsLists">
                            <td>
                                <input type="checkbox" v-model='checkboxList' :value="item.id">
                            td>
                            <td>
                                <img :src="item.productCover" alt="" width="50px" height="70px" />
                                <span>{
    {item.productName}}span>
                            td>
                            <td>
                                {
    {item.productPrice}}
                            td>
                            <td>
                                <input type="button" value="-" v-on:click="sub(item.id,item.productCount)" />
                                <input type="text" v-model:value="item.productCount" @focusout="change(item.id,item.productCount)" size="1">
                                <input type="button" value="+" v-on:click="add(item.id,item.productCount)" />
                            td>
                            <td >
                                ￥{
    {(item.productPrice*item.productCount).toFixed(2)}}
                            td>
                            <td><button class="btn btn-danger">删除button>td>
                        tr>
                    tbody>
                table>
                <div class="text-right" :bind="grandTotal">需要支付：{
    {total.toFixed(2)}}￥div>
            div>
        div>
        <script>
            var vm = new Vue({
      
                el: "#app",
                data: {
      
                    goodsLists: [{
      
                            id: 1,
                            productCover: 'img/book1.jpg',
                            productName: 'Java编程思想（第4版）',
                            productCount: 1,
                            productPrice: 89.00
                        },
                        {
      
                            id: 2,
                            productCover: 'img/book2.jpg',
                            productName: '高等数学（第七版）（上册）',
                            productCount: 1,
                            productPrice: 43.00
                        },
                        {
      
                            id: 3,
                            productCover: 'img/book3.jpg',
                            productName: '教育心理学（第三版）',
                            productCount: 1,
                            productPrice: 53.90
                        }
                    ],
                    checkboxList: [],
                    total: 0,
                    checked: false
                },
                methods: {
      
                    //数量增加
                    add: function(productID, productCount) {
      
                        //数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
                        var ret = this.goodsLists.find((item)=> {
      
                            return item.id === productID
                        })
                        ret.productCount = ret.productCount + 1
                    },
                    //数量减少
                    sub: function(productID, productCount) {
      
                        var ret = this.goodsLists.find((item)=> {
      
                            return item.id === productID
                        })
                        if (productCount >1) {
      
                            ret.productCount = ret.productCount - 1
                        }
                    },
                    change: function(productID, productCount){
      
                        var ret = this.goodsLists.find((item)=> {
      
                            return item.id === productID
                        })
                        if (productCount<1||productCount==="") {
      
                            ret.productCount =1
                        }
                    },
                    checkedAll:function(){
      
                        //实现全选和不选
                        console.log(this.checked);
                        if (this.checked) {
      
                            this.checkboxList = []
                        } else {
      
                            this.checkboxList = [];
                            this.goodsLists.forEach((item) => {
      
                                this.checkboxList.push(item.id);
                            });
                        }
                    }
                },
                //计算属性
                computed: {
      
                    //当data中的checkboxList 的值改变的时候,grandTotal会自动发生计算  
                    grandTotal: function() {
      
                        this.total = 0
                        for (var i = 0; i < this.checkboxList.length; i++) {
      
                            //计算总价格
                            this.total += this.goodsLists[i].productCount * this.goodsLists[i].productPrice
                        }
                        //返回结算结果
                        return this.total
                    }
                },
                //侦听器
                watch:{
      
                    //watch函数来监听checkboxList属性，当其长度==元素的长度时，全选按钮选中，否则取消。
                    checkboxList:function(){
      
                        if(this.checkboxList.length==this.goodsLists.length){
      
                            this.checked=true;//选中
                        }else{
      
                            this.checked=false;//取消选中
                        }
                    }
                }
            })
        script>
    body>
html>

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…

你可能感兴趣的:(Vue.js,vue,html,css,jquery,javascript)

  • python内存泄露 weixin_39810989 内存泄漏pythonmalloc
    定位工具及使用1.tracemalloc可以通过创建快照的方式记录当前的内存占用情况。从而可以比较快照与快照之间的内存占用差异。可以获取内存块的回溯，定位到内存占用最多的文件和代码行。osgeo.cn/cpython/library/tracemalloc.html2.pympler可以创建快照（summaries）进行内存块占用对比frompympler.classtrackerimportCl
  • selenium 等待ajax,如何等待Selenium IDE中的所有ajax请求完成？ 华西怀 selenium等待ajax
    我有一阵子没用过IDE。这是我用于WebDriver的。但算法翻译;JavaScript是JavaScript。这就是说，这取决于你的框架。对于角度，我用这个：publicbooleanwaitForAngularToLoad(WebDriverdriver,intwaitTimeInSeconds){WebDriverWaitwait=newWebDriverWait(driver,waitTi
  • 解析 iframe bbppooi 测试学习javascriptselenium测试用例功能测试模块测试
    iframe（inlineframe，内联框架）是HTML标签，用于在一个网页内嵌入另一个网页。它通常用于：广告嵌入（如GoogleAds）视频播放器（如YouTube、Bilibili）第三方登录页面（如Google登录）在线支付（如支付宝、微信支付）嵌入iframe示例主页面在上面的代码中，iframe的src属性指向https://www.example.com，宽度800px
  • vue 父组件和子组件中v-model和props的使用和区别 zpjing~.~ vue.js前端javascript
    一、v-model1、v-model可以在组件上使用以实现双向绑定。即父组件的值可以传递给子组件，子组件的值修改后，父组件的值会同步更新。从Vue3.4开始，推荐的实现方式是使用defineModel()宏；2、示例：最常用的使用方式：父组件的值，传值给子组件，子组件的input绑定了此字段，这样子组件input的内容修改时，父组件里的值便会同步更新，示例如下VueSFCPlayground父组件
  • Vue CLI 构建移动端购物商城实战 凌莫凡
    本文还有配套的精品资源，点击获取简介：本项目通过VueCLI创建一个针对移动端的电商应用，目的是帮助开发者快速构建一个功能齐全、性能优良的在线购物平台。文章详细解析了Vue.js基础、VueCLI3的项目配置、组件化开发、Vuex状态管理、VueRouter路由管理、移动端适配、热重载与开发服务器配置，以及生产环境优化等关键知识点，对于提升Vue.js技能和项目实战经验具有重要价值。1.Vue.j
  • PyQt6嵌入HTML5内容教程 mosquito_lover1 pythonpyqthtml5
    在PyQt6中嵌入HTML5内容可以通过QWebEngineView实现。QWebEngineView是一个基于Chromium的浏览器引擎，能够渲染HTML5内容。以下是一个简单的示例，展示如何在PyQt6中嵌入HTML5页面：1.安装PyQt6和PyQt6-WebEnginepipinstallPyQt6PyQt6-WebEngine2.创建PyQt6应用程序并嵌入HTML5内容imports
  • vue3 vite打包后页面控制台报错Access to script at ‘file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist Dinosaur啊呜 vue.jsjavascript前端
    vue3vite打包后页面白屏控制台报错Accesstoscriptat'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist1安装兼容插件@vitejs/plugin-legacynpmi@vitejs/plugin-legacy-D2在vite.config.ts中进行配置//引入@vitejs/plugin-legacyim
  • 【Vue3+Vite指南】全局引入SCSS文件后出现Undefined mixin？一招解决命名空间陷阱！ 积水成江 前端scss前端html5vue.js
    【Vue3+Vite全局引入SCSS指南】解决Undefinedmixin错误的完整方案本文目录前置准备：安装SCSS环境问题现象与错误分析根本原因：Sass模块化的命名空间三大解决方案详解方案1:显式命名空间调用方案2:全局暴露命名空间方案3:主文件聚合导出操作验证步骤扩展：@use与@import对比最佳实践与避坑指南常见问题FAQ️前置准备：安装SCSS环境{#-前置准备}步骤1：安装Sas
  • html css 笔记 小箌 htmlcss笔记
    01_浏览器相关知识五大主流浏览器：ChromeSafariIEFirefoxOpera(拥有自己的内核)四大内核:webkitTridentGeckoblink.02_网页相关知识构成网址网站网页网页标准：结构表现行为分别对应HTMLCSSJavaScript03_HTML简介HTML是什么译为：标记语言超文本：比普通的文本信息含量更多04_HTML初体验保存：Ctrl+S后缀：.html程序员
  • JavaScript基础-对象的相关概念 難釋懷 javascript开发语言
    在JavaScript编程中，对象（Object）是一个核心的概念，它几乎无处不在。无论是简单的键值对存储还是复杂的自定义数据结构，对象都提供了强大的功能来组织和操作数据。本文将介绍JavaScript中对象的基本概念、创建方法以及一些常见的操作技巧。一、什么是对象？在JavaScript中，对象是一种复合数据类型，它可以包含属性（properties），每个属性由一个键（key）和一个值（val
  • 网页制作12-html,css,javascript初认识のJavascipt脚本基础 Ama_tor 网页制作专栏javascript开发语言ecmascript
    一、JavaScript的三种基本使用方法:body|head|外部网页效果：运行代码：.html无标题文档functionn1(){document.getElementById("ama01").innerHTML="NO.3这是head中的JavaScript函数";}document.write("NO.1HELLOWORLD")//Document要小写NO.2这是body中的JavaS
  • CSS教程--动画 前段被迫创业 前端学习css3前端css
    目录一．２Ｄ转换１.ｔｒａｎｓｌａｔｅ（）平移操作２.ｒｏｔａｔｅ（）旋转操作３.ｓｃａｌｅ（）放大缩小操作３.１.ｓｃａｌｅＸ（）３.２.ｓｃａｌｅＹ（）４.ｓｋｅｗ（）倾斜操作二．３Ｄ变换１.ｒｏｔａｔｅＸ（）２.ｒｏｔａｔｅＹ（）３.ｒｏｔａｔｅＺ（）三．ＣＳＳ过渡１.ｔｒａｎｓｉｔｉｏｎ属性２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ属性３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ属性
  • Go+Vue通用后台管理项目实战 - 带源码课件 6v6-博客网 6v6-博客 golangvue.js开发语言
    Go+Vue通用后台管理项目实战-带源码课件课程描述本课程从0到1搭建前后端项目，帮助学员掌握Go+Vue开发前后端分离项目的能力。通过实战项目，学员将学习到如何设计系统架构、实现核心功能模块，并最终完成一个完整的后台管理系统。课程亮点前后端分离：基于Go语言后端和Vue前端，实现高效开发模式。实战项目：通过完整项目实战，掌握从需求分析到部署上线的全流程。源码提供：附带完整源码，方便学员学习和二次
  • C# 通过chrome插件将HTML网页转换为PDF Eiceblue C#.NETPDFc#chromehtml
    将HTML网页内容转换为PDF格式能方便文档的后续打印、存档和分享等。之前介绍过如何通过QT插件将HTML转为PDF文件，本文将介绍另一个新的转换方法，通过谷歌浏览器Chrome插件将HTML网页转PDF文件。首先需要安装Spire.PDFfor.NET库（10.7.21版本及以上）。可以通过此链接下载产品包后手动添加引用，或者直接通过NuGet安装。https://www.e-iceblue.c
  • JavaEE系统架构师学习路线(基础篇) 淘小五
    大纲：第1阶段(Java程序员)-Java语言基础第2阶段(Java初级软件工程师)-JSP、Servlet、HTML、CSS、JS、Bootstrap、XML、AJAX、MySQL、SQLServer、Oracle第3阶段(Java中级软件工程师)-Struts2、Spring、Hibernate、SpringMVC、Mybatis、Shiro、JVM第4阶段(Java高级软件工程师)-WebS
  • 基于python+mysql+vue的医院门诊管理系统 自不量力的A同学 mysql
    主要使用技术环境需要1.运行环境：python3.82.IDE环境：pycharm+mysql5.73.数据库工具：Navicat154.硬件环境：windows10/118G内存以上；或者MacOS；5.数据库：MySql5.7版本；技术栈后端：python+django前端：vue+CSS+JavaScript+jQuery+antdesign代码结构server目录是后端代码web目录是前端
  • 基于python的家政预约管理系统源码+运行步骤 冷琴1996 Python系统设计python开发语言
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。学习技术问题可以留言。整个平台包括前台和后台两个部分。前台功能包括：首页、详情页、用户中心、家政入驻模块。后台功能包括：总览、家政管理、分类管理、标签管理、评论管理、用户管理、运营管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_ji
  • 基于python+django+vue.js开发的健身房管理系统源码+运行步骤 冷琴1996 Python系统设计pythondjangovue.js
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。技术学习中的问题可以留言。功能包括：教练管理、会员管理、场地管理、设备管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_fitness演示地址http://fitness.gitapp.cn演示帐号：用户名：admin123
  • vue2和vue3的diff算法有什么区别？ 浮生无聊 vue.jsjavascript前端面试
    1、diff算法是什么？diff算法是一种通过同层的树节点进行比较的高效算法。其有两个特点：只会在同层进行比较，不会跨层比较在diff比较过程中，循环从两边向中间比较diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧虚拟节点比较。diff整体策略为：深度优先，同层比较。Vue2和Vue3中的diff算法的主要区别：1、vue2的diff算法vue2使用了经典的di
  • Python-Django毕业设计医院门诊管理信息系统（程序+Lw) Python计算机毕设程序源码_ pythondjango课程设计
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版+python3.7.7+Mysql5.7+HBuilderX+listpip+Navicat11+Django+nodejs。项目技术：django+python+Vue等等组成，B/S模式+pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版
  • python+django+vue医院门诊挂号预约管理系统57wsx QQ_402205496 djangopycharmpython
    开发语言：Python框架：django/flaskPython版本：python3.7.7数据库：mysql数据库工具：Navicat开发软件：PyCharm主要功能有：管理员功能：系统首页、个人中心、用户管理、医生管理、疫情公告管理、行动轨迹管理、异样报告管理、科室信息管理、异常报告管理、系统管理、医院信息管理、预约信息管理、在线聊天管理、聊天回复管理、我的收藏管理。用户功能模块：系统首页、个
  • 【CodeMirror】系列（一）官网文档学习（一）系统指南 一棵开花的树，枝芽无限靠近你 CodeMirror学习CodeMirror前端编辑器
    这个系列来学习一下CodeMirror编辑器。这篇文章主要是记录一下官方文档的学习，先把官方文档大致浏览一遍。CodeMirror是一个Web端的代码编辑器，和前面学习的MonacoEditor一样。应该比MonacoEditor轻便一些，而且有Vue版本，对Vue用户友好。另外可以将代码显示成DOM元素，对于代码和DOM元素的转换这块比较简单，在MonacoEditor中就没有这么方便，Mona
  • COMP 315: Cloud Computing 后端
    Assignment1:JavascriptCOMP315:CloudComputingforE-CommerceFebruary20251IntroductionAcommontaskwhenbackendprogrammingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorinco
  • CSS文本样式 css前端
    文本text属性写在前面：上午我在做计组实验就没有去写博客，现在赶紧补上，还有五门期末考试要复习，加油。注意区分text和font，text是是对文本的整体结构排版的调整，而font的对文字本身的一个效果。属性说明text-indent首行缩进text-align水平对齐text-decoration文本修饰text-transform大小写转换line-height行高letter-spacin
  • COMP 315: Cloud Computing 后端
    Assignment1:JavascriptCOMP315:CloudComputingforE-CommerceFebruary20251IntroductionAcommontaskwhenbackendprogrammingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorinco
  • webpack-bundle-analyzer分析打包文件 闰土月下追猹 前端webpack-bundlebundle-analyzerwebpackvue.js前端
    安装：npminstall--save-devwebpack-bundle-analyzer在vue.config.js中配置：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={chainWebpack:config=>{//打包分析if(process
  • IP系统中的SDP会话描述协议深度解析（一） 一个广电工程师 广播电影电视专业技术tcp/ip网络协议网络
    SDP核心概念会话描述协议（SessionDescriptionProtocol，简称SDP）作为多媒体会话的元数据载体，其规范定义详见RFC4566标准文档（"https://datatracker.ietf.org/doc/html/rfc4566"）。该协议作为跨平台会话描述的通用语法框架，广泛应用于SIP通信系统、RTSP流媒体传输、电子邮件服务及Web服务体系，在广播电视行业的IP化进程
  • nodejs 010:Webpack 可视化分析插件 webpack-bundle-analyzer的使用 FakeOccupational 服务化&架构webpack前端node.js
    安装yarnadd--devwebpack-bundle-analyzer原始webpack.config.jswebpack.config.js代码定义了Webpack的配置，主要任务是将JavaScript和CSS文件打包，并将CSS提取到单独的文件中，配置了对Electron应用的支持，同时还将React相关的模块映射到Preact，以减小打包体积。//引入Node.js的path模块，用于
  • Web 开发都需要学什么？ Duiz33237 前端html5css3web
    Web开发是指开发和构建用于互联网的网站和应用程序的过程。它涉及使用各种编程语言、框架和技术来创建功能丰富、用户友好的网站和应用程序。常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开
  • ShadCN UI 酒江 ui
    ShadCNUI是一个用于构建现代Web应用的开源UI组件库，旨在为开发者提供一组简洁、易于使用且高度可定制的组件。ShadCNUI提供了许多常见的UI元素（如按钮、表单、模态框等），并且具备良好的设计规范和开发支持，尤其适用于React项目。主要特点：基于TailwindCSS:ShadCNUI使用了TailwindCSS作为样式框架。这意味着它的所有组件都遵循Tailwind的utility-
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩jsp文件上传
    文件的上传下载都是数据流的输入输出，大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n
  • 【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
      以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
  • spark master web ui 端口8080被占用解决方法 daizj 8080端口占用sparkmaster web ui
    spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法：   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分
  • oracle_执行计划_谓词信息和数据获取 周凡杨 oracle执行计划
      oracle_执行计划_谓词信息和数据获取(上) 一：简要说明 在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
  • spring中datasource配置 g21121 dataSource
    datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b
  • web报表工具FineReport使用中遇到的常见报错及解决办法（三） 老A不折腾 finereportFAQ报表软件
    这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width： 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
  • mysql 用户管理 墙头上一根草 linuxmysqluser
    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
  • 关于使用Spring导致c3p0数据库死锁问题 aijuans springSpring 入门Spring 实例Spring3Spring 教程
    这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
  • 百度词库联想 annan211 百度
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
  • int数据与byte之间的相互转换实现代码 百合不是茶 位移int转bytebyte转int基本数据类型的实现
    在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator *
  • 简单模拟实现数据库连接池 bijian1013 javathreadjava多线程简单模拟实现数据库连接池
    简单模拟实现数据库连接池 实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
  • 一种基于Weblogic容器的鉴权设计 bijian1013 javaweblogic
            服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
  • 【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
     任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes
  • 【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
    1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
  • 中国互联网走在“灰度”上 ronin47 管理 灰度
    中国互联网走在“灰度”上（转） 文/孕峰   第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
  • java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
    public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
  • mongoDB 用户管理 开窍的石头 mongoDB用户管理
      1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户（use admin）      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数
  • [游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
        暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天      结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气   &nb
  • java 二维数组如何存入数据库 cuiyadll java
    using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
  • 本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu javaspringlocalglobaltransaction
    Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
  • Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linuxalias
    用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常 用的长命令行变短，强制执行命令时询问等。   常用参数 格式：alias 格式：ali
  • yii2 restful web服务[格式响应] dcj3sjt126com PHPyii2
    响应格式 当处理一个 RESTful API 请求时， 一个应用程序通常需要如下步骤 来处理响应格式： 确定可能影响响应格式的各种因素， 例如媒介类型， 语言， 版本， 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组， 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]
  • MongoDB索引调优（2）——[十] eksliang mongodbMongoDB索引优化
    转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引，方式与正常
  • 当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
    拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
  • 程序员用HTML5制作的爱心树表白动画 ini JavaScriptjqueryWebhtml5css
    体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
  • 预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad预装改装windows 7windows 8
      该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！   缘由 小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
  • Nginx学习笔记 mcj8089 nginx
    一、安装nginx             1、在nginx官方网站下载一个包，下载地址是：  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工
  • mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
  • java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAOPOJODTOpoVO BO
    PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通
  • 算法复杂度 Wuaner Algorithm
    Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他