Javaweb基本内容和部分项目流程(IDEA安装+Tomcat配置)

本文详细介绍了在IDEA中配置Tomcat服务器以及创建JavaWeb项目的步骤,包括新建项目、配置框架、配置Maven、处理请求响应模型、创建Servlet、表单数据传递、JSP页面等内容。此外,还讲解了数据库连接和优化,如连接MySQL数据库、使用JDBC、以及Session的生命周期管理。最后,通过竞拍项目展示了如何串联知识点并应用MVC分层架构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录--“供自己回看的粗略笔记”

!!是markdown文件导入,存在格式问题,可直接看附件文档


# tomcat目录结构

binary-二进制文件:存二进制文件 .exe"

configure-配置文件:“.xml"

library-仓库:存jar包 ” "jar“

logs-日志:记录系统运行状况 “.log”

PS:前四个文件夹一般通用

temp-临时文件文件夹

webapps-存网站

请求、响应模型

左浏览器,右服务器

左请求(“网址“—URL)资源 request

右返回资源 响应respense模型

如何查看ip

cmd-输入ipconfig

在这里插入图片描述
在这里插入图片描述
PS:两台机子连同一个热点就可在同一个局域网中

前端——html

HTML新建网页

浏览器解析网页代码,并呈现出网页

建议:文件夹内新建空白文件,再改后缀”html“

简单网页:localhost:8080/a.html (网站编写,建在tomcat网站存储处)

PS:访问网页必须路径正确,要完全一样,否则404:URL找不到资源文件

例:”a.html"移入”child“文件夹

路径则变更为localhost:8080//child/a.html

//<xxx>  学名:”html“标签
//所有html代码都要包含在一堆标签中
//所有在页面中显示的内容都写在那对<body></body>标签中
//代码当中所有空白字符都不起作用(空格,换行.....)
//换行只能用换行的标签:<br />(单个非成对)
//img标签也是单个标签,里面不含内容
//结束的标签会加斜杠
<html>
	<head>
		<meta charset = "utf-8"/>
	</head>
	<body>
		这是一个的网页

	</body>
</html>

在这里插入图片描述


网页插图—img

<html>
	<head>
		<meta charset = "utf-8"/>
	</head>
	<body>
		这是一个的网页
		<img src = "tomcat.svg"/>
	</body>
</html>

PS:此处图片文件和网页文件在同一目录,可以直接输入图片名称,否则需要地址路径。
<br

html标签

1. 通用标签

  • img–本质:图片链接

  • h1-h6(默认换行)

  • a–链接 链接文字

    PS:

    ​ 注意路径写法

    ​ ./回根目录

    ​ …/回上一级目录

    若想打开一个新窗口,不在本页面刷新跳转:链接文字

  • ul–列表标签(无序)<ul></ul> / ol(有序)<ol></ol>–li其中子标签<li></li>

  • br–换行<br />

    例:

    d.html

<html>
	<head>
		<meta charset = "utf-8"/>
	</head>
	<body>
        <h1>这是d.html</h1>
		通用标签
		<h1>h1标签</h1>
		<h2>h2标签</h1>
		<h3>h3标签</h1>
		<h4>h4标签</h1>
		<h5>h5标签</h1>
		<h6>h6标签</h1>

		<ul>
  			<li>a</li>
 			<li>b</li>
 			<li>c</li>
		</ul>
		
		 <ol>
     	         <li>a</li>
        		 <li>b</li>
    		 </ol>

        //访问同一目录路径d->c(另外开一个页面)
		<a href = "c.html" target = "_blank">跳转到c.html</a>
        //访问不同目录路径d->a
        <a href = "child/a.html">跳转到a.html</a>
	</body>
</html>

a.html

<html>
	<head>
		<meta charset = "utf-8"/>
	</head>
	<body>
		这是一个的网页
		<h1>a.html</h1>
		<a href = "../c.html">跳转到c.html</a>

	</body>
</html>


在这里插入图片描述

布局:div、p、table

2. 简单表单标签 css

PS:name属性用于确定哪个文本框

  1. 多选一(单选框):多个单选按钮的name属性要保持一致
<input type = "text" name = "userName"/>
  1. 默认选中:在name属性后加“checked”,选项名称跟在后面
