仿照小米官网项目具体操作与细节

最新推荐文章于 2022-07-19 21:12:15 发布

风高物燥

最新推荐文章于 2022-07-19 21:12:15 发布

阅读量548

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/AshesO/article/details/109256821

版权

本项目已上传github 有需要的可以下载

点这里前往下载

小米官网项目具体操作

1.gulp的搭建

一 , 打开node控制台
- 命令行输入 cd 加文件夹路径进入当前文件夹
- 命令行输入 cnpm init 将当前文件夹初始化
  - 参数不需要改变直接使用默认值即可
- 命令行输入 cnpm install gulp --save -dev 下载gulp
  - 自行下载gulp中需要使用的插件 gulp-sass gulp-minify-css gulp-rename
- 在当前文件夹中创建 gulpfile.js 文件所用对于node的操作代码都在这个文件中编写, 文件名不可以更改
  - 注也可以在命令行中输入 touch gulpfile.js 来创建该文件
- 具体的代码在xiaomi 目录下的gulpfile.js中查看

2.模块化管理系统

将require.js 文件添加到当前文件夹中
- 模块化管理是为了便于后期代码的维护
- 在当前html页面中编写
  - 其中defer 和 async=“true” 的作用是异步引入js文件

   <script src="require.js文件的路径" defer async="true" data-main="你想要作为管理js文件的js文件的路径">

在管理js文件的js文件(我将其称为中转站.js)中编写以下代码

require.config({
    paths: {
       // 导入该文件所需要的js文件  
        "jquery": "jquery-1.11.3", // 这里的.js后缀可以省略
        ....
    },
    shim:{
        // 设置依赖关系 如果引入的js文件有依赖关系需要设置
        "jquery-cookie":["jquery"]
    }
})

// 以下是将导入的js文件中暴露出来的函数进行调用
require(["nav"],function(nav) {
nav.download();
....
})

