2020-12-25

javaweb复习


<!--外部引入

        注意:script必须成对出现

    -->

<script src="js/hj.js"></script>

<!--不用显示定义type,也默认就是javaScript-->

<script type="text/javascript"></script>


Tomcat配置

1.omcat配置

1.可以配置主机名称,可以配置端口号

2.Tomcat核心配置文件在conf文件里面的server.xml里面

  2.IDEA中配置Tomcat

第一步:点击

第二歩:点击 + 选择Tomcat

第三部 点击

第四歩 解决报错  就一个/ = localhost:8080 加别的名字 就在8080后面加上你配置的名字

高难度面试题

请你谈谈网站是如何进行访问的?

1.输入一个域名:回车

2.检查本机的:C:\Windows\System32\drivers\etc\hosts配置文件下有没有这个域名映射

1.有:直接返回对应ip地址,这个地址中,有我们需要访问的web程序,可以直接访问

2.没有:去DNS服务器找,找到到返回,找不到返回找不到

-

Http

1.http请求

客户端--发请求--(request)--服务器

百度:

RequestURL:https://www.baidu.com/ 请求地址

RequestMethod:GET    get方法post方法

StatusCode:200OK(fromprefetchcache)状态码200

RemoteAddress:180.101.49.12:443 

1、请求行

请求行中的请求方式:GET

请求方式: Get ,Post

get:请求能够携带参数比较少,大小有限制,会在浏览器地址栏展示数据,不安全,但高效

post:请求能够携带参数没有限制,大小没有限制,不会在浏览器地址栏展示数据,安全,但不高 效

2、消息头

2.http响应

服务器--响应--客户端

百度:

Cache-Control:private

Content-Encoding:gzip

Content-Type:text/html;charset=utf-8

Date:Mon,18May202007:50:34GMT

Expires:Mon,18May202007:50:30GMT

1.响应体

2.响应状态吗

200:请求响应成功

3xx:请求重定向

重定向:你重新到我给你新位置去

4xx:找不到资源 404

资源不存在:

5xx:服务器代码错误

#####  两个时代

http1.0:客户端可以与web服务器连接后,只能获得一个web资源,断开链接,

http2.0:客户端可以与web服务器连接后,只能获得多个web资源

常见面试题

当你的浏览器中地址栏输入地址并回车的一瞬间到页面能够展示数据回来,经历了什么,

1.Servlet

Servlet就是sun公司开发动态web的一门技术

sun在这些APl中提供了一个接口,Servlet,如果你想开发一个Servlet程序,只需要完成两个步骤

1.编写一个类,实现Servlet接口

2.把开发好的JAVA类部署到web服务器中,

1.2 HelloServlet

1.1构建一个普通项目

1.2创建一个类,extends 继承 HttpServlet

1.3重写接口中的 doget dopost 方法

1.4编写Servlet的映射文件 web.xml

1.5配置Tomcat测试即可

1.4Mapping问题

1.一个Servlet可以指定一个映射路径

<!--Servlet请求路径-->

<servlet-mapping>

<servlet-name>hello</servlet-name>

<url-pattern>/hello</url-pattern>

</servlet-mapping>

2.一个Servlet可以指定多个映射路径

<servlet-mapping>

<servlet-name>hello</servlet-name>

<url-pattern>/hello1</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>hello</servlet-name>

<url-pattern>/hello2</url-pattern>

</servlet-mapping>

