基于JQuery+PHP+JSON实现的注册登录修改程序

学习是我快乐

发布日期: 2020-06-05 20:51:43 浏览量: 110
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、实践要求

要求以前后端分离的形式,运用合适的语言平台开发一个注册、登录和信息修改的小程序。

二、实现思路

2.1 总体思路

  • 采用JQuery+PHP+JSON完成实验

  • 利用三层体系结构,即模型、视图、控制器实现前端、后端分离

  • 利用ajax实现异步刷新页面,实现资源合理利用

  • 设计登录界面,实现用户登录

  • 设计注册页面,实现用户注册,即“增”

  • 设计修改页面,实现用户信息修改,即“改“

2.2 体系结构

2.3 开发工具与平台介绍

2.3.1 Sublime Text

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。

2.3.2 XAMPP

XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包。这个软件包原来的名字是 LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了。它可以在Windows、Linux、Solaris、Mac OS X 等多种操作系统下安装使用,支持多语言:英文、简体中文、繁体中文、韩文、俄文、日文等。

2.3.3 ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

2.3.4 JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

2.3.5 PHP (超文本预处理器)

PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。

2.3.6 jQuery

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。

2.4 注册功能

  • 界面:

    • 设置三个input文本输入框,一个为id,一个为username,一个为password填写注册信息
    • 设置一个submit对填写信息的提交
    • 设置一个超链接实现注册的页面跳转放回登录界面。
  • 功能:

    • 点击保存实现用户的信息写入数据库
      • 思路:通过mysqli连接MySQL数据库,将输入框中的数据保存在PHP的数组array中,利用json_encode和json_decode实现数值转换成json数据存储格式,最后利用SQL语句存入MySQL中
  • 关键源码

    1. <?php
    2. if(isset($_POST['save'])){
    3. $conn = new mysqli('localhost', 'root', '', 'app');
    4. $input = array(
    5. 'id' => $_POST['id'],
    6. 'username' => $_POST['username'],
    7. 'password' => $_POST['password'],
    8. );
    9. $data[] = $input;
    10. $data = json_encode($data);
    11. $data = json_decode($data);
    12. echo $data[0]->id;
    13. foreach ($data as $user) {
    14. $sql="INSERT INTO members (id,username,password) VALUES ($user->id,'$user->username','$user->password')";
    15. echo $sql;
    16. $result = $conn->query($sql); //查询执行成功
    17. echo $result;//返回1表示成功
    18. }
    19. header('location: index.php');
    20. }
    21. ?>

2.5 登录功能

  • 界面:

    • 设置两个input文本输入框,一个为username,另一个为password输入用户名密码
    • 设置一个button登录按钮
    • 设置一个超链接实现注册的页面跳转
  • 关键代码

    1. <?php
    2. if(!empty($_POST['username'])){
    3. $data = array()
    4. //database details
    5. $dbHost = 'localhost';
    6. $dbUsername = 'root';
    7. $dbPassword = '';
    8. $dbName = 'app';
    9. //create connection and select DB
    10. $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    11. if($db->connect_error){
    12. die("Unable to connect database: " . $db->connect_error);
    13. }
    14. //get user data from the database
    15. $query = $db->query("SELECT * FROM members WHERE username = {$_POST['username']} and password = {$_POST['password']}" );
    16. if($query->num_rows > 0){
    17. $userData = $query->fetch_assoc();
    18. $data['status'] = 'ok';
    19. $data['result'] = $userData;
    20. }else{
    21. $data['status'] = 'err';
    22. $data['result'] = '';
    23. }
    24. //returns data as JSON format
    25. echo json_encode($data);
    26. }
    27. ?>
    1. <script src="jquery-3.4.1.js"></script>
    2. <script>
    3. $(document).ready(function(){
    4. $('#getUser').on('click',function(){
    5. $.ajax({
    6. type:'POST',
    7. url:'getData.php',
    8. dataType: "json",
    9. data: { // 要传递的数据
    10. "username": $("#username").val(),
    11. "password": $("#password").val()
    12. },
    13. success:function(data){
    14. if(data.status == 'ok'){
    15. alert("登录成功!");
    16. window.location.href="index.php"
    17. }else{ alert("用户名或密码错误!");
    18. } }});});
    19. $("#username").blur(function (){
    20. $.ajax({
    21. type:'POST',
    22. url:'getData.php',
    23. dataType: "json",
    24. data: { // 要传递的数据
    25. "username": $("#username").val()
    26. },
    27. success:function(data){
    28. if(data.status == 'ok'){
    29. }else{
    30. alert("用户名不存在!");
    31. } }});});});
    32. </script>
  • 功能:

    • 用户名输入框失去焦点,判断用户是否存在
      • 思路:利用ID选择器,选择输入框username,利用JQuery的blur()事件判断是否失去焦点,利用ajax异步传值通过放回值,判断数据库中是否有该信息,若不存在则提示用户名不存在
    • 点击确认判断用户名密码是否正确。
      • 思路:利用ID选择器,选择输入框input,利用JQuery的click()事件判断是否触发事件,利用ajax异步传值通过放回值,判断数据库中用户名密码是否正确,它利用alert提示性

