【去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.20x03 开发工具
因为整个课程涉及了WEB几乎全栈的开发，因此，这里使用了以下的工具
- VSCODE
- Chrome 浏览器
0x10 蛋糕商场的注册界面
该部分对应实验报告内容如下
| 序号 | 实验项目 | 完成时间 |
|---|---|---|
| 1 | 蛋糕商城注册页面 | 2.28 |
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
准备好文件之后，开始写代码
-
新建文件user_register.html
-
简单点的代码（不过建议直接看下一点（3.简单写一下代码如下 ） 的内容，注释更多）
<!-- ver1.0_easy --> <!-- 头标签 --> <title>注册用户</title> <!-- 标准缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 编码格式 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 引用两个文件的css --> <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <!-- 这里是html的内容 --> <div class="container"> <div class="register"> <div class="form"> <form action="/user_register" method="post"> <div class="register-top-grid"> <h2> 新用户！</h2> <!-- 用户名 --> <div class="input"> <!-- span的意思是提示和注释的意思 --> <!-- <font color="red">*</font>，变成红色的* --> <span>用户名 <font color="red">*</font> </span> <!-- 输入框 --> <!-- 这个name很重要，会传递到后端 --> <input type="text" name="username" placeholder="你要输入你想要的用户名！" required="required"> </div> <!-- OK，这就是第一个框 --> <!-- 然后就可以复制粘贴了 --> <!-- 邮箱 --> <div class="input"> <span>邮箱 <font color="red">*</font> </span> <input type="text" name="email" placeholder="你要输入你想要的邮箱！" required="required"> </div> <!-- 密码 --> <div class="input"> <span>密码 <font color="red">*</font> </span> <!-- 密码是password会自动隐藏 --> <input type="password" name="password" placeholder="你要输入你想要的密码！" required="required"> </div> <!-- 收货人 --> <div class="input"> <span>收货人 </span> <!-- 收货人不是必须的,所以可以不用required --> <input type="text" name="name" placeholder="你要输入你想要的收货人！"> </div> <!-- 电话 --> <div class="input"> <span>收货人电话</span> <input type="text" name="phone" placeholder="你要输入你想要的收货人电话！"> </div> <!-- 地址 --> <div class="input"> <span>收货人地址</span> <input type="text" name="address" placeholder="你要输入你想要的收货人地址！"> </div> <!-- 然后我们加个按钮 --> <!-- class就用他的啦 --> <div class="register-but text-center"> <input type="submit" value="提交"> <div class="clearfix"> </div> </div> </div> </form> </div> </div> </div> <!-- OK，这样表单就写完了 -->效果如下，其实也能看
-
简单写一下代码如下（好吧好吧，如果第一次看这个东东，估计也不是很简单）这个代码的话，我尽可能解释一点，更多的内容还是自己去学一学。
<!-- ver1.0 --> <!-- 头标签 --> <title>注册用户</title> <!-- 标准缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 编码格式 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 引用两个文件的css --> <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <!-- 这里是html的内容 --> <!-- 如果你有实时插件，ctrl+s可以实时预览 --> <!-- 先写个头 --> <!-- 因为头不是重点，所以你可以不写 --> <!-- 定义header块 --> <div class="header"> <!-- 在定义个容器块 --> <!-- 这里的块你就可以理解为c语言的花括号，可以无限叠，可以让代码更清晰 --> <!-- 但是div的实际上是可以被css样式定义的。 --> <div class="container"> <nav class="navbar navbar-default"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/index">这里是头</a></li> <li><a href="/index2">这里也是头</a></li> <li><a href="#">热销</a></li> <li><a href="#">新品</a></li> <li><a href="#" class="active">注册</a></li> <li><a href="#">登录</a></li> </ul> </div> </nav> </div> </div> <!-- 这种/div是结束，类似于{}的} --> <!-- 然后写一个注册填充表 --> <!-- 如果你有实时插件，ctrl+s可以实时预览 --> <!-- 实际上这些div会导致css样式的套娃顺序 --> <div class="container"> <div class="register"> <!-- 写一个表单，因为我们注册实际上是发送表单到服务器 --> <div class="form"> <!-- 开始写表单 --> <!-- 这个表单会通过POST的方式直接发送给服务器路径为:user_register的文件 --> <form action="/user_register" method="post"> <!-- --> <!-- 这个div的作用实际上是将这个框居中，引用了class="register-top-grid"的css样式，具体的样式你可以去看看源文件 --> <!-- 这样，我们的表单就可以居中了 --> <div class="register-top-grid"> <h2> 新用户！</h2> <!-- 然后就是造表单了 --> <!-- 这里为了好看引用了css为input的样式 --> <div class="input"> <!-- span的意思是提示和注释的意思 --> <!-- <font color="red">*</font>，变成红色的* --> <span>用户名 <font color="red">*</font> </span> <!-- 输入框 --> <!-- 这个name很重要，会传递到后端 --> <input type="text" name="username" placeholder="你要输入你想要的用户名！" required="required"> </div> <!-- OK，这就是第一个框 --> <!-- 然后就可以复制粘贴了 --> <div class="input"> <!-- span的意思是提示和注释的意思 --> <!-- <font color="red">*</font>，变成红色的* --> <span>邮箱 <font color="red">*</font> </span> <!-- 输入框 --> <!-- 这个name很重要，会传递到后端 --> <input type="text" name="email" placeholder="你要输入你想要的邮箱！" required="required"> </div> <div class="input"> <!-- span的意思是提示和注释的意思 --> <!-- <font color="red">*</font>，变成红色的* --> <span>密码 <font color="red">*</font> </span> <!-- 输入框 --> <!-- 这个name很重要，会传递到后端 --> <!-- 密码是password会自动隐藏 --> <input type="password" name="password" placeholder="你要输入你想要的密码！" required="required"> </div> <!-- 后面的框为了排版,我省一点注释 --> <div class="input"> <span>收货人 </span> <!-- 收货人不是必须的,所以可以不用required --> <input type="text" name="name" placeholder="你要输入你想要的收货人！"> </div> <div class="input"> <span>收货人电话</span> <input type="text" name="phone" placeholder="你要输入你想要的收货人电话！"> </div> <div class="input"> <span>收货人地址</span> <input type="text" name="address" placeholder="你要输入你想要的收货人地址！"> </div> <!-- clearfix 是一种CSS 技巧，可以在不添加新的html 标签的前提下，解决让父元素包含浮动的子元素的问题。 --> <!-- 清除之前的浮动关系，修复在firefox、chrome等标准浏览器中子元素全部浮动时，父元素不自动增高的问题。 --> <!-- 我也是第一次用 --> <div class="clearfix"> </div> <!-- 然后我们加个按钮 --> <!-- class就用他的啦 --> <div class="register-but text-center"> <input type="submit" value="提交"> <div class="clearfix"> </div> </div> </div> </form> </div> </div> </div> <!-- OK，这样表单就写完了 --> <!-- 这个东西叫做footer，也就是你平时看到页面最下面的东西 --> <!--footer--> <div class="footer"> <div class="container"> <div class="text-center"> <p>这里是底哦，你可以写你想要的内容，比如（C）dayi</p> <!-- br是换行的意思，不需要加</br> --> <br> <h3>你也可以让字体大一点</h3> </div> </div> </div> <!--//footer--> -
效果图如下：
-
稍微把头修改一下
也就是
<div class="header">的部分<div class="header"> <!-- 在定义个容器块 --> <!-- 这里的块你就可以理解为c语言的花括号，可以无限叠，可以让代码更清晰 --> <!-- 但是div的实际上是可以被css样式定义的。 --> <div class="container"> <nav class="navbar navbar-default"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/index">主页</a></li> <li><a href="/index2">其他页面</a></li> <li><a href="#">热销</a></li> <li><a href="#">新品</a></li> <li><a href="#" class="active">注册</a></li> <li><a href="#">登录</a></li> </ul> </div> </nav> <!-- 新的内容 --> <div class="header-info"> <div class="header-right search-box"> <a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a> <div class="search"> <form class="navbar-form" action="/goods_search"> <input type="text" class="form-control" name="keyword"> <button type="submit" class="btn btn-default" aria-label="Left Align">搜索</button> </form> </div> </div> <div class="header-right cart"> <a href="goods_cart.jsp"> <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true"> <span class="card_num"></span> </span> </a> </div> <div class="clearfix"> </div> </div> </div> <!-- 新的内容 --> </div> -
把header和footer分出来，新建为两个文件，方便后序其他文件的使用
-
header.html
<div class="header"> <!-- 在定义个容器块 --> <!-- 这里的块你就可以理解为c语言的花括号，可以无限叠，可以让代码更清晰 --> <!-- 但是div的实际上是可以被css样式定义的。 --> <div class="container"> <nav class="navbar navbar-default"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/index">主页</a></li> <li><a href="/index2">其他页面</a></li> <li><a href="#">热销</a></li> <li><a href="#">新品</a></li> <li><a href="#" class="active">注册</a></li> <li><a href="#">登录</a></li> </ul> </div> </nav> <!-- 新的内容 --> <div class="header-info"> <div class="header-right search-box"> <a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a> <div class="search"> <form class="navbar-form" action="/goods_search"> <input type="text" class="form-control" name="keyword"> <button type="submit" class="btn btn-default" aria-label="Left Align">搜索</button> </form> </div> </div> <div class="header-right cart"> <a href="goods_cart.jsp"> <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true"> <span class="card_num"></span> </span> </a> </div> <div class="clearfix"> </div> </div> </div> <!-- 新的内容 --> </div> -
footer.html
<!-- 这个东西叫做footer，也就是你平时看到页面最下面的东西 --> <!--footer--> <div class="footer"> <div class="container"> <div class="text-center"> <p>这里是底哦，你可以写你想要的内容，比如（C）dayi</p> <!-- br是换行的意思，不需要加</br> --> <br> <h3>你也可以让字体大一点</h3> </div> </div> </div> <!--//footer-->
到此，任务一完成，然而，这之前暴雨前的黎明（
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
出现了，恭喜你，你省去了很多事情，并且简单的成功了
0x23 报错
上一步成功了，本章节可以忽略
-
我没有JAVA，那就下载JAVA
建议安装两个版本：
- 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，我在考虑需不需要这样做。
激活文件在数据库群里。 需要的话找我。
然后根据这个步骤走
- alt+ctrl+shift+/ -> Registry
- 选中：javaee-legacy.project.wizard
- 新建项目【File】→【new】→【Project】
- 【File】→【Project Structrue】
- 312
- 312
- 3
- 123
- 123
图片如下：
配不明白了，润了
Eclipse.ini文件
试试在Eclipse里配
打不开文件，放弃了。
0x24 在VSCODE里配置Tomcat
-
下载插件Community Server Connectors
-
右下角可能会报错，如果提示当前JAVA版本不够，需要更高版本：添加
rsp-ui.rsp.java.home，到你的高版本JDK目录，注意\\和\的区别 -
右键，Create Server，提示是否需要下载，你可以用本地的，也可以下载一个，差不多。我这里选择用本地的。
-
如果你选下载，是否同意都同意即可。
-
导入本地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" %> <title>index</title> <h1>hello world</h1> <!-- jsp输出1024*1024的结果 --> <% 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-8111 |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 Java0x2611 安装maven
我之前好像编译过java项目，所以我没这个步骤，但是如果你没配过，还是要配一次。
-
下载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
-
进入到设置里，修改配置参数：
这里可能需要复制的内容：
@ext:vscjava.vscode-maven -
然后在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" %> <title>index</title> <h1>hello world</h1> <!-- jsp输出1024*1024的结果 --> <% 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
发表回复