实验一

第一部分：实验分析与设计（可加页）

一、实验内容描述（问题域描述）

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 来监听输入区的变化，通过 document.getElementById("").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

三、实验小结、建议及体会

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

实验二

第一部分：实验分析与设计（可加页）

一、实验内容描述（问题域描述）

1.1 实验内容
(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.1 遇到的问题
(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

三、实验小结、建议及体会

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

实验三

第一部分：实验分析与设计（可加页）

一、实验内容描述（问题域描述）

1.1 实验内容
(1)采用 SSM 框架来实现实验二中的 Web 应用程序，实现用户的开户，编辑，查询， 销户。
(2)进一步实现用户的存款，取款和转账功能。（选做）
要求：
i. 界面风格自行设计，符合一般用户使用习惯
ii. 界面实现响应式布局，适合 Pad 用户和手机用户使用
1.2 实验目的
(1) 掌握 Spring 框架技术
(2) 掌握 SpringMVC 技术
(3) 掌握 Mybatis 技术

二、实验基本原理与设计（包括实验方案设计，实验手段的确定，试验步骤等，用硬件逻 辑或者算法描述）

2.1 配置 pom.xml 文件
(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

图 1 图 22.2 修改个人信息界面如图 3 和图 4

图 3 图 4
2.3 取款界面和取款成功界面如图 5 和图 6

图 5 图 6
2.4 转账界面如图 7，转账成功后对方账户界面如图 8

图 7 图 8
2.5 存款界面如图 9，存款成功界面如图 10

图 9 图 10

三、实验小结、建议及体会

ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp