前端:Tomcat服务器部署Web项目

news2025/1/21 18:55:18

文章目录

          • 1.1 C/S架构
          • 1.2 B/S架构
          • 2.1 服务器
          • 2.2 常见服务器
          • 3.1 Tomcat安装
          • 3.2 Tomcat使用
          • 3.3 Tomcat配置
          • 3.4 Tomcat项目部署
          • 4.1 Servlet技术
          • 4.2 Servlet配置
          • 4.3 配置测试
          • 4.4 Servlet部署
          • 5.1 IDEA部署

1.1 C/S架构

Client / Server客户端/服务器

客户端作为独立程序 图形效果较好 但维护困难。

1.2 B/S架构

Browser / Server 浏览器/服务器

直接在浏览器中输入网址访问

服务器端完成升级后 浏览器能够直接访问获取

但浏览器不能够承载过大的资源 故页面效果等体验不如客户端

2.1 服务器

Web服务器是运行及发布Web应用的容器,只有将开发的Web项目放置在该容器中,才能使网络中的所有用户通过浏览器进行访问。

2.2 常见服务器
  • Tomcat(主流Web服务器之一,适合初学者)
  • jetty
  • resin (速度非常快)
3.1 Tomcat安装

官网:Apache Tomcat® - Apache Tomcat 10 Software Downloads

完成下载后直接进行解压缩 注意文件路径 最好不要有中文名。

在这里插入图片描述

bin文件夹下有服务器的管理文件

在这里插入图片描述

webapps 项目部署文件 最初存放了一些示例文件

在这里插入图片描述

3.2 Tomcat使用

双击bat文件

在这里插入图片描述

出现命令行端口 且保持开启状态

若此处命令行运行后界面直接关闭 需要检查JAVA_HOME配置是否正确

检查方式:在命令行输入java 看看是否是可执行命令

在这里插入图片描述

此处出现乱码是因为Tomcat的编码方式需要修改

进入浏览器 访问Apache Tomcat/9.0.31

观察到如下界面 则Tomcat开启成功
在这里插入图片描述

双击bat文件 终止Tomcat运行

在这里插入图片描述

此时再对Apache Tomcat/9.0.31进行访问 将不能观察到内容

3.3 Tomcat配置

端口号是我们访问程序的唯一标识 默认为8080

能够在conf文件夹下的server.xml中修改

在这里插入图片描述

在这里插入图片描述

使用记事本打开 修改port值 完成Tomcat的重启后

就能够成功修改默认端口号。

在这里插入图片描述

同理 其他属性的配置也能够通过修改该文本内容来完成。

3.4 Tomcat项目部署

在webapps文件夹下创建项目文件

在这里插入图片描述

项目文件下需要WEB-INF文件夹与你将要访问的html文件

在这里插入图片描述

WEB-INF文件夹下

在这里插入图片描述

web.xml可以从root下复制 其他都是空文件夹

  • 访问 :http://localhost:8080/firstweb/first.html
  • 协议 :http
  • 域名或主机名:locallhost
  • 端口号:8080
  • 项目路径:firstweb/first.html

从而在toncat看见我们编写的first.html页面

在这里插入图片描述

若项目路径选择错误 将会出现“资源不存在”错误。

4.1 Servlet技术
  • 服务器端的程序(代码、功能实现) 可交互的处理客户端发送到服务端的请求 并完成操作响应。
  • 一种动态网页技术
  • JavaWeb程序开发的基础
4.2 Servlet配置

找到lib文件路径下的servlet-api.jar包

在这里插入图片描述

将其路径保存

追加在系统的环境变量 Classpath

在这里插入图片描述

4.3 配置测试

创建MyServlet.java文件

//简单Servlet示例
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

public class MyServlet implements Servlet{
    public void init(ServletConfig config) throws ServletException{
    }
public void service(ServletRequest request,ServletResponse response) throws ServletException,IOException{
		System.out.println("My First Servlet");
}

public void destroy(){
}

public ServletConfig getServletConfig(){
		return null;
}	

public String getServletInfo(){
		return null;
}
}

首先要确保java javac版本一致

在这里插入图片描述

我的版本均为1.8.0_312

若发现二者不一致 是因电脑中安装了不同版本的JDK

删除不同JDK 或者 调整path路径 将某一版本JDK的bin路径放置在前列

在命令行对上述JAVA文件进行编译

在这里插入图片描述

在这里插入图片描述

同文件夹下出现.class后缀的编译文件

则表明Servlet环境配置成功。

4.4 Servlet部署

将class文件放置在之前建立的classes文件夹下

在这里插入图片描述

