Java模拟服务器解析web数据

目录
  • 一，模拟 服务器 解析浏览器发来的数据
  • 二，CSS选择器
  • 三，练习HTML和CSS
    • –1，创建css文件
    • –2，修改html文件
  • 四，css的盒子模型
    • –1，
      • 概述
    • –2，练习
      • html代码
      • css代码
  • 五，JS
    • –1，入门案例
    • –2，基础语法
  • 总结

一，模拟 服务器 解析浏览器发来的数据

package cn.tedu.test;
//模拟 服务器 解析浏览器发来的数据 -- SpringMVC框架
//http://127.0.0.1:8848/cgb2105/stu.html?user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
public class Test5 {
    public static void main(String[] args) {
        String url="http://127.0.0.1:8848/cgb2105/stu.html?user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07";
//        1，按照？切割字符串，得到a数组
//                [http://127.0.0.1:8848/cgb2105/stu.html ,
//                  user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07]
//        2,重点解析数组里的第二部分a[1]   user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
//        3,按照&切割字符串，得到b数组
//                [user=1,age=2,sex=1,like=1,edu=2,time=2021-07-07]
        String[] b= url.split("\\?")[1].split("&");
//        4,遍历b数组，得到str,数据user=1     age=2    sex=1
        for(String str : b){
//        5,再按照=切 [user,1]   [age,2]
            String data = str.split("=")[1];
            System.out.println(data);
        }
        //TODO jdbc入库
    }
}

二，CSS选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css的高级选择器</title>
		<!-- html嵌入css -->
		<style>
			/* 1. 分组选择器：把多种选择器选中的元素分成一组，统一设置样式 */
				div,#s1{
					color: #008000;
				}
			/* 2. 属性选择器：根据标签的不同属性选择元素 */
				input[type='text']{
					background-color: #FFFF00;
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<span id="s1">我是span1</span>
		<span>我是span2</span>
		<p>我是p</p>
		<input type="text" placeholder="我是input1"></input>
		<input type="password" placeholder="我是input2"></input>
	</body>
</html>

三，练习HTML和CSS

–1，创建css文件

/* 选中class=a的元素 */
.a{
	width: 275px;/* 宽度 */
	height: 30px;/* 高度 */
}
/* 修饰保存按钮 */
input[type="submit"]{
	height: 30px;  /* 高度 */
	width: 45px;   /* 宽度 */
	color: white; /* 字的颜色 */
	background-color: blue; /* 背景色*/
	border: 2px solid blue; /*边框的宽度 实线 边框的颜色*/
}
/* 修饰取消按钮 */
input[type="button"]{
	height: 30px;  /* 高度 */
	width: 45px;   /* 宽度 */
	color: white; /* 字的颜色 */
	background-color: hotpink; /* 背景色*/
	border: 2px solid hotpink; /*边框的宽度 实线 边框的颜色*/
}

–2，修改html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习form表单</title>
		<!-- link引入一个外部的css文件
			rel的值是固定写法，表名了文件的类型
			href用来指定文件位置路径
		-->
		<link rel="stylesheet" href="1.css" />
	</head>
	<body>
		<!-- 默认的数据提交是get方式 -->
		<form>
			<table>
				<tr>
					<td>
						<h3>学生信息管理系统MIS</h3>
					</td>
				</tr>
				<tr>
					<td>
						姓名：
					</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="text" placeholder="请输入姓名" name="user" />
					</td>
				</tr>
				<tr>
					<td>
						年龄：
					</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="number" placeholder="请输入年龄" name="age" />
					</td>
				</tr>
				<tr>
					<td>
						性别：(单选框)
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好：(多选)
						<input type="checkbox" name="like" value="1"/>乒乓球
						<input type="checkbox" name="like" value="2" checked="checked"/>爬山
						<input type="checkbox" name="like" value="3"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历：(下拉框)
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">高中</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期： <br/>
						<input type="date" name="time"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="保存" />
						<input type="button" value="取消" />
					</td>
				</tr>
			</table>
		</form>
		<audio controls="controls">
			<source src="jay.mp3"></source>
		</audio>
		<video controls="controls" loop="loop">
			<source src="b.mp4"></source>
		</video>
	</body>
</html>

四，css的盒子模型

–1，

概述

css把网页中的每个元素看做是一个盒子。 margin：外边距，是指盒子和盒子之间的距离 padding：内边距，是盒子里的内容和边距的距离 width/height：内容的宽度.高度 border：边框

–2，练习

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 用户注册</title>
		<!-- 引入一个外部的css文件 -->
		<link rel="stylesheet" href="2.css"/>
	</head>
	<body>
<!-- form标签用来提交数据，method属性用来指定数据的提交方式，action属性用来指定提交给谁 -->
		<form method="get" action="#">
			<table>
				<tr>
					<td>
						<h2 style="padding-left:120px;">用户注册</h2>
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="用户名" class="a" />
					</td>
				</tr>
				<tr>
					<td  class="b" >
						支持中文、字母、数字、“-”、“_”的组合，4-20个字符
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" placeholder="设置密码" class="a"  />
					</td>
				</tr>
				<tr>
					<td  class="b" >
						建议使用数字、字母和符号两种以上的组合，6-20个字符
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" placeholder="确认密码" class="a" />
					</td>
				</tr>
				<tr>
					<td  class="b" >
						两次密码输入不一致
					</td>
				</tr>
				<tr>
					<td>
						<input type="number" placeholder="验证手机" class="a" />
						或
						<a href="#">验证邮箱</a>
					</td>
				</tr>
				<tr>
					<td id="m">
						<input type="checkbox"/>
						我已阅读并同意
						<a href="#">《京淘用户注册协议》</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="立即注册"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

css代码

/* 修饰输入框 */
.a{
	width: 300px;/* 宽度 */
	height: 30px;/* 高度 */
	padding: 10px;/* 内边距 */
	margin: 10px;/* 外边距 */
	font-size: 20px;/* 加大字号 */
}
/* 修饰小文字 */
.b{
	font-size: 10px; /* 大小 */
	color: gray; /* 颜色 */
	padding-left:25px ; /* 左边距 */
}
/* 修饰我已阅读  */
#m{
	padding-left: 25px;/* 左边距 */
}
/* 修饰立即注册按钮 */
input[type="submit"]{
	background-color: #FF0000; /* 背景色 */
	color: white;/* 字的颜色 */
	font-size: 20px;/* 字号 */
	height: 50px;/* 高度 */
	width: 320px;/* 宽度 */
	margin-left: 10px;/* 左边距 */
	margin-top: 20px;/* 上边距 */
	border:1px solid red;/* 边框 */
}