3.一个Sevlet可以指定通用映射路径 /*=任何路径

<servlet-mapping>

<servlet-name>hello</servlet-name>

<url-pattern>/hello/*</url-pattern>

</servlet-mapping>

4.指定一些后缀或者前缀等等.

<!--可以自定义后缀名

注意 *. 前面不能加路径  /=只要是*.后面的内容

-->

<servlet-mapping>

<servlet-name>hello</servlet-name>

<url-pattern>*.xhf</url-pattern>

</servlet-mapping>

5.优先级问题

指定了固有的映射路径优先级最高,如果找不到就会走默认的

##### ServletContext

1.调用this.getServletContext 使用方法

2.Servletcontext作用:共享数据 其他的Servlet都能获取这个数据

2.获取初始参数

1.servletContext.getInitParameter

3.请求转发

1.request.getRequestDispatcher().forward();

4.读取资源文件

1.在resources下建一个porperties配置文件

思路:需要一个文件流去读取文件 然后打印即可

@Override

protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{

//获取io流路径

InputStreamresourceAsStream=this.getServletContext().getResourceAsStream("/WEB-INF/classes/db.properties");

//创建properties对象

Propertiesproperties=newProperties();

properties.load(resourceAsStream);//读取路径下的配置文件

Stringusername=properties.getProperty("username");

Stringpassword=properties.getProperty("password");

//输出到页面

resp.getWriter().print(username+":"+password);

   }

HttpServletResponse

1.web服务器接受到客户端的http请求,针对这个请求,分别创建一个代表请求的httpServletRequest

对象,代表响应的HttpServletResponse对象

2.如果要获取客户端请求过来的参数:找httpServletRequest

如果要给客户端响应一些信息:找httpServletResponse

1、简单分类

负责向浏览器发送数据的方法

servletOutputstreamgetOutputstream()throwsIOException;

Printwritergetwriter()throwsIOException;

负责向浏览器发送响应头的方法

voidsetCharacterEncoding(Stringvar1);

voidsetContentLength(intvar1);

voidsetContentLengthLong(longvar1);

voidsetContentType(Stringvar1);

voidsetDateHeader(Stringvarl,longvar2)

voidaddDateHeader(Stringvar1,longvar2)

voidsetHeader(Stringvar1,Stringvar2);

voidaddHeader(Stringvar1,Stringvar2);

voidsetIntHeader(Stringvar1,intvar2);

voidaddIntHeader(Stringvarl,intvar2);

2、下载文件

1.获取下载文件的路径

2.下载中的文件名称

3.设置想办法让浏览器能够支持下载我们需要的东西

4.获取文件下载流

5.创建缓冲区

6.获取OutputStream对象

7.FileOutputStream流写入到bufer缓冲区

8.使用OutputStream将缓冲区中的数据输出到客户端!

@Override

protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{

// 1. 要获取下载文件的路径

StringrealPath="F:\\班级管理\\西开【19525】\\2、代码\\JavaWeb\\javaweb-02-servlet\\response\\target\\classes\\秦疆.png";

System.out.println("下载文件的路径:"+realPath);

// 2. 下载的文件名是啥?

StringfileName=realPath.substring(realPath.lastIndexOf("\\")+1);

// 3. 设置想办法让浏览器能够支持(Content-Disposition)下载我们需要的东西,中文文件名URLEncoder.encode编码,否则有可能乱码

resp.setHeader("Content-Disposition","attachment;filename="+URLEncoder.encode(fileName,"UTF-8"));

// 4. 获取下载文件的输入流

FileInputStreamin=newFileInputStream(realPath);

// 5. 创建缓冲区

intlen=0;

byte[]buffer=newbyte[1024];

// 6. 获取OutputStream对象

ServletOutputStreamout=resp.getOutputStream();

// 7. 将FileOutputStream流写入到buffer缓冲区,使用OutputStream将缓冲区中的数据输出到客户端!

while((len=in.read(buffer))>0){

out.write(buffer,0,len);

   }

in.close();

out.close();

}

4、实现重定向


使用场景:用户登录

方法:Response.sendRedirect("重定向路径")

面试题:请你聊聊重定向和转发的区别?

1他们的相同点:页面都会实现跳转

2.不同点: request 请求转发的时候,浏览器地址栏不会发生改变 状态栏是 307

response 重定向的时候,浏览器地址栏会发生改变 状态栏是302

重定向到jsp页面

index.jsp

            <html>

<body>

    <h2>Hel1o World!</h2>


    《%--这里超交的路径,需要寻找到项目的路径--%>

    <%--${pageContext.request,contextPath}代表当前的项目--%>

    <formaction="${pageContext. request.contextPath}/login"method="get">

        用户名:<inputtype="text"name="username"><br>

        密码:<inputtype="password"name="password"><br>

        <inputtype="submit">

    </form>

</body>

RequestTest.java

    publicclassRequestTestextendsHttpServlet{

@Override

protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{

//处理方求

Stringusername=req.getParameter(s:"username");

Stringpasswordrea.getParameter(s:"password");

System.out.println(username+":"+password);

resp.sendRedirect(s:"/r/success.jsp");

HttpServletRequest

httpServletRequest代表客户端请求,用户通过http协议访问服务器,http请求中的所有信息会被封装到httpServletRequest,通过这个httpservletrequest的方法,获取客户端所有信息

1、获取参数

request.getParamter(String s) String 获取单条数据

request.getParmaterValues(String s)String[] 获取多条数据

Cookie、Session

会话:用户打开一个浏览器。点击了很多链接,访问多个web资源,关闭浏览器,这个过程可以称之为会话

一个网站。怎么证明你访问过

客户端 服务器

1.服务器给客户端一个 信件,客户端下次访问服务端带上信件就可以了,cookie

2.服务器登记你来过了,下次你来过的时候我来匹配你:Seesion

保存会话的两种技术

cookie

客户端技术(响应,请求)

session

服务器技术,利用这个技术,可以保存用户的会话信息,我们可以把会话信息或者数据放在Session中

举例:网站登录后,你下次不用在登录了,第二次访问就直接登录上去,

Cookie

1.从请求中拿到cookie信息

2.服务器响应给客户端cookie

3.cookie一些常用方法

Cookie[]cookies=req.getCookies();//获得Cookie

cookie.getName();//获得cookie中的key

cookie.getValue();//获得cookie中的vlaue

newCookie("lastLoginTime",System.currentTimeMillis()+"");//新建一个cookie

cookie.setMaxAge(24*60*60);//设置cookie的有效期

resp.addCookie(cookie);//响应给客户端一个cookie

4.Cookie细节

一个cookie只能保存一个信息

一个web站点可以给浏览器发送多个cookie,最多存放20个cookie

Cookie大小有限制4kb

300个cookie浏览器上限

5.删除cookie

不设置有效期,关闭浏览器,自动失效

设置有效期时间为0

编码 URLEncoder.encode("加油","utf-8")

解码:URLDecoder.decode(cookie.getValue(),"UTF-8")

Session(重点)

什么是session

服务器会给每个用户(浏览器)创建一个Session对象

一个Session独占一个浏览器,只要浏览器没有关闭,这个Session就存在

用户登录之后,整个网站都可以访问,保存用户信息,保存购物车信息

Session和cookie的区别

cookie是把用户的数据写给用户的浏览器,浏览器保存(可以保存多个)

session把用户的数据写到用户独占的session中,服务器端保存(保存重要信息,减少服务器资源的浪费)

Session对象由服务端创建

使用场景:

保存一个登录用户的信息;

购物车信息;

在整个网站中经常会使用的数据,我们将它保存在Session中;

使用session

@Override

protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{


//解决乱码问题

req.setCharacterEncoding("UTF-8");

resp.setCharacterEncoding("UTF-8");

resp.setContentType("text/html;charset=utf-8");


//得到Session

HttpSessionsession=req.getSession();

//给Session中存东西

session.setAttribute("name",newPerson("秦疆",1));

//获取Session的ID

StringsessionId=session.getId();

//判断Session是不是新创建

if(session.isNew()){

resp.getWriter().write("session创建成功,ID:"+sessionId);

}else{

resp.getWriter().write("session以及在服务器中存在了,ID:"+sessionId);

       }

//Session创建的时候做了什么事情;

//        Cookie cookie = new Cookie("JSESSIONID",sessionId);

//        resp.addCookie(cookie);      

//得到Session

HttpSessionsession=req.getSession();

Personperson=(Person)session.getAttribute("name");

System.out.println(person.toString());

HttpSessionsession=req.getSession();

session.removeAttribute("name");

//手动注销Session

session.invalidate();


会话自动过期:web.xml配置

<!--设置Session默认的失效时间-->

<session-config>

<!--15分钟后Session自动失效,以分钟为单位-->

<session-timeout>15</session-timeout>

</session-config>

JSP

1、什么是JSP

java Servlet Pages:java服务端页面,也和Servlet一样,用于动态Web技术

特点:

写JSP就像在写HTML

区别:

HTML只给用户提供静态的数据

JSP页面中可以嵌入JAVA代码,为用户提供动态数据

2.JSP原理

思路:JSP到底是怎么执行的

代码层面没有任何问题

服务器内部工作

原理:

tomcat中有一个work目录:

IDEA中使用TOmcat的会在tomcat中生产一个work目录


发现页面转变成了Java程序!

浏览器向服务器发送请求,不管访问什么资源,其实都在访问Servlet

JSP最终会被转换成一个java类

JSP本质上就是个Sevlet

//初始化

publicvoid_jspInit() {


  }

//销毁

publicvoid_jspDestroy() {

  }

//JSPService

publicvoid_jspService(.HttpServletRequestrequest,HttpServletResponseresponse)

2.内置一些对象

finaljavax.servlet.jsp.PageContextpageContext;//页面上下文

javax.servlet.http.HttpSessionsession=null;//session

finaljavax.servlet.ServletContextapplication;//applicationContext

finaljavax.servlet.ServletConfigconfig;//config

javax.servlet.jsp.JspWriterout=null;//out

finaljava.lang.Objectpage=this;//page:当前

HttpServletRequestrequest//请求

HttpServletResponseresponse//响应

3.以上的这些个对象我们可以在JSP页面中直接使用!


在jsp页面中:

只要是java代码就会原封不动的输出

如果HTML代码,就会被转换为

out.write("<html>\r\n");

JSP声明

<%!

static{

System.out.println("Loading Servlet!");

}

privateintglobalVar=0;

publicvoidkuang(){

System.out.println("进入了方法Kuang!");

}

JSP声明,会被编译到,JSP生成java类的中,其他的,就会被生产到jspService方法中

JSP的注释,不会在客户端显示,HTML就会

JSP指令

<%@pageargs.... %>

<%@includefile=""%>

<%--@include会将两个页面合二为一--%>

<%@includefile="common/header.jsp"%>

<h1>网页主体</h1>

<%@includefile="common/footer.jsp"%>

<hr>

<%--jSP标签

jsp:include:拼接页面,本质还是三个

--%>

<jsp:includepage="/common/header.jsp"/>

<h1>网页主体</h1>

<jsp:includepage="/common/footer.jsp"/>

##### 9大内置对象

PageContext 存东西

Request 存东西

Response 响应消息

Session 存东西

Application 【ServletContext】存东西

Config 【ServletConifg】

out 输出

pageContext.setAttribute("name1","秦疆1号"); //保存的数据只在一个页面中有效

request.setAttribute("name2","秦疆2号"); //保存的数据只在一次请求中有效,请求转发会携带这个数据

session.setAttribute("name3","秦疆3号"); //保存的数据只在一次会话中有效,从打开浏览器到关闭浏览器

application.setAttribute("name4","秦疆4号");  //保存的数据只在服务器中有效,从打开服务器到关闭服务器

request:客户端向服务器发送请求,产生的数据,用户看完就没用了,比如:新闻,用户看完没用的!

session:客户端向服务器发送请求,产生的数据,用户用完一会还有用,比如:购物车;

application:客户端向服务器发送请求,产生的数据,一个用户用完了,其他用户还可能使用,比如:聊天数据;

jsp标签 jstl标签 el表达式

<!-- JSTL表达式的依赖 --><dependency>    <groupId>javax.servlet.jsp.jstl</groupId>    <artifactId>jstl-api</artifactId>    <version>1.2</version></dependency><!-- standard标签库 --><dependency>    <groupId>taglibs</groupId>    <artifactId>standard</artifactId>    <version>1.1.2</version></dependency>

EL表达式: ${ }

获取数据

执行运算

获取web开发的常用对象

JSTL标签库需要导入 taglib

JSTL标签库的使用就是为了弥补HTML标签的不足;它自定义许多标签,可以供我们使用,标签的功能和Java代码一样

MVC三层架构

什么是MVC

MVC:Model view Controller 模型 视图 控制器

架构:没有什么是加一层解决不了的!

原理图

Model:

业务处理:Service 

数据持久层:CRUD Dao层 操作数据库

View (JSP)

展示数据 jsp页面

提供链接发起Servlet请求(a form 。。。)

Controller (Servlet)

接受用户请求:

交给业务层处理 dao 和service

控制视图跳转

Filter(重点 过滤器)

比如一些安全框架,技术的底层就是用Filter来实现

Filter:过滤器,用来过滤网站的数据:

处理中文乱码

判断登录验证


Filter开发步骤

1.导包  JAVAx.servlet 导入这个包

2.编写过滤器

3.实现Filter接口,重写对应的方法即可

```java

publicclassCharacterEncodingFilterimplementsFilter{


//初始化:web服务器启动,就以及初始化了,随时等待过滤对象出现!

publicvoidinit(FilterConfigfilterConfig)throwsServletException{

System.out.println("CharacterEncodingFilter初始化");

     }


//Chain : 链

/*

1. 过滤中的所有代码,在过滤特定请求的时候都会执行

2. 必须要让过滤器继续同行 因为可以有多个Filter 每个Filter过滤不同的问题

chain.doFilter(request,response);

*/

publicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=UTF-8");


System.out.println("CharacterEncodingFilter执行前....");

chain.doFilter(request,response);//让我们的请求继续走,如果不写,程序到这里就被拦截停止!

System.out.println("CharacterEncodingFilter执行后....");

     }


//销毁:web服务器关闭的时候,过滤器会销毁

publicvoiddestroy() {

System.out.println("CharacterEncodingFilter销毁");

     }

  }

4.在web.xml中配置 Filter

<filter>

<filter-name>CharacterEncodingFilter</filter-name>

<filter-class>com.kuang.filter.CharacterEncodingFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>CharacterEncodingFilter</filter-name>

<!--只要是/servlet的任何请求,会经过这个过滤器-->

<url-pattern>/servlet/*</url-pattern>

<!--<url-pattern>/*</url-pattern>-->

<!-- 别偷懒写个 /* -->

</filter-mapping>

### 监听器

实现一个监听器的接口;(有n种监听器)

1.编写一个监听器

实现的接口


//统计网站在线人数 : 统计session

publicclassOnlineCountListenerimplementsHttpSessionListener{

//创建session监听: 看你的一举一动

//一旦创建Session就会触发一次这个事件!

publicvoidsessionCreated(HttpSessionEventse) {

ServletContextctx=se.getSession().getServletContext();

System.out.println(se.getSession().getId());

IntegeronlineCount=(Integer)ctx.getAttribute("OnlineCount");

if(onlineCount==null){

onlineCount=newInteger(1);

}else{

intcount=onlineCount.intValue();

onlineCount=newInteger(count+1);

       }

ctx.setAttribute("OnlineCount",onlineCount);

   }

//销毁session监听

//一旦销毁Session就会触发一次这个事件!

publicvoidsessionDestroyed(HttpSessionEventse) {

ServletContextctx=se.getSession().getServletContext();

IntegeronlineCount=(Integer)ctx.getAttribute("OnlineCount");

if(onlineCount==null){

onlineCount=newInteger(0);

}else{

intcount=onlineCount.intValue();

onlineCount=newInteger(count-1);

       }

ctx.setAttribute("OnlineCount",onlineCount);

   }

/*

Session销毁:

1. 手动销毁  getSession().invalidate();

2. 自动销毁

*/

}

