1.实验内容
1.1本周学习内容
Web 前端:负责开发用户所看到的内容。
(1)HTML
(2)JavaScript(Js)
(3)CSS
(4)Web 前端框架
Web 后端:主要使用各种库，API，Web 服务等技术搭建后端应用体系，确保各种 Web服务接口之间的正确通信。比如处理前端用户发起的请求，各种业务逻辑的操作，最后与数据库交互，完成增、删、改、查等数据库操作。
(1)C
(2)Java
(3)PHP
(4)Python
(5)C#
1.2实验内容及要求
(1)Web前端HTML
能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML。
(2)Web前端javascipt
理解JavaScript的基本功能，理解DOM。
在（1）的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
尝试注入攻击：利用回显用户名注入HTML及JavaScript。
(3)Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
(4)Web后端：编写PHP网页，连接数据库，进行用户认证
(5)最简单的SQL注入，XSS攻击测试
(6)安装DVWA或WebGoat平台，并完成SQL注入、XSS、CSRF攻击。
2.实验过程
2.1Web前端HTML
2.1.1启停Apache
暂停Apache服务
查看Apache服务
启动Apache服务
查看Apache服务
2.1.2HTML，表单，GET与POST方法
HTML
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网上应用的标准标记语言。它描述了网页的结构。HTML文档由一系列的元素构成，这些元素通过标签来定义，比如, ,
<div class="form-container"><h2>登录</h2><form action="#" method="post"><label for="username">用户名:</label><input type="text" id="username" name="username" required placeholder="请输入用户名"><label for="password">密码:</label><input type="password" id="password" name="password" required placeholder="请输入密码"><input type="submit" value="提交"></form>
</div>
<div class="form-container"><h2>登录</h2><form id="loginForm" action="#" method="post" onsubmit="return validateForm()"><label for="username">用户名:</label><input type="text" id="username" name="username" required placeholder="请输入用户名"><label for="password">密码:</label><input type="password" id="password" name="password" required placeholder="请输入密码"><input type="submit" value="提交"></form><div id="welcomeMessage" class="message"></div>
</div><script>// 表单验证函数function validateForm() {var username = document.getElementById('username').value;var password = document.getElementById('password').value;var welcomeMessage = document.getElementById('welcomeMessage');// 用户名和密码不能为空if (username === '' || password === '') {alert('用户名和密码不能为空！');return false;}// 简单的用户名验证：长度在3个字符之上if (username.length < 3 ) {alert('用户名长度应在3个字符之上！');return false;}// 简单的密码验证：长度在6到20个字符之间if (password.length < 6 || password.length > 20) {alert('密码长度应在6到20个字符之间！');return false;}// 如果验证通过，回显欢迎信息document.write('欢迎' + username);return false; // 防止表单提交}
</script>
$servername = "localhost";
// 设置连接数据库的用户名
$username = "root";
// 设置连接数据库的密码
$password = "20222402";
// 设置要连接的数据库名
$dbname = "20222402gbc";
// 使用mysqli创建一个新的数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
// 如果连接失败，输出错误信息并停止脚本执行
die("连接数据库失败: " . $conn->connect_error);
}
// 使用null合并运算符从POST请求中获取用户名，如果POST请求中没有该值，则将其设置为空字符串
$username = $_POST['username'] ?? '';
// 使用null合并运算符从POST请求中获取密码，如果POST请求中没有该值，则将其设置为空字符串
$password = $_POST['password'] ?? '';
// 创建一个SQL查询语句，用于从user表中查找与给定用户名和密码匹配的用户
$sql = "SELECT * FROM user WHERE username = '$username' AND password = '$password'";
// 执行SQL查询并获取结果
$result = $conn->query($sql);
// 检查查询结果中的行数是否大于0，即是否找到了匹配的用户
if ($result->num_rows > 0) {
// 如果找到了匹配的用户，输出登录成功的消息
echo " 欢迎 ! 登陆成功！";
} else {
// 如果没有找到匹配的用户，输出用户名或密码错误的消息
echo "用户名或密码错误！";
}
// 关闭数据库连接
$conn->close();
?>
创建HTML文件 代码如下
