Servlet 开发技术

缺乏、安全感 2023-10-13 16:57 83阅读 0赞

#### 文章目录 ####

*  前言
 *  创建Servlet项目
 *  处理请求并响应
 *   *  处理请求
     *  text/plain，纯文本
     *  text/html，html代码
     *  application/json，JSON格式字符串
 *  Servlet 生命周期
 *   *  Servlet在整个生命周期中被调用的方法
     *  Servlet运行原理
 *  CORS跨域设置
 *   *  什么是跨域
     *  为什么存在跨域这个东西
     *  跨域解决方案
 *  ❗get 和 post 有什么区别，如何使用

--------------------

## 前言 ##

`提示：这里可以添加本文要记录的大概内容：`

在写 javaweb项目之前先[下载好Tomcat][Tomcat]与JavaWeb工具

下图展示的是某个JavaWeb工具的代码提示，可以看看自己的有没有  
![在这里插入图片描述][8eb17de8b5a442b895a20a8f1bc5e7bd.jpeg]

--------------------

## 创建Servlet项目 ##

`提示：以下是本篇文章正文内容，下面案例可供参考`

第一次生成JavaWeb项目：创建动态的web项目  
![在这里插入图片描述][72c55362f68e43efbf86e96bac37c123.png]  
往后生成JavaWeb项目：  
![在这里插入图片描述][c4126b6d6d6c49ccbe5d575e322f1570.png]  
**第一步：** 继承HttpServlet  
**第二步：** 增加@WebServlet注解，配置地址  
**第三步：** 重写doXXX方法（共7种，`service`最大），处理请求并响应

代码具体操作：

## 处理请求并响应 ##

### 处理请求 ###

//处理请求
    		//1.获取请求中的数据
    		//调用HttpServletRequest中的方法getParameter("数据名")
    		String name = req.getParameter("name");
    		//2.具体处理
    		System.out.println("前端发送的数据是"+name);

> 以下是三种相应类型

### text/plain，纯文本 ###

//生成纯文本格式的响应
    //1.调用HttpServletResponse中的setContentType方法设置内容类型
    resp.setContentType("text/plain;charset=utf-8");
    //2.调用HttpServletResponse中的getWriter方法输出响应内容
    PrintWriter writer = resp.getWriter();
    writer.print("Hello, world!");
    writer.flush();

上面的代码设置了响应的内容类型为 text/plain，然后输出了一个字符串“Hello, world!”。注意，要在输出内容后调用 `flush()` 方法，将内容刷入输出流中。

输出效果：  
![在这里插入图片描述][337bdafe3cee49ce905cc49305d11235.png]

### text/html，html代码 ###

//生成 HTML 代码格式的响应
    //1.调用HttpServletResponse中的setContentType方法设置内容类型
    resp.setContentType("text/html;charset=utf-8");
    //2.调用HttpServletResponse中的getWriter方法输出响应内容
    PrintWriter writer = resp.getWriter();
    writer.print("<html><head><title>Hello, world!</title></head><body><h1>Hello, world!</h1></body></html>");
    writer.flush();

输出效果：  
![在这里插入图片描述][e362745e07734a8db3ae748b8a95357e.png]

### application/json，JSON格式字符串 ###

Student 类：

public class Student {
        
    	private String name;
    	private String sex;
    	public Student() {
        
    		super();
    		// TODO 自动生成的构造函数存根
    	}
    	public Student(String name, String sex) {
        
    		super();
    		this.name = name;
    		this.sex = sex;
    	}
    	public String getName() {
        
    		return name;
    	}
    	public void setName(String name) {
        
    		this.name = name;
    	}
    	public String getSex() {
        
    		return sex;
    	}
    	public void setSex(String sex) {
        
    		this.sex = sex;
    	}
    	
    }

servlet 类：

import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.ArrayList;
    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 com.google.gson.Gson;
    import po.Student;
    @WebServlet("/hello")   
    public class HelloServlet extends HttpServlet{
        
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
    		
    		//处理请求
    		//1.获取请求中的数据
    		//调用HttpServletRequest中的方法getParameter("数据名")
    		String name = req.getParameter("name");
    		//2.具体处理
    		System.out.println("前端发送的数据是"+name);
    		
    		//生成响应
    		//1.调用HttpServletResponse中的setContentType 设置内容类型
    		resp.setContentType("application/json;charset=utf-8");
    		//2.调用HttpServletResponse中的getWriter 输出流
    		PrintWriter writer = resp.getWriter();
    		Student s1 = new Student("张三","男");
    		Student s2 = new Student("李四","女");
    		ArrayList<Student> list = new ArrayList<>();
    		list.add(s1);
    		list.add(s2);
    		Gson gson = new Gson();
    		
    		writer.print( gson.toJson(list));
    	}
    }

