Web——软件开发实践

淡淡的烟草味﹌ 2023-01-03 04:11 120阅读 0赞

> 1.  目的  
>     搭建Web网站以及运行环境。
> 2.  JSP程序开发步骤  
>     (1) 根据服务器环境安装及设置  
>     编写JSP程序并进行发布，首先应安装及配置服务器。应该在Windows系列相应平台上安装JDK，其次设置环境变量，在系统设置环境变量CLASSPATN、JAVA\_HOME、PATH。配置相应环境，测试安装状态。  
>     (2) 在编辑器中编写代码  
>     根据实际在记事本获Eclipse等工具下输入获修改源程序，根据程序的内容和应用选择将编好的程序以扩展名为.html或.jsp存入至发布目录中。  
>     (3) 在浏览器中执行和访问程序(Tomcat)  
>     在浏览器地址栏中输入http://localhost/目录名/待发布文件名称或者http://127.0.0.1/目录名/待发布文件名称、http://本机实际IP/目录名/待发布文件名后执行。

## **环境配置 & 源代码** ##

> [Google chrome 80浏览器安装包(点击此处下载)][Google chrome 80]

> [WinRAR 纯净安装包(点击此处下载)][WinRAR]

> [apache-tomcat-9.0.41 (点击此处下载)][apache-tomcat-9.0.41]

> [JDK11 安装包(点击此处下载)][JDK11]

> [Navicat 10.0.11 纯净版(点击此处下载) ][Navicat 10.0.11 _]

> [mysql-5.1.55 X32 (点击此处下载)][mysql-5.1.55 X32]

> [**源代码 (点击此处下载)**][Link 1]
> 
>  *  JDK 11.0.4 windows-x64  
>     IntelliJ IDEA 2020.1 x64  
>     Mysql 5.1.55  
>     Navicat 10.0.11  
>     Tomcat 9.0.41  
>     Firefox 84.0.1 x64  
>     Google Chrome 87.0.4280.88 x64

## Web案例实践 ##

1.  目的  
    熟练运用选定环境实现程序的编辑、编译和运行，能运用工具与语言开发程序；能熟练应用程序，控制页面布局、页面样式，结合Web开发语言编写Web案例程序。具备基本的Web程序开发能力。
2.  任务  
    对于任务中的每个问题，分析并设计解题思路，编制程序，通过观察和调试工具纠错，运行得到正确结果，主要通过多个小案例程序，掌握页面设计语言、方法和技术，具体如下。  
    注：本实验指导书以JSP工作原理和开发环境、语言为例，进行详细说明。  
    （1）JSP运行环境安装及常用HTML标记使用  
    要求学生熟悉JSP的开发环境，学会Tomcat服务器的安装配置和使用，掌握JSP的运行原理，使用Eclipse等工具编写简单JSP页面，运行调试，实验步骤如下。  
    1） jsp开发环境配置  
    2） 创建HTML文件  
    3） 添加文本，利用标记设置  
    4） 插入图片、超链接  
    5） 建立班级课程表  
    6） 利用框架创建子窗口  
    （2）表格、表单、框架及页面总体设计与使用  
    要求学生掌握表格、表单框架的概念、作用及设计方法，掌握CSS使用方法，结合HTML、CSS进行页面布局。利用表格显示网页，利用CSS页面布局。  
    （3）JavaScript客户端脚本编程  
    要求学生掌握常用动态网页中的常用客户端对象的使用方法。理解对象驱动机制的方式和方法，学会常用控件编写脚本程序，掌握JavaScript程序设计的基本内容和方法。

## 实验内容以及步骤 ##

**（1）设计注册页面**  
使用HTML5的新表单设计一个相对完善的注册页面，该页面将应用新的表单元素及表单的输入验证。页面应提供用户信息包括姓名、性别、出生年月日、住址等。同时对于用户各个输入信息还进行输入合法性的校验。  
用户名必须为英文和数字组合，且长度大于6位；  
验证密码强度，可以按照长度来设置强、中、弱。  
验证两次输入密码是否一致。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center]

**（2）设计视频播放器**  
应用HTML5多媒体元素的属性及相关事件，实现媒体播放器，能够播放、暂停、快播、慢播、音量调节、显示播放进度等常用功能。界面设计要求三部分。  
播放部分；播放进度条，可根据鼠标动作设定显示或隐藏；播放控制栏中提供功能键包括“播放/暂停”、“快播”、“慢播”、“增大音量”、“”减小音量“、“静音”。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 1]

**（3）绘制时钟**  
使用HTML5的canvas元素，绘制一个时钟。时钟结构包括表盘、时针、分针、秒针。绘制表盘，包括时钟中心、外圈及刻度线。绘制时针、分针和秒针。  
添加动画操作，使时针、分针以及秒针随时间变化改变位置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 2]