2.在web.xml中注册监听器

<listener>

<listener-class>com.kuang.listener.OnlineCountListener</listener-class>

</listener>

JDBC

什么是JDBC

JDBC:就是java链接数据库

需要jar包的支持:

java.sql

javax.sql

mysql.conneter.java...连接驱动(必须导入)

IDEA中连接数据库:

打开Datasouse 可以百度


JDBC固定步骤:

1.加载驱动

2.链接数据库

3.向数据库发送sql的对象Stetemnt

4.编写sql

5.执行sql

6.关闭链接

//配置信息

//useUnicode=true&characterEncoding=utf-8 解决中文乱码

Stringurl="jdbc:mysql://localhost:3306/jdbc?useUnicode=true&characterEncoding=utf-8";

Stringusername="root";

Stringpassword="123456";

//1.加载驱动

Class.forName("com.mysql.jdbc.Driver");

//2.连接数据库,代表数据库

Connectionconnection=DriverManager.getConnection(url,username,password);

//3.编写SQL

Stringsql="insert into  users(id, name, password, email, birthday) values (?,?,?,?,?);";

//4.预编译

PreparedStatementpreparedStatement=connection.prepareStatement(sql);

preparedStatement.setInt(1,2);//给第一个占位符? 的值赋值为1;

preparedStatement.setString(2,"狂神说Java");//给第二个占位符? 的值赋值为狂神说Java;

