IDEA社区版搭建web项目

￡神魔★判官ぃ 2023-09-30 08:53 10阅读 0赞

### IDEA社区版搭建Tomcat服务器并创建web项目 ###

*  目标
 *  问题
 *  实现步骤

# 目标 #

1.  创建Web项目的目录结构
2.  可以启动Tomcat服务器
3.  编写Servlet并访问成功

# 问题 #

1.  IDEA社区版没有创建Web工程的选项
2.  IDEA社区版没有Tomcat插件

# 实现步骤 #

针对以上两个问题，分步解决

问题一：IDEA社区版没有创建Web工程的选项

1.  创建普通的java项目，此处不再赘述
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]
2.  构建web项目的目录结构
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]
3.  设置编译目录
4.  在WEN-INF文件夹下新建web.xml
    
        <?xml version="1.0" encoding="UTF-8"?>
        <web-app id="WebApp_ID" version="4.0"
        		 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">
        	<display-name>xss</display-name>
        	<welcome-file-list>
        		<welcome-file>index.html</welcome-file>
        		<welcome-file>index.htm</welcome-file>
        		<welcome-file>index.jsp</welcome-file>
        		<welcome-file>default.html</welcome-file>
        		<welcome-file>default.htm</welcome-file>
        		<welcome-file>default.jsp</welcome-file>
        	</welcome-file-list>
        </web-app>
    
    此时 http://xmlns.jcp.org/xml/ns/javaee 和 http://xmlns.jcp.org/xml/ns/javaee/web-app\_4\_0.xsd 会报红，原因是没有web.xml的约束文件。tomcat的lib中包含所需的约束文件，因此在问题二中将得到解决。

问题二：安装Tomcat插件

1.  File – Settings – Plugins，搜索Tomcat，安装Smart Tomcat插件  
    安装完后在Settings界面多了Tomcat Server选项  
    将自己本地的Tomcat加进去  
    ![Tomcat Server选项][Tomcat Server]
2.  为项目添加tomcat
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
    说明：
    
    Deployment Directory: 项目部署的用到的文件夹  
    Context Path: / 表示访问项目时直接访问localhost即可，不用带上项目名  
    Server Port: 改成80端口访问项目时不用输入端口号了
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]
3.  添加tomcat的依赖包
    
    包含servlet-api.jar等开发需要的依赖包，其中web.xml文件的约束文件也包含在内
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]
    
    添加之后web.xml的报红也会解决

至此，web项目已构建完毕，随后可以创建Servlet并访问成功

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/b0bc1b3c677a4b98821e3b91f86adb01.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/1b28ae653d6b4e2a94b3ddcfa447e021.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[Tomcat Server]: https://img-blog.csdnimg.cn/4a3d6c02394d4d6198e60f57434cccb0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: https://img-blog.csdnimg.cn/655f15cf08b246b58e55533f463b4795.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: https://img-blog.csdnimg.cn/b5a0c9db09c346d49c6a1e23a504b6c5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: https://img-blog.csdnimg.cn/285f56e72e0a4b5398b5c8b9e0a80098.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: https://img-blog.csdnimg.cn/4b90041483e74a1d9b972d34949b48a8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reh5oq55b-D55eV_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: https://img-blog.csdnimg.cn/2efa4209703e4c6585398ce820e50426.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reh5oq55b-D55eV,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center