黑马程序员技术交流社区

标题: 【成都校区】tomcat/servlet/js/bootstrap/html-form/xml [打印本页]

作者: zeroHe 时间: 2018-12-20 12:37
标题: 【成都校区】tomcat/servlet/js/bootstrap/html-form/xml
【tomcat && servlet】
web相关概念回顾
cs/bs
静态资源/动态资源
网络通信三要素：IP、端口、传输协议

服务器、服务器软件、web服务器软件

weblogic:oracle公司,大型 javaEE服务器支持所有的javaEE规范收费
websphere:IBM公司,大型 javaEE服务器支持所有的javaEE规范收费
jboss:jboss公司,大型 javaEE服务器支持所有的javaEE规范收费
tomcat:apache基金组织，小型 java EE服务器支持少量的java EE规范，免费

tomcat目录结构
bin 可执行文件
conf 配置文件
lib 依赖jar包
logs 日志文件
temp 临时文件
webapps 存放web项目
work 存放运行时数据

下载 http://tomcat.apache.org/
安装：解压压缩包
卸载：删除目录
启动: bin/startup.bat
【需要在系统环境变量中配置JAVA_HOME属性，属性值为JDK的安装目录】
关闭：bin/shutdown.bat ctrl+c

找到 8080端口号对应的进程
netstat -ano
查看 8080 端口对应的 pid
打开 window 资源管理器，点击进程，根据 pid 结束对应的进程

conf/server.xml
line 69 port="8080" 修改为 port="8888"
redirectPort="8843" 修改为 redirectPort="8845"

一般将tomcat的端口号修改为80,对应的是http协议的默认端口

tomcat部署项目
01 直接将项目放到webapps文件夹下
      /hello : 项目的访问目录虚拟目录
      简化部署：将项目打包成一个war包，再将war包放到webapps中

02 conf/server.xml
      最后一行 host标签中，定义 <Context docBase="d:\hello" path="/hhe" />
      docBase:项目存放的路径 path：虚拟目录

03 conf/Catalina/localhost 【推荐、热部署】
      新建任意名称的xml ，内容：<Context docBase="d:\hello"/>
      虚拟目录为xml的文件名称

java动态项目的目录结构
项目名称
  -- WEB-INFO
   -- web.xml web项目的核心配置文件
   -- classes 存放字节码文件的目录
   -- lib  存放依赖的jar包

idea 集成 tomcat
run/edit configuration defaults tomcat-server local configure
指定tomcat的安装目录
顺便可以指定打开的浏览器
【热部署】
   on update action:update resources
   on frame deactication:update resources

   vm options: -Dfile.encoding=utf-8【如果启动服务器出现乱码问题】

【servlet】server applet:运行在服务器上的小程序
   一个接口，定义了java类被浏览器访问到的规则

快速入门
创建java ee项目
写一个类，实现servlet接口，复写接口的方法
web.xml配置servlet

【servlet执行原理】

http://localhost:8080/servlet/servlet01

协议 ip 端口 /servlet /servlet01

tomcat 项目 url-pattern

url-pattern -> servlet-name -> servlet-class

【servlet生命周期】
init 初始化方法（servlet被创建时，执行一次）
      servlet什么时候被创建
         默认情况下（load-on-startup属性数值为-1），servlet第一次被访问时，servlet被创建
         如果load-on-startup属性数值为0或整数，servlet将在服务器启动时被创建
         load-on-startup 属性在 servlet 标签中配置

【servlet是单例的，多个线程同时访问时，可能存在线程安全问题】
【尽量不要再servlet中定义成员变量】

service 提供服务的方法（每次servlet被访问时，被执行一次）
destory 销毁方法（服务器正常关闭时，执行一次）

【Servlet 3.0】支持注解（JDK1.6之后）

创建java ee项目，选择servlet 3.0以上，可以不创建web.xml
写一个类，实现servlet接口，复写接口的方法
类上使用 @WebServlet 注解:@WebServlet("访问路径")

【idea与tomcat的集成】
01 idea会为每一个tomcat部署的项目单独建立一份配置文件
      Using CATALINA_BASE:
      "C:\Users\Administrator\.IntelliJIdea2017.3\system\tomcat\_HeGuanLin"