输出效果：  
![在这里插入图片描述][328581c3f80e46dfb59dde6db2b583eb.png]

## Servlet 生命周期 ##

1.  加载阶段：调用构造方法
2.  初始化阶段：调用 init 方法  
    当支持Servlet运行的Web容器接收到客户端的请求时，会先判断用户所请求的Servlet对象是否存在；如果不存在，则需要加载Servlet类，创建 Servlet的对象，然后调用Servlet的`init()` 方法进行初始化。
3.  服务阶段：调用 service方法处理发送回来的请求  
    容器针对本次客户端请求创建 `ServletRequest` 和 `ServletResponse` 对象，并且创建一个线程，调用Servlet对象的`service( )`方法，`service()`方法再根据客户端的请求方式间接调用 `doGet()` 方法或者 `doPost()` 方法。  
    service()方法运行结束后产生响应，容器将响应发回客户端。
4.  销毁阶段：调用 destroy方法销毁  
    当Web应用被卸载或者服务器被关闭的时候，容器会销毁为本次客户端请求创建的 `ServletRequest` 和 `ServletResponse` 对象以及相应的线程。此时会调用 `destroy()` 方法释放资源。

需要注意的是，加载 Servlet 类，创建 Servlet 对象、调用初始化方法 init() 和销毁方法 destroy() 在Servlet的整个生命周期中都只有一次。

import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    @WebServlet(urlPatterns = "/life",loadOnStartup = 5)
    public class LifeCycleServlet extends HttpServlet{
        
    
    	public LifeCycleServlet() {
        
    		System.out.println("构造方法调用了");
    	}
    	@Override
    	public void init() throws ServletException {
        
    		// TODO init自动生成的
    		System.out.println("init方法调用了");
    	}
    	@Override
    	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
    		System.out.println("service方法调用了");
    	}
    	@Override
    	public void destroy() {
        
    		// TODO 自动生成的方法存根
    		System.out.println("destroy方法调用了");
    	}
    }

运行项目后控制台输出：  
![在这里插入图片描述][aacf10d1dfcb48968537d41978988e44.png]  
那第四阶段的：销毁阶段，调用 destroy方法销毁

在Servers内，选择Tomcat右键停止  
![在这里插入图片描述][200da35eaf3f4aa8ba59a9b957e37d79.png]  
回到控制台：  
![在这里插入图片描述][16df6b15157c42908bc56f28dea7b848.png]

### Servlet在整个生命周期中被调用的方法 ###

Servlet在整个生命周期中会有一些方法被服务器自动调用，其中的主要方法有:  
`init( )`方法：用于初始化  
`Destro( )`方法：用于释放资源  
`service( )`方法：服务类方法，对用户的请求进行处理，并对用户进行响应，几乎所有处理功能都在这里完成。`service( )`方法通常会激活doGet( )或 doPost( ) 方法。  
`doGet( )`方法可以响应get方式的请求，doPost( ) 方法可以响应 post方式的请求。

一般不推荐直接重写 service( )方法，而是应该重写doGet( )或者 doPost( )方法。通常，表单提交常使用post方式，超链接使用 get 方式。

### Servlet运行原理 ###

![在这里插入图片描述][2bb06ade42844a5783811a655b0be020.png]

## CORS跨域设置 ##

CORS是一种机制，允许Web应用程序从不同的域名或端口请求资源，解除了同源策略的限制。通过添加自定义的请求头和响应头来实现，在Web服务器提供的访问策略中，允许或拒绝来自不同域的请求访问资源。CORS促进了Web应用程序的开发，并使得跨域请求更加方便。

先做一个JavaWeb中的Servlet，实现了一个简单的用户登录功能。  
登录时需要传入用户名和密码，当用户名为admin，密码为111时，登录成功，返回结果为“成功”；否则返回结果为“失败”。  
同时在响应中添加了允许跨域异步请求的请求头。最后将结果通过PrintWriter写回响应中，供前端页面使用。

**后端代码：**

// 前后端分离项目
    import java.io.IOException;
    import java.io.PrintWriter;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/login")
    public class LoginServlet extends HttpServlet{
        
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
    		String name = req.getParameter("name");
    		String pwd = req.getParameter("pwd");
    		
    		String result = null;
    		// ==判断的是内容
    		if (name.equals("user") && pwd.equals("123456")) {
        
    			result = "成功";
    		} else {
        
    			result = "失败";
    		}  
    		
    		//允许跨域 异步请求                        * 代表所有
    		resp.setHeader("Access-Control-Allow-Origin", "*");
    		//我的响应类型  纯文本
    		resp.setContentType("text/plain;charset=utf8");
    		//得到字符输出流
    		PrintWriter writer = resp.getWriter();
    		//将变量result的值输出到控制台或文件中
    		writer.print(result);
    	}
    }

启动Tomcat运行，在原本链接后用问号加上名字和密码的值：`?name=user&pwd=123456`

![在这里插入图片描述][7a59b90b78234cfd9c4fca4668e176de.png]

**接下来写前端代码：**

在选择功能的时候要把`Router`加上，因为有跳转  
![在这里插入图片描述][fb7a2f40a3bc4691a2c574d569a248d2.png]  
在项目成功后安装axios框架：`npm i axios`  
![在这里插入图片描述][2b951a36f19b472c85d0a12253211af1.png]  
进到项目后打开router文件夹下的 index.js 文件  
![在这里插入图片描述][1d9aaebd2de0431c9a43397656f94663.png]  
另外除根组件外其他子组件全部删掉  
在根组件中删掉 Home 和 About 以及所有样式，只留一个路由出口

删完后的显示：  
![在这里插入图片描述][54b683f500a14777a42c43155171c049.png]  
然后新建两个子视图LoginView和IndexView

首页视图内加个h1标签，只需要表明这个视图是干嘛的就行

<h1>欢迎访问首页视图</h1>

也在登录视图内加个h1标签，只需要表明这个视图是干嘛的就行

视图写完后配置路由：index.js

1.  导入视图

import LoginView from '@/views/LoginView'

1.  配置视图的路由，三个配置项

{
        
        path: '/',
        name: 'login',
        component: LoginView
      },
      {
        
        path: '/index',
        name: 'index',
        component: () => import('@/views/IndexView')
      }
    ]

回到终端启动：

![在这里插入图片描述][ad69bf21a9774b6bb8f588689da1fec4.png]  
接下来到login视图内加一些内容（两个输入框、一个按钮、一个错误提示）

<template>
      <div>
        <h1>登录视图</h1>
        名： <input type="text" v-model="name"><br>
        密： <input type="text" v-model="pwd">
        <p v-show="isError">用户名或密码输入错误</p><br>
        <button @click="login">登录</button>
      </div>
    </template>

接下来在data中配置 name、pwd、isError 的数据

data () {
        
        return {
        
            name: '',
            pwd: '',
            isError: false
        }
      },

然后在 methods 中加一个 login定义

methods: {
        
        login(){
        
    
        }
      },

在这里面完成`axios`请求发送，处理回来的相应数据

首先先导入：

import axios from 'axios'

其次写请求：

methods: {
        
        login(){
        
                                                            // 模板字符串拼接动态数据
            axios.get(`http://localhost:8888/CORS/login?name=${
          this.name}&pwd=${
          this.pwd}`)
            .then((resp) =>{
        
              // 处理服务器后端发回的响应，使用箭头函数
              // 判断相应的数据成功还是失败
              if ( resp.data =='成功' ) {
        
                this.$router.push('/index')
              } else {
        
                // 失败显示错误提示
                this.isError = true
              }
            })
        }
      },

最后login视图完整代码：（加了样式代码，使其内容丰富）

