【去type.dayiyi.top看这篇文章】【去type.dayiyi.top看这篇文章】【去type.dayiyi.top看这篇文章】【去type.dayiyi.top看这篇文章】 【当前进度0.05】JAVA Web 作业

这个把html解析成html了

当前进度0.05，不骗你，第一个任务估计也就0.01，乐观点也最多百分之6

当前共计：5058字

这个作业可能比想象中的复杂一点，涉及了很多的代码。而且内容几乎涉及了整个web全栈。 也正是如此，一次可能写不完，所以会不断更新。 如果你遇到了不明白的地方，请联系咱，咱会进行补充

这次打算使用实时更新的网站：【这里放链接】

更新网址：

0x00 补充和更新

目前还没有遇到，但本文章涉及内容多，不确定因素亦多，肯定会遇上问题，因此，希望各位可以进行补充和说明。

0x01 文件下载

由于涉及的文件真的非常的多，我也临时没想好应该如何共享这些文件。

• 使用之前的下载方式
• 使用阿里云盘
• 使用阿里云盘开网页直接下载，无需登录

临时的方法，我打算先用之前的方式。

0x02 目录说明

大致如下

0x01 章节1
 - 0x011 章节1.1
 - 0x012 章节1.2
0x02 章节2
 - 0x021 章节2.1
 - 0x022 章节2.2

0x03 开发工具

因为整个课程涉及了WEB几乎全栈的开发，因此，这里使用了以下的工具

• VSCODE
• Chrome 浏览器

0x10 蛋糕商场的注册界面

该部分对应实验报告内容如下

0x11 准备文件

需要准备这些文件，这些文件的压缩包在群文件中有。

群文件名：23.2.28_java_web.rar

链接下载：https://p.dabbit.net/blog/pic_bed/2023/05/a77f2e125a83aee1_202305261907278.7z

这里准备好这8个文件，4个css样式文件，4个字体文件

注意目录最好不要涉及到中文，尽可能的全英文+数字+下划线，其他的字符尽可能不要出现。当前还不需要注意这个，但是之后的java代码的书写，可能会出现一些不可预料的错误，

0x12 开发工具

无关章节（0x012）用什么开发工具都是可以的，我们这里的任务1就只写一个html文件即可。

注意VScode不是VS，VSCode是开源的

本章节（0x012）在于提高开发效率，如果你比较急，可以进行一定的忽略。

我这里用了VSCODE，为了提高兼容性，如果你需要整个IDE的下载，可以下载我目前的VSCODE包【这里放链接】。但因为VSCODE的包很大，我建议你同时也装一个。

使用的插件包括：

Debugger for Chrome
Code Runner
JavaScript Debugger
IntelliSense for CSS class names in HTML (不一定好用)
TabNine (代码补全，但不建议过度依赖)
Live Server（实时预览）
Live Preview

语言包:
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
主题:
Material Theme Icons 

参考的相关链接：VSCode 必装的 10 个高效开发插件 – 知乎 (zhihu.com)

这里是我临时（2023年5月26日19:28:59）的插件包：

0x121 如果你想要修改vscode为绿色版，也就是携带版

无关章节

携带版就是所有的插件、数据文件存在当前的目录，可以塞优盘里等。

从官网：Download Visual Studio Code – Mac, Linux, Windows

下载zip版本

解压之后，新建文件夹data即可。

0x122 更换主题

无关章节

CTRL+K+T（依次按）

0x123 实时预览

无关章节

0x13 开始写代码

0x131 user_register.html

准备好文件之后，开始写代码

1. 新建文件user_register.html

   

   （别在意这个图

2. 简单点的代码（不过建议直接看下一点（3.简单写一下代码如下 ） 的内容，注释更多）

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
      
   
          
   
              
   
                  
   
                      
    
             
    新用户！
   
             
             
    
              
              
              用户名 * 
              
              
              
             
   
             
             
   
             
             
    
              邮箱 * 
              
             
   
             
             
    密码 * 
              
              
             
   
             
             
    收货人  
              
              
             
   
             
             
    收货人电话
              
             
   
             
             
    收货人地址
              
             
   
             
             
             
   
              
              
    
             
                      
                  
              
          
      
   
   
   

   效果如下，其实也能看

   

