网站开发应用
|
CyberSecurity
|
43
|

627 字
|
37 分钟

网站开发应用

前端 HTML

  • HTML（超文本标记语言）是构建网页的基础。
  • 学习网站：w3school

基本结构

头部 (< head >)

头部包含文档的元信息，例如字符编码和标题。

<!-- 指定当前的文档是 html  -->
<!DOCTYPE html>
<!-- 指定文档的语言为英语 -->
<html lang="en">

<!-- HTML头 -->
<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网站标题 -->
    <title>HTML STUDY</title>
</head>

主体 (< body >)

主体包含网页可见内容，如文本、图片和表格。

<!-- 一级标题，用于突出主要内容 -->
<h1>一级标题</h1>

<!-- 段落标签，用于撰写文本段落 -->
<p>段落标签</p>

<!-- 创建可点击的链接，href 属性指定目标URL -->
<a href="url">超链接</a>

<!-- 插入图片，src 属性指定图片路径 -->
<img src="url">

<!-- table 定义表格结构 -->
<table>
	<!-- tr 定义表格行 -->
	<tr>
		<!-- td 定义表格单元格 -->
		<td></td>
	</tr>
</table>

<!-- form 创建用户输入表单 -->
<form action="">
	<input type="text">
</form>

数据库 MySQL

基础命令

创建 MySQL 容器

#下载 mysql 容器
docker pull mysql:5.7

#启动 mysql 容器
docker run -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=[password] --name=[otherName] mysql:5.7

#进入容器
docker exec -it [containerId] bash

#登录 mysql
mysql -uroot -p[password]

MySQL 的 CRUD 语句

#查看数据库
show databases

#创建数据库
create database [databaseName]

#使用数据库
use [databaseName]

image-20250701195926311

#创建表
create table users(
	username varchar(50),
	password varchar(50)
);

#向表中插入数据
insert into users values ("zhangsan", "123456"), ("lisi", "123123");

#查询数据
select username,password from users;
select * from users;

image-20250701200453744

#查询 mysql 的密码在哪儿
show databases;
use mysql;
select host,user,authentication_string from user;
select authentication_string from mysql.user where user="root" and host="localhost";
  • HOST 是 localhost 代表是本地用户，%代表是远程用户。

image-20250701201533600

#更新数据
update users set password="admin123" where username="lisi";
			#将用户名为 lisi 的密码改为 admin123

#删除数据
delete from users where username="lisi";
			#删除用户名为 lisi 的数据
			
#删除表
drop table [tableName];

#删除数据库
drop database [databaseName];

编写 MySQL 初始化文件

CREATE DATABASE IF NOT EXISTS test;
USE test;

CREATE table users (
    username VARCHAR(100) NOT NULL,
    password VARCHAR(100) NOT NULL
);

insert into users VALUES ("zhangsan","123456"), ( "lisi","123123");
  • 一般开发者会留下数据库初始化文件 XXX.sql
#将 XXX.sql 初始化文件导入到容器中
docker exec -i [containerId] mysql -uroot -p[password] < data.sql

image-20250701135957709

服务端 PHP

教程

编写 login.php

<?php
    // 接收用户的输入
    $username = $_POST['username'];
    $password=$_POST['password'];
			#此处的 POST 应与前端 form 表单的 methon 一致
			#要不都是 GET，要不都是 POST

    // echo "用户输入的用户名是 $username, 用户输入的密码是 $password";

    if($username == "admin" && $password == "123456"){
        echo "登录成功";
    }else{
        echo "登录失败";
    }
?>

开启服务

编写 Dockerfile

FROM php:7.4-apache

RUN docker-php-ext-install mysqli pdo pdo_mysql

编写 docker-compose.yml

version: '3.8'

services:
  web:
    build: .
    ports:
      - "80:80"
    volumes:
      - ./src:/var/www/html
    networks:
      - net1

  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: 123456
    ports:
      - "3306:3306"
    networks:
      -net1

networks:
  net1:

构建文件结构

  • 将 index.html 和 login.php 文件放入 src 文件夹中。

image-20250701145752675

启动服务

docker-compose up -d

image-20250701145613834

前后端交互

<?php
    // 接收用户的输入
    $username = $_POST['username'];
    $password=$_POST['password'];
			#此处的 POST 应与前端 form 表单的 methon 一致
			#要不都是 GET，要不都是 POST
			#实现前后端交互，即将前端提交的数据交由后端处理
	
    echo "用户输入的用户名是 $username, 用户输入的密码是 $password";

    if($username == "admin" && $password == "123456"){
		echo "登录成功";
    }else{
		echo "登录失败";
	}
?>

与数据库交互

<?php
    // 接收用户的输入
    $username = $_POST['username'];
    $password=$_POST['password'];

    // php 连接数据库
    $conn = mysqli_connect("db","root","123456","test");
    if(!$conn){
        die("连接失败" . mysqli_connect_error());
    }

    // 从数据库中取出用户输入的用户名对应的密码
    $sql = "select password from users where username = '$username'";
    // 执行 sql 语句得到结果集
    $result = mysqli_query($conn, $sql);
    // 从结果集中取出第一行密码
    $row = mysqli_fetch_assoc($result);
    // 判断用户输入的密码是否和数据库中的密码一致
    if($password == $row['password']){
        echo "欢迎！$username";
        echo "登录成功";
    }else{
        echo "登录失败";
    }
?>

功能扩展

用户登录成功跳转管理页面

