测网站打开的速度的网址ui界面设计说明范文

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

测网站打开的速度的网址,ui界面设计说明范文,做网站标题头像,天津网站定制公司前言 本博客主要讲述利用php环境实现一个简单的前后端结合的用户登录和注册功能。phpstudy是PHP调试环境的集成包#xff0c;该程序包集成了 ApachePHPMySQLphpMyAdmin 等多个工具#xff0c;是很好用的调试环境的程序集成包。 目录 前言

1. 准备工作 1.1 工具 1.2 php…前言 本博客主要讲述利用php环境实现一个简单的前后端结合的用户登录和注册功能。phpstudy是PHP调试环境的集成包该程序包集成了 ApachePHPMySQLphpMyAdmin 等多个工具是很好用的调试环境的程序集成包。 目录 前言
2. 准备工作 1.1 工具 1.2 phpstudy 介绍
3. 创建网站 2.1 搭建PHP环境
4. 用户登录和注册功能 3.1 思路 3.2 准备阶段 3.3 前端部分 3.3.1 登录的前端页面 3.3.2?注册的前端页面 3.4 验证注册的数据 3.4.1 设置验证规则 3.4.2 phpMyAdmin 管理数据库 3.4.3 PHP 连接数据库 3.4.4 保存注册的数据到数据库中 3.5??登录验证 3.5.1 连接数据库 1. 准备工作 1.1 工具 在phpstudy官网中下载即可选择对应的电脑位数 链接Windows版phpstudy下载 - 小皮面板(phpstudy) 下载好压缩包后新建一个文件夹用来解压压缩包里面的文件。解压之后找打该文件夹里面有如下文件接着我们进行安装。选择自定义安装路径安装到你想安装的位置即可这里不展开来说。 安装好以后就可以在桌面看到该软件了 1.2 phpstudy 介绍 在桌面找到该软件后双击打开它就可以看到如下页面然后我们需要在该集成包中下载一些软件 下载之后就回到主页去看本次的案例我使用 Nginx 来启动 Web 服务这里选择可以多样 启动MySQL时会出现启动不了的情况 能正常启动则跳到 “2.创建网站” 解决 window键 R 输入SERVICES.MSC 回车 找到 mysql服务 后右键停止服务再重新启动即可 SERVICES.MSC还有一种情况可能是端口被占用的情况 这边推荐博客使用phpStudy显示3306端口被占用该怎么办_phpstudy3306端口被占用怎么办-CSDN博客
5. 创建网站 2.1 搭建PHP环境 点击创建网站开始初始化配置 注端口可能存在被占用的情况这时我们可以在设置中查看没有被占用的端口号然后在创建网站时选择该端口即可 然后我们打开网站 也可以直接在网页中输入cs81 也可以启动 cs —- 网站域名 81 — 端口号 这时在WWW下的cs文件就生成了官方默认给我们的文件 可以把这些删除掉放入我们写的网页建议不删因为容易因未知原因报错 接下来我们来测试放入我之前练习htmlcss时写的静态网页文件 然后返回创建的网页也就是cs81该网站域名点击左上角的刷新就可以看到测试成功了 到这里我们PHP环境就配置成功了接下来就基于该环境下来编写一个简单的用户登录和注册的功能涉及到前端和后端以及数据库的数据交互。
6. 用户登录和注册功能 3.1 思路 在写这个功能时我们来理清一下大致思路 新用户需要注册把注册时的数据如用户名密码和邮箱存放在数据库中已经注册过的用户可以直接登录登录这里的用户名和密码需要和数据库中的数据进行验证可以在php文件中写验证规则验证用户名的唯一性若用户名不存在则不允许登录用户名正确若密码错误也不允许登录密码存在后端的数据库中 接下来一步一步来实现具体的功能 3.2 准备阶段 在phpstudy中新建一个网站这里我建立了一个网站域名为 localhost 端口号为 80 的网站在该文件夹中新建一个名叫 re_login 的文件然后拖动该文件在 VSCode 中打开建立几个必要的文件如下图(user.php文件用不到可不建立) index.html 为入口文件这里主要编写前端登录页面 register.html 为跳转页面是注册的前端的页面 login.php 用于验证用户登录时的数据验证结合数据库的验证 register.php 对注册信息的验证及操作数据库把成功注册的数据保存到数据库中 xiaomi.html 为用户成功登录后显示的网页 3.3 前端部分 3.3.1 登录的前端页面 效果图如下 代码如下 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录/titlestyleform{max-width: 400px;height: 300px;background-color: rgba(247, 247, 247, 0.7);border: 1 solid #E4E4E4;margin: 100px auto;color: black;border-radius: 5px;padding: 25px 45px;}body{background-repeat: no-repeat;background-image: url(xingkong.png);background-size: 100%;}div{width: 100%;height: 35px;line-height: 35px;margin-top: 50px;position: relative;}input{position: absolute;right: 80px;width: 60%;height: 25px;line-height: 25px;border: 1px solid #DADADA;color: #888;outline: none;font-size: 12px;padding: 3px 3px 3px 5px;box-shadow: inset 0 1px 4px #ECECEC;}input[typesubmit]{width: 50%;height: 40px;line-height: 15px;font-size: 15px;background-color: #b5ccf3;border: none;box-shadow: none;border-radius: 10px;color: #FFF;position: relative;top: 50px;left: 50%;transform: translateX(-50%);}input[typesubmit]:hover{cursor: pointer; /手型/background-color: rgb(139, 205, 246);}a{width: 180px;display: block;margin: 80px auto;}/style /head bodyform action./login.php methodpostdivlabel forname用户名/labelinput typetext idname namename placeholder请输入用户名 required/divdivlabel forpass密 nbsp;nbsp;nbsp; 码:/labelinput typepassword namepass idpass placeholder请输入密码 required/divinput typesubmit namelogin value登录a hrefregister.html还没有账号注册一个/a/form /body /html代码解释 因为实现的简单的页面直接在当前头文件编写CSS代码就好了建立一个form表单用于提交数据进行验证action 提交的地址提交到 login.php 中进行登录的验证以 post 的方式发送数据用户名和密码输入框中都添加了required 属性设置该字段不能为空如下图给登录按钮设置标识“login”方便后面获取 写完登录的前端代码之后在网页中输入如下代码即可进入该页面如上图登录页面 http://localhost/re_login/register.html3.3.2注册的前端页面 效果图如下 代码如下 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title注册/titlestyleform{max-width: 400px;height: 350px;background-color: rgba(247, 247, 247, 0.7);border: 1 solid #E4E4E4;margin: 100px auto;color: black;border-radius: 5px;padding: 25px 45px;}body{background-repeat: no-repeat;background-image: url(xingkong.png);background-size: 100%;}div{width: 100%;height: 35px;line-height: 35px;margin-top: 20px;position: relative;}input{position: absolute;right: 80px;width: 60%;height: 25px;line-height: 25px;border: 1px solid #DADADA;color: #888;outline: none;font-size: 12px;padding: 3px 3px 3px 5px;box-shadow: inset 0 1px 4px #ECECEC;}input[typesubmit]{width: 50%;height: 40px;line-height: 15px;font-size: 15px;background-color: #b5ccf3;border: none;box-shadow: none;border-radius: 10px;color: #FFF;position: relative;top: 50px;left: 50%;transform: translateX(-50%);}input[typesubmit]:hover{cursor: pointer; /手型/background-color: rgb(139, 205, 246);}a{width: 180px;display: block;margin: 80px auto;}/style /head bodyform actionregister.php methodpost novalidatedivlabel forname用户名:/labelinput typetext idname namename placeholder请输入用户名 required/divdivlabel forpass密 nbsp;nbsp;nbsp; 码:/labelinput typepassword namepass idpass placeholder请输入密码 required/divdivlabel forqpass密 nbsp;nbsp;nbsp; 码:/labelinput typepassword nameqpass idqpass placeholder请输入密码 required/divdivlabel foremail邮nbsp;nbsp;nbsp;箱/labelinput typeemail idemail nameemail placeholder请输入邮箱 pattern[^][^][.com\(] required/divinput typesubmit namereg value注册a href./index.html已经有账号了去登录/a/form /body /html代码解释 和登录页面差不多就是多了确认密码和邮箱这两个输入框以及一些其他区别 与登录页面不同的是在注册的 from 表单中加了novalidate 属性该属性是去掉 from 表单自带的验证功能防止数据卡在前端到不了后端进行验证表单提交的地址是register.php 在该文件中编写代码对注册的数据进一步验证以及把能正确注册的用户数据保存到数据库中方便在登录时进行数据验证其他基本与登录的代码含义大差不差 pattern 是自己写的验证规则中括号中写正则表达式。pattern“[]*[]*[.com\)]” 对邮箱的验证写规则符号的前后不能再出现符号而且必须以.com 为后缀当然验证规则可以自己写改一下正则表达式即可。 写完登录的前端代码之后在网页中输入如下代码即可进入该页面如上图登录页面 http://localhost/re_login/register.html也可以点击 “还没有账号注册一个” 这个超链接实现注册页面的跳转。 3.4 验证注册的数据 3.4.1 设置验证规则 到这里我们就开始编写 php 代码了。在register.php 中编写 php 代码。 首先我们把注册时传动过来的数据进行验证注册时有用户名、密码、确认密码、邮箱这四个数据可以使用 if 来进行规则验证。 1、注册时的用户名不能为空可使用函数 empty来检验数据是否为空。如果为空则函数返回为真if 语句成立代表着用户名为空则输入提示信息并且让程序结束掉、 \(_POST 是预定义的变量用于收集来自 method“post” 的表单中的值。 if(empty(\)_POST[name])){die(用户名不能为空);}跳转到register.php 文件去执行输入提示信息 2、注册时的密码不能为小于6位数可自行设定。 if(strlen(\(_POST[pass]) 6){die(密码不能小于6位!!);}验证和用户名基本一致 3、验证两次密码输入是否一样。把 post 过来的数据进行 逻辑判断 if(\)_POST[pass] ! \(_POST[qpass]){die(两次输入的密码不一致);}4、验证邮箱的有效性 if(!filter_var(\)_POST[email],FILTER_VALIDATE_EMAIL)){die(请输入有效的邮箱格式!);}filter_var() 函数通过指定的过滤器过滤一个变量。第一个参数是规定要过滤的变量第二个参数是规定要使用的过滤器的 ID。FILTER_VALIDATE_EMAIL是把值作为 e-mail 地址来验证。如果函数返回真则是有效的email地址验证通过 5、保护密码 \(pass_hashpassword_hash(\)_POST[pass],PASSWORD_DEFAULT);password_hash 函数是对密码进行加密的函数形成一串没有规律、杂乱的字符串保证了用户信息的安全性。PASSWORD_DEFAULT是一种加密规则。返回来的字符串用一个变量保存起来方便后面传到数据库中 下图就是注册后密码加密后显示的字符串 3.4.2 phpMyAdmin 管理数据库 使用数据库管理工具 phpMyAdmin 工具管理数据库。首先在 PHP 集成包中下载 phpMyAdmin 工具 安装位置一般选择在 WWW 文件下。然后点击管理就会跳出要登录的页面用户名和密码默认是 root 就可以直接登录了。当然也可以修改密码在数据库一栏中点击修改密码再输入新密码即可 进入到数据库管理页面后新建一个数据库名字自拟然后在该数据中新建一张表用来存放用户注册的信息。然后点击右下角的保存即可 3.4.3 PHP 连接数据库 编写 PHP 代码来连接数据库 \(mysqli new mysqli(localhost,root,root,lo_db);if(\)mysqli-connect_error){die(数据库连接错误. \(mysqli-connect_error);}实例化一个数据库对象localhost 为本地服务器上的数据库第一个 root 是用户名第二个 root 是密码lo_db 是要连接的数据库名 mysqli-connect_error是一个在 PHP 中使用对象范式的方式来检查 MySQLi 数据库连接时是否发生错误的函数。使用 if 语句来判断返回值为假的话说明连接数据库失败打印连接失败的原因保证用户名和密码以及数据库名的正确性 数据库连接成功后还不能把信息往数据表里面存放。 3.4.4 保存注册的数据到数据库中 \)name \(_POST[name]; \)mail \(_POST[email];if(isset(\)_POST[reg])){\(sql INSERT INTO tuser (name,email,pass_hash) VALUES (\)name,\(mail,\)pass_hash);\(mysqli-query(\)sql);if(\(mysqli-affected_rows 0){echo scriptalert(注册成功!);history.go(-1);/script;}}声明两个变量用来保存用户名和密码接着检测用户是否点击了注册这个按钮如果点击的话就把能成功注册的数据传到数据表中。**isset()**函数用于检测变量是否已设置并且非 NULL。sql 变量用来保存用户的信息接着是 SQL 语句向指定表tuser中添加对应的值 m y s q l i − q u e r y ( mysqli-query( mysqli−query(sql) 执行 SQL 语句用 affected_row 来判断是否新增了数据行新增的话则表示注册成功数据也成功存放到数据表中并打印提示信息。 如下图是已经注册过的用户 自此注册的功能就实现好了。下面是注册功能register.php 的完整代码 ?php/* 判断用户名是否为空*/if(empty(\)_POST[name])){die(用户名不能为空);}/* 对密码进行规则验证/if(strlen($_POST[pass]) 6){die(密码不能小于6位!!);}/ 判断输入的两次密码是否一致/if(\(_POST[pass] ! \)_POST[qpass]){die(两次输入的密码不一致);}/ 验证邮箱的有效性/if(!filter_var($_POST[email],FILTER_VALIDATE_EMAIL)){die(请输入有效的邮箱格式!);}/ 对密码加密保证数据的安全/\(pass_hashpassword_hash(\)_POST[pass],PASSWORD_DEFAULT);/ 保存用户的数据/\(name \)_POST[name];\(mail \)_POST[email];/ 连接数据库/\(mysqli new mysqli(localhost,root,root,lo_db);if(\)mysqli-connect_error){die(数据库连接错误. $mysqli-connect_error);}/ 向数据表中传入用户的数据方便后面对登录进行验证/if(isset(\(_POST[reg])){\)sql INSERT INTO tuser (name,email,pass_hash) VALUES (\(name,\)mail,\(pass_hash);\)mysqli-query(\(sql);if(\)mysqli-affected_rows 0){echo scriptalert(注册成功!);history.go(-1);/script;}}3.5登录验证 登录功能同样需要连接到数据库。我们直接把在写注册功能时连接数据库的代码拷贝过来即可 \(mysqli new mysqli(localhost,root,root,lo_db); if(\)mysqli-connect_error){die(数据库连接错误. \(mysqli-connect_error); } \)pass_hashpassword_hash(\(_POST[pass],PASSWORD_DEFAULT); \)name \(_POST[name];这里只需要声明两个变量就行一个用来保存用户名一个用来保存登录的密码。接着来检查用户是否点击了登录这个按钮和上面注册的代码差不多用 if 来判断如果用户点击了登录这个按钮就写一个 sql 语句然后用 query 函数发送数据到数据库中去执行再用 fetch_assoc 函数返回一个结果集用一个变量来保存这个结果集代码如下 if(isset(\)_POST[login])){\(sql SELECT pass_hash FROM tuser WHERE name\)name;\(res \)mysqli-query(\(sql)-fetch_assoc(); }接着来判断返回的这个结果值是否为真为真则在数据库中找到当前用户输入的用户名在数据库中是否存在不存在则结束进程并打印提示信息“用户不存在”若输入的用户名存在则进一步判断输入的密码是否正确。我们一下就可以想到可以用 if-else 来进行写 代码如下 if(\)res){if(password_verify(\(_POST[pass],\)res[pass_hash])){echo scriptalert(登录成功) ;window.location.hrefxiaomi.html;/script;}else{echo scriptalert(密码错误!);history.go(-1);/script;}}else{echo scriptalert(用户不存在!);history.go(-1);/script;}password_verify(KaTeX parse error: Undefined control sequence: [ at position 7: _POST\̲[̲pass],res[“pass_hash”—-password_verify() 函数用于验证密码是否和散列值匹配。pass_hash 是我们在注册时把密码变成一个散列值存放在数据库中password_verify() 函数则用来验证本次输入的密码映射成的散列值和在数据库中密码的散列值是否相等相同则表示登录成功跳转到 xiaomi.html 页面该页面是本人联系HTMLCSS 写的用来测试登录成功的页面大家可以放入其他自己写的网页来进行测试 ps上面这个 if 语句其实可以放在判断用户是否点击登录按钮的 if 语句中意思就是要是用户连登录按钮都没点也没必要验证其他的东西$res 的值必然为空 下面是完整的登录验证 PHP 代码 ?php / 连接数据库/ \(mysqli new mysqli(localhost,root,root,lo_db); if(\)mysqli-connect_error){die(数据库连接错误. \(mysqli-connect_error); } \)pass_hashpassword_hash(\(_POST[pass],PASSWORD_DEFAULT); \)name $_POST[name]; / 判断用户是否点击了登录按钮*/ if(isset(\(_POST[login])){\)sql SELECT pass_hash FROM tuser WHERE name\(name;\)res \(mysqli-query(\)sql)-fetch_assoc();/**登录验证 */if(\(res){if(password_verify(\)_POST[pass],$res[pass_hash])){echo scriptalert(登录成功) ;window.location.hrefxiaomi.html;/script;}else{echo scriptalert(密码错误!);history.go(-1);/script;}}else{echo scriptalert(用户不存在!);history.go(-1);/script;} }到这里整个php环境下写登录注册功能的过程就已经结束了我上传了本篇实例的一些资源包如果能帮到和我一样的新手小白我会非常开心该案例非常适合新手练习也欢迎大佬们看到错误或者不妥的地方能批评指正。 资源包链接链接https://pan.baidu.com/s/1HhW0VV4rU60eiab0UsnYYwpwd1689 提取码1689 案例教学参教视频 【跟师兄做一个注册登录功能前端部分-哔哩哔哩】https://b23.tv/CNHvTeT 【跟师兄做一个注册登录功能后端部分-哔哩哔哩】https://b23.tv/CYgKSDf 总结 该案例结合了前端后端数据库来实现的用户登录和注册功能利用的是PHP集成包工具来搭建环境在此环境之下实现。也可以利用 JavaWeb 来实现该功能当然这比本博客介绍的实现方法偏难大家可以去尝试一下今后我也会去学到 我在搭建 PHP 环境的时候出现了很多的错误一开始尝试不用 phpMyAdmin 来管理数据库尝试用数据库可视化工具——navicat 来建立数据库然后在 PHPstudy 中建立数据库编写php来连接数据库但是后面遇到了各种各样的错误什么数据库密码不正确数据库不存在还有无法连接数据库1045-access denied …、服务名无效等甚至后面我重装了mysql服务后面还是觉得用 phpMyAmind 更香大家遇到什么问题的话多去搜搜只有去搜了才能解决问题没解决更焦虑 最后每篇一言世上无难事只怕有心人。