cgb2110-day18

Posted 2022-01-07 cgblpx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2110-day18相关的知识，希望对你有一定的参考价值。

一,response响应不同的数据

–1,响应JSON串

package cn.tedu.cgb2110boot03.response;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

//Servlet充当服务器:接受请求Request + 做出响应Response
// http://localhost:8080/resp/servlet01?id=10&name=张三
@WebServlet("/resp/servlet01")
public class ResponseServlet01 extends HttpServlet 
    //如果是get请求,Servlet会自动调用doGet()
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        //TODO 解析请求参数
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        //响应时使用的默认的字符集iso-8859-1,为了防止响应时的中文乱码问题,加以下代码
        response.setContentType("text/html;charset=utf8");
        //响应解析到的数据
        //2.获取字节流--写出数据????
//        ServletOutputStream out = response.getOutputStream();
//        //字节流只能写出字节int.byte[].如果想要写出字符串,必须把字符串变成byte[]---getBytes()
//        out.write(id.getBytes());
//        out.write(name.getBytes());
        //1.获取字符流--写出数据
        PrintWriter out = response.getWriter(); out.write(id);out.write(name);
        //String json= "id":"10","name":"张三" ;
        //使用转义符号\\把"转义成一个普通字符,因为JSON串的key和value必须被"包裹
        //String json= "\\"id\\":\\"10\\",\\"name\\":\\"张三\\"" ;
        //动态拼接字符串--- "+id+"
        String json= "\\"id\\":\\""+id+"\\",\\"name\\":\\""+name+"\\"" ;
        out.println(json);//提供了一个换行写出的功能

二,重定向

–1,概述

和请求转发的过程有点相似.
过程: 浏览器访问A,A告诉浏览器继续访问B,由B返回结果
特点: 两次请求两次响应, 浏览器的地址栏会变 ,两个request/response , 可以重定向到任何资源
实现: response.sendRedirect(“目标资源的访问规则”)

–2,测试

RedirectServlet

package cn.tedu.cgb2110boot03.response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/redirect/servlet01")
public class RedirectServlet extends HttpServlet 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 

    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("RedirectServlet...doGet()");
        //特点: 地址栏会变  +  两次请求两次响应两个request/response ???
        request.setAttribute("name","jack");
        //重定向--参数是目标的访问规则(目标资源没有任何要求)
        response.sendRedirect("/redirect/servlet02");
//        response.sendRedirect("http://www.baidu.com/");

RedirectServlet02

package cn.tedu.cgb2110boot03.response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/redirect/servlet02")
public class RedirectServlet02 extends HttpServlet 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 

    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        System.out.println("RedirectServlet02...doGet");
        System.out.println( request.getAttribute("name") );//null

–3,总结

请求转发和重定向有什么区别???
请求转发: 是request对象的功能, 一次请求一次响应 , 地址栏不变, 同一个request,目的资源必须是同一个项目里的
重定向: 是response对象的功能, 两次请求两次响应 , 地址栏改变, 不同的request,目的资源没有要求

三,综合练习

–1,创建前端网页html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试前后端整合</title>
		<!-- 1.导入vue.js:离线或者在线两种导入方式 
		   <script src="vue.js"></script>
		-->
		<script src="http://unpkg.com/vue/dist/vue.js"></script>
		<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<button @click="get()">点我获取数据</button>
			<h1>姓名: name</h1>
			<h1>年龄: age</h1>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue(
				el:"#app", //挂载点
				data() //数据
					return 
						name:"",
						age:0
					
				   ,
				methods:
					//ajax访问Servlet
					get()
						//get方式传递参数的两种写法:直接拼在地址栏里或者用params描述
						// let url = "http://localhost:8080/test/servlet01?name=tony&age=18";
						// axios.get(url).then(
						let url = "http://localhost:8080/test/servlet01";
						axios.get(url, params:name:'tony',age:18  ).then(
						//axios.post(url, name:'tony',age:18  ).then(
							a => 
								//a保存着servlet程序返回的结果
								console.log(a);
								console.log(a.data);//tony18 ->name: 'tony', age: '18'
								//把从Servlet中获取的数据,利用起来
								this.name = a.data.name;
								this.age = a.data.age;
							
						)
					
				
			)
		</script>
	</body>
</html>

–2,创建Servlet

接受请求,解析请求参数,做出响应

package cn.tedu.cgb2110boot03.axios;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

//接受请求,解析请求参数,做出响应
@WebServlet("/test/servlet01")
public class ServletDemo extends HttpServlet 
    //处理get请求
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        //放行 js访问后端Servlet程序 的请求
        response.setHeader("Access-Control-Allow-Origin","*");
        //1,解析请求参数
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        //2,给浏览器做出响应
        PrintWriter out = response.getWriter();
//        out.write(name+age); //这种格式不对,前后端交互数据的格式必须组织成json串才行!!
        //3,把name和age拼接成json串给前端返回
