Servlet 开发技术

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

文章目录

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

前言

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

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

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

创建Servlet项目

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

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

代码具体操作：

  1. import java.io.IOException;
  2. import javax.servlet.ServletException;
  3. import javax.servlet.annotation.WebServlet;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. //第二步：增加@WebServlet注解，配置地址
  8. @WebServlet("/hello")   
  9.                      //第一步：继承HttpServlet
  10. public class HelloServlet extends HttpServlet{
  12. //第三步：重写doXXX方法，处理请求并响应
  13.     @Override
  14.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  18.     }
  19. }

处理请求并响应

处理请求

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

以下是三种相应类型

text/plain，纯文本

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

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

输出效果：
在这里插入图片描述

text/html，html代码

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

输出效果：
在这里插入图片描述

application/json，JSON格式字符串

Student 类：

  1. public class Student {
  3.     private String name;
  4.     private String sex;
  5.     public Student() {
  7.         super();
  8.         // TODO 自动生成的构造函数存根
  9.     }
  10.     public Student(String name, String sex) {
  12.         super();
  13.         this.name = name;
  14.         this.sex = sex;
  15.     }
  16.     public String getName() {
  18.         return name;
  19.     }
  20.     public void setName(String name) {
  22.         this.name = name;
  23.     }
  24.     public String getSex() {
  26.         return sex;
  27.     }
  28.     public void setSex(String sex) {
  30.         this.sex = sex;
  31.     }
  33. }

servlet 类：

  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  3. import java.util.ArrayList;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.annotation.WebServlet;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import com.google.gson.Gson;
  10. import po.Student;
  11. @WebServlet("/hello")   
  12. public class HelloServlet extends HttpServlet{
  14.     @Override
  15.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  18.         //处理请求
  19.         //1.获取请求中的数据
  20.         //调用HttpServletRequest中的方法getParameter("数据名")
  21.         String name = req.getParameter("name");
  22.         //2.具体处理
  23.         System.out.println("前端发送的数据是"+name);
  25.         //生成响应
  26.         //1.调用HttpServletResponse中的setContentType 设置内容类型
  27.         resp.setContentType("application/json;charset=utf-8");
  28.         //2.调用HttpServletResponse中的getWriter 输出流
  29.         PrintWriter writer = resp.getWriter();
  30.         Student s1 = new Student("张三","男");
  31.         Student s2 = new Student("李四","女");
  32.         ArrayList<Student> list = new ArrayList<>();
  33.         list.add(s1);
  34.         list.add(s2);
  35.         Gson gson = new Gson();
  37.         writer.print( gson.toJson(list));
  38.     }
  39. }

输出效果：
在这里插入图片描述

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的整个生命周期中都只有一次。

  1. import java.io.IOException;
  2. import javax.servlet.ServletException;
  3. import javax.servlet.annotation.WebServlet;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. @WebServlet(urlPatterns = "/life",loadOnStartup = 5)
  8. public class LifeCycleServlet extends HttpServlet{
  11.     public LifeCycleServlet() {
  13.         System.out.println("构造方法调用了");
  14.     }
  15.     @Override
  16.     public void init() throws ServletException {
  18.         // TODO init自动生成的
  19.         System.out.println("init方法调用了");
  20.     }
  21.     @Override
  22.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  24.         System.out.println("service方法调用了");
  25.     }
  26.     @Override
  27.     public void destroy() {
  29.         // TODO 自动生成的方法存根
  30.         System.out.println("destroy方法调用了");
  31.     }
  32. }

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

在Servers内，选择Tomcat右键停止
在这里插入图片描述
回到控制台：
在这里插入图片描述

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

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

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

Servlet运行原理

在这里插入图片描述

CORS跨域设置

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

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

后端代码：

  1. // 前后端分离项目
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.annotation.WebServlet;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  10. @WebServlet("/login")
  11. public class LoginServlet extends HttpServlet{
  13.     @Override
  14.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  16.         String name = req.getParameter("name");
  17.         String pwd = req.getParameter("pwd");
  19.         String result = null;
  20.         // ==判断的是内容
  21.         if (name.equals("user") && pwd.equals("123456")) {
  23.             result = "成功";
  24.         } else {
  26.             result = "失败";
  27.         }  
  29.         //允许跨域 异步请求                        * 代表所有
  30.         resp.setHeader("Access-Control-Allow-Origin", "*");
  31.         //我的响应类型  纯文本
  32.         resp.setContentType("text/plain;charset=utf8");
  33.         //得到字符输出流
  34.         PrintWriter writer = resp.getWriter();
  35.         //将变量result的值输出到控制台或文件中
  36.         writer.print(result);
  37.     }
  38. }

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

在这里插入图片描述

接下来写前端代码：

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