2.6 信息修改

  • 界面:

    • 设置三个input文本输入框,一个为id,一个为username,一个为password填写修改信息
    • 设置一个submit对填写信息的提交
    • 设置一个超链接实现注册的页面跳转放回登录界面
  • 功能:

    • 点击编辑实现用户的信息修改数据库
      • 思路:通过mysqli连接MySQL数据库,将输入框中的数据保存在PHP的数组array中,利用json_encode和json_decode实现数值转换成json数据存储格式,最后利用SQL语句存入MySQL中
  • 关键代码

    1. <?php
    2. if(isset($_POST['save'])){
    3. $conn = new mysqli('localhost', 'root', '', 'app');
    4. $input = array(
    5. 'id' => $_POST['id'],
    6. 'username' => $_POST['username'],
    7. 'password' => $_POST['password'],
    8. );
    9. //update the selected index
    10. $data_array[$index] = $input;
    11. //encode back to json
    12. $data = json_encode($data_array);
    13. $data = json_decode($data); // 解析json
    14. echo $data[0]->id;
    15. foreach ($data as $user) {
    16. $sql="update members set username='$user->username',password='$user->password' where id=$user->id";
    17. echo $sql;
    18. $result = $conn->query($sql); //查询执行成功
    19. echo $result;//返回1表示成功
    20. }
    21. header('location: index.php');
    22. }
    23. ?>

2.7 信息删除

  • 功能:

    • 点击删除实现用户的信息删除
      • 思路:通过mysqli连接MySQL数据库,将输入框中的数据保存在PHP的数组array中,利用json_encode和json_decode实现数值转换成json数据存储格式,最后利用SQL语句存入MySQL中
  • 关键代码

    1. <?php
    2. $index = $_GET['index'];
    3. $conn = new mysqli('localhost', 'root', '', 'app');
    4. $data = array();
    5. $sql = "SELECT * FROM members";
    6. $query = $conn->query($sql);
    7. while($row = $query->fetch_assoc()){
    8. $data[] = $row;
    9. }
    10. //convert to json
    11. $data = json_encode($data);
    12. $data_array = json_decode($data);
    13. //assign the data to selected index
    14. $row = $data_array[$index];
    15. $data = json_encode($data, JSON_PRETTY_PRINT);
    16. $data = json_decode($data); // 解析json
    17. $sql = "delete from members where id=$row->id";
    18. $query = $conn->query($sql);
    19. header('location: index.php');
    20. unset($data[$index]);
    21. ?>

三、成果展示

3.1 注册功能

注册前

注册

注册完成

3.2 登录功能

登录前

登录成功

登陆失败

3.3 信息修改功能

修改前

修改

修改成功

3.4 信息删除功能

删除前

删除成功

四、疑难问题及解决思路

  • 选择实现语言出现问题

    • 解决:根据课设要求,选择PHP\JAVA上出现先选择Java随着进度,在写JSP作为View中利用Ajax时错误频出,以及用IDEA开发工具配置Tomcat出现系统错误,而后选择PHP作为主要实现工具
  • 端口配置问题,在配置环境之初出现被端口占用

    • 解决:通过老师的指导,以及利用网络学习如何修改端口
  • Ajax不相应问题

    • 解决: 查找Ajax相关的资料,结合课设中老师所发的资料解决该问题

五、总结感悟

本次的课程设计,使用JQuery+PHP+JSON进行系统的开发, 在设计之余,查询过资料,了解Ajax的相关知识。在开发过程中,大大小小的会遇到些问题,在询问老师或上网查找资料的过程中,对这项开发技术的一些细节也有了更深的理解和掌握。

由于时间比较紧张,以及设计之初选用Java最终选择用PHP做为开发语言,所以对于整体的系统美化存在一定的瑕疵,但是功能基本实现,经过这两天的课程设计体会到项目开发的的不易,以及自身知识的不足,以及快速简单入门一种语言的方法:通过网络他人总结的经验简单有效的学习。

总的来说,本次的课程设计对我是一次很好的锻炼,让我在有限的时间对系统开发的有了新的了解。对分层体系结构有了一定的了解,前端和后端的区别、对未知领域的探索,从不了解JSON、Ajax时什么到能够独立使用其常用方法。

去分析一个复杂的问题,一步一步进行分解,从小问题进行解决从而实现复杂的功能。

参考资料

  • [1]. [美] Lindsay Bassett (作者) 魏嘉汛 (译者):《JSON必知必会》,人民邮电出版社,2016年出版。

  • [2]. [美]汤姆·马尔斯(作者)鉊钏(译者):《JSON实战》,人民邮电出版社,2017年出版。

上传的附件 cloud_download 报告and代码.rar ( 145.15kb, 4次下载 )
error_outline 下载需要8点积分

发送私信

43
文章数
9
评论数
最近文章
eject