景子墨

2019-7-25 [HTML+JS] 人员信息管理系统1.0

文章目录

0.HTML+JS综合练习
1 项目概述
2 需求实现

2.1 样例展示
2.2 步骤实现

2.2.1 数据查询 :
2.2.2 数据添加 :
2.2.3 数据添加优化 :

需求1 : 添加的form需要点击 "添加新人员" 按钮再显示

2.2.4 数据删除 :

JavaScript splice() 方法

1.定义和用法
2. 语法
3. 返回值
4. 说明
5. 实例:

2.2.5 数据更新 :

法一：标准方法
法二：格式变换，核心不变

0.HTML+JS综合练习

1 项目概述

项目名称 : 人员信息管理系统
项目需求 : 利用现有技术对人员信息进行可视化管理
项目概述 :
假设需要对某行业人员信息进行管理,该行业人员信息数据样本如下

现因为人员管理较为复杂所以需要你使用HTML+CSS+JS技术完成对现有人员的
查询添加删除修改的数据管理

2 需求实现

2.1 样例展示

人员信息展示

2.2 步骤实现

2.2.1 数据查询 :

因为要存储过个对象信息而不是变量信息,所以有限考虑用一个JSON数组来保存要操作的数据;
对于查询来说其实就是通过一个按钮单击事件然后触发一个JS方法,读取数组数据,作为表格新的行列数据进行展示;

整理好之后的实现思路

我们先来写个页面:
编写JS脚本定义数据:
定义完数据之后我们要想办法进行展示,根据截图所知,此处需要一个table,然后动态拼接tr td来展示数据,所以我们先定义一个空table
定义完成后我们就开始编写一个按钮触发一个JS事件来加载数据,根据图中显示需要定义一个查询和一个添加按钮
根据按钮的单击事件开始写JS方法

代码：