preparedStatement.setString(3,"123456");//给第三个占位符? 的值赋值为123456;

preparedStatement.setString(4,"24736743@qq.com");//给第四个占位符? 的值赋值为1;

preparedStatement.setDate(5,newDate(newjava.util.Date().getTime()));//给第五个占位符? 的值赋值为new Date(new java.util.Date().getTime());

//5.执行SQL

inti=preparedStatement.executeUpdate();

if(i>0){

System.out.println("插入成功@");

       }

//6.关闭连接,释放资源(一定要做) 先开后关

preparedStatement.close();

connection.close();

#### JDBC事务

要么都成功,要么都失败

案例:转账,A--B 转100 A-100 B+100 如果不开启事务,服务器如果崩了,那么钱会减少而且到不了B账户。那么现在就需要开启事务来执行,事务一旦开启,只能提交才能,进行代码,而且如果中途发生错误,可以回滚 到之前的状态,防止以上问题

ACID原则:保证数据安全

setAutoCommit:开启事务

commit:提交事物

roliBack:回滚事物

JavaScript

什么是JavaScript

javaScript是一门世界上最流行的语言

一个合格的后端人员,必须精通javaScript

2.1快速编写一个javaScript

2.1内部标签

<script>

    //....

<script>

2.2外部标签

      <!--外部引入

注意:script必须成对出现

-->

<scriptsrc="js/hj.js"></script>

<!--不用显示定义type,也默认就是javaScript-->

<scripttype="text/javascript"></script>

浏览器调试

2、数据类型

数值,文本,图形,音频,视频

var 变量

number js中不区分 小数和整数, 是个数字类型

字符串 'abc'

逻辑符 && 两个都为真,结果为真 ll 一个为真,结果为真 !反着来

比较运算符 = 赋值 ==等于(类型不一样。值一样。也会判断true) === 绝对等于(类型一样,值一样,结果为       true)

这是一个JS的缺陷,坚持不要使用 == 比较

null 和 undefined

null 空

undefined 未定义

数组

和java中的数组不同,不需要相同类型的,任何类型都可以存储

如果取数组,数字下标,越界,就会报undefind

对象是大括号,数组是中括号