五，JS

–1，入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的入门案例</title>
		<!-- 在HTML嵌入js，写法2：内部js -->
		<script>
			alert(100); /* 弹100 */
			confirm(); /* 确认框 */
			prompt("请输入年龄：");/* 输入框 */
		</script>
	</head>
	<body>
		<!-- js就想让网页动起来，写法1：行内js
			js是基于对象的事件驱动的脚本语言。
			事件驱动是指：给网页中的不同元素，添加了各种触发的方式
			onclick是单击   ondblclick是双击  onmouseenter是鼠标进入  onmouseleave鼠标划出
			alert弹出框      prompt输入框      confirm确认框
		-->
		<a href="#" onclick="alert(10);">单击弹框</a>
		<a href="#" onclick="prompt();">单击输入框</a>
		<a href="#" onclick="confirm();">单击???</a>
		<a href="#" ondblclick="alert(10);">双击弹框</a>
		<a href="#" onmouseenter="alert(10);">鼠标划入弹框</a>
		<a href="#" onmouseleave="alert(10);">鼠标划出弹框</a>
	</body>
</html>

–2，基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的数据类型</title>
		<!-- 在HTML里嵌入JS代码 -->
		<script>
			/* 2. js的运算符 */
				//三元运算符  求两个数里的大值
				var j=10;
				var k=20;
				alert( j < k ? k : j );
				//==   ===
				alert(1==1); //比值，true
				alert(1===1); //比类型和值，true
				alert(1==='1');//比类型和值，false
				// % /  求25的个位数和十位数
				var g=25;
				alert( g%10 );//%取余，个位数
				alert( g/10 ); //2.5
				// ++  --
				var h = 10;
				h = h++ ;
				alert(h); //10
				/*  java里，以下两行代码的区别？
					byte d = 1;
					d = d+1;  //报错，必须强转
					d += 1;  //解决方案，自动类型转换
				*/
			/* 1. js是弱类型的语言，没有严格意义上的数据类型，包括：number string boolean null undefined */
				var a = 10;//number类型
				a = 1.1; //number类型
				a = "hello js" ; //string类型
				a = 'hello js' ; //string类型
				a = true ; //boolean类型
				a = null ; //null类型
				alert(a);
				var b ; alert(b); //undefined
				var c = 1.1 + 1.9 ; //+用来求和
				alert(c); //自动类型转换
				alert("c"+c); //+用来拼串
				//变量交换值--首尾相连
				var d = 1;
				var e = "hello" ;
				var f = d;
				d=e;
				e=f;
				alert(d +","+e);
		</script>
	</head>
	<body>
	</body>
</html>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更对内容！

赞 (0)