配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0"
  metadata-complete="true">

<!-- 1.添加servlet节点 -->
<servlet>
    <servlet-name>MyServlet</servlet-name>
    <servlet-class>MyServlet</servlet-class>
</servlet>

<!-- 2.添加servlet-mapping节点 -->
<!-- 2.对Servlet做映射 name保持一致 -->
<!-- 2.url-pattern是访问Servlet的路径 -->
    
<servlet-mapping>
    <servlet-name>MyServlet</servlet-name>
    <url-pattern>/myservlet</url-pattern>
</servlet-mapping>
    
</web-app>

尽管当前没有内容 但访问时未报404或500等错误

500意味着Servlet代码存在错误 包括版本不兼容等等

表明Servlet成功部署

在这里插入图片描述

System.out.println语句在控制台打印输出

在这里插入图片描述

若修改Java文件 需要重新编译与重启Tomcat服务器

5.1 IDEA部署

我们发现重新编写代码后,需进行重新编译,移动文件,重启服务等操作,时间成本较高昂。

我们将Servlet环境部署在IDEA开发工具中 从而便于我们之后的开发。

IDEA 创建新项目

在这里插入图片描述

选择Enterprise项目 Name可以自主修改

在这里插入图片描述

在这里插入图片描述

在Web-INF文件夹下存放如下文件

在这里插入图片描述

将lib添加为依赖 作为我们项目的库

在这里插入图片描述

配置Tomcat

在这里插入图片描述

部署项目

在这里插入图片描述

在这里插入图片描述

点击下方菜单中的执行 IDEA自主运行Tomcat服务器

在这里插入图片描述

自动打开的浏览器界面

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408521.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【面试题】面试官: Vue如何实现权限管理?

我正在参加「掘金启航计划」 一、权限管理 权限管理就是让不同的用户只能访问自己权限内的资源&#xff0c;有以下几种 路由权限&#xff0c;用户登录后只能看到自己权限内的导航菜单&#xff0c;且只能访问自己权限内的路由地址视图权限&#xff0c;用户只能看到自己权限内…

为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】

&#x1f4b3; 效果展示&#xff1a; 旋转相册效果里面就不放女朋友的美照了防止虐狗 &#x1f970;&#x1f970;&#x1f970;&#xff0c;就用个前端技能树的图片代替哈&#xff0c;有需要大家自行替换。 &#x1f4b3; 源码获取&#xff1a; 源码我已经上传到了资源里&…

Django web开发(二) - Mysql数据库

文章目录Mysql数据库Mysql的安装(CentOS7)下载修改配置文件Mysql强制重置密码远程可登录数据库管理数据表的管理常用数据类型数据管理添加数据查询数据删除数据修改数据员工管理Python管理数据库添加数据查询数据删除数据修改数据案例: Flask Mysql案例: 查询所有用户Mysql数据…

Three.js 渲染glb,gltf模型(保姆级教程)

1.准备工作 将下列文件在three.js的包中找到&#xff0c;注意的是我这里使用的是模块化版本的&#xff0c;这里不知道模块化的&#xff0c;可以先去看一下es6的模块化。 控制器&#xff1a; OrbitControls.js 加载器&#xff1a;GLTFLoader.js 材质&#xff1a; RoomEnviron…

echarts折线图流动特效的实现(非平滑曲线)

1.实现效果 2.实现原理 echarts官网&#xff1a;series-lines 注意&#xff1a;流动特效只支持非平滑曲线&#xff08;smooth&#xff1a;false&#xff09; series-lines路径图&#xff1a; 用于带有起点和终点信息的线数据的绘制&#xff0c;主要用于地图上的航线&#xff…

若依框架:前端登录组件与图像验证码

在上一篇《若依框架&#xff1a;前端项目结构与初始页面渲染流程》中&#xff0c;我们探讨了与“vue.config.js文件配置、.env模式和环境变量配置、vue-router全局导航守卫配置、vue-router路由配置简介”相关的内容&#xff0c;书接上回&#xff0c;我们继续探讨若依前端项目的…

前端实现在线预览Word文件

简介 在项目中遇到了个需求&#xff0c;大致需求这样的&#xff1a;用户在上传文件前需要先预览一下内容&#xff0c;确认内容是否正确&#xff0c;正确的情况下才可以上传&#xff1b; 那么这里面会涉及到一个在上传前的文档的预览操作&#xff0c;下面就记录一下踩坑记录 d…

uni-app ——使用uploadFile上传多张图片