3. 简单写一下代码如下（好吧好吧，如果第一次看这个东东，估计也不是很简单）

   这个代码的话，我尽可能解释一点，更多的内容还是自己去学一学。

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
      
   
   
    
   
   
    
    
          
    
   
          
    
   
    
   
      
      
    
      
   
          
   
              
              
   
                  
                  
                  
   
                      
                      
            
                      
    
             
    新用户！
             
             
   
             
    
              
              
              用户名 * 
   
              
              
              
             
   
             
             
   
             
    
              
              
              邮箱 * 
   
              
              
              
             
   
             
    
              
              
              密码 * 
   
              
              
              
              
             
   
             
   
             
    收货人  
              
              
             
   
             
    收货人电话
              
             
   
             
    收货人地址
              
             
   
             
             
             
             
    
   
             
             
             
   
              
              
    
             
                      
                  
              
          
      
   
   
   
   
   
   
    
   
     
   
      
   这里是底哦，你可以写你想要的内容，比如（C）dayi
   
      
      
   
   
      
   你也可以让字体大一点
     
    
   
   
   
   

4. 效果图如下：

   

5. 稍微把头修改一下

   也就是

   的部分

   
    
    
    
    
   
     
     
     
   
      
   
       
       
   
        
   
         
         搜索
        
       
      
      
   
       
        
         
        
       
      
      
    
     
     
     
    
   

   

6. 把header和footer分出来，新建为两个文件，方便后序其他文件的使用

• header.html

  

  
  
  
  
  
   
   
   
  
     
  
       
       
  
         
  
           
           搜索
         
       
     
     
  
       
         
           
         
       
     
     
   
   
   
   
  
  

• footer.html

  

  
  
  
  
   
  
    
  这里是底哦，你可以写你想要的内容，比如（C）dayi
  
    
    
  
  
    
  你也可以让字体大一点
   
  
  
  

到此，任务一完成，然而，这之前暴雨前的黎明（

0x14 点击提交会发生什么？

无关章节

点击之后会发生这样的事情：

浏览器会发送这些数据到后端

也就是这些内容会POST到服务器

username=123&email=213&password=213123123&name=123124&phone=123658&address=23190

0x20 配置tomcat

唔写不动了

0x21 准备文件

• 【java-web-tomcat服务器】apache-tomcat-8.5.50-windows.zip

  https://p.dabbit.net/blog/pic_bed/2023/05/2382cd17a1cf1632_202305262111014.zip

• java环境，最好是1.8版本

0x22 尝试直接启动

apache-tomcat-8.5.50\bin\

点击startup.bat

打开: http://localhost:8080

出现了，恭喜你，你省去了很多事情，并且简单的成功了

0x23 报错

上一步成功了，本章节可以忽略

• 我没有JAVA，那就下载JAVA

  http://java.com

  Java Downloads | Oracle 中国

  建议安装两个版本：

  • 1.8 JDK（后安装）
  • 1.17 JDK（先安装）

• Java Home没有找到

  这一步很关键，之后的很多地方都需要这个环境变量。

  【此电脑】->【属性】->【高级系统设置】->【环境变量】->【新建】->【JAVA_HOME】注意大小写->【把你java的路径填上】，一般在这个位置：

  C:\Program Files\Java

  填写：JAVA_HOME

  填写你的目录 比如：C:\Program Files\Java\jdk1.8.0_361

  

  

  

• 端口被占用

  修改文件：

  apache-tomcat-8.5.50\conf\server.xml

  修改为其他的端口

  

  但我建议你搜索端口号占用进程，并且杀掉他

  netstat -aon | findstr 8080
  
  tasklist | findstr + 进程号
  
  taskkill /f /im 进程名.exe

  

0x24 在IntelliJ IDEA中配置Tomcat（dayi配置失败，本章节临时废弃）

本章节临时废弃了，因为没配出来。用vscode有成功的配置。

我用的是vscode，也许也不用配

在IntelliJ IDEA中配置Tomcat，不知道需不需要写

写不动了,2023年5月26日21:36:45

跑路了

2023年5月30日08:23:25 时间过得很快

要命OVO

这样的话，就先下载一个IDEA，我在考虑需不需要这样做。

激活文件在数据库群里。 需要的话找我。

然后根据这个步骤走

1. alt+ctrl+shift+/ -> Registry
2. 选中：javaee-legacy.project.wizard
3. 新建项目【File】→【new】→【Project】
4. 【File】→【Project Structrue】
6. 312
7. 312
8. 3
9. 123
10. 123

图片如下：

配不明白了，润了

Eclipse.ini文件

试试在Eclipse里配

打不开文件，放弃了。

0x24 在VSCODE里配置Tomcat

1. 下载插件Community Server Connectors

2. 右下角可能会报错，如果提示当前JAVA版本不够，需要更高版本：添加rsp-ui.rsp.java.home，到你的高版本JDK目录，注意\\和\的区别

   

3. 右键，Create Server，提示是否需要下载，你可以用本地的，也可以下载一个，差不多。我这里选择用本地的。

   

