一、实践要求

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

二、实现思路

2.1 总体思路

采用JQuery+PHP+JSON完成实验

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

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

设计登录界面，实现用户登录

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

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

2.2 体系结构

2.3 开发工具与平台介绍

2.3.1 Sublime Text

Sublime Text3 是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

2.3.2 WAMP

Windows下的Apache+Mysql/MariaDB+Perl/PHP/Python，一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。随着开源潮流的蓬勃发展，开放源代码的LAMP已经与J2EE和.Net商业软件形成三足鼎立之势，并且该软件开发的项目在软件方面的投资成本较低，因此受到整个IT界的关注。LAMP是基于Linux，Apache，MySQL/MariaDB和PHP的开放资源网络开发平台，PHP是一种有时候用Perl或Python可代替的编程语言。这个术语来自欧洲，在那里这些程序常用来作为一种标准开发环境。名字来源于每个程序的第一个字母。每个程序在所有权里都符合开放源代码标准：Linux是开放系统；Apache是最通用的网络服务器；mySQL是带有基于网络管理附加工具的关系数据库；PHP是流行的对象脚本语言，它包含了多数其它语言的优秀特征来使得它的网络开发更加有效。开发者在Windows操作系统下使用这些Linux环境里的工具称为使用WAMP。

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中

关键源码

<?php
if(isset($_POST['save'])){
  $conn = new mysqli('localhost', 'root', '', 'app');
  $input = array(
    'id' => $_POST['id'],
    'username' => $_POST['username'],
    'password' => $_POST['password'],
  );
  $data[] = $input;
  $data = json_encode($data);
  $data = json_decode($data);
  echo $data[0]->id;
      foreach ($data as $user) {
      $sql="INSERT INTO members (id,username,userpassword) VALUES ($user->id,'$user->username','$user->password')";
      echo $sql;
      $result = $conn->query($sql);   // 查询执行成功
      echo $result;         // 返回1表示成功
  }
  header('location: index.php');
}
?>

2.5 登录功能

界面:

设置两个input文本输入框，一个为username，另一个为password输入用户名密码

设置一个button登录按钮

设置一个超链接实现注册的页面跳转

关键代码

<?php
if(!empty($_POST['username'])){
  $data = array()
  //database details
  $dbHost     = 'localhost';
  $dbUsername = 'root';
  $dbPassword = '';
  $dbName     = 'app';
  //create connection and select DB
  $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
  if($db->connect_error){
      die("Unable to connect database: " . $db->connect_error);
  }
  //get user data from the database
  $query = $db->query("SELECT * FROM members WHERE username = {$_POST['username']} and password = {$_POST['password']}" );
  if($query->num_rows > 0){
      $userData = $query->fetch_assoc();
      $data['status'] = 'ok';
      $data['result'] = $userData;
  }else{
      $data['status'] = 'err';
      $data['result'] = '';
  }
  //returns data as JSON format
  echo json_encode($data);
}
?>

<script src="jquery-3.4.1.js"></script>
    <script>
    $(document).ready(function(){
    $('#getUser').on('click',function(){
        $.ajax({
            type:'POST',
            url:'getData.php',
            dataType: "json",
            data: { // 要传递的数据
                "username": $("#username").val(),
                "password": $("#password").val()
            },
            success:function(data){
                if(data.status == 'ok'){
                    alert("登录成功！");
                    window.location.href="index.php" 
                }else{ alert("用户名或密码错误！");                    
                } }});});
     $("#username").blur(function (){
        $.ajax({
            type:'POST',
            url:'getData.php',
            dataType: "json",
            data: { // 要传递的数据
                "username": $("#username").val()
            },
            success:function(data){
                if(data.status == 'ok'){
                }else{
                    alert("用户名不存在！");
                } }});});});
</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中

关键代码

<?php
  if(isset($_POST['save'])){
    $conn = new mysqli('localhost', 'root', '', 'app');
    $input = array(
      'id' => $_POST['id'],
      'username' => $_POST['username'],
      'password' => $_POST['password'],
    );
    //update the selected index
    $data_array[$index] = $input;
    //encode back to json
    $data = json_encode($data_array);
    $data = json_decode($data); // 解析json
    echo $data[0]->id;
    foreach ($data as $user) {
        $sql="update members set username='$user->username',password='$user->password' where id=$user->id";
        echo $sql;
        $result = $conn->query($sql); //查询执行成功
        echo $result;//返回1表示成功
    }
    header('location: index.php');
  }
?>

2.7 信息删除

功能:

点击删除实现用户的信息删除

思路:通过mysqli连接MySQL数据库，将输入框中的数据保存在PHP的数组array中，利用json_encode和json_decode实现数值转换成json数据存储格式，最后利用SQL语句存入MySQL中

关键代码

<?php
$index = $_GET['index'];
  $conn = new mysqli('localhost', 'root', '', 'app');
$data = array();
$sql = "SELECT * FROM members";
$query = $conn->query($sql);
while($row = $query->fetch_assoc()){
  $data[] = $row;
}
//convert to json
$data = json_encode($data);
$data_array = json_decode($data);
//assign the data to selected index
$row = $data_array[$index];
$data = json_encode($data, JSON_PRETTY_PRINT);
$data = json_decode($data); // 解析json
$sql = "delete from members where id=$row->id";
    $query = $conn->query($sql);
header('location: index.php');
unset($data[$index]);
?>