前言&#xff1a;最近的工作中出现了一个功能点&#xff0c;具体写法我在前面的文章中已经阐述过&#xff0c;不过之前的情况是上传图片调用后端的一个接口&#xff0c;整个表单页面提交的时候调用的是另一个接口&#xff0c;我也从中学到了另外的一种方法&#xff0c;写到这里…

UniApp Scroll-View 设置占满下方剩余高度的方法小记

前言&#xff1a;点滴积累&#xff0c;贵在坚持一、布局描述&#xff1a;屏幕分为上下两部分&#xff0c;上面部分高度固定&#xff0c;比如 400rpx&#xff08;单位可以指定为其他的比如px、upx等&#xff0c;高度也可以自己设定&#xff09;&#xff0c;下面部分为 scroll-vi…

css渐变

1. 线性渐变&#xff08;是从一个方向到另一个方向的渐变&#xff09; 属性值&#xff1a;background&#xff1a;linear-gradient&#xff08;颜色&#xff09; ✍默认值&#xff1a;从上到下线性渐变&#xff1a; 代码&#xff1a; 结果&#xff1a; ✍ 属性延伸&#x…

axios—使用axios请求REST接口—发送get、post、put、delete请求

文档&#xff1a;GitHub - axios/axios: Promise based HTTP client for the browser and node.js 目录 一、axios发送get请求 简写版get请求 完整版get请求 get请求怎么在路径上携带参数 二、axios发送post请求 简写版post请求 完整版post请求 其他方式发送post请求 三…

HBuilderX 安装教程

&#x1f48c; 所属专栏&#xff1a;【软件安装教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496…

element日期选择器el-date-picker样式

1、基本用法 代码&#xff1a; <el-date-pickertype"date"v-model"valueStart"value-format"yyyy-MM-dd"placeholder"开始时间" ></el-date-picker>代码解读&#xff1a; type参数是用来定义选择器选择的对象&#xff…

【汇总3种】vue项目中【H5】如何处理后端返回的支付宝form表单,如何实现支付跳转?

背景&#xff1a; 现在的项目&#xff0c;都需要付款&#xff0c;难免涉及支付宝或者微信支付。如果是支付宝支付&#xff0c;很多人都说&#xff0c;都已经2202年了&#xff0c;支付宝返回的还是form表单&#xff0c;然后&#xff0c;唤起支付宝的界面。 一般来说&#xf…

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接&#xff08;非VIP可私聊获取&#xff09;&#xff1a;https://download.csdn.net/download/weixin_52212950/86286910https://download.csdn.net/download/weixin_52212950/86286910 文章导读&#xff1a; 这篇文章实现一个小案例&#xff1a;在购物平台选商品…

axios二次封装(详细+跨域问题)

一&#xff0c;为什么要对axios进行二次封装&#xff1f; 答&#xff1a;主要是要用到请求拦截器和响应拦截器; 请求拦截器&#xff1a;可以在发请求之前可以处理一些业务 响应拦截器&#xff1a;当服务器数据返回以后&#xff0c;可以处理一些事情 二&#xff0c;axios的二次…

html/javascript实现简单的上传

一、 上传用到的按钮类型是type file 二、 为了美化上传按钮&#xff0c;我们通常会自定义按钮&#xff0c;将默认的上传隐藏掉。 fileInputs.click() 触发上传按钮点击 三、 new FileReader() 读取文件内容方法&#xff1a; readAsText() 读取文本文件&#xff0c;(可以使用…

NodeJs - for循环的几种遍历方式

NodeJs - for循环的几种遍历方式一. for循环的几种遍历方式1.1 遍历的目标不一样1.2 空属性的遍历1.3 异步的调用二. 总结一. for循环的几种遍历方式 我们先来看下for循环的4种不同遍历方式&#xff1a; const arr [10,20,30,40,50];for (let i 0; i < arr.length; i) {…

VUE 年份范围选择器

VUE 年份范围选择器遇到一个需求,需要写一个年份选择器,是范围的年份选择器,比如:xxx年到xxx年 在使用elment UI的时候发现没有这种功能,于是采用el-date-picker 的年份选择器自己后封装了一个年份范围选择器 由于组件使用的地方很多,所以格式化都在组件中处理,回传格式在回传的…

Vue项目实战-vue2(移动端)

Vue项目实战(移动端)# 相关资料(一) 创建项目(二) 禁用Eslint(三) devtool(四) 添加less支持(五) vue路由配置(背诵)(六) 父子组件通信(背诵)(七) axios拦截器(背诵)(八) Sticky 粘性布局(九) 图片懒加载(十) 全局注册组件(十一) slot插槽(十二) 使用ui库需要关注的三点(十三)…