Web技术实验报告
Web技术实验报告
实验⼀
第⼀部分：实验分析与设计（可加页）
⼀、实验内容描述（问题域描述）
1.1 实验内容
（1）在个⼈电脑上搭建 Web 服务器环境，Web 服务器可以选⽤ IIS 或 Apache，Java Web 应⽤
服务器选⽤ Tomcat，并完成 IIS 或 Apache 与 Tomcat 的集成，请记录配置的 步骤，以及配置成
功后的截图。
（2）设计⼀个⽤户信息输⼊页⾯，完成⽤户个⼈信息的填写，当⽤户提交表单时，通过 alert 显⽰
⽤户的输⼊信息，界⾯设计如图 1 所⽰。
要求：
⚫ 姓名中英⽂均可，长度不能超过 10 个字符
⚫ ⾝份证号码进⾏验证
⚫ 对邮箱格式进⾏验证
⚫书写⾃我介绍的时候，下⾯的已⽤字节和剩余字节随着输⼊内容的变化，⽽相应的 进⾏变
化。
（3）设计⼀个主页布局页⾯，界⾯设计如图 2 所⽰，页⾯主题可以⾃定要求
i. 使⽤ div 进⾏页⾯布局 ，定义各个部分的 CSS 样式表，通过 id 或 class 属性将样 式
作⽤于每⼀个 div，完成页⾯的布局。
ii. 实现响应式布局，分为 4 种情况：
a) 浏览器窗⼝⼤于 1000px , Left 占 300px 固定宽度，剩余宽度给 Body
b)浏览器窗⼝⼩于 1000px，且⼤于 800px , Left 占 30%，剩余宽度给 body
c) 浏览器窗⼝⼩于 800px，且⼤于 480px ，显⽰ 1 列，宽度设为 auto，不浮动；
d)浏览器窗⼝⼩于 480px，显⽰ 1 列，并隐藏 Left
1.2 实验⽬的
（1） 掌握 Web 服务器环境的搭建
（2） 掌握 HTML 静态⽹页设计与布局
（3） 掌握 CSS 技术美化⽹页的⽅法
（4） 掌握 JavaScript 技术控制⽹页的⽅法
⼆、实验基本原理与设计（包括实验⽅案设计，实验⼿段的确定，试验步骤等，⽤硬件逻
辑或者算法描述）
2.1 配置 tomcat 服务器
下载 tomcat10 服务器压缩包，解压到 D 盘。并修改配置⽂件，设置端⼝号为 8080，修改⽇志
⽂件的编码为 GBK.
2.2 设计⽤户输⼊表
(1) 新建 html ⽂档，修改标题，引⼊ js ⽂件和 css ⽂件。
(2) 使⽤ form 表单，form 表单中使⽤
来控制布局。
(3) 加⼊标签⽤来输⼊内容，设置并设置其 type 来设置输⼊的格式。
(4) 加⼊标签作为⽂本区输⼊内容。
(5) 通过 onchange 来监听输⼊区的变化，通过 ElementById("").value 来获得输⼊
的内容。从⽽时刻监听。
(6) 通过正则表达式来判断⽤户输⼊的内容是否符合规范。
var emailreg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
var cardidreg=/\d{15}|\d{18}/;
⽤ test()来验证正则表达式。
(7) 当点击提交时，使⽤ window.open()来打开⼀个窗⼝，⽤来提⽰⽤户信息。
2.3 设置布局页⾯
(1) 将页⾯划分四个区域，包括⾸部，左边导航，中间主体，尾部。
(2) 设置各⾃的⾼度其中将左边导航设置宽度为 30%。
(3) 添加页⾯响应样式。@media screen and (max-width: ***px)。根据屏幕的宽度来调整页⾯
布局。三、主要仪器设备及耗材
代码编辑器：notepad++.
结果预览：⾕歌浏览器。
第⼆部分：实验调试与结果分析（可加页）
⼀、调试过程（包括调试⽅法描述、实验数据记录，实验现象记录，实验过程发现的问题等）
1.1 遇到的问题。
(1) 单选框⽆法只能选中⼀个。
(2) 屏幕宽度变化时，页⾯布局没⽤改变。
1.2 调试过程，解决办法。
(1) 单选框中两个标签要设置同样的 name 值。
(2) 在@media screen and (max-width: 1000px)中，值要和 max-width 中间有⼀个空格。
⼆、实验结果及分析（包括结果描述、实验现象分析、影响因素讨论、综合分析和结论等）
2.1 Form 表单实验结果。
(1) Form 表单的页⾯如图 3.
(2) Form 表单不按照要求输⼊信息时的提⽰如图 4.
(3) Form 表单⽂本输⼊区剩余输⼊字符数提⽰如图 5.
(4) Form 表单提交时提⽰如图 6.
图 3 图 4
图 5 图 62.2 页⾯布局实验结果
(1) 原界⾯如图 7.
(2) 屏幕宽度⼩于 1000 时，界⾯如图 8.
(3) 屏幕宽度⼩于 800 时，界⾯如图 9.
(4) 屏幕宽度⼩于 450 时，界⾯如图 10.
图 7 图 8
图 9 图 10
三、实验⼩结、建议及体会
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
实验⼆
第⼀部分：实验分析与设计（可加页）
⼀、实验内容描述（问题域描述）
(1) 在个⼈电脑上安装 MySQL 服务器，请记录配置的步骤，以及配置成功后的截图。在 MySQL
数据库服务器中，创建⼀个新的数据库 qcdata，并且在⾥⾯新建⼀个 UserAccount 表，表中
包含这些字段：编号(int)，姓名(string)，密码(string) ，性别(string) ， 出⽣年⽉(date) 存款
⾦额(float)。
(2) 采⽤ JSP+Servlet+JavaBean 技术编写⼀个 Web 应⽤程序，实现⽤户的开户，编辑， 查询，
销户。
(3) 进⼀步实现⽤户的存款，取款和转账功能。（选做）
要求：
i. 界⾯风格⾃⾏设计，符合⼀般⽤户使⽤习惯
ii. 界⾯实现响应式布局，适合 Pad ⽤户和⼿机⽤户使⽤
1.2 实验⽬的
(1) 掌握 Intelli J 集成开发平台。
(2) 掌握 MySQL 数据库的安装和配置。
(3) 掌握 JSP 编程技术。
(4) 掌握 Servlet 编程技术。
(5) 掌握 JavaBean 编程技术。
(6) 理解 MVC 编程模式。
⼆、实验基本原理与设计（包括实验⽅案设计，实验⼿段的确定，试验步骤等，⽤硬件逻辑或者算法描述）
2.1 前端控制层
(1) 前端控制类添加@WebServlet(url)注解，表⽰此为 controller 类。⽤以处理 url 的⽹络请求。
(2) 继承 HttpServlet 类，实现其中的 doGET()和 doPOST()⽅法，来处理前端的⽹络请求。
(3) doGET()和 doPOST()⽅法将调⽤ service 中的类来完成数据处理。
2.2 数据服务成。
对数据进⾏处理，如数据的类型的转换，数据内容的判断等。并调⽤ dao 中类进⾏数据持久化。
2.3 数据库接⼝层。
(1) ComConfig 类为配置类，其中配置了连接 sqlserver 的相关参数。如账号，密码，驱动等。
(2) 祖类 DaoBase ⽤于数据库连接。
(3) UserDom 类为实体类，与数据库中的 UserAccount 表对应。
(4) UserAccountDao 类进⾏执⾏ sql 语句。2.4 前端页⾯
(1) Jsp ⽂件，通过 serrion 来获取当前⽤户的信息。
(2) 使⽤ var xmlhttp=new XMLHttpRequest()；来执⾏前后端通信。
三、主要仪器设备及耗材
开发⼯具：idea
Web 服务器:tomcat
数据库：sqlserver
页⾯模板引擎：tomcat jsp-api
架构：MVC
Js 库：jquery
第⼆部分：实验调试与结果分析（可加页）
⼀、调试过程（包括调试⽅法描述、实验数据记录，实验现象记录，实验过程发现的问题等）
(1) ⽆法解析 jsp。
(2) ⽆法解释@WebServlet()。
(3) @WebServlet()不起作⽤。
(4) ⽆法加载 sqlserver 驱动。
(5) 后端内容修改，但是前端⽆法更新。
1.2 调试过程，解决⽅法
(1) 引⼊ tomcat ⽂件夹下 lib ⽂件夹下的 jsp-api 库。
前端页面模板
(2) 引⼊ tomcat ⽂件夹下 lib ⽂件夹下的 servlet-api 库。
(3) 引⼊ tomcat ⽀持。
(4) 将 sqlserver 的驱动放置在 WRB-INF/lib ⽂件夹下，将其作为项⽬部署到 tomcat.
[注]由于 sqljdbc42 在 tomcat 中部署存在的问题，当停⽌服务时，并不会 sqljdbc 并不会释
放对数据库的连接，会持续报出多连接的警告，但是并不影响对数据库的使⽤。可通过主动
配置连接池来管理或者降低 tomcat 版本。
(5) 将 webapp 前端内容标注为资源⽂件。更改配置，当框架停⽤时更新资源。清楚浏览器缓存，
当调试时，打开浏览器开发者⼯具，来防⽌页⾯记录。
⼆、实验结果及分析（包括结果描述、实验现象分析、影响因素讨论、综合分析和结论等）
2.1 登录界⾯结果如图 1.
图 12.2 注册界⾯结果如图 2.
图 2
2.3 主页界⾯如图 3
2.4 查询个⼈信息界⾯如图 4
图 3 图 4
2.5 修改个⼈信息界⾯如图 5 和图 6
图 5 图 6
2.7 取款的界⾯如图 7，取款成功的界⾯如图 8
图 7 图 82.8 转账界⾯如图 9，转账成功后对⽅账户界⾯如图 10
图 9 图 0
三、实验⼩结、建议及体会
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
实验三
第⼀部分：实验分析与设计（可加页）
⼀、实验内容描述（问题域描述）
1.1 实验内容
(1)采⽤ SSM 框架来实现实验⼆中的 Web 应⽤程序，实现⽤户的开户，编辑，查询， 销户。
(2)进⼀步实现⽤户的存款，取款和转账功能。（选做）
要求：
i. 界⾯风格⾃⾏设计，符合⼀般⽤户使⽤习惯
ii. 界⾯实现响应式布局，适合 Pad ⽤户和⼿机⽤户使⽤
1.2 实验⽬的
(1) 掌握 Spring 框架技术
(2) 掌握 SpringMVC 技术
(3) 掌握 Mybatis 技术
⼆、实验基本原理与设计（包括实验⽅案设计，实验⼿段的确定，试验步骤等，⽤硬件逻辑或者算法描述）
2.1 配置 l ⽂件
(1) 引⼊ thymeleaf 模板引擎⽤来解析前端页⾯。
(2) 引⼊ com.microsoft.sqlserver 数据库驱动。
(3) 引⼊ com.alibaba ⽤来封装 JSON，进⾏数据传输。
(4) 引⼊ org.projectlombok 进⾏实体类⾃动注解。
2.2 全局配置
(1) 新建 application.yaml ⽂件。程序会⾃动扫描其中的配置。
(2) 配置 spring 的 datasource。来配置数据库的驱动，地址，账号和参数。
(3) 配置 thymeleaf 的路径和缓存。
(4) Mybatis 扫描的 xml ⽂件和实体类包。
(5) 配置@Configuration 类，⽤来⾃定义页⾯映射。
2.3 前端控制层
(1) 类之前添加@Controller 注解，标注此为 controller 类，⽤来处理⽹络请求。
(2) 函数前@RequestMapping 注解，标注此函数⽤来处理该 url 的请求。
(3) 通过@Autowired ⾃动注解来获得 Service 的服务。
2.4 数据服务层。
(1) 类之前标注@Service，标注此类为 service 类。
(2) 通过@Autowired ⾃动注解，来获取 Mybatis 的 mapper 接⼝的服务。2.5 数据库接⼝层
(1) 接⼝前添加@Mapper，标注此接⼝为 mapper 的接⼝，程序执⾏时，mybatis 会⾃动扫描此类，
并与对应的 xml ⽂件绑定，执⾏ sql 语句。
(2) Resource ⽂件夹下新建 mybatis/mapper ⽂件夹，⾥⾯防⽌ mapper 的 xml ⽂件，根据 2.2 的
配置，mybatis 会扫描此 xml ⽂件，并执⾏其中的 sql 语句。
2.6 前端
(1) 使⽤ thymeleaf 来获取相关后端设置的相关参数。
(2) 使⽤ var xmlhttp=new XMLHttpRequest()；来执⾏前后端通信。
三、主要仪器设备及耗材
开发⼯具：idea
后端框架：springboot
Web 服务器:tomcat
数据库：sqlserver
数据库连接：mybatis
页⾯模板引擎：thymeleaf
架构：MVC
Js 库：jquery
项⽬托管：MAVEN
第⼆部分：实验调试与结果分析（可加页）
⼀、调试过程（包括调试⽅法描述、实验数据记录，实验现象记录，实验过程发现的问题等）
1.1 遇到的问题
(1) 前端页⾯⽆法更新。
(2) 前端不到访问的页⾯。
1.2 调试过程，解决办法
(1) 在 application.yaml ⽂件中配置 thymeleaf，关闭其缓存。
(2) ⾃定义配置类，添加@Configuration 注解，标注此为配置类。添加接⼝ WebMvcConfigurer，
实现其 addViewControllers(ViewControllerRegistry registry)函数，即可⾃定义页⾯映射。
⼆、实验结果及分析（包括结果描述、实验现象分析、影响因素讨论、综合分析和结论等）
2.1 登录界⾯如图 1，注册界⾯如图 2

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。