jQuery

• 下载2个zip包，放电脑同一文件夹，任意位置

• 环境准备

  • eclipse web版
  • tomcat 8.5 win安装包
  • linux服务器

• eclipse 修改编码 UTF-8、

  • https://blog.csdn.net/xiaojingfirst/article/details/82762996

• servlet新建和使用

  • 新建java web项目
    • file->new->dynamic web project->qcby0206(允许自定义任意名字，建议和我一致)
    • 新建serlvet
      • src文件夹 右击 -> New -> serlvet
        • package: java0206
        • Class Name: HelloWorld
      • 需要依赖servlet-api.jar包
        • apache-tomcat-8.5.51-windows-x64\apache-tomcat-8.5.51\lib\servlet-api.jar
  • 引入第三方依赖jar包
    • 引入项目内部jar包
      • 拷贝到项目WebContent/WEB-INF/lib 文件夹中
    • 引入项目外部jar包
      • 直接引用磁盘的jar包：右击项目 -》 build path -> confi~ -> Libraries -> add External Jar-> 本地磁盘选择jar包
    • 后续继续学习 === 》 maven 专门用于管理java web项目中的所有第三方依赖的工具 pom

• 添加Tomcat配置

  • Server展示
    • Windows菜单 - Show - Servers/Other - Ser -> 选中 Open
  • Servers -> New -> Apache文件夹-》 tomcat 8.5 servers- > next-> 选择本地tomcat-》 finished
  • 添加项目到tomcat
    • add 、remove

• 运行访问

  • 添加项目到tomcat

  • 添加index.jsp首页

    • 右击 WebContent -》 new - > jsp File -> index ->finished
    • 修改bodyhello world

  • 启动tomcat

    • 右击，Start

  • 如何访问到默认的首页

  • http://localhost:8080/qcby0206/

    • http://localhost -》 代表本机 localhost/127.0.0.1

    • 8080 tomcat的端口 port 端口号 同一时刻 每一个程序启动都有唯一的端口号

      由于windows安装Tomcat、Oracle、MySQL等软件时经常遇到端口被占用的情况，而强行关闭占用程序往往治标不治本，此时更改软件程序默认端口不失为一个好方法。
      以下是Windows的端口号设置范围
      （推荐使用5001-65535之间的端口，记得绕开8080这种常用的）：
      
      （1）0-1023： BSD保留端口，也叫系统端口，这些端口只有系统特许的进程才能使用；
      
      （2）1024~5000：一般为服务器端口，不建议使用；
      
      （3）5001~65535：绕开常用端口，随便使用，建议选用5001-9999之间的。
      

    • /qcby0206 项目的访问路径，默认是项目名字

    • 修改

      • 双击tomcat，进入Modules视图，选中路径，点击edit编辑，保存，启动

  • 遇到端口冲突解决的一种方式

    netstat -ano | findstr 8080  # 查找占用8080端口的进程  === pid  7244
    taskkill -pid 7244 -f  # 杀掉对应进程，也可通过任务管理器结束任务
    

• 服务器部署

  • linux

    • uname -a

      • ubuntu

        • apt

            Linux iZ2zebgo0r7mr2e0k4nlobZ 4.4.0-184-generic #214-Ubuntu SMP Thu Jun 4 10:14:11 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
        

      • centeros

        • yum

          Linux VM-0-10-centos 3.10.0-1127.19.1.el7.x86_64 #1 SMP Tue Aug 25 17:23:54 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
          

    • 。。。

  • java环境变量配置

    • 无安装包，先官网下载上传
    • 查看环境是否存在，javac
    • 修改配文件 vi /etc/profile

        export JAVA_HOME=/opt/jdk1.8.0_231
        export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/ 
        export PATH=$PATH:$JAVA_HOME/bin
    

    • source /etc/profile,使配置文件生效
    • javac

  • linux tomcat启动和测试

    • 第一步测试，先测试服务器本地能否访问成功
      • wget http://localhost/
    • 内部防火墙 — 服务器系统内部的
    • 安全组 – 云平台设置

  • java web项目通过eclipse导出war包

    • 右击项目 -》 export->war->选择路径-》完成 qcby0206.war
    • 上传到 apache-tomcat-8.5.51/webapps 目录
    • 启动tomcat apache-tomcat-8.5.51/bin => ./startup.sh
    • 查看日志：apache-tomcat-8.5.51/logs => tail -f catalina.out

• eclipse导入已有项目

  • File->import->选择 Existing Project into Workspace->Browse 从本地磁盘选择项目 -》 finised

• tomcat讲解

  • conf 配文件

    • 修改配置文件使用

    • server.xml 一般修改端口号

           69     <Connector port="8080" protocol="HTTP/1.1"
           70                connectionTimeout="20000"
           71                redirectPort="8443" />
      
      

      修改成

           69     <Connector port="8081" protocol="HTTP/1.1"
           70                connectionTimeout="20000"
           71               
      

    • 重启动tomcat

      • ./shutdown.sh 关闭
      • ./startup.sh 启动

  • bin 可执行脚本

    • 启动关闭使用
      • ./startup.sh
      • ./shutdown.sh

  • logs 目录

    • 查看日志使用 tail -f catalina.out

  • webapps 项目部署文件夹

    • 部署项目使用

  • lib

    • 存放第三方依赖包

• 流程

  • 研发：新建了Servlet项目，写了个helloworld
  • 搭建服务器环境：有一台新的服务器，配置java，配置tomcat，调整安全组
  • 测试+上线：吧Servlet项目打war包部署到服务器的tomcat，访问成功

  =========================================================

• JQ

• https://www.runoob.com/jquery/event-one.html

  • 安装

    • 1、本地文件

      • 引入

        	<script src="js/jquery.self.js"></script>
        

    • 2、cdn - 线上的文件

      <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
      

  • 选择器

    • id 选择器

      	var name1 = document.getElementById("name1");	
      	var name1Q = $('#name1');
      
      	console.info("name1:"+name1.value);
      	console.info("name1Q:"+name1Q.val());
      

    • .class 选择器

      	 	学号：<input type="text" class="numberCss" name="number" id="number" value="007" /> <br/>
      	 	
      	 		//  Jq   通过class选择器  -  ， + class名字 获取对象
      	var numberQCss = $('.numberCss');
      	
      	
      		console.info("numberQCss:"+numberQCss.val());
      

    • 利用其他方式

  • 文档就绪执行

    $(function(){
     
       // 开始写 jQuery 代码...
     
    });
    

  • 捕获

    三个简单实用的用于 DOM 操作的 jQuery 方法：

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容（包括 HTML 标记）
    • val() - 设置或返回表单字段的值

  • 设置

    • 值
    • 属性attr

  • 添加新html内容：

    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

  • 删除元素

    • remove() - 删除被选元素（及其子元素）
    • empty() - 从被选元素中删除子元素

  • AJAx

    AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

    简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

    $.ajax({
    	        type: "post", //请求方式  post/get
    	        url: "ArticleServlet",    //传输地址的URL
    	        data: {
    	        	"id":id,
    	        	"operateType":"2",
    	        	}, //data代表我们的数据  key -value类型的数据
    	        cache: false, 
    	        async : false, //success和error代表是否返回成功，既后台给前台传输数据是否成功
    	        success: function (data)
    	        {	
                    // 执行成功
    	        },
    	        error:function (XMLHttpRequest, textStatus, errorThrown) { 
    	            // 执行失败
    	        }
    	     });