每个属性之间使用逗号隔开,最后一个属性不需要逗号

大小写转换

//注意,这里是方法,不是属性了* student.toUpperCase(); student.toLowerCase();

数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];//通过下标取值和赋值11、长度

arr.length1注意:假如给arr.lennth赋值,数组大小就会发生变化~,如果赋值过小,元素就会丢失

2、indexOf,通过元素获得下标索引

arr.indexOf(2)112字符串的"1"和数字 1 是不同的

3、slice()截取Array的一部分,返回的一个新数组,类似于String中substring4、push(),pop()尾部

push:压入到尾部pop:弹出尾部的一个元素125、unshift(),shift() 头部

unshift:压入到头部shift:弹出头部的一个元素126、排序sort()

(3)["B","C","A"]arr.sort()(3)["A","B","C"]1237、元素反转reverse()

(3)["A","B","C"]arr.reverse()(3)["C","B","A"]1238、concat()

注意:concat()并没有修改数组,只是会返回一个新的数组

9、连接符join打印拼接数组,使用特定的字符串连接

10、多维数组

数组:存储数据(如何存,如何取,方法都可以自己实现!)

对象

若干个键值对

var对象名={

    属性名:属性值,

    属性名:属性值,

    属性名:属性值

}

多个属性之间用逗号隔开,最后一个属性不加逗号!

2、使用一个不存在的对象属性,不会报错!undefined

3、动态的删减属性,通过delete删除对象的属性

4、动态的添加,直接给新的属性添加值即可

5、判断属性值是否在这个对象中!xxx in xxx

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

流程控制

if判断

varage=3;

    if(age>3){

    alert("haha")

}elseif(){

....

  }

Map和Set

ES6的新特性~

MapSet:无序不重复的集合

iterator

es6新特性

作业:使用iterator来遍历迭代我们Map,Set!遍历数组遍历Map遍历set

函数

绝对值函数

functionabs(){


}

一旦执行到return代表函数结束,返回结果!如果没有执行return,函数执行完也会返回结果,结果就是undefined

javaScript可以传任意个参数,也可以不传递参数~

方法

方法就是把函数放在对象的里面,对象只有两个东西:属性和方法

varfeng={

name:function(){

return1

  }

}

内部对象

Date


转换时间


JSON

json是什么

JSON是一种轻量级的数据交换格式

简介和清晰的层次结构使得JSON成为理想的数据交换语言

采用完全独立于编程语言的文本格式来存储和表示数据

在 JavaScript 语言中,一切都是对象。因此,任何JavaScript 支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。看看他的要求和语法格式:

对象表示为键值对,数据由逗号分隔

花括号保存对象

方括号保存数组

JSON键值对形式 是用来保存javaScript对象的一种方式,和javaScript对象的写法也大同小乙

键或者值。都用双引号包裹,键和值以:冒号分开  一组键值对以,号分开

JSON字符串和JS对象转换

JSON和JS对象的区别


JSON是JavaScript对象的字符串表示法,它使用文本表示一个,JS对象信息,本质是一个字符串

用Controller返回JSON数据

Jackson应该是目前比较好的json解析工具了

当然工具不止这一个,比如还有阿里巴巴的 fastjson 等等。

我们这里使用Jackson,使用它需要导入它的jar包;

<dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

<version>2.9.8</version>

</dependency>

需要两个新东西,一个是Spring的注解@RespnonseBody,一个是ObjectMapper对象,

@Controller

publicclassUserController{

@RequestMapping("/json1")

@ResponseBody

publicStringjson1()throwsJsonProcessingException{

//创建一个jackson的对象映射器,用来解析数据

ObjectMappermapper=newObjectMapper();

//创建一个对象

Useruser=newUser("秦疆1号",3,"男");

//将我们的对象解析成为json格式

Stringstr=mapper.writeValueAsString(user);

//由于@ResponseBody注解,这里会将str转成json格式返回;十分方便

returnstr;

  }

}

注意:浏览器可能会出现乱码情况,我们需要设置他的编码格式

通过@RequestMaping的produces属性来实现,修改下代码

//produces:指定响应体返回类型和编码

@RequestMapping(value="/json1",produces="application/json;charset=utf-8")

乱码统一解决

上一种方法比较麻烦,如果项目中有许多请求则每一个都要添加,可以通过Spring配置统一指定,这样就不用每次都去处理了!

我们可以在springmvc的配置文件上添加一段消息StringHttpMessageConverter转换配置!

<mvc:annotation-driven>

<mvc:message-convertersregister-defaults="true">

<beanclass="org.springframework.http.converter.StringHttpMessageConverter">

<constructor-argvalue="UTF-8"/>

</bean>

<beanclass="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">

<propertyname="objectMapper">

<beanclass="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">

<propertyname="failOnEmptyBeans"value="false"/>

</bean>

</property>

</bean>

</mvc:message-converters>

</mvc:annotation-driven>

返回json字符串统一解决

在类上直接使用 @RestController ,这样子,里面所有的方法都只会返回 json 字符串了,不用再每一个都添加@ResponseBody !我们在前后端分离开发中,一般都使用 @RestController ,十分便捷!

@RestController

publicclassUserController{

//produces:指定响应体返回类型和编码

@RequestMapping(value="/json1")

publicStringjson1()throwsJsonProcessingException{

//创建一个jackson的对象映射器,用来解析数据

ObjectMappermapper=newObjectMapper();

//创建一个对象

Useruser=newUser("秦疆1号",3,"男");

//将我们的对象解析成为json格式

Stringstr=mapper.writeValueAsString(user);

//由于@ResponseBody注解,这里会将str转成json格式返回;十分方便

returnstr;

  }

}

输出时间对象

增加一个新的方法

@RequestMapping("/json3")

public String json3() throws JsonProcessingException {

  ObjectMapper mapper = new ObjectMapper();

  //创建时间一个对象,java.util.Date

  Date date = new Date();

  //将我们的对象解析成为json格式

  String str = mapper.writeValueAsString(date);

  return str;

}

运行结果 :

默认日期格式会变成一个数字,是1970年1月1日到当前日期的毫秒数!

Jackson 默认是会把时间转成timestamps形式

解决方案:取消timestamps形式 , 自定义时间格式

@RequestMapping("/json4")

public String json4() throws JsonProcessingException {

  ObjectMapper mapper = new ObjectMapper();

  //不使用时间戳的方式

  mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);

  //自定义日期格式对象

  SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

  //指定日期格式

  mapper.setDateFormat(sdf);

  Date date = new Date();

  String str = mapper.writeValueAsString(date);

  return str;

}

运行结果 : 成功的输出了时间!

抽取为工具类

如果要经常使用的话,这样是比较麻烦的,我们可以将这些代码封装到一个工具类中;我们去编写下

package com.kuang.utils;

import com.fasterxml.jackson.core.JsonProcessingException;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.fasterxml.jackson.databind.SerializationFeature;

import java.text.SimpleDateFormat;

public class JsonUtils {


  public static String getJson(Object object) {

      return getJson(object,"yyyy-MM-dd HH:mm:ss");

  }

  public static String getJson(Object object,String dateFormat) {

      ObjectMapper mapper = new ObjectMapper();

      //不使用时间差的方式

      mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);

      //自定义日期格式对象

      SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);

      //指定日期格式

      mapper.setDateFormat(sdf);

      try {

          return mapper.writeValueAsString(object);

     } catch (JsonProcessingException e) {

          e.printStackTrace();

     }

      return null;

  }

}

我们使用工具类,代码就更加简洁了!

@RequestMapping("/json5")

public String json5() throws JsonProcessingException {

  Date date = new Date();

  String json = JsonUtils.getJson(date);

  return json;

}

AJAX

AJAX 是一种,无需重新加载整个页面的情况下,能够更新部分网页技术

AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的WEB应用程序技术

在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

就和国内百度的搜索框一样!

传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。

使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。

使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

利用AJAX可以做:

- 注册时,输入用户名自动检测用户是否已经存在

- 登录时,提示用户名密码错误

- 等等。。。

-

什么是异步?

异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。

jQuery.ajax

AJAX核心是XMLHttpRequest对象,(XHR),XHR为向服务器发送请求和解析服务器响应提供了接口,能够以异步的方式从服务器获取新的数据

JQuery 提供了多个与AJAX有关的方法

通过JQuery.AJAX方法,您能够使用HTTP Get和HTTp POst 从远程服务器上请求文本,HTML.XML或者JSON 同时你能够把这些外部数据直接载入网页的被元素中,

JQuery 不是生产者 而是搬运工

jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,方便调用!

jQuery.ajax(...)

部分参数:

url:请求地址

type:请求方式,GET、POST(1.9.0之后用method)

headers:请求头

data:要发送的数据

contentType:即将发送信息至服务器的内容编码类型(默认:"application/x-www-form-urlencoded; charset=UTF-8")

async:是否异步

timeout:设置请求超时时间(毫秒)

beforeSend:发送请求前执行的函数(全局)

complete:完成之后执行的回调函数(全局)

success:成功之后执行的回调函数(全局)

error:失败之后执行的回调函数(全局)

accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型

dataType:将服务器端返回的数据转换成指定类型

"xml":将服务器端返回的内容转换成xml格式

"text":将服务器端返回的内容转换成普通文本格式