在各个模块中编写代码时要遵从AMD规范具体如下

   // 所有代码都应该写入在define中  然后将需要暴露的函数用 return 暴露出去 然后再在中转站.js中调用
   define(["jquery"],function($) {
    function download() {
        ...
    }

    return {
        download : download,
        ...
    }

   }

3.各个模块.js文件编写的注意规范

想要在通过异步加载出来的标签中添加事件的话, 不可以之间添加在该标签上, 因为异步加载出来的数据, 在添加事件这个操作之后, 此时是获取不了该标签的. 所以要通过事件委托来添加事件, 将事件委托给原本页面就拥有的标签, 具体是通过jquery中的on方法来添加, 具体代码如下

$("被委托的标签(页面本来就有的标签)").on("事件类型","委托的标签(通过异步加载出来的标签)",function() {
   // 函数操作
})

编写完的函数代码, 一定要记得通过return 暴露出去, 然后在中转站.js 文件中调用生效
用jquery 的 $.ajax 获取到的数据, jquery已经很贴心地将字符串转换为了代码块, 所以不需要再通过 JSON.parse() 转换

4. 编写注册页面

在mysql 数据管理器或者在 http://localhost/phpMyAdmin/ 中新建一个数据库 [注]id属性要设置主键属性和自动递增
php代码

<?php
    header('content-type:text/html;charset="utf-8"');

    // var_dump($_POST);

    // 定义一个统一的返回格式
    $responseData = array("code" => 0,"message" => "");

    // 将通过post提交的数据全部取出
    $username = $_POST['username'];
    $password = $_POST['password'];
    $repassword = $_POST['repassword'];
    $createtime = $_POST['createtime'];

    // 对后台接收到的数据, 进行一个简单的判断
    if (!$username) {
        $responseData["code"] = 1;
        $responseData["message"] = "用户名不能为空";
        // 将数据按照统一的返回格式返回
        echo json_encode($responseData);
        exit;
    }

    if (!$password) {
        $responseData["code"] = 2;
        $responseData["message"] = "密码不能为空";
        echo json_encode($responseData);
        exit;
    }

    if ($repassword != $password) {
        $responseData["code"] = 3;
        $responseData["message"] = "两次密码输入不一致";
        echo json_encode($responseData);
        exit;
    }

    // 链接数据库, 判断用户名是否已经存在
    // PHP7语法  安装PHP5.6的语法
    // 天龙八部第一步 链接数据库 
    $link = mysql_connect("127.0.0.1","root","123456");
    // PHP7 $link = mysqli_connect();

    // 第二步 判断是否链接成功
    if (!$link) {
        $responseData['code'] = 4;
        $responseData['message'] = "服务器忙";
        // 返回到前台页面
        echo json_encode($responseData);
        exit;
    }

    // 第三步 设置字符集
    mysql_set_charset("utf8");

    // 第四步 选择数据库
    mysql_select_db("xiaomi");

    // 5. 准备sql语句进行 验证用户名是否重名 插入操作
    $sql = "select * from users where username='{$username}'";
    
    // 6. 发送sql语句
    $res = mysql_query($sql);

    // 7. 取出一行数据
    $row = mysql_fetch_assoc($res);
    // 如果 $row 的值为null 说明连一条语句都查询不出来 说明没有这个用户名
    if ($row) { // 如果$row 不为空 则说明重名了
        // 用户名重名
        $responseData["code"] = 5;
        $responseData["message"] = "用户名已存在";
        // 将数据按照同意的返回格式返回
        echo json_encode($responseData);
        exit;
    }

    // 能进行到这里 说明用户名可以注册了
    // 将密码md5加密 md5规则可以自己设定 但是后面解密也要用相同的规则
    $str = md5(md5(md5($password)."beijing")."zhonghuo");
    // 准备sql语句 存储用户名 密码 创建时间
    $sql2 = "insert into users(username,password,createtime) values('{$username}','{$str}',{$createtime})";

    // 发送sql语句
    $res2 = mysql_query($sql2);

    if(!$res2) { // 如果$res2 为真则说明注册成功 如果为假则说明注册失败
        $responseData['code'] = 6;
        $responseData['message'] = "注册失败";
        // 返回到前台页面
        echo json_encode($responseData);
    } else {
        $responseData['message'] = "注册成功";
        // 返回到前台页面
        echo json_encode($responseData);
    };
    
    // 8. 关闭数据库
    mysql_close($link);

?>

js代码

define(["jquery"], function ($) {
    function registerSend() {
        $("#register-button").click(function () {
            $.ajax({
                type : "post",
                url : "./php/register.php",
                data : {
                    username : $(".item_account").eq(0).val(),
                    password : $(".item_account").eq(1).val(),
                    repassword : $(".item_account").eq(2).val(),
                    createtime : new Date().getTime()
                },
                success : function (result) {
                    // console.log(result);
                    // 解析数据
                    var obj = JSON.parse(result);
                    if (obj.code) {
                        $(".err_tip").find("em").attr("class","icon_error");
                    } else {
                        $(".err_tip").find("em").attr("class","icon_select icon_true");
                        setTimeout(function() {
                            location.assign("login.html");
                        },1000)
                    }

                    $(".err_tip").show().find("span").html(obj.message);
                },
                error : function (msg) {
                    console.log(msg);
                }
            })
        })
    }

    return {
        registerSend: registerSend
    }
})

5. 编写登陆页面代码

php 代码

<?php
    header('content-type:text/html;charset="utf-8"');

    // var_dump($_POST);

    // 定义一个统一的返回格式
    $responseData = array("code" => 0,"message" => "");

    // 将通过post提交的数据全部取出
    $username = $_POST['username'];
    $password = $_POST['password'];

    // 对后台接收到的数据, 进行一个简单的判断
    if (!$username) {
        $responseData["code"] = 1;
        $responseData["message"] = "用户名不能为空";
        // 将数据按照统一的返回格式返回
        echo json_encode($responseData);
        exit;
    }

    if (!$password) {
        $responseData["code"] = 2;
        $responseData["message"] = "密码不能为空";
        echo json_encode($responseData);
        exit;
    }


    // 链接数据库, 判断用户名是否已经存在
    // PHP7语法  安装PHP5.6的语法
    // 天龙八部第一步 链接数据库 
    $link = mysql_connect("127.0.0.1","root","123456");
    // PHP7 $link = mysqli_connect();

    // 第二步 判断是否链接成功
    if (!$link) {
        $responseData['code'] = 3;
        $responseData['message'] = "服务器忙";
        // 返回到前台页面
        echo json_encode($responseData);
        exit;
    }

    // 第三步 设置字符集
    mysql_set_charset("utf8");

    // 第四步 选择数据库
    mysql_select_db("xiaomi");

    // 5. 准备sql语句进行 验证用户名和密码是否匹配
    $str = md5(md5(md5($password)."beijing")."zhonghuo");
    $sql = "select * from users where username='{$username}' and password='{$str}'";
    
    // 6. 发送sql语句
    $res = mysql_query($sql);

    // 7. 取出一行数据
    $row = mysql_fetch_assoc($res);
    // 如果 $row 如果$row的值不为空则用户名和密码输入正确
    if (!$row) { // 如果$row 不为空 则说明输入正确
        // 用户名重名
        $responseData["code"] = 4;
        $responseData["message"] = "用户名或密码错误";
        // 将数据按照同意的返回格式返回
        echo json_encode($responseData);
        exit;
    } else{
        $responseData["message"] = "登陆成功";
        // 将数据按照同意的返回格式返回
        echo json_encode($responseData);
    }

    
    // 8. 关闭数据库
    mysql_close($link);

?>

js代码

define(["jquery"], function ($) {
    function loginUser() {
        $("#login-button").click(function () {
            $.ajax({
                type : "post",
                url : "./php/login.php",
                data : {
                    username : $(".item_account").eq(0).val(),
                    password : $(".item_account").eq(1).val(),
                },
                success : function (result) {
                    // console.log(result);
                    // 解析数据
                    var obj = JSON.parse(result);
                    if (obj.code) {
                        $(".err_tip").find("em").attr("class","icon_error");
                    } else {
                        $(".err_tip").find("em").attr("class","icon_select icon_true");
                    }

                    $(".err_tip").show().find("span").html(obj.message);
                },
                error : function (msg) {
                    console.log(msg);
                }
            })
        })
    }

    return {
        loginUser: loginUser
    }
})

至此仿照小米官网的项目到此结束

风高物燥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿照小米官网项目具体操作与细节

小米官网项目具体操作1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm init 将当前文件夹初始化参数不需要改变直接使用默认值即可命令行输入 cnpm install gulp --save -dev 下载gulp自行下载gulp中需要使用的插件 gulp-sass gulp-minify-css gulp-rename在当前文件夹中创建 gulpfile.js 文件所用对于node的操作代码都在这
复制链接

扫一扫