<input type = "radio" name = "sex" checked/>男
  1. 多选(复选框):多个单选按钮的name属性要保持一致
<input type = "checkbox" name = "channel"  />
  1. 下拉列表框:(select中间每一个选项一个option
<select>
		<option>江苏</option>
		<option>山东</option>
		<option>上海</option>
</select>
  1. 简单文本框:
<textarea rows = "6"  cols = "30"></textarea>
  1. 上传文件:

<input type = "file" name = "file"/>

  1. 隐藏域:把不用给用户看的数据发送到服务端()网页中不显示
  <input type = "hidden" name = "sec"  />
  1. 提交按钮:
<input type = "submit" value = "注册" />
  1. 重置按钮:(清空页面)

  2. 按钮:

<html>
	<head>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<h1>注册表单</h1>
		<form>
			用户名:<input type = "text" name = "userName"/><br/>
			密码:<input type = "password" name = "userPwd"/><br/>
			性别:<input type = "radio" name = "sex" checked/><input type = "radio" name = "sex"/><br/>
			关注频道:<input type = "checkbox" name = "channel" />体育
				<input type = "checkbox" name = "channel" />影视
				<input type = "checkbox" name = "channel" />音乐
			<br/>
			所在省份:
				<select>
					<option>江苏</option>
					<option>山东</option>
					<option>上海</option>
				</select><br/>
			个人描述:<textarea rows = "6"  cols = "30"></textarea>
			<br/>
			文件上传:<input type = "file" name = "file" />
			<br/>
			隐藏域:<input type = "hidden" name = "sec" />
			<br/>
			<input type = "submit" value = "注册" />
			<input type = "reset" value = "重置" />
			<input type = "button" value = "按钮" />
		</form>

	</body>
</html>
image-20230911144617771

后端

Ecilipse 配置 tomcat

open web browser

创建javaweb项目

“Dynamic Web Project”

Connect directory:改名为WebContent、WebRoot

最后建议勾选Generate web.xml…

src\main\java中存放java文件,webRoot中存放html文件

在WebContent中new一个jsp文件…

🛑法一:IDEA 配置 tomcat+新建web项目(new project)

🟢idea快捷键

  1. 自动对齐(代码自动整理)快捷键:Ctrl+Alt+L
  2. 自动补全返回值:Ctrl+Alt+V
  3. 提供💡警告建议解决办法:Alt+Enter
  4. 单行注释 :Ctrl + / ;使用Ctrl+ /, 添加单行注释,再次使用,去掉行注释
  5. 多行注释 :Ctrl +Shift+ /
  6. 方法注释:/** + Enter
  7. 快速生成各种代码:Alt+insert(快捷键用不了可右键选generate)
  8. 整行复制:光标移动这行结束,Ctrl+C

2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤(图文详解)_idea创建前端项目_讷言丶的博客-CSDN博客

❔版本情况

安装什么的这里就不说了,都是傻瓜式的安装,但是你需要知道安装的位置,切记!切记!

Java
Tomcat
maven

🛒web_servlet项目创建步骤

1、依次点击File >> New >> Project

在这里插入图片描述

2、选择New Project 输入自己的项目名,选择JDK版本,而后点击create进行创建

在这里插入图片描述

3、鼠标右键项目名,后点击 Add Framework Support(添加项目支持)

在这里插入图片描述

4、选中Web Application4.0,后点击 OK,点击OK 后会发现项目中多出一个【web】目录

在这里插入图片描述

5、配置Tomcat服务器(1) ### 依次点击 Edit Configurations… >> Add new… >> Tomcat Serve 下的 Local,而后点击OK

在这里插入图片描述

6、配置Tomcat服务器(2)

在这里插入图片描述

7、依次点击页面中的 Deployment >> + >> Artifact… 后点击OK(3)

在这里插入图片描述

**(省)**9、配置Maven,同样在Settings下面,如果不好找,直接在搜索框里面搜索 “Maven”,将红框内的settings.xml文件配置成你自己安装的 apache-maven位置

在这里插入图片描述

10、配置完毕后点击运行按钮

在这里插入图片描述

运行完毕后会自动打开浏览器

在这里插入图片描述

11.新建html文件,存在web文件夹中

META-INF、WEB-INF文件夹下的内容,外部无法通过URL访问(html文件不要放在Web-INF里放它同一级)

配置文件之类的存在web-inf文件夹中,打开时,在tomcat首页网址(”localhost:8080/“)中输入文件路径(名)(例:“/form.html”)不从idea直接开

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

12.在java-src中,右键新建servlet

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

新建servlet,一定要写class name,不然创不了类

PS:IDEA配置tomcat之类问题
1. 右键没有 add framework support

​ 上文步骤3,右键没有add framework support(添加框架支持)

双击shift–>action–>搜索add framework support

解决方法

IDEA 2022 add framework support(添加框架支持)_我们终将上岸.的博客-CSDN博客

设置setting --> menu and toolbars–> project view popup menu --> 新建 点击 + 号,添加操作,搜索 add framework support -->apply

正片开始 搜索 add framework support

点击apply后 ok

完成

2. 配置MAVEN

上文步骤9,配置MAVEN

解决方法

IDEA配置Maven教程(超详细版~)_idea maven配置教程_优柔寡断的阿坤~的博客-CSDN博客

一、Maven下载

首先我们进入maven官方网站,进入网页后,点击Download去下载 在这里插入图片描述 下载免安装版,解压即可,解压至磁盘任意目录,尽量不要取中文名如下图: 在这里插入图片描述

二、配置Maven环境变量 复制Maven所在的路径 D:\maven\apache-maven-3.6.3,此电脑右键选择属性->高级系统设置->环境变量 在这里插入图片描述 在这里插入图片描述 新建一个系统变量 在这里插入图片描述 变量名为MAVEN_HOME, 变量值为 D:\maven\apache-maven-3.6.3,点击确定 在这里插入图片描述 选择Path,点击编辑 在这里插入图片描述 在这里插入图片描述 后面都点击确定直至推出所有对话框,然后打开cmd命令行,输入mvn -v,显示出maven的版本号即证明MAVEN环境变量配置成功,可以全局引用了 在这里插入图片描述

三、settings.xml配置文件修改 在配置文件中找到localRepository标签,这个标签配置的是本地仓库的位置,可以自定义一个文件夹用来保存(尽量不要使使用中文),maven项目会先从本地仓库中寻找依赖,如果找不到,再会去中央仓库下载,下载下来的依赖包会被保存到本地仓库。 在这里插入图片描述 然后要注意需要在mirrors标签里加上阿里云镜像,因为这会大大提高我们下载依赖的速度 在这里插入图片描述

mirrors配置:

<!-- mirrors
   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
   |
   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
   | However, this repository may have problems with heavy traffic at times, so people have mirrored
   | it to several places.
   |
   | That repository definition will have a unique id, so we can create a mirror reference for that
   | repository, to be used as an alternate download site. The mirror site will be the preferred
   | server for that repository.
   |-->
  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
    <mirror>
       <id>mirrorId</id>
       <mirrorOf>repositoryId</mirrorOf>
       <name>Human Readable Name for this Mirror.</name>
       <url>http://my.repository.com/repo/path</url>
     </mirror>
     -->
    <mirror>
       <id>alimaven</id>
       <name>aliyun maven</name>
       <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
       <mirrorOf>central</mirrorOf>
    </mirror>
     -->
    <mirror>
       <id>maven.net.cn</id>
       <name>oneof the central mirrors in china</name>
       <url>http://maven.net.cn/content/groups/public/</url>
       <mirrorOf>central</mirrorOf>
    </mirror>
 </mirrors>

四、打开IDEA配置Maven 选择File->Settings… 在这里插入图片描述 搜索Maven 在这里插入图片描述 然后进行以下配置 在这里插入图片描述 然后点击Apply再点击OK可以了 我们随便导入一个maven项目 在这里插入图片描述 它将会自动去下载依赖,找到本地的仓库可以看到已经下载了部分依赖 在这里插入图片描述 至此,在IDEA中配置maven已经完成

解决方法

3. Add Frameworks Support没有webApplication

上文步骤,勾选webApplication

解决方法

解决IDEA Add Frameworks Support没有webApplication - 掘金 (juejin.cn)

找到projec structure,然后找到相应的模块,这时可以看到有一个project setting,下面有Facets和Artifacts

image.png

点击之后找到Web下面的一些Web相关的东西,右键删除,或者点击减号删除,然后在回到之前并添加add framework support就可以看到web application了

4. 包目录不分层展示

解决方法

IDEA将包层目录完全展示,找不到compact middle packages怎么办?_idea没有compact middle packages_菜菜女孩要加油哦的博客-CSDN博客

设置中找到compact middle packages,把勾选取消

在这里插入图片描述

5. 创建JavaWeb教程 解决右键没有Servlet的问题

解决方法

上文步骤12,新建servlet

https://www.ncyteng.com/news/show/1283.html

1, File->Setting->Editor->File and Code Templates->Other

2, 找到WEB->Java code templates->Servlet Annotated Class.java文件

image.png

3, 选择左边的Files->+(Create Template),定义一个名字如WebServlet

image.png

4, image.png

🛑法二:IDEA 配置 tomcat+新建web项目(maven)

new - >Jakarta EE;Template - >选Web application;tomcat选自己的

‼PS:这里tomcat是9.0.80不是图上那个

image-20230922171018202

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

next - > Version 选 Java EE 8 - > creat

PS:项目creat后要加载一会儿,tomcat若没显示,就等一会

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

tomcat连不上,网页打不开的话,改一下配置

  1. Name最好改一下
  2. Application server:.80
  3. Open browser:最好选“Chrome”不容易报错
  4. On “Update” action:Restart server
  5. 可以在上面Deployment里改一下路径名,删成“/”

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

💨servlet-表单传数据

❕尽量使用chrome,尽量每次都重启tomcat

1. 创建serlvet(见上文)

2. 访问serlvet

本地html文件可直接用文件名url(”localhost:8080/form.html“)

servlet不行,所有它会自己配置一个url路径(value),可修改

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

访问servlet:http://localhost:8080/@webServlet的value属性

3. 什么是serlvet

​ — 是java类,继承了HttpServlet类

​ — 用于处理用户的请求(用户发送url路径来请求)

  • 使用doGet或者doPost方法来处理用户请求(其方法上还有个**@Override**注解,说明该方法是从父类继承下来的)

  • 其中参数有个Request,就是浏览器发送给服务器请求的对象,也就是用户发送的请求信息,把信息封装到Rquest对象中。

  • 用户发送url就是个发送请求的动作,还没有内容

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 用户通过”表单“把数据(用户名,密码…)发送到服务端

​ 访问一个html文件和访问一个java代码都需要一个url路径来访问

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 怎么通过”表单“发送请求到服务端

  • form标签
  • ​ +submit类型按钮

  • ​ 就可以通过点击那个按钮form action里的地址发送请求

5. 怎么通过Request把用户名、密码…取出来

❗一般形况下value属性(提交给服务端的值)不要省,很重要

​ 和它后面的文本没什么关系,如果没有value你就不能把值提交给服务端

​ 🔵getParameter方法(一个值)

​ 例:request.getParameter(“userName”); -->参数是表单元素里的name属性

​ ❗PS:

1. 性别(单选框–二选一)、省份(下拉列表框–多选一),如果不设置value值,服务端就不显示内容,会显示**“on”**外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

解决方法:在表单文件(form.html)中相应语句填写value值

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 服务端接收**value值,所以可以html表单显示**一个“**名字”**共用户选择,服务端显示数据用另一个“名字

​ 【一般形况下value属性(提交给服务端的值)不要省,很重要和它后面的文本没什么关系,如果没有value你就不能把值提交给服务端】

​ 🔵**getParameterValues方法** 复选框(多选)(多个值)

​ 例:request.getParameterValues(“channel”); -->参数是表单元素里的name属性

​ 用for循环来接收信息并打印

image-20230915124035874

6. 大致请求、返回流程

  1. 发送:
image-20230915122416332
  1. 发送完表单,返回信息(RegisterServlet网页)–url信息改变(存入数据aaa、123等)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

PS:服务端只要通过url就可以做解析,就不一定要用表单来发送信息,可以直接写一个url来传

  1. 服务端接收:
image-20230915123941566

7. 代码

form.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册表单</h1>
<form action = "http://localhost:8080/Register
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值