当前位置： 首页 > article >正文

前端js搭建（搭建后包含cookie，弹窗，禁用f12）

article 2025/3/3 20:00:38

准备

确定安装好以下工具：

  1. 文本编辑器（我用的VScode）
  2. 现代网络浏览器（firefox，Google，必应）

数据库准备

写前端之前先准备数据库

开启小皮，开启Apache、FTP、MySQL三个套件然后在软件管理下载所需软件然后打开phpAyAdmin,登录用户名和密码（可以在数据库看到）然后点击数据库，输入数据库名，点击创建输入想要的名字（不可为中文，否则后续无法连接），点击执行

然后自己编辑，创建列名

 搭建网站

首先在小皮面板的根目录下的WWW中创建一个文件夹，来存储我们的网站前端的设计

打开小皮面板，创建网站，根目录就选到我们刚才建立的那个文件夹网站首页要更改为写的前端html文件

搭建一个基础的html结构

首先创建一个文件夹，然后打开VScode，新建文件，开始搭建网页的html结构

HTML的基本结构

标签定义说明位置
<!DOCTYPE html>HTML声明标签位于文档开头，非HTML标签，告诉浏览器该文档用的是HTML5标准来确保浏览器以 HTML5 的规则进行解析和渲染网页。开头
<html></html>HTML标签页面中最大的标签，即根标签包含除声明标签外的所有内容
<head></head>文档的头部注意在head标签中我们必须要设置的标签是title文档开头部分
<title></title>文档的标题让页面拥有自己的标题<head>里
<body></body>文档的主题元素包含文档的所有内容，页面内容基本都是放到body里面的<head>外，<html>里

html标签显示的范围是整个页面的范围

head标签显示的范围是红色方框head下面的title显示的是方框里的文字

body显示

lang语言种类

在html标签，用来定义当前文档显示的语言

en-----英文

zh-CN-------中文

字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<mate charset='UTF-8'>

charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家所用到的字符

视口设置（viewport）

帮助网页在各种屏幕尺寸和分辨率的设备上自适应显示。通过设置 <meta name="viewport">，可以控制页面的缩放、宽度等特性。

最常见的视口设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    width=device-width：设定页面宽度为设备屏幕的宽度。
    initial-scale=1.0：设定页面初始缩放比例为 1（即默认大小）。

通过设置视口，网页可以在移动设备上以适当的比例显示，避免出现过小或过大的界面。

标题标签

<h1></h1>~~<h6></h6>

位置

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

 

段落标签和换行标签

段落标签：<p></p>

换行标签:<br/>

使用段落标签，两个段落之间的空隙比较大；

使用换行标签，两行之间的空隙比较小

了解充分后就写

<!DOCTYPE html>
<html lang="en">
<head>
    <mate charset='UTF-8'>
    <mate name='viewport' content="width=device-width,initial-scale=1.0">
    <title>我的第一次尝试</title>
</head>
<body>
    <h1>登录cookie</h1>
</body>
</html>

link标签

<link> 标签用于将外部资源（如样式表、图标等）链接到 HTML 文档中。最常见的使用场景是引用外部的 CSS 样式表。

  • rel="stylesheet"：指定链接的资源类型为样式表。
  • href="styles.css"：指定样式表的文件路径。

表单标签

在日常生活中，我们使用手机电脑，各种登录注册，输入密码，账户等都会用到表单标签

qq登录中被框起来的这三个都是表单标签

在HTML中，一个完整的表单通常由表单域，表单控件（也称表单元素）和提示信息3个部分构成

表单域

上方的qq的登录界面就可以看作是一个表单域，当我们输入账户密码后，点击登录，就可以将我们输入的消息输送给后台

表单域是一个包含表单元素的区域

在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器

语法格式：
 

<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>

常用属性：

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式，其值为get或post
name名称用于指定表单的名称，以区分同一个页面中的多个表单域

input表单元素

input翻译过来是输入，表单中<input>标签是用于收集用户输入的信息的

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）

格式：

<input type='属性'>

<input>标签为单标签

type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述：

属性值描述
button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox定义复选框
file定义输入字段和“浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段，该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮，重置按钮会清除表单中的所有数据
submit定义提交按钮，提交按钮会把表单数据发送到服务器
text定义单行的输入字段，用户可在其输入文本，默认宽度为20个字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册和登录界面</title>
<link rel="stylesheet" href="styles.css">
<style>
        /*设置背景*/
        body{
                background-image:url('1.png');
                background-size: cover;  
                background-repeat: no-repeat;          
}
/*设置容器样式*/
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
/*设置表单容器样式*/
.form-container{
margin:20px;
padding:20px;
border:1px solid #ccc;
width:300px;
}
/*设置输入框样式*/
input{
margin-bottom:10px;
width:100%;
}
/* 设置按钮样式*/
button{
width:100%;
}
</style>
</head>
<div class="container">
<!-- 注册表单 -->
  <div class="form-container">
    <h2>注册</h2>
    <form id="registerForm">
      <input type="text" name="username" placeholder="username" required>
      <input type="password" name="password" placeholder="password" required>
      <button type="submit">注册</button>
    </form>
  </div>

