彤彤的小跟班
彤彤的小跟班

02-Vue基础之条件渲染和列表渲染

文章目录

    • 01.条件渲染
      • 1.1.v-if 使用场景
      • 1.2.v-show使用场景
    • 02.列表渲染
      • 2.1.v-for的基本使用
      • 2.2.v-for遍历时key的选择问题

01.条件渲染

Vue中的条件渲染指的是，我们可以在视图中选择性的显示一些内容，条件渲染的可以使用以下两种指令来实现：

  • v-if：
    • 特点：不展示的DOM元素直接被移除，即动态的向DOM树内添加或者删除DOM元素，注意，不是隐藏是销毁删除。
    • 适用于：切换频率较低的场景。
    • 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。
  • v-show
    • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 ，本质就是控制标签的display属性，来实现对标签的隐藏和显示，并且只编译一次。
    • 适用于：切换频率较高的场景。
    • 写法：v-show="表达式"

注意：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

1.1.v-if 使用场景

DOCTYPE html>
<html>
	<head>
		<title>条件渲染 v-iftitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
            <h2>当前的n值是:{{n}}h2>
			<button @click="n++">点我n+1button>

			
			<h2 v-if="true">欢迎你 {{name}}h2> 
			<h2 v-if="1 === 1">欢迎你 {{name}}h2>

			
            
			<div v-if="n === 1">Angulardiv>
			<div v-else-if="n === 2">Reactdiv>
			<div v-else-if="n === 3">Vuediv>
			<div v-else>哈哈div>

			
			<template v-if="true">
				<h2>你好h2>
				<h2>AISMALLh2>
				<h2>Javah2>
			template>
		div>
	body>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'AISMALL',
				n:0
			}
		})
	script>
html>

1.2.v-show使用场景

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染 v-showtitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			<h2>当前的n值是:{{n}}h2>
			<button @click="n++">点我n+1button>
			
			<h2 v-show="true">欢迎你 {{name}}h2> 
			<h2 v-show="n === 1">欢迎你 {{name}}h2>
		div>
	body>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'AISMALL',
				n:0
			}
		})
	script>
html>

02.列表渲染

Vue中的条件渲染指的是，获取列表中的各种数据，并将它展示出来，列表渲染一般使用v-for指令来实现，根据遍历数据（数组、对象、字符串、指定次数）的不同可进行分类：

v-for遍历数组 ：

  • 方式一：

  • {{item}}

  • 语法解析：

    • item：为标签内要填充的内容
    • in：关键字
    • list：待遍历的数组

  • 方式二：

  • {{item}} + '---' +{{index}}

  • 语法解析：

    • item：为标签内要填充的内容
    • index：数组的索引
    • in：关键字
    • list：待遍历的数组

  • 注意：key的作用是帮助Vue区分不同的元素，从而提高性能

v-for遍历对象：

  • 方式一：

  • 语法解析：

    • value：对象的value
    • key：代表对象的键

  • 方式二：

  • 语法解析：

    • value：对象的value
    • key：代表对象的键
    • index：代表索引

  • 注意：不推荐同时使用v-if和v-for，当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

举个例子：

2.1.v-for的基本使用

  • 使用v-for指令遍历数组、对象、字符串（用的很少）、指定次数（用的很少）。
DOCTYPE html>
<html>
	<head>
		<title>列表渲染title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			
			<h2>人员列表（遍历数组）h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				li>
			ul>

			
			<h2>汽车信息（遍历对象）h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				li>
			ul>

			
			<h2>测试遍历字符串（用得少）h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				li>
			ul>
			
			
			<h2>测试遍历指定次数（用得少）h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				li>
			ul>
		div>

		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		script>
html>

2.2.v-for遍历时key的选择问题

问题1：react、vue中的key有什么作用？（key的内部原理）

  • key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：

    1、旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

2、旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到到页面。

    DOCTYPE html>
<html>
	<head>
		<title>key的原理title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			
			<h2>人员列表（遍历数组）h2>
			<button @click.once="add">添加一个老刘button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}-{{index}}
				li>
			ul>
		div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		script>
html>

