前言
一、项目需求;
做个基础的页面,文章博客web应用实现后台交互;
二、项目模块与技术;
PHP实现web文章博客前后端交互全过程:GET、POST、AJAX请求
页面渲染交互包括前端三剑客(html,css,JavaScript)
CSS包括接入模式及嵌入模式
此web程序,引用jQuery库,html及php、与混合模式
session,cookie校验等,防前端绕过通过url请求参数获取网页
form表单提交,Ajax提交
共有六种页面,注册页面,登录页面,编辑页面,发表页面,列表页面,详情页面
文本框,用户名框,密码框,标题框,文件提交,注册按钮,登录及注销按钮
服务器数据库后台交互、保存用户信息等
界面不好看勿喷、仅基础后台交互技术方向
(本人网安人,前端与后端开发大佬多多指点)栓Q。
环境部署
//部署xampp开发集成
1、上传xampp.run包
将xampp 5.6.40.run上载至 "~" 目录
2、提升执行权限、并安装
chmod 777 xampp-linux-x64-5.6.40-1-installer.run
sh xampp-linux-x64-5.6.40-1-installer.run
3、打开 ~/.bashrc 文件、在末尾加入两行 //配置环境变量
# PATH
export PATH=/opt/lampp/bin:$PATH
4、保存退出、让环境变量生效
source ~/.bashrc
5、启动xampp
/opt/lampp/lampp start
6、创建user、blog数据库
mysql -uroot //5.6版本xampp里的数据库默认没密码
create
create table user (
id int primary key auto_increment,
username varchar(20) not null,
password varchar(20) not null,
tel varchar(20) unique,
role varchar(20) default 'guest',
path varchar(100));
-----------------------------------------
create table blog(
id int primary key auto_increment,
headline varchar(50) not null,
content text not null,
createtime datetime,
username varchar(20) not null);
sql语句备注:"create创建 指定user表。int(数字类型)id(主键约束、自增长)varchar(可变长字符串)not null(不准为空)unique(唯一)default(默认值为guest)"
##写入一个用户留作调试环境##
insert user(username,password,del,role,path) value('wanan','wanan123','13333333333','admin','');
======查看环境常用三条sql语句======
show databases; //查看所有数据库
create database blog; //创建表
use blog; //进入表
##在/opt/lampp/htdocs/里面创建一个空文件夹##
---------http://xampp服务器ip/路径------------
一、登录
“!+Enter” html框架自动列出、title标签写个网页名
style标签里写css样式、博主就记住两个"#“开头 引用时用id=,”."开头用class=
这里介绍下css样式嵌入式用法、后面页面不过多介绍了;
border: 0px solid blue; //边框蓝色:调试完成后写0隐藏
width: 500px; //宽度
height: 450px; //高度
margin: auto; //左右边界相等,居中
text-align: center; //文本框半隐字体居中
font-size: 18px; //字体大小
color:rgb(161, 18, 177); //直接用color是设置字体颜色,三个数字是调色板
border: 1px solid red; //边框1px粗、红色边框
margin-top: 30px; //上边距30px距离
margin-left: 30px; //左边距30px距离
resize: none; //禁止大文本框拉调
color: blueviolet; //字体:颜色
background-image: url('black-star.jpg'); //网页背景引入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
.div{
margin: auto;
text-align: center;
margin-top: 15%;
}
input[type="text"] {
height: 20px;
text-align:center;
display: block;
margin : 0 auto;
}
input[type="password"] {
height: 20px;
text-align:center;
display: block;
margin : 0 auto;
}
input[type="button"] {
height: 20px;
text-align:center;
display: block;
margin : 0 auto;
}
.body{
background: url(../black-star.jpg) no-repeat;
background-size: 100% 100% ;
background-attachment: fixed;
}
</style>
</head>
<body class="body"> //引入"."开头body样式;
<form action="login.php" method="POST"> //表单POST提交,跳转login.php页面
<div class="div">
用户名:<input type="text" name="username" id="user" placeholder="6-12个字母或数字" required="required">
密 码:<input type="password" name="password" id="pwd" placeholder="8-12个字母或数字" required="required">
验证码:<input type="text" name="verifycode" id="code" placeholder="验证码" required="required">
<input type="submit" value="登录">
//思路:一个大div盒子包裹一堆小标签
//input标签"text"类型文本框
//input标签"password"类型文本框 输入字符串小黑点用作隐藏密码
//input标签"submit"类型提交按钮
//name及id给个定位、placeholder半隐无作用提示字符、required提示必输入
// 空格占位符
</div>
</form>
</body>
</html>
效果图:(前面sql语句中插入过一条用户可登录)
二、注册
关键思路流程点
前端regist.html、后端regist.php
实现前端后端分离
注册按钮doRegist()触发自定义函数
前端处理获取数据,数据组包
文件特殊;用内置函数prop()获取元素的属性值
var dt=new FormData();实例化对象,文件上传表单提交
组装数据,组好接口参数
发送Ajax请求组好头部必写项
success:前面执行成功则执行后面代码,否则不执行(细节)
与后端数据进行if判断比较data与后端反馈结果regist-pass相同返回则注册成功。
前端代码如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<style>
body{
background-image: url('bg.jpg');
}
fieldset{
width: 500px;
height: 260px;
margin-left: 30%;
margin-top: 10%;
text-align: center;
color: aquamarine;
}
input{
font-size: 20px;
margin-top: 5px;
text-align: center;
}
#regist{
font-size: 25px;
background-color: rgb(201, 54, 14);
}
</style>
<script src="jquery-3.4.1.min.js"></script>
<script>
function doRegist(){
//获取数据,数据组包[默认urlencode=>username=lency&password=123456]
var user=$("#username").val();
var password=$("#password").val();
var repassword=$("#repassword").val();
var tel=$("#tel").val();
var file=$('#photo').prop('files')[0];//prop():获取元素的属性值;设置元素属性值
var dt=new FormData();//实例化对象,x文件上传的协议数据提交类型content-type:formdata
dt.append("username",user);//组装数据,接口参数
dt.append("password",password);
dt.append("repassword",repassword);
dt.append("phone",tel);
dt.append("photo",file);
//发请求
$.ajax({
url:'regist2.php',
type:'post',
contentType:false,
processData:false,
data:dt,
success:function(data){
// alert(data);
if(data=='regist-pass'){
alert('注册成功!');
location.href='login.html';
}else{
alert('注册失败!');
location.href='regist2.html';
}
}
});
}
</script>
</head>
<body>
<fieldset style="font-size: 22px;">注册系统<br><br>
<input type="text" id="username" name="user" placeholder="User"><br>
<input type="password" id="password" name="pwd" placeholder="Pass"><br>
<input type="password" id="repassword" name="repwd" placeholder="Repass"><br>
<input type="text" id="tel" name="tel" placeholder="Tel"><br>
<input type="file" id="photo" name="photo" style="margin-left: 80px;">
<input type="submit" value="Regist" id="regist" onclick="doRegist()">
</fieldset>
</body>
</html>
$_POST $_FILES 收集表单
收集表单时注意定义文件路径、需要在服务器创建保存头像的文件夹
注意提升文件夹写入权限~
我的路径是’ [root@centos7 upload]# pwd
/opt/lampp/htdocs/safe14/blog/upload ’
数据非空校验if判断
后面判断服务器是否收到文件,如果没收到文件,直接终止执行注册。确保服务器不背锅
操作数据库;
include //引用db.php文件
定义后台sql语句,定义结果(dml调用当前sql语句变量)如果后台变量sql语句执行成功)
成功插入用户注册数据返回结果为1,当返回结果等于1时,echo个’regist-pass’否则失败
dml 是db.php文件中定义好的自定义函数
dml函数中写法是连接数据库代码,设好utf8编码集。
注册后端代码如下;
<?php
//收集表单
$user=$_POST['username'];//非空
$pwd=$_POST['password'];//非空
$repwd=$_POST['repassword'];//非空,必须与密码保持一致
$tel=$_POST['phone'];//非空
$photo=$_FILES['photo'];//头像
// echo $user,$pwd,$repwd,$tel;
// print_r($photo);
$tmp_name=$photo['tmp_name'];
$name=$photo['name'];
$path="upload/$name";//相对路径,绝对路径
// chmod o+w upload/ 默认用户daemon
//校验数据
//非空
if(($user=="")||($pwd=="")||($repwd=="")||($tel=="")||($photo=="")){
die("regist-fail");
}
//确认密码与密码必须一致
if($pwd!=$repwd){
die("password not same");
}
//头像文件保存在服务器的指定目录下,专门的目录用于存储上传后的文件
$resp=move_uploaded_file($tmp_name,$path);
if($resp!=1){
die('upload-fail');
}
//操作数据库
include 'db.php';
$sql="insert user (username,password,tel,path) value('$user','$pwd',$tel,'$path')";
$res=dml($sql);
if($res==1){
echo 'regist-pass';
// echo "<script>location.href='login.html'</script>";
}else{
echo 'regist-fail';
// echo "<script>location.href='regist1.html'</script>";
}
?>
效果图:(后面有db.php “dml”函数代码)
db.php,数据库操作文件;
mysqli_connect //内置连接函数
用 mysqli_query 设置字符编码及、先把连接放前面进行设置utf8
定义结果函数,暂定个空sql查询函数留作后调用。
//DML操作
<?php
function dml($sql){
$con=mysqli_connect('localhost','root','','blog','3306');
mysqli_query($con,"set names utf8");
$res=mysqli_query($con,$sql);
return $res;
}
?>
三、主页
注销;删除;发表; 编辑;注销;
思路流程;
style标签弄点css样式渲染按钮图标
引用jQuery库
单机调用do_die()函数;用来注销用户
单机调用doDel(id)函数;用来删除文章
开启服务器session校验session_start();
include ‘db.php’;引入数据库操作,将数据库所有的值取出来,用foreach遍历,echo出来div盒子,盒子中放填变量,及单机击触发某函数事件,触发功能。
这里简单仍外面两个div一个发表一个注销
单机发表跳转另一个页面,在新的页面里发表文章上传至数据库、编辑也是,跳转至编辑后台进行处理编辑结果
不仍里面的原因,懒得调整css样式,仍里面会将里面内容乱挤
大的div 样式选择out,将第一排的列头先放进去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
</head>
<style>
body{
background-image: url('bg.jpg');
margin:auto;
margin-top: 200px;
width: 500px;
height: 600px;
}
#out{
border: 0px solid red;
width: 410px;
height: 130px;
margin: auto;
margin-top: 100px;
}
#out div{
border: 1px solid blue;
height: 25px;
width: 80px;
float: left;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
button{
font-size: 12px;
}
.div{
font-size: 20px;
color: cadetblue;
align-items: center;
text-align: center;
position: relative;
top: 90px;
}
</style>
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<script>
function do_die(){
location.href='doDot.php';
}
</script>
<script>
// function doEdit(id){
// //edit.php?id=1
// location.href='edit.php?id='+id
// }
// function doEdit(id){
// $.get(
// 'edit.php?id='+id,function(data){
// //检查响应文本的内容的某个特征
// //tile的内容是编辑,文本包含
// alert("正在进入编辑");
// location.href='edit.php?id='+id;
// }
// );
// }
function doDel(id){
var param="id="+id;
$.post(
'del.php',param,function(data){
if (data=="success"){
alert('删除成功,编号为:'+id);
//window.location.href="./welcome.php";//当前页面刷新
window.location.reload();//当前页面刷新
}else{
alert("删除失败~");
}
}
);
}
</script>
<body><div class="div">博客清单</div>
<div id="out">
<div>博客编号</div>
<div>博客标题</div>
<div>作者</div>
<div>菜单1</div>
<div>菜单2</div>
<?php
//会话控制:检查$_SESSION['isLogin']=true
//开启会话
session_start();
// echo $_SESSION['isLogin'];//Undefined variable: _SESSION
// if($_SESSION['isLogin']){
if(!@$_SESSION['isLogin']){
die('not login');
}
// else{
// echo 'not login';
// }
// }
include 'db.php';
$sql='select * from blog';
// $sql2='delete from blog where id=$id';
$results=select($sql);
foreach($results as $result){
$id=$result['id'];
$headline=$result['headline'];
$author=$result['username'];
echo "<div><a href=blog.php?id=$id>$id</a></div>";
echo "<div><a href="."blog.php?id=$id".">$headline</a></div>";
echo "<div>$author</div>";
// echo "<div><a href=edit.php?id=$id>编辑</a></div>";
// echo "<script>location.href='edit.php?id=$id'</script>";//有缺陷
// echo "<div><button οnclick=doEdit($id)>编辑</button></div>";
echo "<div><button οnclick=location.href='edit.php?id=$id'>编辑</button></div>";
echo "<div><button οnclick=doDel($id)>删除</button></div>";
// echo "<div><button οnclick=location.href='doblog.html'>发表</button></div>";
}
?>
</div>
<div class="buton"><button onclick=location.href='doblog.html'>发表</button></div>
<div class="buton"><button onclick="do_die()">注销</button></div>
</body>
</html>
效果图:(后面有按钮功能/后台代码)
四、详情
用法及思路
主页用的a标签链接过来url添加请求参数(变量$id)获取详情页内容;
这里用了link标签 href接入式CSS;
fieldset标签组合表单相关的元素里面一个大div、放一堆小div;
因此后台是".php"文件。可以写html与php混合写,html文件却不能写php代码
在fieldset里面写<?php ?>;
引用数据库,用db文件里的select函数查询sql语句返回的结果,用变量定义用下标0取值
@是防止输入不存在的id号时展示文章内容出现报错,报错信息会暴漏服务器位置,所以用@直接屏蔽,且不展示任何内容值。
上面还用get请求出id内容,用id定义变量
下面的标签看似复杂其实简单粗暴加偷懒;
放过p标签里面写php代码将标签变量内容echo出来,作者及发表事件同样用php代码echo出来
textarea标签(长文本标签)同样echo出来content
下面再放过a标签返回列表路径
完成详情页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客详情</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div id="div">
<fieldset>博客详情<br>
<?php include 'db.php';
$id=$_GET['id'];
$res=select("select * from blog where id=$id");
$username=@$res[0]['username'];
$createtime=@$res[0]['createtime'];
$headline=@$res[0]['headline'];
$content=@$res[0]['content'];
?>
<p><?php echo $headline ?></p>
<label for="">作者:<?php echo $username?></label> <label for="">发表时间:<?php echo $createtime?></label>
<textarea name="content" id="content" cols="80" rows="22"><?php echo $content;?></textarea><br>
<a href="doblog.html">返回发表</a>
</fieldset>
</div>
</body>
</html>
效果图:(后面有css样式代码)
CSS样式代码(接入式);blog.css
body{
background-image: url('black-star.jpg');
}
#div{
border: 0px solid blue;
width: 500px;
height: 450px;
margin: auto;
margin-top: 150px;
text-align: center;
}
fieldset{
width: 100%;
height: 100%;
font-size: 18px;
color:rgb(161, 18, 177);
}
.div{
border: 1px solid red;
width: 70%;
margin: auto;
margin-top: 30px;
}
input{
font-size: 25px;
}
.file{
margin-left: 30px;
}
button{
font-size: 18px;
}
textarea {
resize: none;
}
label{
color: blueviolet;
}
五、编辑
按钮:编辑/保存与返回
思路及流程;
接入式CSS;引用jQuery库;
'编辑’按钮触发函数,返回按钮超链接;
详细内容输出参照详情页面输出出来;引用数据库select函数同理
注意:不通的是标题用text标签,为了可修改
session校验,防止未登录过的用户前端绕过,url请求参数访问编辑页面。
编辑且保存调用doEdit(id);
var定义一些数据用content收集起来打包
发送post请求;
后端执行sql修改语句,用if语句作判断前后端data内容如果后端执行成功返回edit-pass一致弹出编辑成功,反之,编辑失败。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编辑</title>
<link rel="stylesheet" href="blog.css">
<script src="jquery-3.4.1.min.js"></script>
<script>
function doEdit(id){
//收集数据,打包数据
var headline=$('#headline').val();
var content=$('#content').val();
var param="headline="+headline+"&content="+content+"&id="+id;
//发post请求
$.post(
'doedit.php',param,function(data){
if(data=='edit-pass'){
// alert(data);
alert('编辑成功');
location.href='list1.html';
}else{
// alert(data);
alert('编辑失败');
}
}
);
}
</script>
<style>
input{
font-size: 12px;
}
</style>
</head>
<body>
<div id="div">
<fieldset>博客详情
<?php include 'db.php';
//session校验
session_start();
if(!@$_SESSION['isLogin']){
die('not login');
}
$id=$_GET['id'];
$res=select("select * from blog where id=$id");
$username=@$res[0]['username'];
$createtime=@$res[0]['createtime'];
$headline=@$res[0]['headline'];
$content=@$res[0]['content'];
?>
<p><?php echo "<input type=text name=headline id=headline value=$headline>" ?></p>
<label for="">作者:<?php echo $username?></label> <label for="">发表时间:<?php echo $createtime?></label>
<textarea name="content" id="content" cols="80" rows="22"><?php echo $content;?></textarea><br>
<!-- <input type="button" value="编辑" onclick="doEdit(<?php echo $id;?>)"> -->
<?php echo "<input type=button value=编辑 οnclick=doEdit($id)>"?>
<input type="button" value="返回" onclick="location.href='list.php'">
</fieldset>
</div>
</body>
</html>
效果图:(后面有更新sql语句后台代码)
doedit.php;
收集表单,开启校验,更新sql语句与成功执行判断
<?php
//收集表单数据:post请求,headline,content
$headline=$_POST['headline'];
$content=$_POST['content'];
$id=$_POST['id'];
//session校验
session_start();
if(!@$_SESSION['isLogin']){
die('not login');
}
//操纵数据库
include 'db.php';
$sql="update blog set headline='$headline' ,content='$content' where id=$id";
$res=dml($sql);
if($res==1){
echo 'edit-pass';
}else{
echo 'edit-fail';
}
?>
六、删除
方法
回查主页代码中的删除按钮使用方法如下;
div盒子单击触发事件,调用函数doDel();
用id收集取值,发送post请求
调用del.php后台,后台执行删除sql语句,前后端data用if判断返回结果success,前后端一致则成功,反之删除失败。
下方删除了部分与删除无关的代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
</head>
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
function doDel(id){
var param="id="+id;
$.post(
'del.php',param,function(data){
if (data=="success"){
alert('删除成功,编号为:'+id);
//window.location.href="./welcome.php";//当前页面刷新
window.location.reload();//当前页面刷新
}else{
alert("删除失败~");
}
}
);
}
</script>
<body><div class="div">主页</div>
<div id="out">
<?php
echo "<div><button οnclick=doDel($id)>删除</button></div>";
?>
</div>
</body>
</html>
效果图:(后面有删除sql语句后台代码)
del.php;
开启校验,删除对应编号的文章id,删除sql语句与成功执行判断
<?php
//session校验
session_start();
if(!@$_SESSION['isLogin']){
die('not login');
}
$id=$_POST['id'];
//删除对应编号的文章记录
include 'db.php';
$sql="delete from blog where id=$id";
$res=dml($sql);
if ($res==1){
echo 'success';
}else{
echo 'failed';
}
?>
七、注销
方法
回查主页代码中的注销按钮使用方法如下;
div盒子单击触发事件,调用函数do_die();
非常简单就一个逻辑,单机注销按钮后,直接跳转注销后台(doDot.php),处理注销。
下方删除了部分与注销无关的代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
</head>
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<script>
function do_die(){
location.href='doDot.php';
}
</script>
</script>
<body>
<div class="div">主页</div>
<div id="out">
</div>
<div class="buton"><button onclick="do_die()">注销</button></div>
</body>
</html>
效果图&没有效果图,注销后直接返回至登录界面:(下面有注销后台的代码)
doDot.php
开启会话校验,将isLogin直接关掉(这里isLogin是布尔值型,只有开和关session)
<?php
session_start();
$_SESSION['isLogin']=false;
echo "您已注销";
echo "<script>location.href='login.html'</script>";
?>
八、发表
思路及方法
回看主页代码中的发表按钮使用方法如下;
主页面代码单击发表div盒子就一个跳转链接,链接地点:doblog.html
下面是发表前端代码;
接入式CSS;引用jQuery库
大div里放个标题text与textarea,和一个发表按钮
单机按钮触发doAdd()自定义函数
准备数据:定位,获取,拼装URL编码,post请求及前后端data比较
if判断,后端发表成功返回add-pass,与前端一致则发表成功,反之发表失败。
发表成功后跳转至主页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发表</title>
<link rel="stylesheet" href="blog.css">
<script src="jquery-3.4.1.min.js"></script>
<script>
function doAdd(){
//准备数据:定位,获取,拼装URL编码
var headline=$('#headline').val();
var content=$('#content').val();
var param="headline="+headline+"&content="+content;
$.post(
'doblog.php',param,function(data){
if(data=='add-pass'){
alert('发表成功');
location.href='list.html';
}else{
alert('发表失败');
}
}
);
}
</script>
</head>
<body>
<div id="div">
<fieldset>博客发表<br>
<input type="text" id="headline" name="headline"><br>
<textarea name="content" id="content" cols="80" rows="22"></textarea><br>
<button onclick="doAdd()" type="submit">发表</button>
</fieldset>
</div>
</body>
</html>
效果图:(后面有发表后台代码)
前端文件:doblog.html 后端文件:doblog.php
<?php
$headline=$_POST['headline'];
$content=$_POST['content'];
session_start();
//空校验、及session校验
if(($headline=='')||($content=='')||(!@$_SESSION['isLogin'])){
die('data null');
}
//写数据进入数据库
include 'db.php';
$sql="insert blog(headline,content,createtime,username) value('$headline','$content',now(),'lency')";
$res=dml($sql);
if($res==1){
// echo "<script>alert('发表成功')</script>";
// echo "<script>location.href='listt.html'</script>";
echo "add-pass";
}else{
echo 'add-fail';
}
?>
全部文件
login.html(登录页) | regist.html(注册页) | regist.php(注册后台)
list.php(主页) | blog.php(详情页) | edit.php(编辑页)
doedit.php(编辑后台) | del.php(删除后台) | doDot.php(注销后台)
doblog.html(发表页) | doblog.php(发表后台)
blog.css(样式文件) | jquery-3.4.1.min.js(JS文件) | db.php(数据库后台)
xampp-linux-x64-5.6.40-1-installer.run(环境部署文件)
手敲报错信息排查方法:
1、查找多写少些字符,标点符号使用规范;
2、出现代码执行成功,或数据写入成功,却反向报错失败。检查php代码结尾的?>下方是否有回车,有则应当清空;
3、如页面无任何反应,无报错信息,应当地毯式从头到尾用echo或alert打印、弹出排查代码执行结果;
4、如无响应,无跳转,可浏览器F12查看network网络及控制台等等。分析走向及局部报错信息;
5、注意类型及运算符;" 等等于 " 与 “绝对等于” && " 数字1 " 与 " 字符串1 " && " 布尔true " && " 字符串true "等等 … …
6、切记*;修改代码后应当习惯刷新浏览器在进行功能测试;
总结
一些简单的系统web应用开发,前台与后台交互及登录校验,和一些PHP代码基础使用技术
不管是哪个岗位的IT小白,多少掌握点开发基础能力,也会对自己有所帮助
此文章及web系统纯博主手打/开发
希望能帮助到你
早安☀