前言:之前我们讲了如何下载的编译器和服务器及如何使用,这一次我们就讲一下基本知识和一些简单案例。
目录
一. cs与bs的区别
二.一个完整的URL由哪几个部分组成
三.如何修改Tomcat服务器的默认端口号
四.关于BS
1.为什么需要基于B/S技术的动态网页
2.BS技术的特点是什么
五.什么是JSP
1.JSP (Java Server Pages)是指:
2.Web容器处理JSP文件请求需要经过的3个阶段
3.JSP页面组成
page指令
小脚本于表达式
声明
注释
六.案例
一. cs与bs的区别
首先我们要了解什么是cs什么是bs
cs:client/server 客户端,服务器(类似于QQ聊天)
bs:brower/server 浏览器,服务器(类似于淘宝)
二.一个完整的URL由哪几个部分组成
由三个部分组成,分别是:
协议 主机 端口
http(http代表超文本传输协议)://localhos(主机)t:8080(端口号)
三.如何修改Tomcat服务器的默认端口号
首先我们要关闭服务器,右键点击stop,然后双击打开
四.关于BS
1.为什么需要基于B/S技术的动态网页
使用动态网页,可以动态输出网页内容、同用户进行交互、对网页内容进行在线更新
2.BS技术的特点是什么
客户端发出请求
请求发到服务器
服务器处理请求(查询,插入)
服务器把响应给客户端
这里主要是依据jsp文件实现的
jsp是一个文件格式:
java + html + css +js
但jsp本质上就是一个java文件
我们写的是jsp文件,但实际上
tomcat会把jsp文件变成java文件
jvm(java编译器)会把java变成.class
五.什么是JSP
1.JSP (Java Server Pages)是指:
在HTML中嵌入Java脚本代码 由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本代码 然后将生成的整个页面信息返回给客户端
2.Web容器处理JSP文件请求需要经过的3个阶段
a.翻译阶段 b.编译阶段 c.执行阶段
3.JSP页面组成
静态内容 HTML静态文本
指令 以“<%@ ” 开始,以“%> ” 结束。 比如:<%@ include file = " Filename" %>
表达式 <%=Java表达式 %>
小脚本 <% Java 代码 %>
声明 <%! 方法 %>
注释 <!-- 这是注释,但客户端可以查看到 --> <%-- 这也是注释,但客户端不能查看到 --%>
page指令
通过设置内部的多个属性来定义整个页面的属性
语法:<%@ page 属性1="属性值" 属性2="属性值1,属性值2"… 属性n="属性值n"%>
小脚本于表达式
声明
声明就是在JSP页面中定义Java的变量和方法
注释
在JSP文件的编写过程中,共有三种注释方法:
HTML的注释:<!-- html注释-->
JSP注释:<%-- JSP注释--%>
在JSP脚本中注释:
<% //单行注释 %>
<% /*多行注释 */ %>
六.案例
登陆界面代码:
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<script src="js/jquery-3.5.1.js"></script>
<script src="jquery-validation-1.19.0/dist/jquery.validate.js"></script>
<script src="jquery-validation-1.19.0/dist/localization/messages_zh.js"></script>
<!--
表单(form)
action 表单提交的地址
method 提交的方式
* get 【默认】 显示在地址栏上面,数据长度有限制
* post 不显示在地址栏上,数据长度无限制
【输入框上面必须要携带 name】
-->
<form action="doLogin.jsp" method="post">
<p>
<input type="text" name="userName" placeholder="请输入用户名">
</p>
<p>
<input type="password" name="userPwd" placeholder="请输入密码">
</p>
<p>
<input type="number" name="userAge" placeholder="请输入年龄">
</p>
<p>
<input type="checkbox" name="habit" value="唱歌">唱歌
<input type="checkbox" name="habit" value="小提琴">小提琴
<input type="checkbox" name="habit" value="乒乓球">乒乓球
<input type="checkbox" name="habit" value="画画">画画
</p>
<p>
<button>登录</button>
</p>
<script>
$("form").validate({
// 字段验证规则
rules:{
userName:{
required: true,//必须填写字段
rangelength:[5,10],//必须填写5-10
},
userPwd:{
required: true,//必须填写字段
rangelength:[5,10],//必须填写5-10
}
},
// 更改原本的错误提示语句
messages:{
userPwd:{
required:"密码为空",
}
}
})
</script>
</form>
</body>
</html>