问题2：用index作为key可能会引发的问题？

  • 1、 若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新（界面没问题），效率低。

  • 2、如果结构中还包含输入类的DOM，会产生错误DOM更新 （ 界面有问题）。

    DOCTYPE html>
<html>
	<head>
		<title>key的原理title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			
			 <h2>使用默认的index作为keyh2>
			<h2>人员列表（遍历数组）：先在输入框中输入值，然后再点击添加按钮h2>
			<button @click.once="add">添加一个老刘button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}-{{index}}
                    <input type="text">
				li>
			ul>
		div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		script>
html>

问题3： 开发中如何选择key?

  • 1、最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

  • 2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    DOCTYPE html>
<html>
	<head>
		<title>key的原理title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			
            <h2>唯一标识作为key：人员IDh2>
			<h2>人员列表（遍历数组）：先在输入框中输入值，然后再点击添加按钮h2>
			<button @click.once="add">添加一个老刘button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{index}}
                    <input type="text">
				li>
			ul>
		div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		script>
html>

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

  • 前端新手如何用vite构建小程序中使用的模块（以AES加密模块crypto-js为例） warmbook 前端前端小程序javascript
    如果你只是想简单地把在vite项目中使用的模块引入到小程序中，不妨试试库模式。以crypto-js为例，你需要写两个JS文件：一个是构建脚本，类似于vite.config.js；//build.cjsconst{build}=require('vite'),path=require('path');build({publicDir:false,configFile:false,runtimeCom
  • 【原生JS】如何优雅地读、改location.search（queryString或GET参数） warmbook 前端javascript开发语言ecmascript
    应用场景location.search完全由JS脚本管理，并且需要不刷新页面地修改其内容。例如在Oauth2授权中，如果是前端取参提交给后端API向平台方请求accessToken，需要及时删除GET参数中的code，以防用户刷新浏览器导致用失效的code处理登录。实现思路将queryString转为对象并用ES6的Proxy代理，在set、delete钩子中调用history.replaceSt
  • JavaScript 进阶之路：探索高级特性和最佳实践 不在·· 原型模式
    面向对象的三大特征封装继承多态构造函数什么是构造函数通过new关键字调用一个函数的时候，这个函数就是构造函数。构造函数和普通函数的区别调用方式不同普通函数只用函数名调用构造函数通过new关键字调用返回值不同普通函数的返回值是函数体内return的结果构造函数的返回值是new关键字生成的对象JSPrototype原型对象所有的函数都有一个原型对象Prototype，并且只有函数才拥有原型对象Prot
  • Axios 教程：Promise 基础的 HTTP 客户端 吉皎妃Frasier
    Axios教程：Promise基础的HTTP客户端axiosaxios/axios:Axios是一个基于Promise的HTTP客户端库，适用于浏览器和Node.js环境，用于在JavaScript应用中执行异步HTTP请求。相较于原生的XMLHttpRequest或FetchAPI，Axios提供了更简洁的API和更强大的功能。项目地址:https://gitcode.com/gh_mirror
  • [JS]学习笔记2 -- JAVAScript数据类型 Jizhi_Zhang JavaScript学习笔记javascript学习笔记
    一、常量概念：使用const声明的变量称为“常量”。使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let。命名规范：和变量一致注：常量不允许重新赋值，在声明的时候必须要赋值（初始化）二、数据类型1、基本数据类型1.1数字型number学习中的数字，整数、小数、正数、负数可以有很多操作：算数+：求和-：求差*：求积/：求商%：取模（取余数）--开发中经常作为某个数字是否被
  • 基于 Node.js 的天气查询系统实现(附源码） Kasper0121 node.js
    项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1
  • Vue.js组件开发案例（比较两个数字大小） 我曾经是个程序员 常用代码片段vue.js
    见过不少人、经过不少事、也吃过不少苦，感悟世事无常、人心多变，靠着回忆将往事串珠成链，聊聊感情、谈谈发展，我慢慢写、你一点一点看......实现一个比较2个数字大小的组件，当输入2个数字后，单击“比较”按钮后自动输出比较结果。第1个数字：第2个数字：比较比较结果：{{result}}exportdefault{data(){return{num1:0,num2:0,result:0,};},met
  • Three.js学习笔记 癫狂de痴梦 前端javascript学习前端
    1.three.js的引入进入官网Three.js–JavaScript3DLibrary，下载文件解压文件，复制three.js-master\build\three.min.js文件在项目中，引入该文件。2.一个简单threeJs程序（1）创建场景constscene=newTHREE.Scene();（2）创建物体constgeomtry=newTHREE.BoxGeometry(1,1,1
  • 前端 | 浏览器安全：XSS攻击、CSRF攻击、中间人攻击 酒酿泡芙1217 前端安全xsscsrf
    1.XSS攻击1.1什么是XSS攻击XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗用用户的信息如cookie等本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨那些脚本是可信的，从而导致了恶意代码的执行攻击者通过这种攻击方式可以进行一下操作：获取页面的数据，如DOM、cookie、localStora
  • Python知识点：基于Python工具和技术，如何使用Truffle进行智能合约开发与部署 杰哥在此 Python系列python智能合约开发语言编程面试
    开篇，先说一个好消息，截止到2025年1月1日前，翻到文末找到我，赠送定制版的开题报告和任务书，先到先得！过期不候！如何使用Truffle与Python进行智能合约开发与部署Truffle是一个强大的开发框架，它为以太坊智能合约的开发、测试和部署提供了一整套工具。虽然Truffle主要使用JavaScript和Solidity，但是它也可以与Python工具和技术配合使用，以实现更灵活的开发流程。
  • HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？ 前端Hardy CSShtmlcss前端javascript
    这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07
  • vue 中 常用的 $ weixin_42113341 vue.jsflutter前端
    this.$set(this.formData,'department',currTreeItem)是Vue.js提供的一个方法，用于向响应式对象中添加新的属性，并确保这个新属性是响应式的（即，当该属性发生变化时，视图会自动更新）。让我们详细解析这个方法及其作用。1.this.$set的作用添加响应式属性：在Vue.js中，如果你直接向一个响应式对象添加一个新的属性，这个新属性默认不是响应式的。使
  • JavaScript常用的一些代码段 东锋1.3 javascriptjavascript开发语言ecmascript
    带有重复项使用递归。对于给定字符串中的每个字母，为字母创建字谜。使用map（）将字母与每部分字谜组合，然后使用reduce（）将所有字谜组合到一个数组中，最基本情况是字符串长度等于2或1。constanagrams=str=>{if(str.lengthacc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=>letter+val)),
  • 适合画地图的js库对比整理，Leaflet，Google Maps，Mapbox GL JS，OpenLayers，Cesium，D3.js等对应官方网站、Github项目地址、特点、使用场景及应用 飞火流星02027 前台地图GISjavascript地图库LeafletD3.jsMapboxGLJSGoogleMapsOpenLayers
    摘要适合画地图的js库对比整理，Leaflet，GoogleMapsJavaScriptAPI，MapboxGLJS，OpenLayers，Cesium，D3.js及对应官方网站、Github项目地址、特点、使用场景地图库对比整理明细表说明维度库名Github项目特点使用场景LeafletLeaflet/Leaflet轻量级、易于使用、功能丰富。支持各种地图服务（如OpenStreetMap、Ma
  • python json 用法 云连山 pythonpythonjson
    JSON简介JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式。它基于JavaScript的一个子集，易于人阅读和编写，同时也易于机器解析和生成。在Python中，使用json模块来处理JSON数据。JSON支持的数据类型主要有对象（在Python中类似于字典）、数组（在Python中类似于列表）、字符串、数字、布尔值和null。将Python对象转换为JSON
  • mybatisplus获取返回对象（自增ID） 笑发财了1 springboot后端jarjavamavenmysql个人开发
    需求有时候我们在数据库里设置了属性自增，在添加对象后，前端需要我们返回这个属性（对象）。做法1.在该实体类的自增主键上加上注解@TableId(value="journey_location_id")，后面的type是默认值可以不写。value为数据表中的字段名@TableId(value="journey_location_id",type=IdType.AUTO)privateintjourn
  • Python之JSON数据结构 CL.LIANG python基础pythonjson数据结构
    JSON数据结构介绍JSON（JavaScriptObjectNotation）优势：1.易于阅读和编写JSON的结构直观、简单，类似于键值对的形式，易于人类阅读和编写。与XML等数据格式相比，JSON的语法更简洁，没有复杂的标记符号。2.轻量化JSON格式相比其他数据格式（如XML），更简洁，没有多余的标记，数据体积较小，这使得数据传输更加高效，尤其是在网络应用中。3.与JavaScript天然
  • Vue组件的概念与复用 2401_85969651 vue.jsjavascript前端visualstudiocode
    目录一、引言二、为什么使用组件二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的世界里，组件是构建用户界面的基石。它们让我们能够以一种高效、可维护的方式开发复杂的前端应用。无论是初涉Vue的新手，还是有一定经验的开发者，深入理解组件的概念与复用机制，都能极大提升开发效率与代码质量。二、为什么使用组件随着前端应用日益复杂，页面功能愈发繁多，传统的
  • Vue 组件的概念与复用 2401_85969651 vue.js前端javascriptvisualstudiocode
    目录一、引言二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的奇妙天地里，组件宛如熠熠生辉的基石，稳稳撑起用户界面构建的大厦。无论你是刚踏入Vue领域的新手，还是久经沙场的开发者，吃透组件的概念与复用窍门，都如同掌握了一把开启高效开发、优质代码大门的金钥匙，能让你的前端开发之旅畅行无阻。二、什么是Vue组件本质上，Vue组件就是一个被赋予独特魅
  • 【AI+可视化工具】实现流程图快速生成 Unity青子 问题解决（软件疑难杂症）深度学习Mermaid
    代码绘制流程图的工具有很多，以下是一些常用的工具：Mermaid：Mermaid是一个基于Markdown的图表语言，可以生成各种类型的图表，包括流程图、时序图、甘特图等。Mermaid可以使用JavaScript或TypeScript进行编写，可以通过Node.js运行。Graphviz：Graphviz是一个开源的图形可视化工具，可以生成各种类型的图表，包括流程图、时序图、网络拓扑图等。Gra
  • LogicFlow 一款流程图编辑框架 小毛驴850 流程图
    LogicFlow是什么LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。官方网站更多资料请查看LogicFlow系列文章特性可视化模型：通过LogicFlow提供的直观可视化界
  • 跨域问题及其解决方案 山禾女鬼001 网络网络协议
    在现代Web开发中，跨域问题是开发者经常遇到的一个难题，尤其是在前后端分离架构中。跨域问题的核心在于浏览器的同源策略，这种策略的设计目的是防止恶意网站窃取用户的数据。然而，在一些场景下，比如前后端分离的Web应用中，前端需要访问不同域的资源，这时就会遇到跨域请求的问题。为了解决这个问题，CORS（跨域资源共享）机制应运而生。本文将详细探讨跨域问题的成因、CORS机制的工作原理以及常见的跨域解决方案
  • 基于Springboot用axiospost请求接收字符串参数为null的解决方案 呀243 springboot后端java
    问题今天在用前端post请求后端时发现，由于是以Json对象的形式传输的，后端用两个字符串形参无法获取到对应的参数值前端代码如下：axios.post('http://localhost:8083/test/postParams',{a:'1',b:'2'},{'Content-Type':'application/json'}).then(response=>{console.log(respo
  • vscode 前端常用插件安装大全 weixin_42113341 vscode前端ide
    在使用VisualStudioCode(VSCode)进行前端（特别是Vue.js）和Node.js开发时，安装合适的扩展插件可以大大提升开发效率和代码质量。以下是推荐的Vue.js和Node.js开发相关的VSCode插件，涵盖了代码编辑、调试、格式化、版本控制、代码质量等多个方面。您可以根据自己的需求选择安装：1.核心开发插件1.1Vetur功能：为Vue.js提供语法高亮、智能提示、错误检查
  • Rasa的工作流程 不会编程的程序猿ᅟ rasa
    Rasa的工作流程分为两个主要部分：NLU（自然语言理解）和Core（对话管理）。整个流程包括从用户输入到最终响应的多个步骤，下面是详细的工作流程解析：1.用户输入用户通过聊天界面（如微信、Telegram、Slack或Web前端）发送自然语言消息，例如："我想预订一张明天去北京的火车票"2.自然语言理解（NLU）Rasa的NLU模块解析用户输入，提取意图和实体。2.1意图识别NLU模块会识别用户
  • 使用 Intersection Observer 实现高效懒加载和滚动监听 桂月二二 macos前端框架前端
    在前端开发中，性能优化是提升用户体验的核心之一。随着网页内容的日益增多，如何高效地加载图片、视频等资源，以及如何监听用户的滚动行为，成为了前端开发者需要解决的难题。传统的滚动事件监听往往会带来性能瓶颈，尤其是在需要频繁触发的情况下。为此，IntersectionObserverAPI应运而生，它能让开发者更高效、灵活地处理懒加载和滚动监听等需求。本文将深入介绍如何使用IntersectionObs
  • 一个上亿用户的电商平台的架构设计 北京小太阳 java算法
    一.总体架构Listitem客户端层(ClientLayer)Web客户端：使用现代前端框架（如React,Angular,Vue.js）开发响应式网页，保证在不同设备上的良好用户体验。移动客户端：开发iOS和Android原生应用，利用平台特性提供优质用户体验。或者使用ReactNative或Flutter等跨平台框架来节省开发成本。2.API层(APILayer)API设计：设计RESTful
  • 基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署 小朱科技 学习
    基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • 【Vue】Part4 接口调用 福安德信息科技 WEB开发vue.jsokhttp前端
    接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程异步模式可以一起执行多个任务JS中常见的异步调用定时任何ajax事件函数promise主要解决异步深层
  • java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署 雪夜科技 mybatisjava数据库
    java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Wi
  • springmvc 下 freemarker页面枚举的遍历输出 杨白白 enumfreemarker
    spring mvc freemarker 中遍历枚举 1枚举类型有一个本地方法叫values（），这个方法可以直接返回枚举数组。所以可以利用这个遍历。 enum public enum BooleanEnum { TRUE(Boolean.TRUE, "是"), FALSE(Boolean.FALSE, "否");
  • 实习简要总结 byalias 工作
    来白虹不知不觉中已经一个多月了，因为项目还在需求分析及项目架构阶段，自己在这段 时间都是在学习相关技术知识，现在对这段时间的工作及学习情况做一个总结： （1）工作技能方面 大体分为两个阶段，Java Web 基础阶段和Java EE阶段 1）Java Web阶段 在这个阶段，自己主要着重学习了 JSP, Servlet, JDBC, MySQL，这些知识的核心点都过 了一遍，也
  • Quartz——DateIntervalTrigger触发器 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208559 一.概述 simpleTrigger 内部实现机制是通过计算间隔时间来计算下次的执行时间，这就导致他有不适合调度的定时任务。例如我们想每天的 1：00AM 执行任务，如果使用 SimpleTrigger，间隔时间就是一天。注意这里就会有一个问题，即当有 misfired 的任务并且恢复执行时，该执行时间
  • Unix快捷键 18289753290 unixUnix；快捷键;
    复制，删除，粘贴： dd:删除光标所在的行                             &nbs
  • 获取Android设备屏幕的相关参数 酷的飞上天空 android
    包含屏幕的分辨率  以及 屏幕宽度的最大dp 高度最大dp   TextView text = (TextView)findViewById(R.id.text); DisplayMetrics dm = new DisplayMetrics(); text.append("getResources().ge
  • 要做物联网？先保护好你的数据 蓝儿唯美 数据
    根据Beecham Research的说法，那些在行业中希望利用物联网的关键领域需要提供更好的安全性。 在Beecham的物联网安全威胁图谱上，展示了那些可能产生内外部攻击并且需要通过快速发展的物联网行业加以解决的关键领域。 Beecham Research的技术主管Jon Howes说：“之所以我们目前还没有看到与物联网相关的严重安全事件，是因为目前还没有在大型客户和企业应用中进行部署，也就
  • Java取模（求余）运算 随便小屋 java
            整数之间的取模求余运算很好求，但几乎没有遇到过对负数进行取模求余，直接看下面代码： /** * * @author Logic * */ public class Test { public static void main(String[] args) { // TODO A
  • SQL注入介绍 aijuans sql注入
    二、SQL注入范例 这里我们根据用户登录页面 <form action="" > 用户名：<input type="text" name="username"><br/> 密 码：<input type="password" name="passwor
  • 优雅代码风格 aoyouzi 代码
    总结了几点关于优雅代码风格的描述： 代码简单：不隐藏设计者的意图，抽象干净利落，控制语句直截了当。 接口清晰：类型接口表现力直白，字面表达含义，API 相互呼应以增强可测试性。 依赖项少：依赖关系越少越好，依赖少证明内聚程度高，低耦合利于自动测试，便于重构。 没有重复：重复代码意味着某些概念或想法没有在代码中良好的体现，及时重构消除重复。 战术分层：代码分层清晰，隔离明确，
  • 布尔数组 百合不是茶 java布尔数组
      androi中提到了布尔数组;   布尔数组默认的是false,  并且只会打印false或者是true   布尔数组的例子;  根据字符数组创建布尔数组 char[] c = {'p','u','b','l','i','c'}; //根据字符数组的长度创建布尔数组的个数 boolean[] b = new bool
  • web.xml之welcome-file-list、error-page bijian1013 javaweb.xmlservleterror-page
    welcome-file-list 1.定义： <welcome-file-list> <welcome-file>login.jsp</welcome> </welcome-file-list>  2.作用：用来指定WEB应用首页名称。   error-page1.定义： <error-page&g
  • richfaces 4 fileUpload组件删除上传的文件 sunjing clearRichfaces 4fileupload
     页面代码               <h:form id="fileForm">            <rich:
  • 技术文章备忘 bit1129 技术文章
    Zookeeper http://wenku.baidu.com/view/bab171ffaef8941ea76e05b8.html http://wenku.baidu.com/link?url=8thAIwFTnPh2KL2b0p1V7XSgmF9ZEFgw4V_MkIpA9j8BX2rDQMPgK5l3wcs9oBTxeekOnm5P3BK8c6K2DWynq9nfUCkRlTt9uV
  • org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案 白糖_ Hibernate
    文章摘自：http://blog.csdn.net/yangwawa19870921/article/details/7553181   在编写HQL时，可能会出现这种代码： select a.name,b.age from TableA a left join TableB b on a.id=b.id  如果这是HQL，那么这段代码就是错误的，因为HQL不支持
  • sqlserver按照字段内容进行排序 bozch 按照内容排序
    在做项目的时候，遇到了这样的一个需求：           从数据库中取出的数据集，首先要将某个数据或者多个数据按照地段内容放到前面显示，例如:从学生表中取出姓李的放到数据集的前面；          select * fro
  • 编程珠玑-第一章-位图排序 bylijinnan java编程珠玑
    import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; import java.util.Random; public class BitMapSearch {
  • Java关于==和equals chenbowen00 java
    关于==和equals概念其实很简单，一个是比较内存地址是否相同，一个比较的是值内容是否相同。虽然理解上不难，但是有时存在一些理解误区，如下情况： 1、 String a = "aaa"; a=="aaa"; ==> true 2、 new String("aaa")==new String("aaa
  • [IT与资本]软件行业需对外界投资热情保持警惕 comsci it
          我还是那个看法,软件行业需要增强内生动力,尽量依靠自有资金和营业收入来进行经营,避免在资本市场上经受各种不同类型的风险,为企业自主研发核心技术和产品提供稳定,温和的外部环境...       如果我们在自己尚未掌握核心技术之前,企图依靠上市来筹集资金,然后使劲往某个领域砸钱,然
  • oracle 数据块结构 daizj oracle块数据块块结构行目录
    oracle 数据块是数据库存储的最小单位，一般为操作系统块的N倍。其结构为： 块头－－〉空行－－〉数据，其实际为纵行结构。 块的标准大小由初始化参数DB_BLOCK_SIZE指定。具有标准大小的块称为标准块（Standard Block）。块的大小和标准块的大小不同的块叫非标准块（Nonstandard Block）。同一数据库中，Oracle9i及以上版本支持同一数据库中同时使用标
  • github上一些觉得对自己工作有用的项目收集 dengkane github
    github上一些觉得对自己工作有用的项目收集 技能类 markdown语法中文说明 回到顶部 全文检索 elasticsearch bigdesk elasticsearch管理插件 回到顶部 nosql mapdb 支持亿级别map, list, 支持事务. 可考虑做为缓存使用 C
  • 初二上学期难记单词二 dcj3sjt126com englishword
    dangerous 危险的 panda 熊猫 lion 狮子 elephant 象 monkey 猴子 tiger 老虎 deer 鹿 snake 蛇 rabbit 兔子 duck 鸭 horse 马 forest 森林 fall 跌倒；落下 climb 爬；攀登 finish 完成；结束 cinema 电影院；电影 seafood 海鲜；海产食品 bank 银行
  • 8、mysql外键(FOREIGN KEY)的简单使用 dcj3sjt126com mysql
    一、基本概念 1、MySQL中“键”和“索引”的定义相同，所以外键和主键一样也是索引的一种。不同的是MySQL会自动为所有表的主键进行索引，但是外键字段必须由用户进行明确的索引。用于外键关系的字段必须在所有的参照表中进行明确地索引，InnoDB不能自动地创建索引。 2、外键可以是一对一的，一个表的记录只能与另一个表的一条记录连接，或者是一对多的，一个表的记录与另一个表的多条记录连接。 3、如
  • java循环标签 Foreach shuizhaosi888 标签java循环foreach
    1. 简单的for循环 public static void main(String[] args) { for (int i = 1, y = i + 10; i < 5 && y < 12; i++, y = i * 2) { System.err.println("i=" + i + " y="
  • Spring Security（05）——异常信息本地化 234390216 exceptionSpring Security异常信息本地化
    异常信息本地化          Spring Security支持将展现给终端用户看的异常信息本地化，这些信息包括认证失败、访问被拒绝等。而对于展现给开发者看的异常信息和日志信息（如配置错误）则是不能够进行本地化的，它们是以英文硬编码在Spring Security的代码中的。在Spring-Security-core-x
  • DUBBO架构服务端告警Failed to send message Response javamingtingzhao 架构DUBBO
     废话不多说，警告日志如下，不知道有哪位遇到过，此异常在服务端抛出(服务器启动第一次运行会有这个警告)，后续运行没问题，找了好久真心不知道哪里错了。    WARN 2015-07-18 22:31:15,272 com.alibaba.dubbo.remoting.transport.dispatcher.ChannelEventRunnable.run(84)
  • JS中Date对象中几个用法 leeqq JavaScriptDate最后一天
    近来工作中遇到这样的两个需求 1. 给个Date对象，找出该时间所在月的第一天和最后一天 2. 给个Date对象，找出该时间所在周的第一天和最后一天   需求1中的找月第一天很简单，我记得api中有setDate方法可以使用 使用setDate方法前，先看看getDate var date = new Date(); console.log(date); // Sat J
  • MFC中使用ado技术操作数据库 你不认识的休道人 sqlmfc
    1.在stdafx.h中导入ado动态链接库 #import"C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("EOF","end")2.在CTestApp文件的InitInstance()函数中domodal之前写::CoIniti
  • Android Studio加速 rensanning android studio
    Android Studio慢、吃内存！启动时后会立即通过Gradle来sync & build工程。 （1）设置Android Studio a) 禁用插件 File -> Settings...  Plugins 去掉一些没有用的插件。 比如：Git Integration、GitHub、Google Cloud Testing、Google Cloud
  • 各数据库的批量Update操作 tomcat_oracle javaoraclesqlmysqlsqlite
    MyBatis的update元素的用法与insert元素基本相同，因此本篇不打算重复了。本篇仅记录批量update操作的 sql语句，懂得SQL语句，那么MyBatis部分的操作就简单了。 　　注意：下列批量更新语句都是作为一个事务整体执行，要不全部成功，要不全部回滚。 MSSQL的SQL语句 　WITH R AS（ 　　SELECT 'John' as name, 18 as
  • html禁止清除input文本输入缓存 xp9802 input
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他