**（4）拖拽式点菜页面**  
应用HTML5的拖拽技术，实现一个点菜界面，在已有的菜品中，为制定顾客点选、分配。假设有三位顾客，每种菜品只能分配给任意一位顾客。分配菜品使用拖拽形式，当将某一菜品拖拽至顾客对应物品栏时，其他顾客将无法再次选择此菜品。设计界面包括两部分，一是顾客物品栏区域，一是已有菜品区域。添加各区域相应拖拽事件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 3]

**（5）购物车结算页面**  
使用表格实现购物车结算页面设计，添加样式，美化结算页面。  
设计结算页面基础结构，包括商品名称、单价、购买数量、总价。在表格最后一行，是所有购物车内商品总价格。为界面增加CSS样式，分别对表格的表头、数据信息、最后一行统计信息增加相应的样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 4]

**（1）个性留言板**  
留言板主要包括用户信息、留言信息，用户信息可以是用户名、用户头像等，留言信息与对应发表留言的用户信息处于同一区域。可以对用户头像以及留言文本增加相应样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 5]

**（2）利用HTML文字与排版的设计方法实现下图在线新闻浏览页面**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 6]

**（3）利用HTML图像的设计方法实现下图在线图文杂志页面。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 7]  
**（4）利用HTML超链接的设计方法制作下图的电子书。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70 1]

**（5）利用CSS和HTML表单form的设计方法实现下图用户注册页面。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 8]

**（1）利用CSS实现下图的报纸风格页面。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 9]

**（2）利用CSS实现下图的登录页面。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 10]

**（3）利用JavaScript实现简易在线计算器。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 11]

**（4）利用鼠标事件实现下图获取鼠标坐标位置应用。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 12]

**（5）利用CSS实现下图自适应Web主页媒体查询功能。主要适应浏览器不同的分辨率大小，自动调整页面元素布局。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 13]

**（1）漂浮广告：使用JavaScript制作一个漂浮广告，要求此广告随机在页面浮动，当遇到窗口上下左右边缘时，改变浮动轨迹。要求图片结点动态定位。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 14]

**（2）折叠式菜单：在网站中不仅可以设置导航条，还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，故采用收缩式的菜单形式。例如：当点击“订单管理”超级链接时，页面展开子菜单，包括“订单管理”，“已确定订单”和“回复管理”。主要利用显示隐藏表格的功能来实现收缩式导航菜单的功能。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 15]

**（3）下拉式菜单：用层制作下拉菜单，当用鼠标指向菜单时，会在指向的菜单下面以下拉的方式显示下拉列表，并可以通过点击下拉列表中的选项进入指定的网页。可以使用CSS和JavaScript技术共同实现。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 16]

**（4）公司网页头部和页脚制作：页面头部内容包括网站logo、导航条、Flash广告等信息。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 17]

（5）订购页面的制作：利用HTML5和CSS实现网上订购表单，同时利用JavaScript实现校验表单数据有效性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 18]

[Google chrome 80]: https://download.csdn.net/download/GodOuO/12276136
[WinRAR]: https://download.csdn.net/download/GodOuO/12304759
[apache-tomcat-9.0.41]: https://download.csdn.net/download/GodOuO/14038151
[JDK11]: https://download.csdn.net/download/GodOuO/14038160
[Navicat 10.0.11 _]: https://download.csdn.net/download/GodOuO/14038164
[mysql-5.1.55 X32]: https://download.csdn.net/download/GodOuO/14038171
[Link 1]: https://download.csdn.net/download/GodOuO/14038002
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/a8e95b2a96c54ccdba472162cc4858b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/759440a3fbcb4815a6cefb8c1e48fed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/ebe728b1ba1341d68468ecc04767ef74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/270b8094116747b7b489f35edc4c54a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/8157ad6010cc455190dbb1959b463c87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221119/ba9e54bb86274ac89017ce75108476fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221119/f66f917f02f54f3580d537efedce5237.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221119/5950500e9e6b4430aa9a7444988b6bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70]: /images/20221119/3290285347d94e928546c4c01250cff5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70 1]: /images/20221119/3a4c7b49c46b49a5a95419a22ee83228.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221119/827e07e8ca92478b94dca861a42dd049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221119/88ae86bf26c543a9b06eddf2f3e35d4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221119/1fbc8801a01342d5bc1c454359d303ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221119/12581ddca4484a7f818fd16e8d5e5d16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221119/2a4b8fcc840443a6a271517fb083fc12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221119/490f896b7a9445b5a0f1f1f8065d2a51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221119/5f3ae39c5a5b41218ad36c1fe77dc192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221119/09b292a37c034e59a292eb89bca095e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221119/7479bcdc53ed470484e7a9a57a7d999d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221119/5eb7753c503947fe8d6e70ccd1d23a7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvZE91Tw_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221119/6428d802a9df48e09f407b854fb04da7.png