删完后的显示：
在这里插入图片描述
然后新建两个子视图LoginView和IndexView

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

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

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

  1. <h1>登录视图</h1>

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

  1. 导入视图

    import LoginView from ‘@/views/LoginView’

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

    {

    1. path: '/',
    2. name: 'login',
    3. component: LoginView

    },
    {

    1. path: '/index',
    2. name: 'index',
    3. component: () => import('@/views/IndexView')

    }
    ]

回到终端启动：

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

  1. <template>
  2.   <div>
  3.     <h1>登录视图</h1>
  4.     名： <input type="text" v-model="name"><br>
  5.     密： <input type="text" v-model="pwd">
  6.     <p v-show="isError">用户名或密码输入错误</p><br>
  7.     <button @click="login">登录</button>
  8.   </div>
  9. </template>

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

  1. data () {
  3.     return {
  5.         name: '',
  6.         pwd: '',
  7.         isError: false
  8.     }
  9.   },

然后在 methods 中加一个 login定义

  1. methods: {
  3.     login(){
  6.     }
  7.   },

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

首先先导入：

  1. import axios from 'axios'

其次写请求：

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

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

  1. <template>
  2.   <div class="login-container">
  3.     <h1>用户登录</h1>
  4.     <form>
  5.       <div class="form-field">
  6.         <label for="username">用户名:</label>
  7.         <input type="text" id="username" name="username" v-model="name">
  8.       </div>
  9.       <div class="form-field">
  10.         <label for="password">密   码:</label>
  11.         <input type="password" id="password" name="password" v-model="pwd">
  12.       </div>
  13.       <p v-show="isError" class="error-text">用户名或密码输入错误，请重新输入</p>
  14.       <button @click="login" class="login-btn">登录</button>
  15.     </form>
  16.   </div>
  17. </template>
  19. <script>
  20. import axios from 'axios'
  21. export default {
  23.   data () {
  25.     return {
  27.         name: '',
  28.         pwd: '',
  29.         isError: false
  30.     }
  31.   },
  32.   methods: {
  34.     login(){
  36.                                                 // 使用模板字符串拼接动态数据
  37.       axios.get(`http://localhost:8888/CORS/login?name=${
  38.       this.name}&pwd=${
  39.       this.pwd}`)
  40.         .then((resp) =>{
  42.           // 处理服务器后端发回的响应，使用箭头函数
  43.           // 判断相应的数据成功还是失败
  44.           if (resp.data == '成功') {
  46.             this.$router.push('/index')
  47.           } else {
  49.             // 失败显示错误提示
  50.             this.isError = true
  51.           }
  52.         })
  53.     }
  54.   },
  55.   components: {
  56.     },
  57.   computed: {
  58.     },
  59.   watch: {
  60.     },
  61.   mounted () {
  62.     }
  63. }
  64. </script>
  66. <style scoped>
  67. .login-container {
  69.   display: flex;
  70.   flex-direction: column;
  71.   align-items: center;
  72.   margin-top: 50px;
  73. }
  75. form {
  77.   display: flex;
  78.   flex-direction: column;
  79.   align-items: center;
  80.   background-color: #f6f6f6;
  81.   padding: 20px;
  82.   border-radius: 5px;
  83.   box-shadow: 0px 1px 5px #ccc;
  84. }
  86. .form-field {
  88.   display: flex;
  89.   flex-direction: row;
  90.   align-items: center;
  91.   margin-bottom: 20px;
  92. }
  94. .form-field label {
  96.   font-size: 18px;
  97.   margin-right: 10px;
  98. }
  100. .form-field input {
  102.   font-size: 18px;
  103.   padding: 5px;
  104.   border-radius: 3px;
  105.   border: 1px solid #ccc;
  106.   flex: 1;
  107. }
  109. .error-text {
  111.   color: red;
  112.   font-size: 18px;
  113.   margin-top: 10px;
  114. }
  116. .login-btn {
  118.   font-size: 18px;
  119.   font-weight: bold;
  120.   color: white;
  121.   background-color: #4CAF50;
  122.   border: none;
  123.   border-radius: 5px;
  124.   padding: 10px 20px;
  125.   margin-top: 20px;
  126.   cursor: pointer;
  127. }
  129. .login-btn:hover {
  131.   background-color: #3E8E41;
  132. }
  133. </style>

输出效果：
在这里插入图片描述

什么是跨域

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

为什么存在跨域这个东西

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

跨域解决方案

  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安全性较高

发表评论

表情：
评论列表 （有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Servlet技术

    \----Servlet是用Java语言编写的应用到Web服务器端的扩展技术，它先于jsp产生，可以方便地对Web应用中的HTTP请求进行处理。在Java Web程序开发中，S

    淩亂°似流年淩亂°似流年/ 0 赞/ 81 阅读

    相关 servlet技术

    Servlet是什么 　　Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 477 阅读

    相关 Servlet技术

    Servlet是用Java语言编写应用到Web服务器端的扩展技术，它先于JSP产生，可以方便的对Web应用中的HTTP请求进行处理。在Java Web程序开发中，Servlet

    以你之姓@以你之姓@/ 0 赞/ 491 阅读