前端输入框错误提示_WEB/APP开发基础之旅--前端、服务器端、数据库综合开发案例...

本节内容就涉及到了前端、服务器端、数据库管理的综合开发，内容比较多，思路也相对复杂。从定位来说，前端主要是用户浏览网页或者APP，在浏览时就是默认发送了GET请求，即从服务器端获取内容进行显示，同时适当主动与服务器端交互操作，此时就是发送POST请求；服务器端就是接收前端的各种请求并给予响应，如对GET请求返回响应，对POST请求做出响应；数据库用于存储与项目业务相关的数据。扩大来看，所有APP或者网站都是此类模式。为了便于理解和实践，这里我们以用户注册和用户登录为案例说明这种综合开发的思路和实现过程。

前端、服务器端、数据库综合实践https://www.zhihu.com/video/1163588356197404672

首先来分析一下用户注册、登录的思路，之前也介绍过，这里再总结一下：

（1）用户注册

业务分类：用户业务
对应数据表：user表
操作分类：插入新纪录
业务逻辑：前端：根据user表结构设计输入框类型和内容服务器端：（1）使用PHP来接收前端表单的输入（2）然后连接mysql数据库，组装新增sql语句（3）执行连接对象的query方法，根据返回逻辑值确定插入是否成功，如果逻辑值为真，提示用户注册成功，否则提示检查输入是否有误。

（2）用户登录

业务分类：用户业务
对应数据表：user表
操作分类：与已存在的记录进行匹配比较
业务逻辑：前端：根据user表结构设计输入框类型和内容服务器端：（1）使用PHP来接收前端表单的输入（2）然后连接mysql数据库，组装查询与输入用户名相同sql语句（3）执行连接对象的query方法，读取返回数组中的密码值；（4）将前端输入密码与数据库中查询到的密码进行比较，如果相同则提示登录成功，跳转首页；否则提示错误，返回前端页面

然后根据上述用户注册和登录分析使用代码实现，具体参考如下：

（1）用户注册

在本地新建一个文件夹app，在app下新建一个register.html页面，用于进行用户注册。根据数据库中的user表结构，设计三个输入项，包括用户姓名输入、用户密码输入和用户手机号输入。代码参考如下，注意form表单的action属性，这里指向的是我云服务器上专门用于处理这个项目业务的php程序。

<!DOCTYPE html>
<html>
<head><title>用户注册页面</title>
</head>
<body>
<center><fieldset><form method="post" action="http://106.13.111.246/projecta/register.php"> //指向服务器端处理用户注册的PHP程序文件<label>用户姓名</label><input type="text" name="username"><br><label>用户密码</label><input type="password" name="userpwd"><br><label>用户手机</label><input type="text" name="userphone"><br><input type="submit" name="submit" value="点击注册"><input type="reset" name="reset" value="重填"></form></fieldset>
</center>
</body>
</html>

上述表单输入完成然后提交给http://106.13.111.246/projecta/register.php来进行处理，这里就是我云服务器端的projecta项目下的register.php，专门用于处理用户注册的程序。代码结构根据之前的业务逻辑设计来进行。包括接收前端表单输入、连接数据库、组装新增SQL语句并执行三部分。

<?php
// 1.获取前端输入$username1=$_POST['username'];$userpwd1=$_POST['userpwd'];$userphone=$_POST['userphone'];//2.连接数据库$servername = "localhost";$username = "root";$password = "root-123";$dbname = "projecta";// 创建连接$conn = new mysqli($servername, $username, $password, $dbname);// 检测连接if ($conn->connect_error) {die("连接失败: " . $conn->connect_error);} //3. 组装sql语句，执行新增业务,这里是新增记录$sql="insert into user values(null,'".$username1."','".$userpwd1."',".$userphone.")";if ($conn->query($sql) === TRUE) {echo "用户注册成功";} else {echo "Error: " . $sql . "<br>" . $conn->error;} $conn->close();
?>

（2）用户登录

在文件夹app下新建一个login.html页面，用于进行用户登录。根据数据库中的user表结构，设计两个输入项，包括用户姓名输入、用户密码输入。代码参考如下，注意form表单的action属性，这里指向的是我云服务器上专门用于处理这个项目业务的php程序。

<!DOCTYPE html>
<html>
<head><title>用户登录页面</title>
</head>
<body>
<center><fieldset><form method="post" action="http://106.13.111.246/projecta/login.php"><label>用户姓名</label><input type="text" name="username"><br><label>用户密码</label><input type="password" name="userpwd"><br> <input type="submit" name="submit" value="点击登录"><input type="reset" name="reset" value="重填"></form></fieldset>
</center>
</body>
</html>

上述表单输入完成然后提交给http://106.13.111.246/projecta/login.php来进行处理，这里就是我云服务器端的projecta项目下的login.php，专门用于处理用户登录的程序。代码结构根据之前的业务逻辑设计来进行。包括接收前端表单输入、连接数据库、组装查询SQL语句并执行、检查获得的用户密码与输入密码是否匹配共四部分。

