实验预计耗时：30 分钟

1. 课程背景

1.1 课程目的

在前端开发中，表单是非常常用元素，在提交表单前，通常会在前端做表单验证以减少不必要的表单提交，从而减少后端程序的压力。本实验将通过 JavaScript 进行表单验证，主要原理是通过正则表达式对表单填写的内容进行匹配。在编写 JavaScript 页面结束后，在创建的 CVM 云服务器上安装 Nginx，使用 Nginx 作为静态服务器部署编写的静态页面，将 JavaScript 页面显示在浏览器上。完成本实验，学员将掌握如何使用 JavaScript 正则表达式对表单进行验证，并了解 Linux 中 Nginx 的使用过程。

1.2 课前知识准备

1.相关概念

• 环境准备相关
  • 静态网站：网站仅由 HTML，CSS，JavaScript 等前端文件组成的网站。静态网站没有与后端的数据交互，功能简单，要修改网站内容只能修改静态文件。
  • 动态网站：网站的前端文件是由后端利用模板语言动态生成的网站，生成的过程中会往往涉及复杂的数据交互，功能灵活。
  • Nginx 中间件：是一个高性能的 HTTP 和反向代理 Web 服务器，Nginx 作为中间件可以为网页提供 Web 服务功能，放入 Nginx 中的网页可以让用户在浏览器中使用访问 Nginx 的 IP 地址方式查看网页。
  • Linux 命令：Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。本实验需要使用 Linux 的 mkdir 命令创建文件夹，使用 ls 命令查看创建的文件夹下的文件等。
• 编写表单程序相关
  • HTML：HTML 称为超文本标记语言，也是一种静态标签语言，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联，从而形成网页的基本结构。
  • CSS：CSS 样式是一种用来表现 HTML 等文件样式的计算机语言，具有丰富的样式定义、易于使用和修改、层叠等特点。使用 CSS 样式修饰过的 HTML 可以让网页更加丰富。
  • JavaScript：JavaScript 作为开发 Web 页面的脚本语言，JavaScript 可以实现页面的动态交互。
  • jQuery：jQuery 是一个 JavaScript 库，封装了 JavaScript 常用的功能代码，极大地简化了 JavaScript 编程。jQuery 易于学习，使用 jQuery 能够写更少的代码，做更多的事。

2.相关原理

• Nginx 的 Web 服务：单纯的静态只能本地访问，如果需要所有人都能通过互联网访问自己开发的网页，那么就需要在云服务器中安装 Nginx，使用 Nginx 的 Web 服务功能发布自己开发的网页，这样就能实现全网所有人的观看。

• 选择器：JavaScript 要实现交互的特性的基本过程是：1.选中 HTML 中的某个 ui 标签；2.这个选中的 ui 标签要做什么。如利用 id 选择器选中【提交】按钮，再编辑跳转到提交页面的功能。选择器就是实现了选中 HTML 代码中的某个 ui 标签这个步骤，JavaScript 的选择器包括 id 选择器（选中单个）、类选择器（选中同样式）、标签选择器（选中同标签）或自身选择器（选中自身）等。
• 正则表达式：正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。在本实验中，正则表达式通过特定的逻辑字符串对表单各项制定规则，用于对该项字符串进行校验。

3.相关命令介绍：

• 安装 Nginx

yum install –y nginx

• 启动 Nginx

start nginx.service

• 创建文件夹

mkdir /usr/share/nginx/html/shop

• 查看文件夹中的文件

ls /usr/share/nginx/html/shop

• 将文件上传到 CVM 云服务器实例上

pscp -pw “linux端密码” -r “Windows端文件名” “linux用户名”@“linux端IP地址”:“linux端路径”