//        name=tony&age=18
//        "name":"tony","age":"18"
//        "\\"name\\":\\"tony\\",\\"age\\":\\"18\\""
        //在把name和age的值,动态拼接字符串
        String json= "\\"name\\":\\""+name+"\\",\\"age\\":\\""+age+"\\"" ;
        out.write(json);

–3,测试

四,过滤器Filter

–1,概述

对资源访问时可以添加拦截的条件. 如果满足条件才能访问目标资源.如果不满足条件,目标资源将不允许被访问.
开发步骤:
1, 实现Filter接口,并用注解开发
2, 重写三个抽象方法,init() / destroy() / doFilter()核心方法
3, 配置过滤器的条件

–2,入门案例

package cn.tedu.cgb2110boot03.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*")
public class Filter1 implements Filter 
    public void destroy() 
    

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException 
        System.out.println("Filter1...doFilter");
        chain.doFilter(req, resp);//放行请求,有这行代码就可以访问目标资源
    

    public void init(FilterConfig config) throws ServletException

–3,总结

–4,生命周期

package cn.tedu.cgb2110boot03.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*") //所有请求,都会触发过滤器
public class Filter1 implements Filter 
    //生命周期三大阶段:初始化  服务   销毁
    //关闭服务器时,会自动触发, 只调用一次
    public void destroy() 
        System.out.println("Filter1...destroy");
    
    //核心方法,主要用来配置过滤器的过滤规则,可以判断是否放行
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException 
        System.out.println("Filter1...doFilter");
        chain.doFilter(req, resp);//放行请求,有这行代码就可以访问目标资源
    
    //启动项目时,就被主动加载了所有的过滤器, 只调用一次
    public void init(FilterConfig config) throws ServletException 
        System.out.println("Filter1...init");

–5,过滤器的匹配规则

package cn.tedu.cgb2110boot03.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

//@WebFilter("/a/*")//按照指定的前缀来匹配
//@WebFilter("*.html")//按照指定的后缀来匹配
//@WebFilter("/1.html")//必须访问指定文件
@WebFilter("/*")//访问啥资源,都会触发过滤器
public class Filter2 implements Filter 
    public void destroy() 
    
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException 
        System.out.println("过滤器2已经生效~");
        chain.doFilter(req, resp);
    
    public void init(FilterConfig config) throws ServletException

–6,使用Filter的场景

//核心方法,主要用来配置过滤器的过滤规则,可以判断是否放行
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException 
        System.out.println("Filter1...doFilter");
        //Filter用处: 解决了所有Servlet的共性需求---处理中文乱码!!!(权限.缓存.日志..)
        //在访问所有Servlet前,先来把中文乱码问题解决一下
        resp.setContentType("text/html;charset=utf8");

        chain.doFilter(req, resp);//放行请求,有这行代码就可以访问目标资源

五,扩展:Vue的钩子函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的生命周期</title>
		<script src="http://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>msg</h1>
		</div>
		<script>
			let vm = new Vue(
				el:"#app",
				data()
					return
						msg:'hello vue!'
					
				,
				//vue生命周期的初始化阶段的钩子函数:
				beforeCreate()//还没new Vue时触发的
					console.log('beforeCreate..');
				,
				created()//刚new完Vue时触发的
					console.log('created..');
				 ,
				//vue生命周期的服务阶段的钩子函数:(挂载,更新beforeUpdate/updated)
				beforeMount()//还没有解析插值表达式
					console.log('beforeMount..');
					console.log(this.$el);//获取el对应的dom节点的内容
				 ,
				mounted()//刚解析插值表达式
					console.log('mounted..');
					console.log(this.$el);
				 ,
				//vue生命周期的销毁阶段的钩子函数:(销毁)
				//需要在浏览器的控制台输入vm.$destroy()才会执行销毁阶段
				beforeDestroy()
					console.log('beforeDestroy..');
				,
				destroyed()
					console.log('destroyed..');
				
			)
		</script>
	</body>
</html>

六,复习

–1,数据库重点

事务 : 概念 / 四大特性
外键约束
多表联查( 笛卡尔积 / 连接查询!!! / 子查询!!! )
索引/视图(概念,分类,语法,执行计划/执行性能explain,优缺点)
SQL优化的方案

–2,前端重点!!!

Vue框架(概念, 特点, 指令, 组件化 , axios的语法/优缺点 , vue-cli , vue项目)
json串 / js对象 / js函数(传参,有返回值,调用)

以上是关于cgb2110-day18的主要内容，如果未能解决你的问题，请参考以下文章

cgb2110-day18

文章目录

一,response响应不同的数据

–1,响应JSON串

二,重定向

–1,概述

–2,测试

–3,总结

三,综合练习

–1,创建前端网页html

–2,创建Servlet

–3,测试

四,过滤器Filter

–1,概述

–2,入门案例

–3,总结

–4,生命周期

–5,过滤器的匹配规则

–6,使用Filter的场景

五,扩展:Vue的钩子函数

六,复习

–1,数据库重点

–2,前端重点!!!