相关推荐

  • Java 实现简单静态资源Web服务器的示例

    需求 有时候我们想快速通过http访问本地的一些资源,但是安装一些web服务器又很费时和浪费资源,而且也不是长期使用的. 这时候我们可以启动一个小型的java服务器,快速实现一个http的静态资源web服务器. 难点 其实没什么难点,主要是注意请求头和返回头的处理.然后将请求的文件以流的方式读入返回outputstream即可. 代码 直接上代码吧- import java.io.IOException; import java.io.InputStream; import java.io.Ou

  • Vue+Java 通过websocket实现服务器与客户端双向通信操作

    1. vue代码 methods: { //在方法里调用 this.websocketsend()发送数据给服务器 onConfirm () { //需要传输的数据 let data = { code: 1, item: '传输的数据' } this.websocketsend(JSON.stringify(data)) }, /* */ initWebSocket () { // 初始化weosocket let userinfo = getUserInfo() let username =

  • Java实现基于NIO的多线程Web服务器实例

    代码地址:https://github.com/iyuanyb/webserver 实现了 静态.动态资源获取: Cookie.Session.HTTP 长连接,及 Session 和 HTTP 长连接的定时清除: 类似 Spring MVC 的注解式编程,如 @RequestMapping @RequestParam 等,方法中可以根据参数名从前台获取数据,可以传递对象,也支持级联属性,如: // GET /page?pageSize=10&pageNum=1 HTTP/1.1 @Reques

  • Linux服务器部署JavaWeb项目完整教程

    本文大部分参考网上其他教程,是实际操作后回过头来的一些总结,希望可以对正在部署项目的你有所帮助. 基本环境:Centos7.tomcat8.jdk8,MySQL5.6.nginx 安装JDK yum install java-1.8.0-openjdk* -y 使用yum安装,无需配置系统环境,执行完这条命令后JDK就安装好了. 安装Mysql 我们这里使用Mysql,如果使用MariaDB ,一般云服务器有安装,只需要升级就可以. 安装步骤: # wget http://dev.mysql.c

  • Javaweb 500 服务器内部错误的解决

    如下所示: java jdk版本问题,假如你自己电脑运行正常,那你配置服务器环境的时候,jdk也要换成和你自己电脑一样的版本,我的是jdk8,我已经完美的解决了. 补充知识:JavaWeb:WEB服务器 WEB WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面):指web页面中供人们浏览的数据始终是不变. 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时

  • Java模拟服务器解析web数据

    Java模拟服务器解析web数据

    目录 一,模拟 服务器 解析浏览器发来的数据 二,CSS选择器 三,练习HTML和CSS –1,创建css文件 –2,修改html文件 四,css的盒子模型 –1, 概述 –2,练习 html代码 css代码 五,JS –1,入门案例 –2,基础语法 总结 一,模拟 服务器 解析浏览器发来的数据 package cn.tedu.test; //模拟 服务器 解析浏览器发来的数据 -- SpringMVC框架 //http://127.0.0.1:8848/cgb2105/stu.html?use

  • 使用Java构造和解析Json数据的两种方法(详解二)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Json数据的方法

  • 使用Java构造和解析Json数据的两种方法(详解一)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Json数据的方法

  • vue本地模拟服务器请求mock数据的方法详解

    vue本地模拟服务器请求mock数据的方法详解

    目录 原因 场景 方法 mock资源 配置 vue.config.js + settings.js .env.development + .env.production mock-request.js table.js mockDataTest 代码 总结 原因 1.mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了 2.mock的数据通过module.exports.export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,

  • JAVA使用Gson解析json数据实例解析

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成.同XML一样是一种"传输格式".JSON采用与编程语言无关的文本格式,便于数据传输.存储.交换. 封装类Attribute: public class Attribute { private int id; private String name; private int age; public int getId() { return id; } p

  • java使用FastJson解析Json数据

    fastjson 是一个性能极好的用 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发. 主要特点: 快速FAST (比其它任何基于Java的解析器和生成器更快,包括jackson) 强大(支持普通JDK类包括任意Java Bean Class.Collection.Map.Date或enum) 零依赖(没有依赖其它任何类库除了JDK) 一 .生成Json: JavaBean.List<JavaBean>.List<String>.List<Map&l

  • java解析JSON数据详解

    JSON是目前最流行的轻量级数据交换语言(没有之一).尽管他是javaScript的一个子集.但由于其是独立与语言的文本格式,它几乎可以被所有编程语言所支持. 以下是对java语言中解析json数据的总结. 要解析json,首先要导入解析json的工具类. import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; 我们都知道JSON中有json对象与json数组(json数据就是js

  • Java模拟实现HTTP服务器项目实战

    Java模拟实现HTTP服务器项目实战

    目录 一,HTTP协议的工作过程 二.HTTP协议格式 1,抓包分析搜狗主页 2,协议格式总结 三.版本V1 四.版本V2 1,创建HttpRequest类 2,创建HttpResponse类 3,创建HttpServer类 五.版本V3 1.创建HttpRequest类 2,创建HttpResponse类 3,创建HttpServer类 4,insex.html 一,HTTP 协议的工作过程 二.HTTP协议格式 1,抓包分析搜狗主页 HTTP请求 首行: [方法] + [url] + [版本

  • java中fastjson生成和解析json数据（序列化和反序列化数据）

    本文讲解2点: 1. fastjson生成和解析json数据 (举例:4种常用类型:JavaBean,List<JavaBean>,List<String>,List<Map<String,Object>) 2.通过一个android程序测试fastjson的用法. fastjson简介: Fastjson是一个Java语言编写的高性能功能完善的JSON库.fastjson采用独创的算法,将parse的速度提升到极致,超过所有json库,包括曾经号称最快的jack

  • Java用POI解析excel并获取所有单元格数据的实例

    1.导入POI相关jar包 org.apache.poi jar 2.代码示例 public List getAllExcel(File file, String tableName, String fname, String enterpriseId, String reportId, String projectId) throws FileNotFoundException, IOException, ClassNotFoundException, InstantiationExcepti

随机推荐