<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例title>
		<script type="text/javascript">
			// 初始化数据开始
			// 1. 很重要的一步 : 定义人员编号 编号是一串没有意义的数字,主要是为了方便人员管理用的
			var id_index = 1; // 初始化
			// 2. 添加初始化人员
			var p1 = {"id":id_index,"name":"孙建国","sex":"男","age":35,"from":"北京市"};
			// 3. 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
			id_index++;
			// 添加初始化人员
			var p2 = {"id":id_index,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
			// 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
			id_index++;
			// 为了方便操作者两个数据,我们把数据封装在一个数组中
			var persons = [p1,p2];
			// 初始化数据结束
			
			// 编写显示人员方法
			function showPersons(){
				// 按ID获取table
				var tb1 = document.getElementById("tb1");
				// 给tb1拼接元素
				var str = "编号姓名性别年龄籍贯";
				// 遍历JSON数组继续拼接
				for (var i = 0; i < persons.length; i++) {
					var p = persons[i];
					str += ""+p.id+""+p.name+""+p.sex+""+p.age+""+p.from+"";
				}
				// 最后把拼接好的字符串放入table中
				tb1.innerHTML = str;
			}
		script>
	head>
	<body>
		<div>
			<button type="button" onclick="showPersons();">显示人员数据button>
			<button type="button" onclick="showAddForm();">添加新人员button>
		div>
		<div>
			<table border="1" id="tb1">
				
			table>
		div>
	body>
html>

到此人员数据的展示工作全部完毕,此处大家需要熟练掌握页面元素的字符串拼接问题,这个在以后操作JS的时候非常常用!

2.2.2 数据添加 :

添加其实就非常简单了,主要是接收用户输入,然后把用户输入的内容组成一个新的JSON对象放入数组中然后调用查询方法重新加载一个数组数据,就可以看到你刚才添加的数据了

添加实现步骤如下:

首先添加需要接收用户输入,所以我们需要定义一个表单接收用户输入,但是为了让我们的表单更加美化,我们决定用
fieldset给form添加一个表单域,这样表单会有一个边框下过,然后用legend配上说明文字,这样边框会有一个标题开起来会好看一些

代码 :

<div id="form1">
			<form>
				<fieldset>
					<legend>添加人员信息legend>
				fieldset>
			form>
		div>

创建完表单后我们就可以丰富一下表单内容了
代码 :

<div id="form1">
			<form>
				<fieldset>
					<legend>添加人员信息legend>
					<table>
						<tr>
							<td>姓名:td>
							<td>
								<input type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
							td>
						tr>
						<tr>
							<td>性别:td>
							<td>
								<select id="sex" required="required">
									<option value="">---请选择---option>
									<option value="男">男option>
									<option value="女">女option>
								select>
							td>
						tr>
						<tr>
							<td>年龄:td>
							<td>
								<input type="number" id="age" required="required" placeholder="请输入人员年龄......" />
							td>
						tr>
						<tr>
							<td>籍贯:td>
							<td>
								<input type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
							td>
						tr>
						<tr>
							<td colspan="2">
								<button type="submit">确定button>
								<button type="reset">取消button>
							td>
						tr>
					table>
				fieldset>
			form>
		div>

此处我们需要提交表单才能获取信息,所以提交表单的方法是在form上加onsubmit方法

<form action="#" method="post" onsubmit="addPerson();" >

此处action属性设置提交地址,因为我们没有什么地址可以提交(一会儿我们用JS处理数据),所以此处设置为# 代表当前地址不可用;

method属性代表提交方式我们选用post方式
onsubmit方法执行处理请求的JS方法

注意 : 表单的数据获取方式必须是表单提交获取里面的数据,但是我们又没有学习服务器技术,所以此处只能这样设置,后期我们会把数据提交给具体处理请求的服务器,现在我们只能拿JS先对付着

// 编写添加方法
function addPerson(){
// 接收页面数据
var pname = document.getElementById("pname");
var sex = document.getElementById("sex");
var age = document.getElementById("age");
var pfrom = document.getElementById("pfrom");
// 获取这个对象的主键信息
var id = id_index;
// 主键用过就自增
id_index++;
// 开始添加数据
var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
// 添加到数组
persons.push(p);
// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
showPersons();
}

JS写完之后进行联动测试
页面添加数据

根据我们理解此时我们已经添加了数据,如果成功的话应该是直接添加到上面的表格中,点击确定看下效果
点击确定后出现了这个

这个错误是提示你你的表单提交了但是地址不正确
诶这就很奇怪了呀,我们明明指定了JS方法它为什么还这么干呢?

这就是表单的特性了,页面只要发现表单点击了提交按钮,不管三七二十几都会把表单按照action中设置的地址进行提交;

这样就很尴尬了,我们能不能阻止表单提交呢? 完全可以!

<form method="post" action="#" onsubmit="addPerson();return false;" >

在onsubmit方法里面添加一个return false;这样页面就会认为这个表单还没有完成操作,所以就不会提交了,这是一种欺骗页面的手段;
从新刷新页面看下效果:

怎么样,页面是不是被我们欺骗住了;

2.2.3 数据添加优化 :

需求1 : 添加的form需要点击 “添加新人员” 按钮再显示

编程:

冷静的分析一波需求我们可以知道,用户需要点击按钮出现添加对话框,当然当我点击取消按钮的时候肯定也是希望这个对话框消失的;

所以整理好需求之后,我们得到了下面的实现步骤

先设置表单在页面加载的时候不显示

<div id="form1" style="display: none;">

此处我们用style属性来设置元素在页面的显示 display:none 表示该页面元素隐藏,所以加完这个属性之后页面是这样的

2. 编写显示form的JS方法

// 显示添加表单
function showAddForm(){
// 获取添加表单
var form1 = document.getElementById("form1");
// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
form1.style.display = "";
}

验证效果
没点的时候
点击取消,让form表单继续隐藏,当然此处我们应该有个程序员眼光,这个隐藏form表单的方法一会做更新的时候也会用,所以我们写个通用的

// 根据ID隐藏form表单
function hideForm(formid){
// 按ID获取这个form
var form = document.getElementById(formid);
// 设置form表单的显示属性为隐藏
form.style.display = "none";
}

在取消按钮上添加这个方法

<button type="reset" onclick="hideForm('form1');">取消button>

验证效果
页面加载的时候

正常添加

点击取消

到此,添加功能全部实现
实现代码


<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例title>
		<script type="text/javascript">
			// 初始化数据开始
			// 1. 很重要的一步 : 定义人员编号 编号是一串没有意义的数字,主要是为了方便人员管理用的
			var id_index = 1; // 初始化
			// 2. 添加初始化人员
			var p1 = {"id":id_index,"name":"孙建国","sex":"男","age":35,"from":"北京市"};
			// 3. 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
			id_index++;
			// 添加初始化人员
			var p2 = {"id":id_index,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
			// 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
			id_index++;
			// 为了方便操作者两个数据,我们把数据封装在一个数组中
			var persons = [p1,p2];
			// 初始化数据结束
			
			// 编写显示人员方法
			function showPersons(){
				// 按ID获取table
				var tb1 = document.getElementById("tb1");
				// 给tb1拼接元素
				var str = "编号姓名性别年龄籍贯";
				// 遍历JSON数组继续拼接
				for (var i = 0; i < persons.length; i++) {
					var p = persons[i];
					str += ""+p.id+""+p.name+""+p.sex+""+p.age+""+p.from+"";
				}
				// 最后把拼接好的字符串放入table中
				tb1.innerHTML = str;
			}
			
			// 编写添加方法
			function addPerson(){
				// 接收页面数据
				var pname = document.getElementById("pname");
				var sex = document.getElementById("sex");
				var age = document.getElementById("age");
				var pfrom = document.getElementById("pfrom");
				// 获取这个对象的主键信息
				var id = id_index;
				// 主键用过就自增
				id_index++;
				// 开始添加数据
				var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
				// 添加到数组
				persons.push(p);
				// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
				showPersons();
			}
			
			// 显示添加表单
			function showAddForm(){
				// 获取添加表单
				var form1 = document.getElementById("form1");
				// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
				form1.style.display = "";
			}
			
			// 根据ID隐藏form表单
			function hideForm(formid){
				// 按ID获取这个form
				var form = document.getElementById(formid);
				// 设置form表单的显示属性为隐藏
				form.style.display = "none";
			}
			
			
		script>
	head>
	<body>
		<div>
			<button type="button" onclick="showPersons();">显示人员数据button>
			<button type="button" onclick="showAddForm();">添加新人员button>
		div>
		<div>
			<table border="1" id="tb1">
				
			table>
		div>
		<div id="form1" style="display: none;">
			<form method="post" action="#" onsubmit="addPerson();return false;" >
				<fieldset>
					<legend>添加人员信息legend>
					<table>
						<tr>
							<td>姓名:td>
							<td>
								<input type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
							td>
						tr>
						<tr>
							<td>性别:td>
							<td>
								<select id="sex" required="required">
									<option value="">---请选择---option>
									<option value="男">男option>
									<option value="女">女option>
								select>
							td>
						tr>
						<tr>
							<td>年龄:td>
							<td>
								<input type="number" id="age" required="required" placeholder="请输入人员年龄......" />
							td>
						tr>
						<tr>
							<td>籍贯:td>
							<td>
								<input type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
							td>
						tr>
						<tr>
							<td colspan="2">
								<button type="submit">确定button>
								<button type="reset" onclick="hideForm('form1');">取消button>
							td>
						tr>
					table>
				fieldset>
			form>
		div>
	body>
html>

2.2.4 数据删除 :

先观察删除效果

删除效果是在每个数据的后面加一个操作,然后添加删除和更新按钮
接下来点击那个数据后面的删除按钮就删除那个数据;

这里有几个问题 :

我们没有这两个按钮?
删除一条数据的依据是什么?

问题解决 :
构建这两个按钮,只需要在查询方法中补充列即可

// 编写显示人员方法
function showPersons(){
// 按ID获取table
var tb1 = document.getElementById("tb1");
// 给tb1拼接元素
var str = "编号姓名性别年龄籍贯操作";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
	var p = persons[i];
	str += ""+p.id+""+p.name+""+p.sex+""+p.age+""+p.from+"||";
}
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
}

解决第二个问题,删除的依据是什么?
我们可以先观察数据,比如这两条数据都是存在JSON数组里,我们需要找到要删除的数据才能删除

但是如果按名称或者性别或者年龄或者籍贯都有可能找到很多重复数据,所以此处我们用不会重复的编号来精确锁定数据

修改一下删除的button

<button type='button' onclick='deletePerson("+p.id+")'>删除button>

此处需要注意,因为我们是在字符串里写这些东西,一对双引号里面是不允许再次出现双引号的,所以此处双引号的地方我们都是用单引号代替的!

修改好了之后我们就得到了一个deletePerson(id)方法实现它!

// 根据ID删除指定数据
function deletePerson(pid){
	// 先有情提示一下
	var con = window.confirm("确定要删除这条数据么?");
	// 判断一下
	if(con == true){
		// 找到要删除的数据 删除
		for (var i = 0; i < persons.length; i++) {
			if(persons[i].id == pid){
				delete persons[i];
			}
		}
		// 删除后需要去下null值
		for(var i = 0;i<persons.length;i++){
			if(persons[i]==''||persons[i]==null||typeof(persons[i])==undefined){
				persons.splice(i,1);
				i=i-1;
			}
		}
		// 因为数据发生改变,需要刷新下数组数据的展示
		showPersons();
	}
}

此处我们在删除空元素的时候使用了一个数组的splice()方法

JavaScript splice() 方法

1.定义和用法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

2. 语法

arrayObject.splice(index,howmany,item1,…,itemX)

3. 返回值

4. 说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

5. 实例:

for(var i = 0;i<persons.length;i++){			
		if(persons[i]==''||persons[i]==null||typeof(persons[i])==undefined){
		persons.splice(i,1);
		i=i-1;
	}
}

此处需要简单注意下 i = i-1 是为了配置已经缩短长度的数组,就好比现在验证的是索引=2的数据,一看是null 删除了,然后你再次验证不能从索引3的开始,必须再验证一遍索引为2的数据,这样才能保证数据的正确;

到此,删除方法实现完成!

2.2.5 数据更新 :

更来相对其他三个操作难度稍微大了一些,因为更新分两部分进行,

第一部分需要把要更新的数据展示出来
第二部分在展示出来的数据基础上进行数据更新

所以先完成第一部分 : 数据展示工作

数据最终要展示到页面,所以我们先构建页面,此处我们可以把form1稍微修改一下就编程了一个更新展示页面

<div id="form2" style="display: none;">
	<form method="post" action="#" onsubmit="updatePerson();return false;">
		<input type="hidden" id="upid" />
		<fieldset>
			<legend>添加人员信息legend>
			<table>
				<tr>
					<td>姓名:td>
					<td>
						<input type="text" id="upname" required="required" placeholder="请输入人员姓名......" />
					td>
				tr>
				<tr>
					<td>性别:td>
					<td>
						<select id="usex" required="required">
							<option value="">---请选择---option>
							<option value="男">男option>
							<option value="女">女option>
						select>
					td>
				tr>
				<tr>
					<td>年龄:td>
					<td>
						<input type="number" id="uage" required="required" placeholder="请输入人员年龄......" />
					td>
				tr>
				<tr>
					<td>籍贯:td>
					<td>
						<input type="text" id="upfrom" required="required" placeholder="请输入人员籍贯......" />
					td>
				tr>
				<tr>
					<td colspan="2">
						<button type="submit">确定button>
						<button type="reset" onclick="hideForm('form2');">取消button>
					td>
				tr>
			table>
		fieldset>
	form>
div>

展示数据的时候需要注意,我们展示的数据是有id编号的,所以这个属性也必须接收到,但是ID我们又不希望用户修改,所以此处我们用隐藏域保存数据;

写完页面之后我们在编写JS方法展示数据
先修改更新的button 加入JS方法

<button type='button' onclick='showUpdateForm("+p.id+");' >更新button>

编写这个方法

// 显示数据方法
function showUpdateForm(pid){
	// 找到要更新的数据
	for (var i = 0; i < persons.length; i++) {
		if(persons[i].id == pid){
			var p = persons[i];
			// 将获取到的数据显示到form表单中的元素
			document.getElementById("upid").value = p.id;
			document.getElementById("upname").value = p.name;
			document.getElementById("uage").value = p.age;
			document.getElementById("usex").value = p.sex;
			document.getElementById("upfrom").value = p.from;
			// 显示form
			document.getElementById("form2").style.display = "";
		}
	}
}

效果 :

到这更新的第一步就算完事了
再继续第二步根据更新的JS完成操作

// 数据更新JS
function updatePerson(){
	// 获取页面数据
	var p = {};
	p.id = document.getElementById("upid").value;
	p.name = document.getElementById("upname").value;
	p.age = document.getElementById("uage").value;
	p.sex = document.getElementById("usex").value;
	p.from = document.getElementById("upfrom").value;
	// 开始更新
	for (var i = 0; i < persons.length; i++) {
		if(persons[i].id == p.id){
			persons[i] = p;
		}
	}
	// 因为数据发生了改动,所以重新刷新下数据展示
	showPersons();
}

效果:
更新赵文明的数据


至此,页面级别的增删改查数据全部完成;
最终代码

法一：标准方法


<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例title>
		<script type="text/javascript">
			// 【初始化】数据开始
			// 1. 很重要的一步 : 定义人员编号 编号是一串没有意义的数字,主要是为了方便人员管理用的
			var id_index = 1; 
			// 初始化
			// 2. 添加初始化人员1
			var p1 = {"id":id_index,"name":"孙建国","sex":"男","age":35,"from":"北京市"};
			// 3. 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
			id_index++;
			
			// 添加初始化人员2
			var p2 = {"id":id_index,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
			// 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
			id_index++;
			
			// 为了方便操作者两个数据,我们把数据封装在一个数组中
			var persons = [p1,p2];
			// 初始化数据结束
			
			// 编写【显示】人员方法
			function showPersons(){
				// 按ID获取table
				var tb1 = document.getElementById("tb1");
				// 给tb1拼接元素
				var str = "编号姓名性别年龄籍贯操作";
				// 遍历JSON数组继续拼接
				for (var i = 0; i < persons.length; i++) {
					var p = persons[i];
					str += ""+p.id+""+p.name+""+p.sex+""+p.age+""+p.from+"||";
				}
				// 最后把拼接好的字符串放入table中
				tb1.innerHTML = str;
			}
			
			// 编写【添加】方法
			function addPerson(){
				// 接收页面数据
				var pname = document.getElementById("pname");
				var sex = document.getElementById("sex");
				var age = document.getElementById("age");
				var pfrom = document.getElementById("pfrom");
				// 获取这个对象的主键信息
				var id = id_index;
				// 主键用过就自增
				id_index++;
				// 开始添加数据
				var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
				// 添加到数组
				persons.push(p);
				// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
				showPersons();
			}
			
			// 【显示添加表单】
			function showAddForm(){
				// 获取添加表单
				var form1 = document.getElementById("form1");
				// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
				form1.style.display = "";
			}
			
			// 根据ID【隐藏】form表单
			function hideForm(formid){
				// 按ID获取这个form
				var form = document.getElementById(formid);
				// 设置form表单的显示属性为隐藏
				form.style.display = "none";
			}
			
			// 根据ID【删除】指定数据
			function deletePerson(pid){
				// 先有情提示一下
				var con = window.confirm("确定要删除这条数据么?");
				// 判断一下
				if(con == true){
					// 找到要删除的数据 删除
					for (var i = 0; i < persons.length; i++) {
						if(persons[i].id == pid){
							delete persons[i];
						}
					}
					// 删除后需要去下null值
					for(var i = 0;i<persons.length;i++){
						if(persons[i]==''||persons[i]==null||typeof(persons[i])==undefined){
							persons.splice(i,1);
							i=i-1;
						}
					}
					// 因为数据发生改变,需要刷新下数组数据的展示
					showPersons();
				}
			}
			
			// 【显示】数据方法
			function showUpdateForm(pid){
				// 找到要更新的数据
				for (var i = 0; i < persons.length; i++) {
					if(persons[i].id == pid){
						var p = persons[i];
						// 将获取到的数据显示到form表单中的元素
						document.getElementById("upid").value = p.id;
						document.getElementById("upname").value = p.name;
						document.getElementById("uage").value = p.age;
						document.getElementById("usex").value = p.sex;
						document.getElementById("upfrom").value = p.from;
						// 显示form
						document.getElementById("form2").style.display = "";
					}
				}
			}
			
			// 数据【更新】JS
			function updatePerson(){
				// 获取页面数据
				var p = {};
				p.id = document.getElementById("upid").value;
				p.name = document.getElementById("upname").value;
				p.age = document.getElementById("uage").value;
				p.sex = document.getElementById("usex").value;
				p.from = document.getElementById("upfrom").value;
				// 开始更新
				for (var i = 0; i < persons.length; i++) {
					if(persons[i].id == p.id){
						persons[i] = p;
					}
				}
				// 因为数据发生了改动,所以重新刷新下数据展示
				showPersons();
			}			
		script>
	head>
	
	<body>
		<div>
			<button type="button" onclick="showPersons();">显示人员数据button>
			<button type="button" onclick="showAddForm();">添加新人员button>
		div>
		<div>
			<table border="1" id="tb1">				
			table>
		div>
		
		
		<div id="form1" style="display: none;">
			<form method="post" action="#" onsubmit="addPerson();return false;" >
				<fieldset>
					<legend>添加人员信息legend>
					<table>
						<tr>
							<td>姓名:td>
							<td>
								<input type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
							td>
						tr>
						<tr>
							<td>性别:td>
							<td>
								<select id="sex" required="required">
									<option value="">---请选择---option>
									<option value="男">男option>
									<option value="女">女option>
								select>
							td>
						tr>
						<tr>
							<td>年龄:td>
							<td>
								<input type="number" id="age" required="required" placeholder="请输入人员年龄......" />
							td>
						tr>
						<tr>
							<td>籍贯:td>
							<td>
								<input type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
							td>
						tr>
						<tr>
							<td colspan="2">
								<button type="submit">确定button>
								<button type="reset" onclick="hideForm('form1');">取消button>
							td>
						tr>
					table>
				fieldset>
			form>
		div>
		
		
		<div id="form2" style="display: none;">
			<form method="post" action="#" onsubmit="updatePerson();return false;">
				<input type="hidden" id="upid" />
				<fieldset>
					<legend>添加人员信息legend>
					<table>
						<tr>
							<td>姓名:td>
							<td>
								<input type="text" id="upname" required="required" placeholder="请输入人员姓名......" />
							td>
						tr>
						<tr>
							<td>性别:td>
							<td>
								<select id="usex" required="required">
									<option value="">---请选择---option>
									<option value="男">男option>
									<option value="女">女option>
								select>
							td>
						tr>
						<tr>
							<td>年龄:td>
							<td>
								<input type="number" id="uage" required="required" placeholder="请输入人员年龄......" />
							td>
						tr>
						<tr>
							<td>籍贯:td>
							<td>
								<input type="text" id="upfrom" required="required" placeholder="请输入人员籍贯......" />
							td>
						tr>
						<tr>
							<td colspan="2">
								<button type="submit">确定button>
								<button type="reset" onclick="hideForm('form2');">取消button>
							td>
						tr>
					table>
				fieldset>
			form>
		div>
	body>
html>

法二：格式变换，核心不变


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			
			var index = 1;
			var p1 = {
				"id":index,
				"name":"孙建国",
				"sex":"男",
				"age":24,
				"from":"北京"
			};
			index++;
			var p2 = {
				"id":index,
				"name":"赵文明",
				"sex":"男",
				"age":25,
				"from":"河北"
			};
			index++;
			
			var ps = [];
			ps.push(p1);
			ps.push(p2);
			
			function showPersons(){
				var d1= document.getElementById("d1");
				d1.style.display = "";
			
			var str = "编号姓名性别年龄籍贯操作"
				for(var i = 0;i<var.length;i++){
					var p = ps[i];
					str+=""+p.id+""+p.name+""+p.sex+""+p.age+""+p.from+"操作"
				}	
			}
			var t1 = document.getElementById()
			
			
			function showAddFrom(){
				var form1 = document.getElementById("from1");
				from1.style.display= "";
			}
			function addPerson{
				
			}
			
		script>
	head>
	<body>
		<input type="button" value="显示人员信息" onclick="showPersons()"/>
		<input type="button" value="新增人员信息" onclick="showAddFrom()"/>
		<hr >
		<div id="d1" style="display: none;">
			<table border="1" width="500">
				<tr><td>indextd><td>孙建国td><td>男td><td>22td><td>北京td><td>删除||更新td>tr>
			table>
		div>
		<div id="from1" style="display: none;">
			<form action="#" method="post">
				<fieldset id="">
					<legend>新增人员信息legend>
					
					请输入人员姓名：<input type="text" name="name" placeholder="请输入人员姓名" required="required"/><br>
					请输入人员年龄：<input type="number" name="age" placeholder="请输入人员年龄" required="required"/><br>
					请输入人员性别：<select type="sex">

你可能感兴趣的:(HTML,数据,java)

thinkphp6 数据库字段不存在的错误提示 tv002
在开发的过程中，我们经常会调整数据表的字段，于是经常会出现“字段不存在”的错误提示，fieldsnotexists:[status]这个问题是因为数据表调整了，但是thinkphp的表字段缓存还没有更新的原因，解决方法如下：1如果是文件缓存，尝试删除runtime目录下的所有缓存文件周易大学2如果开启redis之类的缓存，thinkphp也会把字段数据存到缓存中，也要清空；3如果问题还不解决，修改
java中常用的5种设计模式小巢人 java 设计模式
背景Java的设计模式有20多种，但是真实业务场景下，我常用的就这5种，基本上能解决我大部分问题。常用的5种设计模式一、单例模式定义：这个类的实例在这个项目中只能有一个。代码：//列子1@ComponentpublicclassCacheSupport{privatefinalCachecache=newCacheWORK_QUEUE=newLinkedBlockingQueuevoidsubmi
Java面向对象编程——新手必看 _S_Q 后端服务 Java java python 开发语言
文章目录Java面向对象编程博客一、面向对象编程的四大基本原则二、示例程序：动物类继承与多态1.创建一个新的Java项目2.编写代码3.运行程序三、继承与多态的深度解析四、总结Java面向对象编程博客面向对象编程（OOP）是Java的核心概念之一，它通过封装、继承和多态来帮助开发者构建模块化和可维护的代码。本篇博客将通过示例程序、UML类图，以及使用IntelliJIDEA的实践，详细讲解Java
DOM事件机制扶光~ javascript 开发语言 ecmascript html 前端
事件是由三部分组成事件源事件类型事件处理程序我们也称为事件三要素1.事件源：事件被触发的对象-->按钮对象2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…3.事件处理程序：通过一个函数赋值的方式执行事件的步骤1.获取事件源2.注册事件（绑定事件）3.采用函数赋值形式添加事件处理程序常用事件：当用户点击鼠标时当网页加载后当图像加载后当鼠标移至元素上时当输入字段被改变时当HTML表单被
Scrapy添加代理IP池：自动化爬虫的秘密武器天启代理ip scrapy tcp/ip 自动化
在网络爬虫的世界里，IP地址的频繁更换是防止被目标网站封禁的有效手段。通过在Scrapy中添加代理IP池，你可以轻松实现自动化的IP切换，提高数据抓取的效率和稳定性。今天，我们就来详细讲解一下如何在Scrapy中添加代理IP池，让你的爬虫更加智能和高效。什么是代理IP池？代理IP池是指一组可以轮换使用的代理IP地址集合。通过在爬虫中使用代理IP池，你可以在每次请求时随机选择一个代理IP，从而避免因
Kafka-3.3.4摒弃zookeeper集群部署操作文档 ShoShin1020 kafka zookeeper 分布式
一、集群规划kafka从2.8版本开始，就允许用户在不需要zookeeper的情况下运行。真正全面摒弃zookeeper的版本是3.0，在后面的版本kafka使用了新的元数据管理方式kraft,提高了Kafka的可扩展性、可用性和性能。下载地址：ApacheKafka这里下载kafka_2.13-3.4.0.tgz版本，自带有支持raft模式主机名称IPprocess.rolesnode.idma
Java的反射机制吢禅 java servlet 开发语言
Java的反射机制反射(Reflection)的概念反射的出现背景Java程序中，所有的对象都有两种类型：编译时类型和运行时类型，而很多时候对象的编译时类型和运行时类型不一致。例如： Objectobj=newString("hello");某些变量或形参的类型在编译时是Object，但是程序需要调用该对象运行时类型的方法，该方法不是Object中的方法，那么怎么办呢？解决这个问题，有两种方案：方
数据结构——栈和队列 m0_61965705 数据结构 c语言 linux
目录栈和队列1.栈FILO顺序栈：（空增栈）链式栈2.队列栈和队列栈和队列是特殊的表状结构表可以在任意位置插入和删除栈和队列只允许在固定位置插入和删除1.栈FILO先进后出，后进先出栈顶：允许入栈出栈的一端称为栈顶栈底：不允许入栈和出栈的一端称为栈底入栈（压栈）：将数据元素放入栈顶出栈（弹栈）：将数据元素从栈顶位置取出顺序栈：（空增栈）结构体定义：//存放数据的类型typedefintDataTy
2017-12-15 韩喜文
【韩喜文2017.12.15星期五】好展馆让天下没有卖不出去产品好展馆让天下没有不能传承的文化日精进：716今天和一个网络营销的公司负责人聊天，现在网络营销更注重数据营销，精准营销。在我们选择公司的时候，第一肯定是要看客户的深度，能帮我们带来多大价值的角度去选择。那换位思考一下，我们的客户他需要我们怎么做，做到什么深度是客户最满意的。换位思考！
基于Javaweb实现的家教服务平台设计与实现(源码+数据库+部署+文档+讲解视频等) 星辰学长 #Java精选毕设数据库 spring boot vue.js uni-app java 小程序
文章目录1.前言2.系统演示录像3.论文参考4.代码运行展示图5.技术框架5.1SpringBoot技术介绍5.2Vue技术介绍6.可行性分析7.系统测试7.1系统测试的目的7.2系统功能测试8.数据库表设计9.代码参考10.数据库脚本11.找我做程序，有什么保障？12.联系我们1.前言博主介绍：✌博主多年开发实战经验，曾被CDN特邀博客之星、技术开发领域专家，全网拥有百万粉丝，主要从事与Java
Docker mysql 配置文件读取失败 [Warning] World-writable config file ‘/etc/mysql/conf.d/my.cnf‘ is ignored. DN金猿 docker docker mysql 容器
这个警告表明MySQL正在忽略/etc/mysql/conf.d/my.cnf这个配置文件，因为它被设置为了全世界可写。这个警告是基于安全性的考虑。当配置文件被设置为全世界可写时，任何人都可以修改它，这可能会导致安全风险，因为恶意用户可以更改MySQL的配置，从而影响数据库的行为和安全性。为了解决这个问题，你可以按照以下步骤进行操作：更改配置文件的权限：使用chmod命令将配置文件的权限设置为更安
使用Docker构建支持中文字体的Java镜像 DN金猿 docker docker java 文字方框
做停车场生成二维码时，在代码中用到在图片上添加文字或水印，文字在本地正常显示，到linux服务器就显示方框，由于我用的是docker部署的java项目，所以在linux服务器中安装了中文字体还是无效，因为项目是部署中docker容器里。Fontfont3=newFont("微软雅黑",Font.PLAIN,72);微软雅黑字体显示方框（方框部分是添加的文字）后来查了很多资料，发现都不行。因为我的D
java jxl 写 excel_使用JXL读写Excel 黄海均 java jxl 写 excel
jxl读取excel代码:importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.IOException;importjava.io.InputStream;importjava.util.ArrayList;importjava.util.List;importjxl.Cell;importj
java利用jxl导出excel_java使用jxl实现导出excel 许风倾秋
1、导入jar包net.sourceforge.jexcelapijxl2.62、上代码protectedvoidexportExcel(HttpServletResponseresponse,StringfileName,String[]Title,@SuppressWarnings("rawtypes")Listcontent){//以下开始输出到EXCELtry{//定义输出流，以便打开保存
只用一个变量来实现找数组中的最小值程序garbage 算法数据结构
题目：有N个个位正整数存放在int型数组A[0,…,N-1]中，N为已定义的常量且N≤9，数组A[]的长度为N，另给一个int型变量i，要求只用上述变量（A[0]~A[N-1]与i，这N+1个整型变量〉写一个算法，找出这N个整数中的最小者，并且要求不能破坏数组A[]中的数据。核心代码：voidfindmin(inta[],int&i){i=a[0];while(i/10a[i/10]){i=i-i
Numpy 数组操作好的收到 numpy
1.修改数组形状1）ndarray.reshape在不改变数据的条件下修改形状numpy.reshape(arr,newshape,order='C')importnumpyasnpa=np.array([1,2,3,4])print(a)#[1234]b=a.reshape([2,2])print(b)#[[12]#[34]]2）ndarray.flat数组的一维迭代器，支持索引、遍历等操作im
鸿蒙开发面试题（二）求求你不要下雨了啊 harmonyos 面试鸿蒙
一、请介绍鸿蒙开发中如何进行组件状态管理在鸿蒙应用开发中，组件状态管理是确保应用界面响应性和数据一致性的重要环节，主要有以下几种方式进行组件状态管理：AbilitySlice生命周期管理：HarmonyOS的UI组件是基于AbilitySlice的，每个AbilitySlice都有自己的生命周期。开发者可以重写AbilitySlice的生命周期回调方法，来处理与组件状态相关的变化全局数据管理：Ha
Oracle数据库数据缓冲区大小 liyongjie Oracle 数据库 oracle cache statistics java buffer
数据块缓冲缓存区(Datablockbufferscache):8i中是db_block_buffers*db_block_size，9i及以后版本用db_cache_size来代替这个参数。10g中，这个参数是由oracle本身自动管理的，可以不用手工设置。在内存的配置中把别的参数设置完成后，应该把能给的都给Databuffers。Oracle在运行期间向数据库高速缓存读写数据，高速缓存命中表示
初学JAVA必看 liyongjie JAVA java 工作编程 javadoc 编译器文档
(1)类名首字母应该大写。字段、方法以及对象（句柄）的首字母应小写。对于所有标识符，其中包含的所有单词都应紧靠在一起，而且大写中间单词的首字母。例如：ThisIsAClassNamethisIsMethodOrFieldName若在定义中出现了常数初始化字符，则大写staticfinal基本类型标识符中的所有字母。这样便可标志出它们属于编译期的常数。Java包（Package）属于一种特殊情况：它
java redis常见操作 liyongjie Redis JAVA java redis 开发语言
本文介绍java操作Redis的常见方法采用Jedis方法操作，需要引入jedisjar包，本例子引用的是：jedis-5.2.0-beta4.jarimportjava.util.HashMap;importjava.util.Iterator;importjava.util.List;importjava.util.Map;importjava.util.Set;importredis.cli
java通过JDBC连接mysql、postgres、oracle数据库实现读写数据 liyongjie JAVA MySQL postgres 数据库 java mysql
通过JDBC连接mysql需要JDBC驱动程序包，本例子使用的是：mysql-connector-java-5.1.43-bin.jar通过JDBC连接postgres需要JDBC驱动程序包，本例子使用的是：postgresql-42.7.4.jar通过JDBC连接oracle需要JDBC驱动程序包，本例子使用的是：ojdbc6.jar/****/importjava.sql.Connection
postgres学习笔记 liyongjie 学习笔记
创建数据库在PostgreSQL中，您首先需要创建一个数据库用户，然后才能创建数据库。数据库用户与操作系统用户不同，它是PostgreSQL内的一个概念，用于管理数据库访问和操作。以下是创建PostgreSQL用户和数据库的基本命令：CREATEUSERmyuserWITHPASSWORD'mypassword';CREATEDATABASEmydbOWNERmyuser;当前用户、当前模式、当前
Spark MLlib模型训练—回归算法 Random forest regression 不二人生 Spark ML 实战 spark-ml 回归随机森林
SparkMLlib模型训练—回归算法Randomforestregression随机森林回归(RandomForestRegression)是一种集成学习方法，通过结合多个决策树的预测结果来提升模型的准确性和稳健性。相较于单一的决策树模型，随机森林通过随机采样和多棵树的集成，减少了模型的方差，从而在处理复杂数据集时展现出更好的性能。本文将详细介绍随机森林回归的原理、实现方法、应用场景，并通过Sc
matlab读取多种类型的文件（代码汇总）七十二五 matlab代码 matlab 经验分享青少年编程开发语言代码规范
文本文件ASCII或其他格式的文本文件：可以使用fscanf函数或textscan函数读取。这些函数允许用户根据数据的格式（如浮点数、整数、字符串等）来指定读取方式。fsanf函数读取一个名为data.txt的文本文件，其内容如下：1.234.567.89102030HelloWorld读取前两行的浮点数。%打开文件fileID=fopen('data.txt','r');%读取前两行的浮点数（假
java利用JXL操作excel liyongjie JAVA java excel python
通过JXL操作ExcelJXL是韩国人所著,目前停止更新,只支持xls格式,即2007之前的版本importjava.io.File;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.IOException;importjava.io.InputStream;importjava.net.
计算机网络速成（三） GISer_Jinger 面试题目计算机网络
一、网络协议与模型什么是协议？协议是指计算机系统中完成特定任务所必需的规则和约定，特别是数据传输和交换的规则和约定。OSI和TCP/IP是什么？OSI（开放式系统互连参考模型）是一种网络架构模型，将网络系统分为7层，每一层都指定了不同的功能。TCP/IP（传输控制协议/互联网协议）是互联网协议族，为保证数据包能够在网络层和传输层之间进行传输而诞生，通常分为4层（物理层、数据链路层、网络层、传输层）
名言警句 ztguang
http://zhidao.baidu.com/question/140659883.html2009最新励志名言警句大全1、大多数人想要改造这个世界，但却罕有人想改造自己。2、积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。3、莫找借口失败，只找理由成功。(不为失败找理由，要为成功找方法)4、伟人之所以伟大，是因为他与别人共处逆境时，别人失去了信心，他却下决心实现自己
Jetpack MVVM 常见错误二：在 launchWhenX 中启动协程 fundroid
image.pngFlowvsLiveData自StateFlow/SharedFlow出现后，官方开始推荐在MVVM中使用Flow替换LiveData。见文章：https://juejin.cn/post/6979008878029570055Flow基于协程实现，具有丰富的操作符，通过这些操作符可以实现线程切换、处理流式数据，相比LiveData功能更加强大。但唯有一点不足，无法像LiveDa
2022-02-16 知产圈李老师
【上海市】《上海市引进人才申办本市常住户口》公示名单以下人员已经我局审核同意办理本市常住户口，现予公示。公示时间自2022-02-15至2022-02-19，共5天。上海市人力资源和社会保障局2022年02月15日完整名单https://rsj.sh.gov.cn/tgsgg_17341/20220215/t0035_1405762.html以上由上海创薪心技术服务有限公司整理发布
使用 Java 预定义类（学习 Java 编程语言 025） xiang017
预定义类就是Java类库（或第三方库）中已经定义好的类。在Java中，没有类就无法做任何事情，然而，并不是所有的类都具有面向对象特征。例如，Math类和Date类。Date类的实例有一个状态，即特定的时间点。尽管在使用Date类时不必知道这一点，但时间使用距离一个固定时间点的毫秒数（可正可负）表示的，这个点就是所谓的纪元（epoch），它是UTC时间1970-01-0100:00:00。UTC是C
Hadoop(一) 朱辉辉33 hadoop linux
今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧. 在hdfs下，运行hadoop fs -mkdir /u
maven An error occurred while filtering resources blackproof maven 报错
转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources maven报错： maven An error occurred while filtering resources Maven -> Update Proje
jdk常用故障排查命令 daysinsun jvm
linux下常见定位命令： 1、jps 输出Java进程 -q 只输出进程ID的名称，省略主类的名称； -m 输出进程启动时传递给main函数的参数； &nb
java 位移运算与乘法运算周凡杨 java 位移运算乘法
对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：问题：用最有效率的方法算出2 乘以8 等於几?” 答案：2 << 3 由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
java中的枚举(enmu) g21121 java
从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： public enum ResultType { /** * 成功 */ SUCCESS, /** * 失败 */ FAIL,
MQ初级学习 510888780 activemq
1.下载ActiveMQ 去官方网站下载：http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。启动ActiveMQ以后，登陆：http://localhos
Spring_Transactional_Propagation 布衣凌宇 spring transactional
//事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 @Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 @Transactional(propagation=Propagation.REQUIREDS_N
我的spring学习笔记12-idref与ref的区别 aijuans spring
idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： <bean id ="theTargetBean" class="..." /> <bean id ="theClientBean" class=&quo
Jqplot之折线图 antlove js jquery Web timeseries jqplot
timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&
JDBC中事务处理应用百合不是茶 java JDBC编程事务控制语句
解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复事务常用命令: Commit提交
[转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论 bijian1013 java 多线程线程安全 HashMap
在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
ng-if与ng-show、ng-hide指令的区别和注意事项 bijian1013 JavaScript AngularJS
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
【持久化框架MyBatis3七】MyBatis3定义typeHandler bit1129 TypeHandler
什么是typeHandler? typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射内置typeHandler MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
上传下载文件rz,sz命令 bitcarter linux命令rz
刚开始使用rz上传和sz下载命令：因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求：我遇到的问题： sz下载A文件10M左右，没有问题但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题解决方法：上传命令改为;rz -ybe 下载命令改为：sz -be filename 如果还是有问题：那就是文
通过ngx-lua来统计nginx上的虚拟主机性能数据 ronin47 ngx-lua　统计解禁ip
介绍以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 可以统计与query-times request-time
java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132 bylijinnan java
import java.util.Arrays; import java.util.Comparator; public class MinNumFromIntArray { /** * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。 * 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
Oracle基本操作 ccii Oracle SQL总结 Oracle SQL语法 Oracle基本操作 Oracle SQL
一、表操作 1. 常用数据类型 NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
[强人工智能]实现强人工智能的路线图 comsci 人工智能
1：创建一个用于记录拓扑网络连接的矩阵数据表 2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图 3：将这个流程图导入到矩阵数据表中 4：在矩阵的每个有意义的节点中嵌入一段简单的
给Tomcat，Apache配置gzip压缩(HTTP压缩)功能 cwqcwqmax9 apache
背景： HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
SpringMVC and Struts2 dashuaifu struts2 springMVC
SpringMVC VS Struts2 1: spring3开发效率高于struts 2: spring3 mvc可以认为已经100%零配置 3: struts2是类级别的拦截，一个类对应一个request上下文， springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应所以说从架构本身上 spring3 mvc就容易实现r
windows常用命令行命令 dcj3sjt126com windows cmd command
在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
再看知名应用背后的第三方开源项目 dcj3sjt126com ios
知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 @iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 Facebook Paper使用的第三
Objective-c单例模式的正确写法 jsntghf 单例 ios iPhone
一般情况下，可能我们写的单例模式是这样的： #import <Foundation/Foundation.h> @interface Downloader : NSObject + (instancetype)sharedDownloader; @end #import "Downloader.h" @implementation
jquery easyui datagrid 加载成功，选中某一行 hae jquery easyui datagrid 数据加载
1.首先你需要设置datagrid的onLoadSuccess $( '#dg' ).datagrid({onLoadSuccess : function (data){ $( '#dg' ).datagrid( 'selectRow' ,3); }}); 2.onL
jQuery用户数字打分评价效果 ini JavaScript html jquery Web css
效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</
mybatis的paramType kerryg DAO sql
MyBatis传多个参数： 1、采用#{0},#{1}获得参数： Dao层函数方法： public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser" result
centos 7安装mysql5.5 MrLee23 centos
首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。 #列出所有被安装的rpm package rpm -qa | grep mariadb #卸载 rpm -e mariadb-libs-5.
利用thrift来实现消息群发 qifeifei thrift
Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
实现一个sizeof获取Java对象大小 teasp java HotSpot 内存对象大小 sizeof
由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上适用。
SVN错误及处理 xiangqian0505 SVN提交文件时服务器强行关闭
在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络写道 SVN无法读取current修复方法 Can't read file : End of file found 文件：repository/db/txn_current、repository/db/current 其中current记录当前最新版本号，txn_current记录版本库中版本