//编写用户登录功能实现文件 login.php
<?php
    //创建 session
    session_start();
    // 接收用户的输入
    $username = $_POST['username'];
    $password=$_POST['password'];

    // php 连接数据库
    $conn = mysqli_connect("db","root","123456","test");
    if(!$conn){
        die("连接失败" . mysqli_connect_error());
    }

    // 从数据库中取出用户输入的用户名对应的密码
    $sql = "select password from users where username = '$username'";
    // 执行 sql 语句得到结果集
    $result = mysqli_query($conn, $sql);
    // 从结果集中取出第一行密码
    $row = mysqli_fetch_assoc($result);
    // 判断用户输入的密码是否和数据库中的密码一致
    if($password == $row['password']){
        // echo "欢迎！$username";
        // echo "登录成功";
        $_SESSION['username'] = $username;
        echo "<script>window.location.href='admin.php';</script>";
    }else{
        echo "登录失败";
    }
?>

//编写用户登录后的 admin.php 页面
<?php
    session_start();
    if(!isset($_SESSION['username'])){
        exit("请先登录");
    }
    echo "欢迎！$username";
    echo "登录成功 <br/>";
    echo "这是后台页面，这个页面通常有大量的敏感信息<br/>";
?>

image-20250701202705756

用户退出登录

//在 admin.php 页面增加用户退出登录选项
<?php
    session_start();
    if(!isset($_SESSION['username'])){
        exit("请先登录");
    }
    echo "欢迎！$username";
    echo "登录成功 <br/>";
    echo "这是后台页面，这个页面通常有大量的敏感信息<br/>";
	
	//用户退出登录并清除用户的 session
    echo "<a href='logout.php'>退出登录</a>";
?>

//编写用户退出登录并清除用户的 session 的 logout.php 文件
<?php
    session_start();
    unset($_SESSION['username']);
    echo "<script>window.location.href='index.html';</script>";
?>

image-20250701203037228

用户注册

<!-- 编写用户注册页面 register.html  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="register.php" method="get">
        用户名:<input type="text" name="username" placeholder="请输入用户名">
        密码:<input type="password" name="password" placeholder="请输入密码">
        <input type="submit" value="注册">
    </form>
</body>
</html>

//写 register.php 用户注册模块
<?php
    $conn = mysqli_connect("db", "root", "123456", "test");
    if(!$conn){
        die("连接失败: " . mysqli_connect_error());
    }

    $username = $_GET['username'];
    $password = $_GET['password'];

    $sql = "insert into users (username, password) values ('$username', '$password')";
    $result = mysqli_query($conn, $sql);

    if($result){
        echo "注册成功 <a href='index.html'>登录</a>";
    }else{
        echo "注册失败";
    }
?>

image-20250701203835748

image-20250701203904011

用户修改密码

//在 admin.php 页面中增加修改密码模块
<?php
    session_start();
    if(!isset($_SESSION['username'])){
        exit("请先登录");
    }
    echo "欢迎！$username";
    echo "登录成功 <br/>";
    echo "这是后台页面，这个页面通常有大量的敏感信息<br/>";
	echo "<a href='logout.php'>退出登录</a>";
	echo "<a href='change_password.php?username=" . $_SESSION['username'] . "'>修改密码</a>";
?>

 

<!--  写 change_password.php 修改密码文件  -->
<?php
    // 修改密码
    session_start();
    if(!isset($_SESSION['username'])){
        exit("请先登录");
    }
    ?>
	
	<!--  用户输入新密码  -->
    <form action="change_password.php" method="get">
        新密码:<input type="password" name="password" placeholder="请输入新密码">
        <input type="submit" value="修改密码">
    </form>
	
	<!--  连接数据库并修改密码  -->
    <?php
    $username = $_SESSION['username'];
    $password = $_GET['password'];

    $conn = mysqli_connect("db", "root", "123456", "test");
    if(!$conn){
        die("连接失败: " . mysqli_connect_error());
    }
	
	//检查 $password 是否为空。如果 $password 包含有效值，执行代码块；否则跳过。
    if(!empty($password)){
        $sql = "update users set password = '$password' where username = '$username'";
        $result = mysqli_query($conn, $sql);
		
        //检查 $result 是否为 true，即更新操作是否成功。
        if($result){
            echo "修改密码成功 <a href='admin.php'>返回</a>";
        }else{
            echo "修改密码失败";
        }
    }
?>

image-20250701204603263

image-20250701204705099

相关文章：

  1. 企业信息收集
  2. 信息收集分类
  3. Web 安全前置知识
  4. 编码
  5. 暴力破解
  6. 计算机网络——应用层 DNS 协议分析
  7. 网络分析抓包工具
  8. 计算机网络——传输层协议分析
  9. 计算机网络——网络层协议分析
  10. 计算机网络模型 OSI 7 & TCP/IP 5(4)
linuxwindows
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Linux 的安装

							
							

							
Linux基础命令

							
							

							
Linux用户管理命令

							
							

							
Linux系统管理命令

							
							

							
Linux服务_FTP

							
							

							
Linux服务_SMB

							
							

							
python的安装与多版本切换

							
							

							
Java的安装和多版本控制

							
							

							
Linux计划任务

							
							

							
Linux防火墙

							
							

							
Index

							
							

							
Linux服务管理类命令

							
							

							
Linux操作系统命令

							
							

							
Linux 服务_SSH

							
							

							
Docker容器

							
							

							
Docker数据卷

							
							

							
Docker网络

							
							

							
Docker生成镜像

							
							

							
Docker搭建服务器实例

							
							

							
Docker-compose