【从0开始】PHP+phpstudy留言板项目搭建教程及报错详析_php项目搭建-程序员宅基地
技术标签： web 前端 php mysql 后端 数据库 前端项目 编程与项目实战
写在前面
此文为PHP语言搭建的基于PHPstudy的留言板项目，详尽阐释功能实现及具体步骤。
文章目录
基础知识及工具准备
基础知识：四种语言
PHP
PHP是在服务器端执行的脚本语言，适用于Web开发并可嵌入HTML中。
学习网站：PHP教程 | 菜鸟教程
SQL
SQL是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。
该留言板项目后端逻辑主要由PHP及SQL实现，读者掌握SQL增删改查语句即可。
学习网站：SQL教程 | 菜鸟教程
HTML
HTML是一种标记语言，它通过一系列标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
CSS语言常嵌入HTML中，为HTML文档添加样式。为突出本文的目的性，此项目不再添加CSS语言。读者可自行探索学习。
HTML学习网站：HTML教程 | 菜鸟教程
CSS学习网站：CSS教程 | 菜鸟教程
JavaScript
留言板是一个Web项目。HTML 定义了网页的内容，CSS 描述了网页的布局，而JavaScript 控制了网页的行为。此项目运用Javascript实现弹出对话框以回显注册、登录、留言进程。
JavaScript学习网站：JavaScript教程 | 菜鸟教程
工具准备：Vscode
常用的PHP开发工具有PhpStorm、SublimeText、Zend Studio、Vscode等，本文使用Vscode进行实例分析。
官网安装地址：Visual Studio Code
官方文档地址：Vscode Docs
Vscode教程：Vscode教程 | 菜鸟教程
工具准备：PhpStudy
PhpStudy是一个PHP调试环境的程序集成包，集成最新的Apache、PHP、MySQL、phpMyAdmin、ZendOptimizer，安装后无须配置即可使用。
官网安装地址：PhpStudy Download
配置PHP环境
1.打开PhpStudy，启动WAMP
2.点击左侧栏中的软件管理，安装一个较高版本的PHP
3.安装完成后进入右侧的设置，进入扩展组件页面，打开XDebug调试组件，并记下端口
4.点击左侧的网站，点击右侧管理，再打开根目录，接着返回上一级文件夹，打开Extensions文件夹，进入php文件夹，再进入安装的php所对应的文件夹，找到php.exe，记住该php.exe的路径
5.点击设置，搜索PHP，点击在settings.json中编辑
在{}中添加如下代码并保存 注意：路径的\应替换为/
"php.validate.executablePath": "php.exe的路径",
"php.executablePath": "php.exe的路径",
例如
"php.validate.executablePath": "D:/Software/PhpStudy/Extensions/php/php7.3.4nts/php.exe",
"php.executablePath": "D:/Software/PhpStud/Extensions/php/php7.3.4nts/php.exe",
6.点击此电脑，右键打开属性，依次点击高级系统设置、环境变量，双击打开系统变量中的Path，点击新建，输入php.exe所在文件夹的路径，点击确定。
路径举例：D:\Software\PHPStudy\phpstudy_pro\Extensions\php\php7.4.3nts
7.创建一个PHP文件，检验环境是否配置成功。
代码如下：
<?php
echo"秋说";
?>
依次点击命令中心、运行、启动调试
若下方的调试控制台回显秋说，则说明PHP环境搭建成功。
环境搭建过程中若存在问题，可自行使用Google、百度寻找解决方案或在评论区留言。
项目搭建
留言板功能模块
注册功能：实现用户注册及注册验证
登录功能：实现用户登录及登录验证
留言功能：实现用户名、留言内容、留言时间在页面的输出
登出功能：实现用户的登出 服务器端清除登录信息
管理功能：实现数据的增删改查
注册功能前端
大体框架：用户名栏 密码栏 注册按钮 登录页面超链接
本文采用形式简单的前端页面以简化代码、降低阅读难度，读者可自行优化前端页面或采用前端框架。
打开phpstudy/WWW文件夹，新建registerfront.php，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<div>
<h1>用户注册</h1>
<form action="registerend.php" method="post" onsubmit="return check()"> <!--当用户离开输入字段时执行JavaScript-->
用户名:<input type="text" name="name">
<br><br>
密码:<input type="password" name="pass">
<br><br>
<input type="submit" value="提交">
<br><br>
<a href="loginfront.php">登录页面</a>
</form>
<script>
function check()//用户验证
{
let name = document.getElementsByName('name')[0].value.trim();
let pass = document.getElementsByName('pass')[0].value.trim();
let nameReg = /^[a-zA-Z0-9\u2E80-\uF999]{
1,20}$/;
if(!nameReg.test(name))//检测name是否匹配nameReg
{
alert('用户名不能出现特殊字符！');
return false;
}
let passreg = /^[a-zA-Z0-9]{
6,20}$/;
if(!passreg.test(pass))
{
alert('密码不能出现特殊字符，且不得少于六位数！');
return false;}
return true; }
</script>
</div>
</body>
</html>
实现页面打开功能： Open PHP/HTML/JS In Browser
1.在Vscode中搜索、安装扩展Open PHP/HTML/JS In Browser
2.在phpstudy/WWW文件夹中新建settings.json输入如下代码
{
"open-php-html-js-in-browser.customHost": "127.0.0.1", //本地域名
"open-php-html-js-in-browser.customUrlToOpen": "http://${host}/${relativeDirnameDocumentRoot}/${fileBasename}",
"open-php-html-js-in-browser.documentRootFolder": "D:/Software/PHPStudy/phpstudy_pro/WWW/" //站点的绝对路径
}
文件保存后，点击设置，搜索@ext:PrimaFuture.open-php-html-js-in-browser，选择图示复选框中的custom即可。
回到registerfront.php页面，单击鼠标右键，点击Open PHP/HTML/JS In Browser
注册功能后端
大体框架： 设置数据库参数 连接数据库 获取表单数据 注册验证 插入数据 跳转登录前端
PhpStudy设置数据库参数
下述步骤以数据库名称：qiushuo，用户名：qiushuo， 密码：qiushuo 为例
PhpStudy数据库工具新建表及字段
在软件管理中安装phpMyAdmin
依次点击首页、数据库工具、phpMyAdmin
输入数据库用户名、密码后进入数据库操作页面，新建两张数据表。
具体方法参考管理功能模块或通过MySQL语句实现。
若想使用MySQL语句，可学习该专栏：MySQL进阶之路 | 秋说
1 一张为user，包含id，name，pass字段，与用户注册登录有关；
2.一张为content，包含id、name，text、createtime字段，与留言实现有关。
user表：
content表：
功能实现
第一次提交数据时，id默认为1；此后每插入一次数据，id自增。
步骤：
1.在右侧的更多复选框中点击主键
2.执行SQL语句
输入ALTER TABLE user(表名) MODIFY COLUMN id INT AUTO_INCREMENT; 点击执行
若页面回显如下图所示，则说明功能实现执行成功：
功能实现步骤在content表中与user表一致，不再赘述。
注意SQL语句不要写错对应的表名
连接数据库
在phpstudy/WWW文件夹中新建conn.php，代码如下：
<?php
$servername="localhost";
$username="qiushuo";//替换为具体的数据库用户名
$password="qiushuo";//替换为具体的数据库密码
$dbname="qiushuo";//替换为具体的数据库名称
$conn=mysqli_connect($servername,$username,$password,$dbname);//连接数据库
mysqli_query($conn, "SET NAMES UTF-8");//设置字符集
?>
在phpstudy/WWW文件夹中新建registerend.php，代码如下：
<?php
$name=$_POST['name'];
$pass=$_POST['pass']; //获取表单数据
include_once "conn.php"; //运行conn文件，即连接数据库
$sql="SELECT FROM user WHERE name='$name'";
$result=mysqli_query($conn,$sql);//注册时$result若能在数据库中匹配到结果，则回显用户名存在
$num=mysqli_num_rows($result);
if($num)
{
echo "<script>alert('输入的用户名已经存在,请重新输入。'); history.back();</script>";//history.back用于返回到上一个页面
exit;
}
else{
$sql="INSERT INTO user(name,pass) values('$name','$pass')";
$result=mysqli_query($conn,$sql);
}
if($result)
{
echo "<script>alert('注册成功，请登陆');location.href='loginfront.php';</script>";
//若注册成功，则跳转到loginfront.php页面。
}
else{
printf("Error: %s\n", mysqli_error($conn));
}
查看是否成功连接数据库
在conn.php中添加如下代码即可在提交后通过页面回显查看是否成功连接数据库
if($conn)
{
echo"<script>alert('连接数据库成功');</script>";
}
else{
echo"<script>alert('连接数据库失败');</script>";
}
由下图前端回显可知，数据库连接成功：
至此，注册功能告一段落。
登录功能前端
大体框架：用户名栏 密码栏 登录按钮 注册页面超链接
本文采用形式简单的前端页面以简化代码、降低阅读难度，读者可自行优化前端页面或采用前端框架。
在phpstudy/WWW文件夹中新建loginfront.php，代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<div>
<h1>用户登录</h1>
<form action="loginend.php" method="post" > //提交表单至loginend.php
用户名：<input type="text" name="name" >
密码：<input type="password" name="pass">
<input type="submit" value="登录">
<br><br>
<a href=registerfront.php><h2>返回注册页面</h2></a>
</form>
</div>
</body>
</html>
登录功能后端
大体框架：连接数据库 获取表单数据 登录验证 跳转留言页面前端
在phpstudy/WWW文件夹中新建loginend.php，代码如下：
<?php
include_once "conn.php";
if($_SERVER["REQUEST_METHOD"] == "POST") {
//规定传参方式
$name=$_POST["name"];
$pass=$_POST["pass"];
$sql="SELECT * FROM user WHERE name='$name' AND pass='$pass'";
//使用SQL语句将参数与数据库进行匹配
$result=mysqli_query($conn, $sql);
if (mysqli_num_rows($result) == 1) {
//如果匹配成功，mysqli_num_rows被赋值为1
echo"<script>alert('登录成功');location.href='messagefront.php';</script>";
//若登录成功，则跳转到留言前端页面
} else {
//验证失败
echo"<script>alert('登录失败,用户名或密码错误！');history.back();</script>";
}
}
?>
留言功能前端
大体框架：输入框 提交按钮
本文采用形式简单的前端页面以简化代码、降低阅读难度，读者可自行优化前端页面或采用前端框架。
在phpstudy/WWW文件夹中新建messagefront.php，代码如下：
<?php
session_start(); //开启会话
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言</title>
</head>
<body>
<div>
<form action="messageend.php" method="post" >
<textarea name="text" cols="30" rows="10"></textarea>
<input type="submit" value="提交" >
</form>
</div>
</body>
</html>
留言功能后端
大体框架：session检测 获取表单数据 插入数据 遍历数据 留言输出
在phpstudy/WWW文件夹中新建messageend.php，代码如下：
<?php
include 'conn.php';
session_start();// 检查用户是否已登录
if (!isset($_SESSION['name'])) {
echo "<script>alert('请先登录');</script>";
exit();
}
$name=$_SESSION['name']; //获取已登录的用户名
$text=$_POST['text']; //获取已提交的留言内容
$createtime=date('Y-m-d H:i:s'); //设置留言时间
if(!strlen($text))
{
echo "<script>alert('留言不可为空');</script>";
exit;
}
$sql="INSERT INTO content(name,text,createtime) VALUES ('$name','$text', '$createtime')";
//插入用户名、留言内容、留言时间到数据库
$result=mysqli_query($conn,$sql);
if($result){
$query = "SELECT * FROM content ORDER BY id DESC";
$result = mysqli_query($conn, $query);
// 如果插入数据成功，则遍历留言列表并在前端输出
while ($row = mysqli_fetch_array($result)) {
echo "<div>"; //PHP与HTML包含
echo "<p>" . $row['text'] . "</p>";
echo "<p>" . $row['name'] . " 发表于 " . $row['createtime'] . "</p>";
//在"发表于"左右添加空格 使回显的页面内容清晰
echo "<br><br>";//起留言页面的分割作用
echo "</div>";
}
}
else {
echo "<script>alert('留言失败');history.back();</script>";
}
?>
要使时间后的000000消失，可以将createtime字段中的DATETIME长度/值更改为0
登出功能前端
大体框架：前端登出按钮及登出弹窗
在messagefront.php中输入如下代码：
<form action="logout.php">
<button onclick="logout()">退出登录</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function logout() {
//用axio.post()方法向登出后端文件发送一个POST请求
axios.post('/logout.php')
}
</script>
</form>
登出功能后端
在phpstudy/WWW目录新建logout.php，代码如下：
<?php
session_start();
// 在服务器端清除掉用户的登录信息
unset($_SESSION['name']);
echo "<script>alert('登出成功');location.href='loginfront.php';</script>";
exit;
管理功能
该项目基于Phpstudy的数据库工具phpMyAdmin，可使用该工具以Web 图形模式直接管理 MySQL 数据库。
1.新建数据表
2.定义数据表中字段
3.更改数据表结构
4.插入数据
5.执行SQL语句
以上功能服务于该项目的搭建，其它功能读者可自行探索。
至此，PHP+phpstudy留言板项目搭建教学完成，希望读者躬行实践。
报错详析
为了更好地定位问题，可以在执行SQL语句之前加入mysqli_ error()函数来查看错误信息，例如：
$result = mysqli_query($conn, $sql);
if (!$result) {
printf("Error: %s\n", mysqli_error($conn));
exit();
}
报错实例：
1.Error: Field 'ID' doesn't have a default value
报错原因：将ID设置为主键，但未设置为自增，导致增加数据后不能获取生成新的主键。
解决方法：参考本文功能实现模块
2.Error: Duplicate entry '1' for key 'PRIMARY'
报错原因：id已设置为主键，在注册模块中试图将第一个数据的id赋值为1，从而实现从1开始的自增，但该SQL插入语句存在逻辑错误。
如图：
第16行的语句使得程序在每次注册插入新的数据后，都会让该用户的id变为1，导致出现重复键。
解决方法：删除该语句中的id及1，程序默认从id=1开始自增。
3.注册不同的用户，但在phpMyAdmin中增加的都是同一个管理员账号数据
报错原因：后端文件包含了conn.php，conn.php代码如下：
若前端文件中定义的用户名也为username：
include_once "conn.php";
$sql="INSERT INTO user(username,password) values('$username','$password')";
在包含运行conn.php文件后，通过POST提交的username会被conn.php中的username覆盖，password同理。若注册后端逻辑不严谨，会造成管理员账号密码被多次提交至数据库。
总结
以上为PHP+phpstudy留言板项目搭建教程及报错详析实例，读者可以通过此留言板项目教程更好地认识前端与后端的区别与联系。
我是秋说，我们下次见。
智能推荐
leetcode 172. 阶乘后的零-程序员宅基地
文章浏览阅读63次。题目给定一个整数 n，返回 n! 结果尾数中零的数量。解题思路每个0都是由2 * 5得来的，相当于要求n!分解成质因子后2 * 5的数目，由于n中2的数目肯定是要大于5的数目，所以我们只需要求出n!中5的数目。C++代码class Solution {public: int trailingZeroes(int n) { ...
Day15-【Java SE进阶】IO流（一）：File、IO流概述、File文件对象的创建、字节输入输出流FileInputStream FileoutputStream、释放资源。_outputstream释放-程序员宅基地
文章浏览阅读992次，点赞27次，收藏15次。UTF-8是Unicode字符集的一种编码方案，采取可变长编码方案，共分四个长度区:1个字节，2个字节，3个字节，4个字节。文件字节输入流：每次读取多个字节到字节数组中去，返回读取的字节数量，读取完毕会返回-1。注意1:字符编码时使用的字符集，和解码时使用的字符集必须一致，否则会出现乱码。定义一个与文件一样大的字节数组，一次性读取完文件的全部字节。UTF-8字符集:汉字占3个字节，英文、数字占1个字节。GBK字符集:汉字占2个字节，英文、数字占1个字节。GBK规定:汉字的第一个字节的第一位必须是1。_outputstream释放
jeecgboot重新登录_jeecg 登录自动退出-程序员宅基地
文章浏览阅读1.8k次，点赞3次，收藏3次。解决jeecgboot每次登录进去都会弹出请重新登录问题，在utils文件下找到request.js文件注释这段代码即可_jeecg 登录自动退出
数据中心供配电系统负荷计算实例分析-程序员宅基地
文章浏览阅读3.4k次。我国目前普遍采用需要系数法和二项式系数法确定用电设备的负荷，其中需要系数法是国际上普遍采用的确定计算负荷的方法，最为简便;而二项式系数法在确定设备台数较少且各台设备容量差..._数据中心用电负荷统计变压器
HTML5期末大作业：网页制作代码 网站设计——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板_网页设计成品百度网盘-程序员宅基地
文章浏览阅读7k次，点赞4次，收藏46次。HTML5期末大作业：网页制作代码 网站设计——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业_网页设计成品百度网盘
【Jailhouse 文章】Look Mum, no VM Exits_jailhouse sr-iov-程序员宅基地
文章浏览阅读392次。jailhouse 文章翻译，Look Mum, no VM Exits!_jailhouse sr-iov
随便推点
chatgpt赋能python：Python怎么删除文件中的某一行_python 删除文件特定几行-程序员宅基地
文章浏览阅读751次。本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。AI职场汇报智能办公文案写作效率提升教程 专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。_python 删除文件特定几行
Java过滤特殊字符的正则表达式_java正则表达式过滤特殊字符-程序员宅基地
文章浏览阅读2.1k次。【代码】Java过滤特殊字符的正则表达式。_java正则表达式过滤特殊字符
CSS中设置背景的7个属性及简写background注意点_background设置背景图片-程序员宅基地
文章浏览阅读5.7k次，点赞4次，收藏17次。css中背景的设置至关重要，也是一个难点，因为属性众多，对应的属性值也比较多，这里详细的列举了背景相关的7个属性及对应的属性值，并附上演示代码，后期要用的话，可以随时查看，那我们坐稳开车了······1: background-color 设置背景颜色2:background-image来设置背景图片- 语法：background-image:url(相对路径);-可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景..._background设置背景图片
Win10 安装系统跳过创建用户，直接启用 Administrator_windows10msoobe进程-程序员宅基地
文章浏览阅读2.6k次，点赞2次，收藏8次。Win10 安装系统跳过创建用户，直接启用 Administrator_windows10msoobe进程
PyCharm2021安装教程-程序员宅基地
文章浏览阅读10w+次，点赞653次，收藏3k次。Windows安装pycharm教程新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入下载安装PyCharm1、进入官网PyCharm的下载地址：http://www.jetbrains.com/pycharm/downl_pycharm2021
《跨境电商——速卖通搜索排名规则解析与SEO技术》一一1.1 初识速卖通的搜索引擎...-程序员宅基地
文章浏览阅读835次。本节书摘来自异步社区出版社《跨境电商——速卖通搜索排名规则解析与SEO技术》一书中的第1章，第1.1节，作者： 冯晓宁，更多章节内容可以访问云栖社区“异步社区”公众号查看。1.1 初识速卖通的搜索引擎1.1.1 初识速卖通搜索作为速卖通卖家都应该知道，速卖通经常被视为“国际版的淘宝”。那么请想一下，普通消费者在淘宝网上购买商品的时候，他的行为应该..._跨境电商 速卖通搜索排名规则解析与seo技术 pdf