<?php
// 1.获取前端输入$username1=$_POST['username'];$userpwd1=$_POST['userpwd'];//2.连接数据库$servername = "localhost";$username = "root";$password = "root-123";$dbname = "projecta";// 创建连接$conn = new mysqli($servername, $username, $password, $dbname);// 检测连接if ($conn->connect_error) {die("连接失败: " . $conn->connect_error);}
//3. 查询与输入的用户名相同的记录信息$sql="select userPwd from user where userName='".$username1."'";$result = $conn->query($sql);// $conn->query();if ($result->num_rows > 0) {// 输出数据$row = $result->fetch_row();// var_dump($row);$db_userpwd=$row[0];//4.检查输入密码和已有密码是否一致if($db_userpwd==$userpwd1){// echo '欢迎用户'.$username1.'登录';echo '<script>alert("welcome"); location.href="http://www.baidu.com";</script>';}else{echo '<script>alert("error"); history.go(-1);</script>';}} else {echo "用户不存在";}$conn->close();
?>

在这里login.php文件中，PHP操作数据库业务明显要比登录复杂。第一个是要从数据表中查询到输入的用户相关信息，这里用了查询业务。$conn->query($sql)返回的是一个包括一维数组的结果集合，要获取这个数组里的内容，就用了$conn->fetch-row()方法，获得了不含键值对的一维数组，而是使用索引方式，所以在取值的时候使用了$row[0]。可以测试一下，如果使用$conn->fetch-assoc()方法取值，是否就可以使用$row['userPwd']了。

在视频讲解过程中，尤其是在测试的时候出现了一些问题，浏览器端也进行了提示，此时就可以根据浏览器端的提示返回到程序中查找错误，同时也可以使用PHP中的var_dump（）方法来对执行语句获得的内容打印，进行中间过程的检测。

至此，前端、服务器端、数据库的入门实践就讲解完了，有关服务器端其他业务类型操作如新闻、订单等都可以先分析业务逻辑，设计程序实现思路，然后再来根据分析设计代码。在代码开发过程中还需要不断进行编译调试，这样才能获得最佳效果。

前端输入框错误提示_WEB/APP开发基础之旅--前端、服务器端、数据库综合开发案例...相关推荐

Android App开发基础篇—数据存储(SQLite数据库)
Android App开发基础篇-数据存储(SQLite数据库) 前言:Android中提供了对SQLite数据库的支持.开发人员可以在应用中创建和操作自己的数据库来存储数据,并对数据进行操作. 一. ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第二章：Android App 开发基础
第 2 章 Android App开发基础本章介绍基于Android系统的App开发常识,包括以下几个方面:App开发与其他软件开发有什么不一样,App工程是怎样的组织结构又是怎样配置的,App开 ...
Android App开发基础
Android App开发基础 App的开发特点 (1)App的运行环境 1．使用数据线把手机连到电脑上 2．在电脑上安装手机的驱动程序 3．打开手机的开发者选项并启用USB调试 4．将连接的手机设为 ...
【安卓开发系列 -- APP】APP 开发基础技术整理
[安卓开发系列 -- APP]APP 开发基础技术整理 [1]Android Studio APP 项目目录布局 [2]活动的生命周期活动的状态 : 1. 运行状态,一个活动位于返回栈栈顶时,活动 ...
直播app开发基础知识汇总
很多想进行直播app开发的朋友,可能并不太了解音视频软件开发基础知识,以下这篇文章来源网络,都是一些基础概念,转载与大家分享. 当然,这只是一篇基础知识文档,如果有需要更深度了解直播app开发知识的朋 ...
鸿蒙APP开发基础知识
鸿蒙开发基础知识目录 DevEco Studio编辑器de使用创建新项目打开一个项目新建一个文件夹新建一个布局文件新建一个Page Ability(Feature Ability) 配置Ab ...
web前端开发基础知识_前端开发是什么？学前端开发需要学什么语言？你想成为程序员吗？...
Web前端是什么前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...
适合前端工作者的iPhone Web App开发
iPhone有着丰富的软件资源,到目前为止,仅在appStore上架的软件就达十多万个,而相比之下,有着10年历史的WM系统却不过只有大约2万个应用程序. 随着ipad和iphone 4的发布,iph ...
物流快递APP开发基础功能
物流快递APP开发,物流快递APP开发功能. 1.节约成本项目投资:与线下推广的经济形式比较,物流app不只控制繁杂,并且不用想要红包很多技术性和人力资源,帮助顾客随时随地追踪信息,满足顾客. 2. ...

前端输入框错误提示_WEB/APP开发基础之旅--前端、服务器端、数据库综合开发案例...

前端输入框错误提示_WEB/APP开发基础之旅--前端、服务器端、数据库综合开发案例...相关推荐

最新文章

热门文章