4. 如果你选下载，是否同意都同意即可。

   

5. 导入本地tomcat：

   • 打开tomcat文件夹目录

   • 选择

   • 我直接选的finish

   • 然后右键TOMCAT，启动服务器。

   • 访问127.0.0.1:8080，发现是可以打开的

   • 文件放在：apache-tomcat-8.5.50\webapps\rabbit\index.jsp（新建文件）

     <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
     
     
     
     
      
     
     
     
      
     hello world
      
      <%
        out.println(1024 * 1024);
      %>
     
     
     

   • 访问http://127.0.0.1:8080/rabbit/，可以看到网页，表示成功了。

     

   • 如果需要修改JSP的运行目录：

     修改这里就可以啦

     

   

   

   

0x25 Tomcat 日志乱码

• 看到一堆锟斤拷了吗
• 进行修一修。

0x251 方法1，修改为GBK编码输出（推荐）

• 修改文件：apache-tomcat-8.5.50\conf\logging.properties

  修改为GBK编码

• 重启Tomcat，日志就是正常的啦

  

0x252 方法2，修改启动参数（没有成功，等待修改）

好像不生效。我觉得这样改也不对。

就不要这样改了。

这个方法就参考一下吧

• 在Tomcat文件夹目录中，/bin/catalina.bat里面修改，添加set JAVA_OPTS= -Dfile.encoding=UTF-8

  111 |setlocal
  112 |set JAVA_OPTS= -Dfile.encoding=UTF-8 
  113 |rem Suppress Terminate batch job on CTRL+C
  
  添加112行

  

0x26 VSC-Tomcat部署项目

很麻烦对吧，这就是学计算机

0x261 插件安装

Extension Pack for Java
Maven for Java
Debugger for Java

0x2611 安装maven

我之前好像编译过java项目，所以我没这个步骤，但是如果你没配过，还是要配一次。

1. 下载maven，并解压

   官网下载：Maven – Download Apache Maven https://maven.apache.org/download.cgi

   大一的文件：https://pic.icee.top/blog/pic_bed/apache-maven-3.8.6-d72781d0-058e-4571-b28f-23b818f04d73.rar

2. 进入到设置里，修改配置参数：

   

   这里可能需要复制的内容：

   @ext:vscjava.vscode-maven

3. 然后在Path里填写：

   这里的路径你不可以直接复制

   你要把D:\program_\apache-maven-3.8.6-bin\这些改成你maven文件的路径地址。

   D:\program_\apache-maven-3.8.6-bin\apache-maven-3.8.6\bin\mvn.cmd

0x262 新建项目

• 右键文件列表目录，新建项目

  

• 选择【webapp】->选择【1.4】->填写包名【com.example.testdayi】-> 选择你要存放的文件夹（最好路径全英文）

  什么是包名，一般就是网址域名的反过来写就可以。

  

• 然后会自动进行创建项目，这个过程可能比较慢，你可以通过一些方法来加速，比如哈利波特

  

• 记得回车两次，你如果能看懂就可以自己看一下

  

• 出现BUILD SUCCESS 就可以了

  

0x263 项目修改

• 修改下文件，以便后面的测试

• 文件：demo\src\main\webapp\index.jsp

  

• 内容如下：

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  
  
  
  
    
  
  
  
    
  hello world
  
    
    <%
      out.println(1024 * 1024);
      out.println("你好");
    %>
  
  
  

• 进行编译和部署

  点击这里的package

  

​ 如果出现SUCCESS ，并且demo里面出现文件，则构建（BUILD）成功。

​

​ 这个目录有demo，index.jsp，WEB-INF META-INF几个文件即可。

0x264 部署项目

• 右键tomcat 8.5 ->【 Add Deployment】->【Exploded】

  

• 选择文件夹，如果你改为其他名字的话就是其他名字。

  我这里的目录是：D:\_project\javaweb_\config_tomcat\demo\target\demo

  

• 提示是否需要修改配置文件，选择No即可。

• 然后PUSH server或者直接启动tomcat即可

  

• 右键TOMCAT 8.5 选择，Server Actions，选择show in browser，然后选这个localhost:8080/demo

  

  

• 出现项目文件的内容即没问题啦

  

0x265 如果需要修改

要在src文件夹里修改哦，虽然你该target目录下的也可以生效，但是这样不对。

• 文件:demo\src\main\webapp\index.jsp
• 修改完之后进行再打包。package即可。

• 打包完进行刷新网页（之后如果出现刷新网页内容不变，则重启下tomcat即可）

  

• 修改的内容出来啦（修改的内容是加了个“Hello”）

  

0x30 解决中文乱码

看似简单，实际是写一个servlet