02 idea工作空间 tomcat部署的web项目
      out/artifacts 下存放的是：tomcat部署的web项目
      tomcat部署的web项目对应的是工作空间web文件夹下的资源
      web-info 下的资源不能被浏览器直接访问

idea 新建 java-web 项目
new 模块，java enterprise,java ee7,勾选 web application,version 3.0/3.1
勾选 create web.xml

【xml】可扩展标记语言
存储数据、配置文件、在网络中传输

xml vs html
01 xml标签都是自定义的，html标签是预定义的
02 xml语法严格，html语法松散
03 xml是存储数据的，html是展示数据

xml基本语法
01 文件名后缀：.xml
02 xml第一行必须为文档声明
03 xml文档中有且仅有一个根标签
04 属性值，需要使用单引号或者双引号引起来
05 标签必须正确的闭合
06 xml标签名称区分大小写【】

DTD 简单的约束技术 (内部DTD 外部DTD)
01 外部DTD引入：
      01 本地 <! DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
      02 网络 <! DOCTYPE 根标签名 public "dtd文件名字" "dtd文件的位置URL">

Schema 复杂的约束技术

xml 解析（读取）/写入

dom:一次加载进内存，可以对文档进行CRUD
sax:逐行读取，基于时间驱动，只能读取，不能删除、修改、增加

xml常见的解析器:jaxp\dom4j\jsoup\pull

jsoup

【bootstrap】
入门：
01 meta 引入三种信息：字符编码、兼容IE、确保适当的绘制和触屏缩放
02 【依次引入】css jq bs

【栅格系统】
container 用于固定宽度并支持响应式布局的容器
container-fluid 用于 100% 宽度，占据全部视口（viewport）的容器

01 container/container-fluid
      02 row
         03 col-xx-* (xs sm md lg)
            col-xx-offset-*
一行中格子数目超过12，超过部分自动换行

css全局样式
按钮 btn btn-default ..
图片 img-responsive(响应式布局)
   img-rounded img-circle img-thumbnail
表格 table ...

工具
导航栏、分页条、轮播图

【js-03】
事件监听机制
事件源+事件+监听器+注册监听

常见的事件：
event.button
event.keyCode

onclick \ ondblclick
onblur \ onfocus 失去焦点、获得焦点
onload 一个页面或一副图像加载

onmousedown
onmouseup
onmousemove
onmouseover
onmouseout

onkeydown
onkeyup
onkeypress

onchange 【例如下拉列表之三级联动】
onselect 文本域被选中

onsubmit
onreset

【form表单的验证】:为form表单的onclick属性注册函数
01 var form = document.getElementById("form");
form.onsubmit = function () { return true/false; }
02 直接在html-form标签中，使用：
<form action="#" method="post" id="form">

【js-02】
dom
01 get id tag class name
02 createElement

Element
01 setAttribute
02 removeAttribute

Node
01 appendChild
02 removeChild
03 replaceChild
parentNode

【window三种弹窗】

var name = window.prompt("请输入用户名：");
var b = window.confirm("你叫" + name + "?");
if(b){
      window.alert("原来你真的叫" + name);
}else{
      window.alert("你骗我");
}

【window定时器】
var t2 = window.setInterval("fn();",1000);//每隔多少时间执行一次
window.clearInterval(t2);

var t1= window.setTimeout("fun();",1000);//过多少时间执行该函数
window.clearTimeout(t1);

【历史栏】

window.history.forward(); 等价于 window.history.go(1);

window.history.back(); 等价于 window.history.go(-1);

window.history.length; 记录的是历史栏的个数

【地址栏】

window.location.reload(true);

window.location.href = "http://www.baidu.com";

【window打开窗口、关闭窗口】
var newWindow = window.open("http://www.baidu.com");
newWindow.close();

【通过a标签删除当前行】
a.setAttribute("onclick","deleteTr(this);");

function deleteTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}

【元素样式定义】

var div1 = document.getElementById("div1");
【style每个标签都有的属性】
div1.style.border = "1px solid red";
div1.style.fontSize = "30px";

【预先定义样式，然后通过className指定class属性数值】
div1.className = "cls1 cls2";

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2