<template>
      <div class="login-container">
        <h1>用户登录</h1>
        <form>
          <div class="form-field">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" v-model="name">
          </div>
          <div class="form-field">
            <label for="password">密   码:</label>
            <input type="password" id="password" name="password" v-model="pwd">
          </div>
          <p v-show="isError" class="error-text">用户名或密码输入错误，请重新输入</p>
          <button @click="login" class="login-btn">登录</button>
        </form>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
        
      data () {
        
        return {
        
            name: '',
            pwd: '',
            isError: false
        }
      },
      methods: {
        
        login(){
        
                                                    // 使用模板字符串拼接动态数据
          axios.get(`http://localhost:8888/CORS/login?name=${
          this.name}&pwd=${
          this.pwd}`)
            .then((resp) =>{
        
              // 处理服务器后端发回的响应，使用箭头函数
              // 判断相应的数据成功还是失败
              if (resp.data == '成功') {
        
                this.$router.push('/index')
              } else {
        
                // 失败显示错误提示
                this.isError = true
              }
            })
        }
      },
      components: {
        },
      computed: {
        },
      watch: {
        },
      mounted () {
        }
    }
    </script>
    
    <style scoped>
    .login-container {
        
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
    }
    
    form {
        
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f6f6f6;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0px 1px 5px #ccc;
    }
    
    .form-field {
        
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .form-field label {
        
      font-size: 18px;
      margin-right: 10px;
    }
    
    .form-field input {
        
      font-size: 18px;
      padding: 5px;
      border-radius: 3px;
      border: 1px solid #ccc;
      flex: 1;
    }
    
    .error-text {
        
      color: red;
      font-size: 18px;
      margin-top: 10px;
    }
    
    .login-btn {
        
      font-size: 18px;
      font-weight: bold;
      color: white;
      background-color: #4CAF50;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      margin-top: 20px;
      cursor: pointer;
    }
    
    .login-btn:hover {
        
      background-color: #3E8E41;
    }
    </style>

输出效果：  
![在这里插入图片描述][d508ff17e30e4422b92436e34815abfc.png]

### 什么是跨域 ###

浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

### 为什么存在跨域这个东西 ###

跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。

### 跨域解决方案 ###

1.  cors是跨域资源共享，是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。
2.  搭建前端代理服务器解决跨域

--------------------

## ❗get 和 post 有什么区别，如何使用 ##

**一、功能不同**

1.  get是从服务器上获取数据
2.  post是向服务器传送数据

**二、传输数据方式同**

1.  get是通过URL传输数据中，在URL中可以看到
2.  post是通过HTTP post机制，数据包含在请求体中

**三、传送数据量不同**

1.  get传送的数据量较小，不能大于2KB
2.  post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB

**四、安全性不同**

1.  get安全性非常低。
2.  post安全性较高

[Tomcat]: https://blog.csdn.net/rej177/article/details/126135033
[8eb17de8b5a442b895a20a8f1bc5e7bd.jpeg]: https://img-blog.csdnimg.cn/8eb17de8b5a442b895a20a8f1bc5e7bd.jpeg
[72c55362f68e43efbf86e96bac37c123.png]: https://img-blog.csdnimg.cn/72c55362f68e43efbf86e96bac37c123.png
[c4126b6d6d6c49ccbe5d575e322f1570.png]: https://img-blog.csdnimg.cn/c4126b6d6d6c49ccbe5d575e322f1570.png
[337bdafe3cee49ce905cc49305d11235.png]: https://img-blog.csdnimg.cn/337bdafe3cee49ce905cc49305d11235.png
[e362745e07734a8db3ae748b8a95357e.png]: https://img-blog.csdnimg.cn/e362745e07734a8db3ae748b8a95357e.png
[328581c3f80e46dfb59dde6db2b583eb.png]: https://img-blog.csdnimg.cn/328581c3f80e46dfb59dde6db2b583eb.png
[aacf10d1dfcb48968537d41978988e44.png]: https://img-blog.csdnimg.cn/aacf10d1dfcb48968537d41978988e44.png
[200da35eaf3f4aa8ba59a9b957e37d79.png]: https://img-blog.csdnimg.cn/200da35eaf3f4aa8ba59a9b957e37d79.png
[16df6b15157c42908bc56f28dea7b848.png]: https://img-blog.csdnimg.cn/16df6b15157c42908bc56f28dea7b848.png
[2bb06ade42844a5783811a655b0be020.png]: https://img-blog.csdnimg.cn/2bb06ade42844a5783811a655b0be020.png
[7a59b90b78234cfd9c4fca4668e176de.png]: https://img-blog.csdnimg.cn/7a59b90b78234cfd9c4fca4668e176de.png
[fb7a2f40a3bc4691a2c574d569a248d2.png]: https://img-blog.csdnimg.cn/fb7a2f40a3bc4691a2c574d569a248d2.png
[2b951a36f19b472c85d0a12253211af1.png]: https://img-blog.csdnimg.cn/2b951a36f19b472c85d0a12253211af1.png
[1d9aaebd2de0431c9a43397656f94663.png]: https://img-blog.csdnimg.cn/1d9aaebd2de0431c9a43397656f94663.png
[54b683f500a14777a42c43155171c049.png]: https://img-blog.csdnimg.cn/54b683f500a14777a42c43155171c049.png
[ad69bf21a9774b6bb8f588689da1fec4.png]: https://img-blog.csdnimg.cn/ad69bf21a9774b6bb8f588689da1fec4.png
[d508ff17e30e4422b92436e34815abfc.png]: https://img-blog.csdnimg.cn/d508ff17e30e4422b92436e34815abfc.png