Java项目培训热身阶段

  • 准备环境
  • 初尝试HTML5/CSS
  • 标签
  • 脚本
  • 样式
  • 使用servlet实现请求和页面跳转
  • 前端数据向后端传送


准备环境


jdk11及以后 jre(在配置好java环境变量后，通过cmd管理员启动，用指令生成<jlink.exe --module-path jmods --add-modules java.desktop --output jre>) 编程环境 IDEA

初尝试HTML5/CSS

脚本

(内容标记为javascript)

脚本进行登录或注册等表单输入验证
用页面<input id=“id”>中的id进行输入的传值

: var name=document.getElementById(“id”);

用 if(){}else{} 配合 正则表达式来判断控制用户输入数据。
后期学习将可以完成更多控制，或者动态效果，如模块切换等。

样式

写在<head>标签中

常用属性：


选择器

标签选择器 ID选择器

  ID{style}

类选择器

  通过标签的class属性引入，可以在标签中多重叠加使用，当重复样式时会覆盖 


<head>
	<style>
		.className1{
		}
		.className2{
		}
	</style>
</head>
<body>
	<button calss="className1  className2></button>
</body>


选择器的优先级：（在有相同属性样式时，优先级高的选择器的样式可以覆盖优先级低的）

id选择器>类选择器>标签选择器 想要改变优先级可以在样式属性后加 “!important”


使用servlet实现请求和页面跳转

需要添加tomcat依赖
在idea中创建servlet时在 @javax.servlet.annotation.WebServlet() 手动添加urlPatterns = {"/name"}
一般无论请求是get还是post都在doPost中调用this.doGet()然后在doGet方法中做处理。
一般流程：

  1. 处理中文(在类方法中必须写在第一句，必须与页面的编码一致)
  2. 获取页面提交的数据，均为String类型
    (1). 调用后台处理，根据处理结果跳转页面
  3. 处理结果的显示
    (1). 返回显示处理结果
    跳转方式：
    response.sendRedirect(“url”)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    String name=request.getParameter("u-name");//接收前端数据
    String pwd=request.getParameter("pwd");//接收前端数据
    if(name.equals("administrator")){
        response.sendRedirect("admin.html");//web页面
    }else{
        response.sendRedirect("other.html");//web页面
    }
    }

判断前端获取用户名，如果为administrator则跳转到admin.html页面。

前端数据向后端传送


使用jQuery时可以使用选择器来获取想要的控件的内容

标签选择器

jQuery(“div”) 获取所有的标签为div的控件。

id选择器

jQuery("#idname") 获取页面中所有id为idname的控件。

class选择器

jQuery(".classname") 获取页面中所有class属性包含classname的控件。


通过jQuery将前端的数据用json格式向后端传送


jQuery.post(url,data,function(rst){


//处理返回的数据


});


url：是请求的地址，可以是页面，地址等。


data：提交的数据，是JSON格式（{“属性名”：”值”，“属性名”：“值”}）。


function：回调函数，服务器响应后，处理返回结果，rst就是在servlet中返回的数据。


注意：有中文传送时要处理中文

response.setCharacterEncoding(“UTF-8”);

根据页面编码修改括号中的编码方式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>other</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>//通过cdn引入jQuery
</head>
<body>
test page
<button onclick="jp()">jp</button>
<br>
<input type="text" id="tel" name="tel">
</body>
<script>
   function jp() {
       var tel=jQuery("#tel").val();//通过id获取控件中的数据
       //使用jq中的post方法想testServlet发送请求
       //把数据t =tel提交
       //服务器响应的结果给rst，由函数进行下一步处理
       jQuery.post("testServlet",{"t":tel},function(rst){//以键值对的方式向后端传送
       });
   }
</script>
</html>

未完待续