<!-- 登录表单 -->
<div class="form-container">
  <h2>登录</h2>
  <form id="loginForm">
    <input type="text" name="username" placeholder="username" required>
    <input type="password" name="password" placeholder="password" required>
    <button type="submit">登录</button>
  </form>
</div>
</div>

<script>
//注册表单提交事件监听
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();//阻止默认提交行为
  
  let formData = new FormData(this);//获取表单数据
  
//发送POST请求到zhuce.php
  fetch('zhuce.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())//将响应转换为文本格式
  .then(data => {
    alert("注册成功，你可以登录了");//提示注册成功
  });
});

//登录表单提交事件监听
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();//阻止默认提交行为
  
  let formData = new FormData(this);//获取表单数据
  
// 发送POST请求到denglu.php
  fetch('denglu.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())//将响应转换为文本格式
  .then(data => {
    alert(data);//提示返回的数据
    if(data ==='登录成功') {
          window.location.href = 'welcome.php';//重定向到welcome.php页面
}
  });
});
</script>
</body>

</html>

我们的前端设计完成

 这里还需要登录成功的跳转，所以另建一个网页在这个文件之下，作登录成功的页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>
    body {
        background-image: url('2.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        color: black; 
        text-align: center; 
    }
 
</style>
</head>
<body>
<h1>Welcome!</h1>
<h2>登录成功</h2>
<p>开始自我的探索吧</p>
</body>
</html>

 

 

 

 从小皮里面打开网站，进行注册试试成功

为了禁用f12和右键菜单，我们将前端代码更改以下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>注册和登录界面</title>
<link rel="stylesheet" href="styles.css">
<style>
        /*设置背景*/
        body{
                background-image:url('1.png');
                background-size: cover;  
                background-repeat: no-repeat;          
}
/*设置容器样式*/
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
/*设置表单容器样式*/
.form-container{
margin:20px;
padding:20px;
border:1px solid #ccc;
width:300px;
}
/*设置输入框样式*/
input{
margin-bottom:10px;
width:100%;
}
/* 设置按钮样式*/
button{
width:100%;
}
</style>
</head>
<div class="container">
<!-- 注册表单 -->
  <div class="form-container">
    <h2>注册</h2>
    <form id="registerForm">
      <input type="text" name="username" placeholder="username" required>
      <input type="password" name="password" placeholder="password" required>
      <button type="submit">注册</button>
    </form>
  </div>

<!-- 登录表单 -->
  <div class="form-container">
    <h2>登录</h2>
    <form id="loginForm">
      <input type="text" name="username" placeholder="username" required>
      <input type="password" name="password" placeholder="password" required>
      <button type="submit">登录</button>
    </form>
  </div>
</div>

<script>
//注册表单提交事件监听
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();//阻止默认提交行为
  
  let formData = new FormData(this);//获取表单数据
  
//发送POST请求到zhuce.php
  fetch('zhuce.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())//将响应转换为文本格式
  .then(data => {
    alert("注册成功，你可以登录了");//提示注册成功
  });
});

//登录表单提交事件监听
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();//阻止默认提交行为
  
  let formData = new FormData(this);//获取表单数据
  
// 发送POST请求到denglu.php
  fetch('denglu.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())//将响应转换为文本格式
  .then(data => {
    alert(data);//提示返回的数据
    if(data ==='登录成功') {
          window.location.href = 'welcome.php';//重定向到welcome.php页面
}
  });
});
</script>

<script>
// 禁用F12和开发者工具
document.addEventListener('keydown', function(e) {
    if (e.key === 'F12' || 
       (e.ctrlKey && e.shiftKey && e.key === 'I') || 
       (e.ctrlKey && e.shiftKey && e.key === 'J') ||
       (e.ctrlKey && e.key === 'U')) {
        e.preventDefault();
        alert('开发者工具已禁用');
        return false;
    }
});
  
// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    alert('右键菜单已禁用');
    return false;
});
</script>
</body>

</html>


http://www.kler.cn/a/569175.html

相关文章：

  • 聊一聊 IM 如何优化架构？
  • PyCharm接入本地部署DeepSeek 实现AI编程！【支持windows与linux】
  • hivePB级迁移方案
  • 算法-二叉树篇26-将有序数组转换为二叉搜索树
  • 基于 OpenAI ChatGPT 3.5 的 LangGraph 对话机器人示例
  • Visual Studio 2022开发C++程序实现目录下重复文件查找
  • 【SpringBoot+Vue】博客项目开发二：用户登录注册模块
  • c++ 文件及基本读写总结
  • Qt之QStateMachine等待
  • 【每日八股】MySQL篇（四）：索引（下）
  • 计算机毕业设计SpringBoot+Vue.js人力资源管理系统(源码+文档+PPT+讲解)
  • 【音视频】VLC播放器
  • Hive-08之数据仓库之建模、分析
  • 【Python 语法】Python 数据结构
  • Deepseek助力思维导图与流程图制作：高效出图新选择
  • LeetCode 热题100 3. 无重复字符的最长子串
  • CF 118A.String Task(Java实现)
  • Git与GitHub实战指南：从入门到高效协作
  • 华宇TAS应用中间件与统信最新版本操作系统完成兼容互认证
  • React Axios + Django 跨域解决方案详解