景子墨

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)

机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
c++ 的iostream 和 c++的stdio的区别和联系黄卷青灯77 c++算法开发语言 iostream stdio
在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
LocalDateTime 转 String igotyback java 开发语言
importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
WPF中的ComboBox控件几种数据绑定的方式互联网打工人no1 wpf c#
一、用字典给ItemsSource赋值（此绑定用的地方很多，建议熟练掌握）在XMAL中：在CS文件中privatevoidBindData(){DictionarydicItem=newDictionary();dicItem.add(1,"北京");dicItem.add(2,"上海");dicItem.add(3,"广州");cmb_list.ItemsSource=dicItem;cmb_l
Pyecharts数据可视化大屏：打造沉浸式数据分析体验我的运维人生信息可视化数据分析数据挖掘运维开发技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
Python教程：一文了解使用Python处理XPath 旦莫 Python进阶 python 开发语言
目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
LLM 词汇表落难Coder LLMs NLP 大语言模型大模型 llama 人工智能
Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
关于提高复杂业务逻辑代码可读性的思考编程经验分享开发经验 java 数据库开发语言
目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQL Server 数据库 sqlserver
1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
使用LLaVa和Ollama实现多模态RAG示例 llzwxh888 python 人工智能开发语言
本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG（检索增强生成），通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先，您需要安装以下依赖包：!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p
使用Apify加载Twitter消息以进行微调的完整指南 nseejrukjhad twitter easyui 前端 python
#使用Apify加载Twitter消息以进行微调的完整指南##引言在自然语言处理领域，微调模型以适应特定任务是提升模型性能的常见方法。本文将介绍如何使用Apify从Twitter导出聊天信息，以便进一步进行微调。##主要内容###使用Apify导出推文首先，我们需要从Twitter导出推文。Apify可以帮助我们做到这一点。通过Apify的强大功能，我们可以批量抓取和导出数据，适用于各类应用场景。
深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具 nseejrukjhad 数据库 python
深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
数组去重好奇的猫猫猫
整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
【目标检测数据集】卡车数据集1073张VOC+YOLO格式熬夜写代码的平头哥∰ 目标检测 YOLO 人工智能
数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：1073标注数量(xml文件个数)：1073标注数量(txt文件个数)：1073标注类别数：1标注类别名称:["truck"]每个类别标注的框数：truck框数=1120总框数：1120使用标注工具：labelImg标注
MongoDB Oplog 窗口喝醉酒的小白 MongoDB 运维
在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
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记录版本库中版本