珊珊而川
珊珊而川

长相思追剧小游戏

看效果图

Vue长相思

长相思追剧小游戏_第1张图片


刚学Vue，正好在追剧，看到这个小案例觉得挺好玩的，第一天学，代码太简陋了

代码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<script src="../vue.js">script>
<style>
    .box {
        /* width: 1200px; */
        height: 500px;

        display: flex;
        flex-direction: column;

        border: rgb(235, 137, 137) solid 3px;
        border-radius: 33px;
    }

    h1,
    .title {
        text-align: center;
        background: linear-gradient(to right, red, rgb(183, 0, 255), blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .body {
        display: flex;
        justify-content: space-around;
        /* background-color: aqua; */
    }


    img {
        width: 200px;
        height: 300px;

    }

    .row {
        width: 210px;
        padding-right: 1%;
        border-right: 1px blueviolet dashed;
    }

    .row:last-child {
        padding-right: 20px;
        border-right: none;
    }

    h3 {
        text-align: center;
    }
style>

<body>
    <div id="app">
        <div class="box">
            <h1 class="title">长相思追剧小游戏h1>
            <div class="body">
                <div class="row1 row">
                    <img src="./img/张晚意.jpg" alt="">
                    <h3>苍玄 h3>
                    <button @click="fn(1,0)">罚站+1button>
                    <span>{{result}}:{{result_time}}min span>
                    <button @click="fn(0,1)">坐下+1button>
                div>


                <div class="row2 row">

                    <img src="./img/相柳.jpg" alt="">
                    <h3> 相柳 h3>
                    <button @click="fn(1,0)">罚站+1button>
                    <span>{{result}}:{{result_time}}min span>
                    <button @click="fn(0,1)">坐下+1button>
                div>
                <div class="row3 row">
                    <img src="./img/涂山璟.jpg" alt="">
                    <h3>涂山璟h3>
                    <button @click="fn(1,0)">罚站+1button>
                    <span>{{result}}:{{result_time}}min span>
                    <button @click="fn(0,1)">坐下+1button>
                div>

                <div class="row4 row">
                    <img src="./img/赤水丰隆.jpg" alt="">
                    <h3>赤水丰隆h3>
                    <button @click="fn(1,0)">罚站+1button>
                    <span>{{result}}:{{result_time}}min span>
                    <button @click="fn(0,1)">坐下+1button>
                div>
            div>
        div>
        <p style="margin-top:100px ;">罚站和坐下 可以变颜色p>
    div>
body>


<script>
    const app = new Vue({
        el: '.row1',
        data: {
            result: '咋办',
            result_time: 0,
            fail_time: 0,
            succeed_time: 0,


        },
        methods: {
            fn(ft, st) {
                this.fail_time += ft;
                this.succeed_time += st
                this.result_time = this.fail_time - this.succeed_time
                if (this.result_time > 0) {
                    this.result = '罚站';

                }
                else {
                    this.result = "坐下";
                    this.result_time = -this.result_time
                }
                console.log(this);

            }
        }

    })


    const app2 = new Vue({
        el: '.row2',
        data: {
            result: '咋办',
            result_time: 0,
            fail_time: 0,
            succeed_time: 0,


        },
        methods: {
            fn(ft, st) {
                this.fail_time += ft;
                this.succeed_time += st
                this.result_time = this.fail_time - this.succeed_time
                if (this.result_time > 0) {
                    this.result = '罚站';

                }
                else {
                    this.result = "坐下";
                    this.result_time = -this.result_time
                }
                console.log(this);

            }
        }

    })
    const app3 = new Vue({
        el: '.row3',
        data: {
            result: '咋办',
            result_time: 0,
            fail_time: 0,
            succeed_time: 0,


        },
        methods: {
            fn(ft, st) {
                this.fail_time += ft;
                this.succeed_time += st
                this.result_time = this.fail_time - this.succeed_time
                if (this.result_time > 0) {
                    this.result = '罚站';

                }
                else {
                    this.result = "坐下";
                    this.result_time = -this.result_time
                }
                console.log(this);

            }
        }

    })
    const app4 = new Vue({
        el: '.row4',
        data: {
            result: '咋办',
            result_time: 0,
            fail_time: 0,
            succeed_time: 0,


        },
        methods: {
            fn(ft, st) {
                this.fail_time += ft;
                this.succeed_time += st
                this.result_time = this.fail_time - this.succeed_time
                if (this.result_time > 0) {
                    this.result = '罚站';

                }
                else {
                    this.result = "坐下";
                    this.result_time = -this.result_time
                }
                console.log(this);

            }
        }

    })

script>

html>


优化方向

1.“罚站”和“坐下”的颜色可以改变
2.块结构不对吧，row应该用li
3.笨笨地定义了4个对象，不然，点击人物按钮，其他任务的时长也会变；但肯定有优化的办法，就emmm，类似this.result++ 但是具体的还不会哎
4.每次刷新网页，之前的记录会保留下来，好像是设置DOM啥的，回头在复习一下，都忘记了

你可能感兴趣的:(vue.js)

  • Vite 与 Webpack：性能差异解析 阿珊和她的猫 webpack前端node.js
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录Vite与Webpack：性能差异解析开发模式下的性能ViteWebpack生产模式下的性能V
  • Vue 3 生命周期函数详解 licy__ vue.js前端javascript
    Vue3生命周期函数详解引言Vue.js是一个渐进式的JavaScript框架，用于构建用户界面。Vue3在性能、API设计和开发者体验方面进行了重大改进。理解Vue3的生命周期函数（LifecycleHooks）对于开发高效的Vue应用至关重要。本文将详细介绍Vue3的生命周期钩子、每个阶段的作用及其代码示例，帮助读者更好地掌握这一重要概念。1.Vue3生命周期概述Vue实例从创建到销毁经历了一
  • Vue.js 编写组件单元测试 轻口味 VUE.JS入门与实践vue.js
    Vue.js编写组件单元测试今天我们来聊聊如何编写Vue组件的单元测试。单元测试是确保我们组件逻辑正确、功能稳定的重要手段，通过自动化测试，我们可以及时发现问题，避免后期调试困难。下面我会详细介绍如何使用VueTestUtils和Jest来编写组件的单元测试，并提供一些实际的代码示例，帮助你快速上手。为什么需要编写组件单元测试在项目开发过程中，组件通常包含了各种业务逻辑和交互功能。编写单元测试能帮
  • Pinia Sunshinedada flutter
    官网：https://pinia.vuejs.org/zh/introduction.htmlPinia和VuexPinia和Vuex都是Vue.js状态管理库，但它们在一些方面有所不同。Pinia是一个轻量级的状态管理库，它专注于提供一个简单的API来管理应用程序的状态。相比之下，Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等。Pinia是基于Vue3的Com
  • Vue框架介绍 2301_80148369 vue.js前端javascript
    一、Vue.js的定义Vue.js是一个开源的前端框架，由尤雨溪（EvanYou）于2014年首次发布。它专注于构建用户界面，允许开发者通过声明式的数据绑定和组件化开发模式来构建复杂的单页面应用（SPA）。Vue.js的设计目标是易于上手和灵活集成，既可以作为小型项目的轻量级库使用，也可以扩展为大型项目的完整框架。二、Vue.js的核心特性响应式数据绑定Vue.js通过响应式系统将数据和视图连接起
  • Vue 开发效率翻倍：10 个 VS Code 插件助你成为编码高手！ HelloZheQ vue.js前端javascript
    Vue.js作为前端开发的热门框架，其简洁的语法和强大的功能深受开发者喜爱。为了进一步提升Vue开发效率，VSCode提供了丰富的插件生态系统。今天，我就来分享10个我常用的VSCodeVue插件，它们能帮你告别重复劳动，专注于业务逻辑，让你成为真正的Vue编码高手！工欲善其事，必先利其器。选择合适的插件，能让你的Vue开发之旅事半功倍！核心插件：打造Vue开发的基石Vetur(byPineWu)
  • 前端工程化：基于Vue.js 3.0的设计与实践 码农阿豪@新空间 好“物”分享前端vue.jsjavascript
    个人名片作者简介：java领域优质创作者个人主页：码农阿豪工作室：新空间代码工作室（提供各种软件服务）个人邮箱：[[email protected]]个人微信：15279484656个人导航网站：www.forff.top座右铭：总有人要赢。为什么不能是我呢？专栏导航：码农阿豪系列专栏导航面试专栏：收集了java相关高频面试题，面试实战总结️Spring5系列专栏：整理了Spring5重要知识点与
  • node.js+mongodb 猫咪大大 mongodbexpressjquerynode.jsui
    安装：Node.js：0.10.32Express：4.10.2MongoDB：2.6.1sublime3过程中要用到的东西amazeui前端框架，放在public文件夹下与其他并列vue和jquery：vue.js，jquery-2.1.4.min.js，JSXTranformer.js放在javascripts里安装的包有："async":"^1.5.0","bluebird":"^3.3.5
  • Vue.js 组件开发：从基础到高级的实践与创新 全栈探索者chen vuevue.js前端javascript开发语言前端框架组件SFC
    Vue.js组件开发：从基础到高级的实践与创新前言在现代前端开发中，Vue.js因其易用性、灵活性和高效性而备受青睐，而组件化开发正是Vue框架的核心理念。无论你是初学者还是资深开发者，掌握组件开发技术都能大幅提升代码的复用性、可维护性和扩展性。本文将从Vue.js组件的基础概念、常见设计模式，到高级实践与创新思路，带你深入了解如何构建灵活、高质量的组件系统，并提供大量代码示例，助你打造出既美观又
  • Vue 2 vs. Vue 3：全面解析新一代框架的升级之处 HelloZheQ vue.js前端javascript
    Vue.js自发布以来，凭借其易用性、灵活性和高效性，迅速成为前端开发领域的热门选择。从Vue2到Vue3，不仅仅是版本号的简单递增，而是一次彻底的重构和升级。本文将深入探讨Vue3相对于Vue2的主要区别，帮助你更好地理解和选择适合自己的框架版本。1.性能优化：更快、更小、更强Vue3在性能方面进行了显著的优化，主要体现在以下几个方面：更快的渲染速度：Vue3使用了Proxy作为响应式系统的基础
  • vue页面导出Word文档（含图片） ·零落· Vue日常研发问题总结vue页面导出word文档wordvue
    前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站：人工智能教程文章目录一、vue介绍二、引用插件安装引入插件三、Word模板data数据页面函数echart图片获取四、热门博客一、vue介绍Vue.js是一个渐进式JavaScript框架，用于构建用户界面。与其他庞大的框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于
  • 全栈跨平台组件vue、tauri、blazor、maui、flutter对比，rust、py微服务架构可行性分析 垣宇 开发语言vue.jsrustnode.jspythonjavascript系统架构微服务
    在实际开发中，要考虑前端页面展示的美观性，个人定制化需求；同时要考虑服务器端处理可能遇到的情况，如响应处理时间，跨域代理，高并发数据处理，怎么样合理利用服务端资源等问题。下面搜集对比市场比较主流的前端组件库/框架，及与后端搭配的可行性研究。一.前端组件库/框架1.vue.js组件Vue.js是一个渐进式JavaScript框架，易于上手，同时也能支持复杂的应用开发。安装nodejs前置安装可参考：
  • Vue学习：22.Vue组件库-Vant 星仔如雨 Vue2vue.js学习前端vant
    Vue组件库是一系列预先构建好的、可复用的UI组件集合，它们设计用于加速Vue.js应用程序的开发过程。这些组件通常遵循一定的设计规范，提供统一的外观和交互体验，让开发者能够快速搭建用户界面。组件库举例Vant:专注于移动端的轻量级UI库，提供丰富的基础组件和业务组件，适用于快速构建高性能的移动端页面。ElementUI:针对桌面端Web应用的Vue组件库，包含丰富的表单元素、布局组件、导航组件等
  • Vue学习教程-14内置指令 番茄番茄君 vue.js学习前端
    文章目录前言一、v-text指令二、v-html指令三、v-cloak指令四、v-once指令五、v-pre指令六、其他指令前言Vue.js提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以v-前缀开始。v-text:更新元素的textContent更新元素的textContent。例如：v-html:更新元素的innerHTML更新元素的innerHTML。
  • Vue.js 与 Ajax（Axios）的深入探索 wjs2024 开发语言
    Vue.js与Ajax（Axios）的深入探索引言在当前的前端开发领域，Vue.js已经成为了最受欢迎的JavaScript框架之一。它以其简洁的语法、高效的性能和强大的生态系统获得了广泛的应用。而在与后端服务交互时，Ajax技术是不可或缺的。本文将深入探讨Vue.js与Ajax（Axios）的结合，帮助读者更好地理解这两种技术的协同工作。Vue.js简介Vue.js是一个渐进式JavaScrip
  • Vue.js前端框架教程16：Element UI的el-dialog组件 Cachel wood 前端学习Vue/JS/TS前端框架vue.jsuipythonrpc开发语言java
    文章目录el-dialog组件属性el-dialog组件基本用法基本用法事件示例注意事项el-dialog组件属性ElementPlus的el-dialog组件是用于创建弹出对话框的Vue组件，它提供了丰富的属性来自定义对话框的行为和样式。以下是一些常用的属性及其功能：model-value:绑定一个布尔值，用于控制对话框的显示与隐藏。title:设置对话框的标题。width:设置对话框的宽度，可
  • 【Rust】——使用Drop Trait 运行清理代码和Rc＜T＞ 引用计数智能指针 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客目录使用DropTrait运行清理代码通过std::mem::drop提早丢弃值
  • 深入解析 Uniapp 的页面结构 烂蜻蜓 uni-app前端htmlcssvue.jshtml5
    一、引言Uniapp是一个使用Vue.js开发跨平台应用的前端框架，它能让开发者通过编写一套代码，发布到iOS、Android、H5、小程序等多个平台。在Uniapp开发中，清晰理解页面结构是高效开发的基础，本文将深入剖析Uniapp的页面结构。二、初始化项目后的目录结构当我们使用HBuilderX新建一个Uniapp项目后，会得到如下基本目录结构：components：存放自定义组件的目录。比如
  • uniapp备注备忘录系统个人计划日程系统 微信小程序设计与开发 016og QQ242219979 uni-app微信小程序小程序
    技术栈支持以下技术栈开发运行：微信开发者/hbuilderx前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)–pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navi
  • 7天撸完KTV点歌系统,含后台管理系统(完整版) 码上来財 NodeVueNodeVueMongodbElementUIExpress
    最近手有点痒琢磨着做个啥,朝思暮想还是写个KTV点歌系统,模拟了一下KTV开户的思路,7天累死我了,不过技术点还挺多的,希望你可以看完（〜㉨)〜用Node(Express)教你写KTV点歌系统，包括前台内容和后台管理系统，整合Express框架和Mongodb数据库服务器开发；教你用Vue.JS，ElementUI和iViewUI写出超漂亮的页面,随心点歌随心听思维导图技术栈后端：Express+
  • Vue.js Vue 测试工具：Vue Test Utils 与 Jest 轻口味 VUE.JS入门与实践vue.js
    Vue.jsVue测试工具：VueTestUtils与Jest在Vue.js的开发过程中，编写和执行测试是确保应用质量和稳定性的关键步骤。VueTestUtils和Jest是Vue.js官方推荐的测试工具，二者结合使用，可以高效地进行单元测试和集成测试。1.VueTestUtils简介VueTestUtils（VTU）是Vue.js官方提供的测试实用工具库，旨在简化Vue组件的测试工作。它提供了一
  • Vue.js组件开发深度解析：从原理到最佳实践 星鬼123 框架相关vue.jsjavascript前端
    Vue.js组件开发深度解析：从原理到最佳实践一、Vue组件核心运行机制1.1响应式数据驱动原理//Vue3的响应式实现constreactiveMap=newWeakMap();functionreactive(obj){constproxy=newProxy(obj,{get(target,key,receiver){track(target,key);//依赖收集returnReflect.
  • uniapp多端适配 林同学++ uni-app
    UniApp是一个基于Vue.js开发多端应用的框架，它可以让开发者编写一次代码，同时适配iOS、Android、Web等多个平台。环境搭建：UniApp基于Vue.js开发，所以需要先安装VueCLInpminstall-g@vue/cli创建一个新的UniApp项目，名为"myapp"vuecreate-pdcloudio/uni-preset-vuemyapp进入项目目录，并运行以下命令启动
  • 超简单~新手必会！！ Vue.js中实现登录密码框的“眼睛图标”交互效果 ~凉嗖嗖 vue.js交互elementui
    开发一个Vue项目，在登录页实现用户登录，密码框一般会有一个小眼睛的图标，用来让用户主动进行密码的显示隐藏功能，之前的实现思路比较麻烦，是通过在input框后添加图标，给图标添加点击事件，来切换input的type属性text-password来实现的。这种方法比较麻烦，需要使用到两个图标和点击事件以及v-if后来突然发现一种超简单的方法，记录一下分享给各位。一、老方法代码：import{ref,
  • 深入理解 Vue 中的响应式系统 沉浮yu大海 vue.jsjavascript前端
    Vue.js是一个用于构建用户界面的渐进式框架。它的核心特性之一就是响应式系统，这使得数据和视图能够自动保持同步。理解Vue的响应式系统不仅能帮助我们更好地使用Vue，还能为优化和调试Vue应用提供有力支持。本文将深入探讨Vue的响应式系统，包括其工作原理、实现机制以及使用中的一些难点和注意事项。1.Vue响应式系统的基本原理Vue的响应式系统通过劫持对象的属性读取和写入操作，实现对数据变化的追踪
  • vue中子组件和子组件之间怎么通信_Vue.js中父子组件之间通信方法实例详解 weixin_39774445
    Vue.js中父子组件之间通信方法实例详解发布于2020-11-27|复制链接摘记:本文实例讲述了vuejs中父子组件之间通信方法。分享给大家供大家参考，具体如下：一、父组件向子组件传递消息```javascript//Parent.vue..本文实例讲述了vuejs中父子组件之间通信方法。分享给大家供大家参考，具体如下：一、父组件向子组件传递消息```javascript//Parent.vue
  • Vue 状态管理 二川bro 前端vue.js
    Vue状态管理引言在现代前端开发中，随着应用规模的增大，组件之间的状态管理变得越来越复杂。Vue.js作为一个流行的前端框架，提供了多种状态管理方案，其中最常用的是Vuex。Vuex是Vue官方推荐的状态管理库，它通过集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将深入探讨Vue状态管理的各个方面，从基础概念到高级用法，帮助读者全面掌握Vuex的使用技巧
  • Vue.prototype 详解及使用 是小傲雨呀^_^ vue.jsjavascript前端
    简介：在Vue.js开发中，Vue.prototype是一个强大的特性，允许开发者向所有Vue实例添加全局方法或属性。一、Vue.prototype的作用与原理原型链继承Vue实例通过原型链继承Vue.prototype上的属性和方法。当在原型上添加属性或方法后，所有组件（包括根实例和子组件）均可通过this直接访问。全局共享适合定义全局工具函数、第三方库实例（如Axios、Lodash）或配置常
  • 在 Vue 2 中使用 Three.js 导入本地 3D 模型 cherryzm88 webvue2javascriptvue.js前端3d
    引言Three.js是一个流行的JavaScript库，它能够帮助开发者轻松地在Web页面上创建3D内容。而Vue.js作为前端框架，可以与Three.js结合，构建交互式3DWeb应用。本篇博客将介绍如何在Vue2中使用Three.js加载本地3D模型。1.初始化Vue2项目如果你的项目还没有Vue2环境，可以使用VueCLI初始化：```shvuecreatemy-threejs-appcdm
  • 浅谈vue常用的状态管理库vuex、pinia 超绝前端乱学小白 vuefluttervue.jsvuejavascript
    Vuex和Pinia都是Vue.js应用程序中的状态管理库,虽然两种状态管理库的vue2，vue3都兼容，但是更推荐vue2（vuex），vue3（pinia）VuexVuex是Vue.js官方提供的状态管理库，它借鉴了Flux和Redux的设计思想，将应用的状态（state）集中管理于单个全局状态树中。核心概念State：存储应用程序的状态Getters：允许在Vuexstore中定义计算属性，
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他