"html":将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。

"script":尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式

"json":将服务器端返回的内容转换成相应的JavaScript对象

"jsonp":JSONP格式使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数

面向对象编程

原型对象javascript、java、c#------面向对象;但是javascript有些区别!

类:模板

对象:具体实例

BOM对象(重点)

BOM是浏览器介绍

javascript和l浏览器的关系

BOM:浏览器对象模型

1、wiindow 代表浏览器窗口


2、screen 代表屏幕尺寸


3、location 代表当前页面的URL信息


4、document 代表当前页面,HTML。DOM文档树


获取具体的文档树节点

document.getElementByID("AP")

获取Cookie

document.cookie

5、history代表浏览器的历史记录 不建议使用


DOM对象(重点)

DOM:文档对象类型

浏览器网页就是一个Dom树形结构!

更新:更新Dom节点

遍历Dom节点:得到Dom节点

删除:删除一个Dom节点

添加:添加一个新的节点

1.获得DOM节点


这是原生代码,之后我们尽量都使用jQuery();

2.更新DOM节点

先获取他的节点然后更新里面的内容


操作文本

操作css

3.删除DOM节点

步骤:使用父节点删除子节点 最后父节点删除自己


表单

表单是 form 标签

文本框  -- text

下拉框 -- select

单选框 -- radio

多选框 -- checkbox

隐藏域 -- hidden 可以用来隐藏提交某些 比如id

密码卡 -- paswoord

。。。。。

想要获得表单的提交信息就要使用dom对象

document.getElementById() 通过id选择器来获取

document.getElementsByTagName() 通过标签名来查找元素

document.getElementsByClassName(name)  通过类名来查找元素

提交表单。md5加密密码,表单优化

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<!--MD5加密工具类-->

<scriptsrc="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">


</script>

</head>

<body>

<!--表达绑定提交事件

            οnsubmit=绑定一个提交检测的函数,true,false

            将这个结果返回给表单,使用onsubmit接收

        -->

<formaction="https://www.baidu.com"method="post"onsubmit="return aaa()">

<p>

    <span>用户名:</span><input type="text" id = "username" name = "username"/>

    </p>

<p>

    <span>密码:</span><input type="password" id = "password" />

    </p>

<inputtype="hidden"id="md5-password"name="password">


<!--绑定事件onclick被点击-->

<buttontype="submit">提交</button>


</form>


<script>

    functionaaa(){

alert(1);

varusername=document.getElementById("username");

varpwd=document.getElementById("password");

varmd5pwd=document.getElementById("md5-password");

//pwd.value = md5(pwd,value);

md5pwd.value=mad5(pwd.value);

//可以校验判断表单内容,true就是通过提交,false就是阻止提交

returnfalse;


           }

</script>


</body>

</html>

JQuery

JAVAScript和JQuery的关系

JQuery是个库,里面封装了大量的JavaScript函数

获取jQuery 去JQuery官网下载jar包


公式:$(){} 入口函数 页面一打开就加载了

选择器

//jQuery css中的选择器它全部都能用!

$('p').click();//标签选择器

$('#id1').click();//id选择器

$('.class1').click;//class选择器

文档工具站:http://jquery.cuishifeng.cn/

事件

鼠标事件

mousedown()(jQuery)----按下

mouseenter()(jQuery)

mouseleave()(jQuery)

mousemove()(jQuery)----移动

mouseout()(jQuery)

mouseover()(jQuery)

mouseup()(jQuery)

节点文本操作

$('#test-ul li[name=python]').text();//获得值

$('#test-ul li[name=python]').text('设置值');//设置值

$('#test-ul').html();//获得值

$('#test-ul').html('<strong>123</strong>');//设置值

css操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏,:本质display:none

$('#test-ul li[name=python]').show();显示

$('#test-ul li[name=python]').hide();隐藏

学习的JS技巧

1、如何巩固JS(看jQuery源码,看游戏源码!)

2、巩固HTML、CSS(扒网站,全部down下来,然后对应修改看效果~)

F12 k + del

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 1.mybaties的一对多:拿客户与订单来说在客户这个bean属性里面配置一个订单集合,在xml里面配置,有一个...
    雷爷_fefc阅读 499评论 0 0
  • 目录 ┣━━视频┃ ┣━━01-html&CSS┃ ┃ ┣━━01HTML和CSS-引课 .avi┃ ┃ ┣━━0...
    爱学习的小哥阅读 396评论 0 0
  • 事务是一系列的操作,当所有的步骤像一个操作一样被完整地执行,我们称该事务被提交。由于其中的一部分或多步执行失败,导...
    coke_dd41阅读 229评论 0 0
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,401评论 16 21
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,498评论 0 11